clllll  
许愿墙-项目01

学习书籍：《Node.js+Express+Vue.js 项目开发实战》

  • 创建数据库
    表 wish
  • 创建项目
express wish
依赖包 作用
art-template 模板引擎
express-art-template 模板引擎
async 异步处理方法库
mysql2 Mysql数据库支持
sequelize 操作mysql的ORM框架
  • 更改默认端口 bin/www.js
var port = normalizePort(process.env.PORT || '3001');
  • 更改模板引擎 app.js
// app.set('view engine', 'jade');
app.engine('html', require('express-art-template'))
app.set('view engine', 'html');
  • 新增route
    1.首页路由： 用户打开许愿墙首页，后端接收数据处理的路由
    2.提交表单处理路由：用户添加愿望提交
const IndexController = require('../controllers/index')
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', IndexController.getList);
});
  • 新增controller constant

    constant.js 如下
//定义一个对象
const obj = {
    //默认请求成功
    DEFAULT_SUCCESS: {
        code: 10000,
        msg: ''
    },
    // 默认请求失败
    DEFAULT_ERROR: {
        code: 188,
        msg: '出现错误'
    },
    //定义错误返回-缺少必要的参数
    LACK: {
        code: 199,
        msg: '缺少必要的参数'
    }
}
module.exports = obj; //导出对象
  • 新增配置文件 config.js
// 默认dev配置
const config = {
    DEBUG: true,  //是否调试模式
    //mysql 数据库连接配置
    MYSQL: {
        host: 'localhost', //mysql主机地址
        database: 'wish',  //mysql 数据库名
        username: 'root', // mysql的用户名
        password: 'mima', // mysql的密码
    }
};
if (process.env.NODE_ENV === 'production') {
    //生产环境的数据库连接配置
    config.MYSQL = {
        host: 'aaaaaaa',
        database: 'aaa',
        username: 'aaa',
        password: 'bbb'
    }
}
module.exports = config;
  • 新增数据库配置文件 db.js
    便于其他文件引用数据库对象，将数据库对象实例化放在一个单独的文件
var Sequelize = require('sequelize') // 引入sequelize 模块
var CONFIG = require('./config') //引入数据库连接配置

// 实例化数据库对象
var sequelize = new Sequelize(
    CONFIG.MYSQL.database,
    CONFIG.MYSQL.username,
    CONFIG.MYSQL.password, 
    {
        host: CONFIG.MYSQL.host,
        dialect: 'mysql',
        logging: CONFIG.DEBUG ? console.log : false,
        pool: {
            max: 5,
            min: 0,
            idle: 1000
        },
        timezone: '+08:00'
    }
);
module.exports = sequelize //导出 实例化 数据库对象
  • 新增model文件 数据库映射文件
    数据库表的映射 models\wish.js
const Sequelize = require('sequelize'); // 引入Sequelize模块
const db = require('../db'); //引入数据库实例 对象

// 定义model
const Wish = db.define('Wish', {
    id : {type: Sequelize.INTEGER, primaryKey: true, allowNull: false, autoIncrement: true}, // 主键
    name: {type: Sequelize.STRING(20), allowNull: false}, //许愿姓名
    content: {type: Sequelize.STRING, allowNull: false} //许愿内容
}, {
    underscored: true, //是否支持驼峰
    tableName: 'wish', // mysql数据库表名 
});
module.exports = Wish; //导出model
  • 渲染许愿列表 index.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>许愿墙</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <h2 class="title" style="">快来写上你的愿望</h2>
    
    <!--JS动态填入熟人局， data-list 传入到页面 -->
    <div id="container" data-list="{{list}}"></div>

    <!-- 添加许愿表单-->
    <form action="add" method="post" id="form" style="height: 136px;">
        <!--许愿者 姓名-->
        <input type="text" class="input" id="name" name="name" placeholder="说出你的大名">

        <!-- 许愿 内容 -->
        <input type="text" id="content" class="input" placeholder="许个愿吧" name="content" > 

        <!-- 提交 按钮 -->
        <button class="submit" type="submit">提交</button>

    </form>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/index.js"></script>
</body>
</html>

public/js/index.js

(function ($) {
  var container; // data-list div id
  // 颜色
  var colors = ['#207de0', '#42baec', '#e3e197', '#6cde47', '#ecc733'];
  //创建许愿便笺
  var createItem = function (name, content) {
    var color = colors[parseInt (Math.random () * 5)];
    $ ('<div class="item"><p>' + name + '：</p><p>' + content + '</p><a href="#">关闭</a></div>').css ({'background': color}).appendTo (container).drag ();
  };

  var list = container.attr('data-list'); //获取 container的属性 data-list

  //循环遍历list,创建便 
  $.each(JSON.parse(list), function(i, v){
    createItem(v.name, v.content)
  })

}) (jQuery);

将 data-list渲染到页面上
controllers/index.js

const Common = require('./common'); //引入共用方法
const async = require('async'); // 引入async 
const WishModel = require('../models/wish'); //引入wish表的model
const Constant = require('../constant/constant'); //引入常量constant

//配置导出对象
let exportObj = {
    getList,
    add
};

module.exports = exportObj; //导出对象，供路由文件调用

//获取许愿列表的方法
function getList(req, res){
    //获取许愿列表的逻辑
    //定义一个async任务
    let tasks = {
        //执行查询方法
        query: cb => {
            // 使用Sequlize的model 的findAll方法查询
            WishModel.findAll({
                limit: 10,
                order: [['create_at', 'DESC']],
            }).then(function(result) {
                //查询结果处理
                let list = [];  //定义一个空数据list,用来存放最终结果

                //遍历SQL查询出来的结果，
                result.forEach( (v, i) => {
                    let obj = {
                        id: v.id,
                        name: v.name,
                        content: v.content
                    };
                    list.push(obj);
                });

                cb(null, list); // 通过async 提供的回调， 返回数据到下一个async方法
            }).catch(function(err){
                //错误处理
                console.log(err); //打印错误日志

                // 通过async提供的回调，返回数据到下一个asynce方法
                cb(Constant.DEFAULT_ERROR)
            });
        }
    };
    //async自动控制流程
    async.auto(tasks, function(err, result) {
        if(err){
            console.log(err); //如果存在错误，
        }else{
            // 渲染index页面模板
            res.render('index', {list: result['query']});
        }
    });
}



// 添加许愿方法
function add(req, res){
    //添加许愿逻辑
    //定义一个async任务
    let tasks = {
        //验证必填参数
        checkParams: cb => {
            Common.checkParams(req.body, ['name', 'content'], cb)
        },
        //执行添加方法
        add:['checkParams', (results, cb) => {
            //使用Sequlize的model 的 create方法插入
            WishModel.create({
                name: req.body.name,
                content: req.body.content
            }).then(function(result) {
                cb(null); //插入结果成功处理
            }).catch(function(err) {
                //错误处理
                console.log(err); 
                cb(Constant.DEFAULT_ERROR)
            });
        }]
        
    };

    //让 async自动控制流程
    async.auto(tasks, function(err, result) {
        if(err){
            //错误处理
            console.log(err);
            let result = '失败';
            let msg = '添加失败，出现错误';

            if(err.code === 199) {
                // 199代表 参数 缺少错误
                msg = '添加失败， 姓名 和愿望都要添加'
            }
            // 渲染失败的 页面 
            res.render('result', {
                result: result,
                msg: msg
            });
        }else{
            //渲染成功的 页面 
            res.render('result', {
                result: '成功',
                msg: '添加成功，返回去看看'
            });
        }
    })
};
posted on 2022-04-04 10:23  llcl  阅读(169)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3