前言

一般写博文，都是将参考文章写在最后面，我放在最前面，是因为我真的是第一次用vue.js，主要参考了https://github.com/chaohangz/vueBlog ，这篇博客我没将源码给出来，想要看源码并运行源码的，直接下载上面人家github的。我部署在阿里云的博客，想看效果的请点击这里。相较于他的博客，我主要做了以下一些优化：
1. 将mongodb替换成了mysql(这个也不算优化，只是msyql感觉更亲民);
2. 优化了接口调用方式；
3. 优化了后台与数据库交互的方式。

这篇博文我主要记录优化这几个点以及部署到阿里云上遇到的一些坑。由于我项目现在已经部署到阿里云上了，如果想要我部署到阿里云的博客系统完整源码的，请联系我。

操作mysql数据库

我定义的一个文件func.js，代码如下：

let mysql = require('mysql');
let db = require('./db');
let pool = mysql.createPool(db);

module.exports = {
    connPool(sql) {
        console.log(sql)
        return new Promise((resolve, reject) => {
            pool.getConnection((err, conn) => {
                conn.query(sql, (err, rows) => {
                    if (err) {
                        console.log(err);
                        reject(err)
                    }
                    conn.release();
                    resolve(rows)
                });
            });
        })
    },
};

遇到的坑

最开始我也是拷贝网上代码操作数据库的，但是查询数据时，返回的数据库数据总是空的。搞了好久，才知道，需要用Promise（resolve, reject）异步方式请求数据库获取数据。

请求接口

这里我演示一个注册接口：

// 注册接口
router.post(api.signup, function(req, res) {
    let name = req.body.name;
    let password = req.body.password;
    let query1 = `select name from user where name = '${name}'`;
    let query2 = `insert into user (name, password) VALUES('${name}', '${password}')`;
    let _res = res;
    func.connPool(query1).then((res) => {
        if (res.length != 0) {
            _res.json({ code: '002', msg: 'user is exist' })
            return
        }
        func.connPool(query2).then((res) => {
            _res.json({ code: '000', msg: 'success' })
        }).catch((err) => {
            console.error(err)
            _res.json({ code: '002', msg: 'sql fail' })
        })
    }).catch((err) => {
        console.error(err)
        _res.json({ code: '002', msg: 'sql fail' })
    })
})

优化的点

按之前人家的博客，传了几个参数到func.js，而现在，只需要传query这个查询语句就好了，然后返回err和res，清晰明了。

设置端口和IP

执行命令行

npm run dev

实际上执行的是package.json中scripts下的dev语句:

"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8090",

设置端口：

--port 8090

设置IP，注意了，在阿里云上，设置ip时，请用0.0.0.0。

--host 0.0.0.0

阿里云设置安全组

这里比较坑爹，我之前在阿里云上用python的django web框架部署过项目，也知道如何设置安全组，我就将前端服务端口8090设置进了安全组，却忘了将后端端口3000设置进去，这里也蛋疼了好久，特意记下来。

Invalid Host Header

我之前是买了域名的，在浏览器中输入http://47.75.38.29:8090是可以访问的，但是http://luoxiaohui.cn:8090却提示Invalid Host Header，是需要在webpack.config.js下的devServer中设置一个属性:

disableHostCheck: true,