随笔分类

算法(5)

随笔档案

阅读排行榜

推荐排行榜

1. 【一月一本技术书】-【Go语言设计与实现】- 9月(1)

许愿墙-项目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: '添加成功，返回去看看'
            });
        }
    })
};