失眠网 > vue+node.js+mysql项目搭建

vue+node.js+mysql项目搭建

时间：2020-04-20 02:42:56

前言

用vue搭建前端页面、用node开发后端接口、数据库用mysql

可行性分析

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

知识储备

Node.js：是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎。简单的说 Node.js就是运行在服务端的 JavaScript。express：是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。

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

body-parser：node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。cookie-parser：这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。cookie-session：session管理工具，可设置会话内容multer：node.js 中间件，用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

项目搭建

该部分直接参考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 -snpm i express -snpm i body-parser -snpm i cookie-parser -snpm i cookie-session -s

定义一个JS，负责与express框架交互服务的具体内容，主要包括：MySQL连接配置，服务接口配置（接口路径映射 + 调用与返回处理等）

// 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;}

定义一个JS，负责Nodejs服务启动配置，主要包括：跨域配置、监听端口配置、接口路由配置（即引入上一步的服务JS处理）、Cookie等

//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");});//中间数据管理(() => {//处理cookieserver.use(cookieParser());//处理sessionlet keyArr = ['1','2'];server.use(cookieSession({name: "hc",keys: keyArr,maxAge: 30 * 60 * 1000}))})();//配置路由处理server.use('/' + NODEJS_SERVE_PREFIX, require('./route/nodeServe.js')());

在VUE页面上使用

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