前言

用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");});//中间数据管理
(() => {//处理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);})

启动

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

其他参考文章

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

项目案例参考

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

vue+node.js+mysql项目搭建相关推荐

node.js express项目搭建
目录 1.安装Express 2.第一个 Express 框架实例 3.全局安装Express及express-generator 4.初始化一个Express应用 5.启动应用 Express 是一 ...
vue+node.js+mysql的数据库课程设计有感
我编码了"双碳"背景下的ESG评级体系设计平台的数据库连接部分.平台缘起于我今年寒假参与的花旗杯比赛,但由于时间匆忙,进度较缓慢等原因,网站平台仅仅做了页面框架,并没有实现前端与后 ...
React + Node.js + Mysql项目部署到阿里云轻量级应用服务器
一.安装Mysql,可外网访问 1. 更新系统 [在root用户下] apt-get update 2.安装Mysql-server apt-get install mysql-server apt- ...
个人服务器搭建(轻便型) vue.js + node.js + mysql + centOs7
个人服务器搭建(轻便型) vue.js + node.js + mysql + centOs7 此笔记有望帮助到他人也自己可回顾学习(如有误望指正) 完成以下四点即可开启web服务一.创建 vue. ...
【前端Vue+后端Node.js+MySql】部署到服务器
[前端Vue+后端Node.js+MySql]部署到服务器文章目录 [前端Vue+后端Node.js+MySql]部署到服务器 1.买服务器 2.服务器操作 2.1.修改服务器密码,xshell登录 ...
Vue.js+Node.js+MySQL的前后端+数据库系统结构
前言: 大三暑假回国实习, 经过了1个月时间的培训学习, 本人渐渐熟悉了实习的工作环境和节奏. 由于我所在的前端APP研发部门使用的是Vue.js框架, 因此我在被分配**[公司官方网站的重制]**任 ...
node mysql商城开发_ＮideShop：基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
阿里云部署一个vue+axios+nodejs+mysql项目(使用宝塔面板配置)
使用阿里云部署vue+axios+node.js+mysql的项目(借助宝塔面板完成部署) 1. 购买阿里云购买阿里云的步骤我就不过多解释,告诉一下大家我选择的配置简单说一下,企业中使用最多的都是 ...

vue+node.js+mysql项目搭建

前言

可行性分析

知识储备

项目搭建

关于改造

启动

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

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

vue+node.js+mysql项目搭建相关推荐

最新文章

热门文章