vue2+nodejs+express+mysql+pm2搭建全棧專案
前言：
由於是自己嘗試搭建的一個簡單的nodejs+vue全棧專案，適用於初探nodejs後端領域的前端er。
注：mysql版本為5.7，最新版本的mysql 8.0+會與此專案有衝突。解決辦法可看
正文：
一、安裝nodejs
這個步驟請自行搜多百度經驗，進行安裝，當下nodejs已經無需配置環境變數，所以請大家下載下來直接開包即用即可。
二、初始化前端專案
1、安裝vue
npm install vue-cli -g //這個是將vue腳手架進行全域性安裝。
npm install @vue/cli -g //vue-cli3腳手架，安裝此腳手架會更改建立專案命令，也可通過橋接npm包來保持vue2的命令
2、初始化vue專案（進入自己本地的資料夾）
vue-cli2: vue init webpack '專案名(任意)' //等待npm包初始化後，進行下一步
vue-cli3: vue create 'projectName' //可自定義或者使用預設配置 具體參考
npm install pm2 -g //使用pm2命令，進行負載均衡及程序守護
3、安裝express、mysql
npm install express
npm install mysql
4、專案結構
5、搭建nodejs伺服器
資料庫連線池部分：
/** * Created by renka on 2018/8/10. */ const mysql = require("mysql"); //連線上資料庫(連線池) const pool = mysql.createPool({ host : 'localhost', user : 'root', password : '123456', database:'test' }); /*封裝資料庫操作方法query--用於增刪改查*/ const query=function(sql,sqlParams,callback){ pool.getConnection(function(err,conn){ if(err){ callback(err,null,null); }else{ conn.query(sql,sqlParams,function(qerr,vals,fields){ //釋放連線 conn.release(); //事件驅動回撥 callback(qerr,vals,fields); }); } }); }; /*模組輸出*/ module.exports=query;
服務程式碼：
const express = require("express");
//定義路由級中介軟體
const router = express.Router();
//引入資料庫連線池，防止資料庫超過最大連線數
const query=require("./db/db");
/*
* 增刪改查服務路由
* */
/*新增*/
router.use('/test/add', function (req, res) {
let sql ="INSERT INTO user_info (name,country,date,score) VALUES(?,?,?,?);";
let sqlParams = [
req.body.name,
req.body.country,
req.body.date,
req.body.score
];
query(sql,sqlParams,function (err,result) {
if(err){
res.json({
ok:false,
message:'建立失敗！'
})
}else{
res.json({
ok:true,
id:result.insertId,
message:'建立成功！'
})
}
res.end();
})
});
/*刪除*/
router.use('/test/delete', function (req, res) {
let delSql = 'DELETE FROM user_info where id='+req.body.id;
query(delSql,null, function(err, rows, fields) {
if(err){
res.json({
ok:false,
message:'刪除失敗！',
error:err
})
}else{
res.json({
ok:true,
message:'刪除成功！'
})
}
res.end();
})
});
/*編輯*/
router.use('/test/edit', function (req, res) {
let editSql = 'UPDATE user_info SET name=?,country=?,date=?,score=? WHERE id ='+req.body.id;
let editSqlParams = [
req.body.name,
req.body.country,
req.body.date,
req.body.score
];
query(editSql,editSqlParams,function (err,result) {
if(err){
res.json({
ok:false,
message:'修改失敗！'
})
}else{
res.json({
ok:true,
message:'修改成功！'
})
}
res.end();
})
});
/*查詢*/
router.use('/test/query', function (req, res) {
let pageNumber = req.body.pageNumber;
let pageSize = req.body.pageSize;
let start = (pageNumber-1)*pageSize;
let end = pageNumber*pageSize;
let sql = "SELECT * FROM user_info ORDER BY score DESC LIMIT "+start+","+end;
let countSql = "SELECT COUNT(id) FROM user_info";
const promise = new Promise(function(resolve, reject) {
query(countSql,null,function (err, rows, fields) {
resolve(rows);
})
}).then((count)=>{
query(sql, function(err, rows, fields) {
if(err){
res.json({
ok:false,
message:'查詢失敗！',
info:null
})
}else{
res.json({
ok:true,
message:'查詢成功！',
info:rows,
total:count[0]["COUNT(id)"]
})
}
res.end();
});
})
});
/*將路由模組輸出*/
module.exports = router;
6、前端nodejs伺服器
7、本地除錯
pm2 start app.js //啟動本地後端伺服器
npm run dev //啟動本地除錯伺服器
pm2 start webServer.js //打包後，啟動nodejs前端靜態資源伺服器(像nginx一樣將dist資料夾作為靜態資源使用)
pm2 list //檢視當前執行的程序
pm2 stop all //停止所有程序執行
8、部署上線（1臺web伺服器，1臺nodejs伺服器）
（1）Linux系統先安裝nodejs，並配置全域性變數，本地的虛擬機器linux需要解開防火牆，否則無法進行測試
（2）將相關node_modules模組壓縮，然後解壓至Nodejs伺服器上，使用ftp上傳壓縮包，然後用linux命令進行解壓
（3）將相關node_modules模組壓縮，然後解壓至web伺服器上，再上傳dist資料夾至web伺服器上，放到node_modules資料夾的同級目錄下。
（4）使用SecureCRT或者xShell分別連線你的伺服器，進入專案目錄，
執行pm2 start app.js（你的後端伺服器檔案） //啟動nodejs服務
執行pm2 start webServer.js(你的前端伺服器檔案) //啟動web伺服器
9、nginx對比nodejs
nginx：
Nginx支援靜態資源的熱部署，無需重啟伺服器即可完成部署。
nodejs：
pm2 start app.js –watch //根據程式碼變動自動重啟伺服器
10、總結
由於是第一次寫這類文章，記錄下自己對nodejs的探索之路，並針對探索之路，不斷更新該文章，還請大家多多支援!