前言

用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 -s npm i express -s npm i body-parser -s npm i cookie-parser -s npm 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"); }); //中间数据管理 (() => { //处理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)()); 在VUE页面上使用 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

其他参考文章

vue+node.js+mysql项目搭建初体验（接口）

项目案例参考

基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城