#私藏项目实操分享# nodejs后端+vue+mysql搭建一个管理系统

NodeJs后端+Vue+MySQL搭建一个管理系统

写在前面，之前一直换着法用Java写后端，不论是SpringBoot还是MVC还是啥，就离不开那一套，忽然发现现在学校又让用node写后端的，学习一下！

一、首先整一套Vue现成的开源脚手架程序并启动，作为前端架子

我这边用的是​​vue-manage-system​​，非常好用这边肥肠感谢！根据项目里面的Readme启动起来项目。步骤如下。

git clone https://github.com/lin-xin/vue-manage-system.git

cd vue-manage-system
npm install
npm install express
npm install mysql
npm run dev

• 注意如果install出现错误像下面这个图，那就删掉 ​​package-lock.json ​​这个文件   

二、就以这个登录接口为例，测试交互

1. src下新建server包

​ ​

2. 新建 ​​mysqldb.js​​ 数据库连接工具类

// 数据库连接配置
module.exports = {
    mysql: {
        host: '127.0.0.1',
        user: 'root',
        password: '123456',
        database: 'nodejsserver',
        port: '3306'
    }
}

3. 新建 ​​api.js​​ 接口类

var models = require('./mysqldb'); //数据库链接信息
var express = require('express');
var router = express.Router();
var mysql = require('mysql');

// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();

// 测试接口
router.post('/test', (req, res) => {
    var params = req.body;
    console.log(params)
    res.send("返回回来了！");
});

// 登录用户接口
router.post('/login', (req, res) => {
    var sql = $sql.user.login;
    var params = req.body;
    var loginflag=false;
    console.log("sql", sql);
    console.log("params", params);
    conn.query(sql, [params.username], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            if(result.length===0){
                console.log("查询结果空！");
                res.send(ResultVo.FAIL("登陆失败"));
            }else{
                for (var i = 0; i < result.length; i++) {
                    console.log("请求成功：", result[i])
                    if (result[i].password == params.password) {
                        loginflag = true;
                        res.send(ResultVo.SUCCESS("登陆成功"));
                        break;
                    }
                }if(!loginflag){
                    res.send(ResultVo.FAIL("账号或密码错误！"));
                }
            }
        }else {
            console.log("查询失败！");
            res.send(ResultVo.FAIL("登陆失败"));
        }
    })
});

module.exports = router;

4. 新建 ​​server.js​​ 后端主类

// node 后端服务器
const userApi = require('./api');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 服务开启后访问指定编译好的dist文件下的数据
app.use(express.static(path.resolve(__dirname, '../dist')))
app.get('*', function(req, res) {
        const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
        res.send(html)
    })
    // 后端api路由
app.use('/api', userApi);
// 监听端口
app.listen(8088);
console.log('后端项目启动，监听端口8088......');

至此一个简易的后端已经搭建完成了，这个前后端分离也是前后端分开启动的

4. 后端启动

cd src
cd server
node server.js

5. vue.config.js开放跨域

productionSourceMap: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8088/api/',
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }

6. 登陆login.vue发送请求

this.$axios.post('/api/login',this.param).then(res => {
    if(res.data.code===0){
        this.$message.success('登录成功');
        localStorage.setItem('ms_username', this.param.username);
        this.$router.push('/');
    }else {
        this.$message.error(res.data.msg);
    }
})