前言
- 用vue定制软件搭建前端页面、定制软件用开发后端接口、数据库用mysql
定制软件可行性分析
- 缺点:
- nodejs单线程,不能做cpu定制软件密集型操作,定制软件导致时间片不能释放,定制软件阻塞后面的任务。
- nodejs定制软件可靠性比较低,定制软件一个地方报错会导致整定制软件个程序崩溃,定制软件需要守护进程或者docker定制软件重启来解决。
- 定制软件像使用多核性能的时候需要使用cluster或者部署多个实例,比较麻烦。
- 内存默认0.7G和1.4G,设置大了之后垃圾回收会变慢,可能需要多部署几个实例。
- 优点:
- nodejs底层异步io,性能比较好。
- 编写起来不用担心线程的问题。
- 开发速度高,弱类型语言比较灵活,不像强类型一样需要各种转换,代码量少。
- 单页应用ssr比较方便,上下文比较相同。
- 关于nodejs服务安全性上的一些考量
知识储备
- :是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎。简单的说 Node.js 就是运行在服务端的 JavaScript。
- :是一个简洁而灵活的 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.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
其他参考文章
项目案例参考