vue+node.js+mysql项目搭建

发布时间：2023-04-25 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

前言

可行性分析

  1. nodejs单线程，不能做cpu密集型操作，导致时间片不能释放，阻塞后面的任务。
  2. nodejs可靠性比较低，一个地方报错会导致整个程序崩溃，需要守护进程或者docker重启来解决。
  3. 像使用多核性能的时候需要使用cluster或者部署多个实例，比较麻烦。
  4. 内存默认0.7G和1.4G，设置大了之后垃圾回收会变慢，可能需要多部署几个实例。
  1. nodejs底层异步io，性能比较好。
  2. 编写起来不用担心线程的问题。
  3. 开发速度高，弱类型语言比较灵活，不像强类型一样需要各种转换，代码量少。
  4. 单页应用ssr比较方便，上下文比较相同。
  1. 如何做好nodejs服务在服务器上的安全防护？

知识储备

    以下是几个需要与 express 框架一起安装的常用模块：

项目搭建

    该部分直接参考 vue+node前后端分离接口调用（初学者）

关于改造

常规Vue项目改造建议：

//vue.config.js
//定义常量
const NODEJS_SERVE_PREFIX = "/nserve" //Nodejs服务路径前缀标识
module.exports = {
    // 关闭检查
    lintOnSave: false,
    // 免提取CSS 文件，强制内联
    css: { extract: false },
    // // 在exports中添加，这里很关键，不配置不行
    transpileDependencies: ['element-ui'],
    chainWebpack(config) {
        // 在chainWebpack中添加下面的代码
        config.entry('main').add('babel-polyfill') // main是入口js文件
    },
//》》》开发阶段跨域配置看这里
    devServer: {
        overlay: { // 让浏览器 overlay 同时显示警告和错误
            warnings: true,
            errors: true
        },
        host: "localhost", //默认请求-主机地址
        port: 8888, // 默认请求-端口号
        https: false, // https:{type:Boolean}
        open: false, //配置自动启动浏览器
        hotOnly: true, // 热更新
        // proxy: 'http://localhost:3333'   // 配置跨域处理,只有一个代理
        proxy: { //配置多个跨域
            NODEJS_SERVE_PREFIX: {
                target: "http://localhost:3333",//你的NodeJS服务监听端口
                changeOrigin: true,
                // ws: true,//websocket支持
                secure: false,
                pathRewrite: {
                    '^/nserve': '/nserve' //此处不写也可以，看你实际情况
                }
            }
        }
    }
}

一点提示：如上，跨域配置一般指开发阶段（即本地）的跨域，线上则是通过Node.js等进行配置

npm i mysql -s
npm i express -s
npm i body-parser -s
npm i cookie-parser -s
npm i cookie-session -s
// nodeServe.js
//引入服务包
const express = require('express');
const mysql = require('mysql');
//配置MySQL连接池
const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'mydb'
});
//默认导出：定义接口
module.exports = () => {
    //接口路由
    const route = express.Router();
    /**
     * 用户接口（GET请求）
     */
    route.get('/user/query', (req, res) => {
        //解析请求参数
        let uid = req.query.uid;
        //定义SQL语句
        const sql = `SELECT * FROM user WHERE uid=` + uid;
        doDbQuery(sql,res)
    });
    /**
     * 用户接口（POST请求）
     */
    route.post('/user/save', (req, res) => {
        let mObj = {};
        for (let obj in req.body) {
            mObj = JSON.parse(obj);
        }
        let name = mObj.name;
        let age = mObj.age;
        const sql = `INSERT INTO user(name,age) VALUES('${name}','${age}')`;
        doDbQuery(sql, res);
    });
    /**
     * 执行SQL
     * @param insUserInfo
     * @param res
     */
    function doDbQuery(sql, res) {
        db.query(sql, (err, data) => {
            if (err) {
                //失败返回
                console.log(err);
                res.status(500).send({ 'msg': '服务器出错', 'status': 0 }).end();
            } else {
                //成功返回
                res.send(data);
            }
        });
    };
    return route;
}

//nodeApplication.js
//定义常量
const NODEJS_SERVE_PREFIX = "nserve" //Nodejs服务路径前缀标识
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cookieSession = require('cookie-session');
const server = express();
server.use(bodyParser.urlencoded({ extended: false }));
//配置跨域
server.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', req.header("origin"));//如果设置为"*",有时候还是会出现跨域问题（说一个神奇的事，甚至出现同一个项目，在不同时间点出现了不同的结果，我也不知道为啥，明明啥也没干）
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method === 'OPTIONS') {
        res.send(200);
        /make the require of options turn back quickly/
    } else {
        next();
    }
});
//配置NodeJS服务端口
server.listen(3333, () => {
    console.log("NodeJS服务已启动  监听端口：3333");
});
//中间数据管理
(() => {
    //处理cookie
    server.use(cookieParser());
    //处理session
    let keyArr = ['1','2'];
    server.use(cookieSession({
        name: "hc",
        keys: keyArr,
        maxAge: 30 * 60 * 1000
    }))
})();
//配置路由处理
server.use('/' + NODEJS_SERVE_PREFIX, require('./route/nodeServe.js')());

let _this = this
_this.$http.get('/nserve/user/query').then((res)=>{
					_this.result= res.data;
				},(err)=>{
					console.log(err);
				})

启动

//启动NodeJS服务
node node nodeApplication.js
//启动前端
npm run serve

其他参考文章

项目案例参考

标签 , ,