vue2+nodejs+express+mysql+pm2搭建全栈项目

时间:2024-11-16 20:24:01

前言:

    本项目github地址:/kaiqiangren/VueExpress

    由于是自己尝试搭建的一个简单的nodejs+vue全栈项目,适用于初探nodejs后端领域的前端er。

    本文的mysql部分需要参考另一篇文章:  Express+Vue+mysql实践

    进程守护及负载均衡相关可查看:/qq_24182885/article/details/81975438

    注:mysql版本为5.7,最新版本的mysql 8.0+会与此项目有冲突。解决办法可看 

    MAC的mysql下载链接:/s/1r_gAPAXs9GpJ5g2DrAGg7A  密码:qlnh

    /lr123838/article/details/80505529

    /DA_learner/article/details/80202190

正文:

    一、安装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'   //可自定义或者使用默认配置 具体参考vue-cli3搭建项目

        npm install pm2 -g     //使用pm2命令,进行负载均衡及进程守护

        3、安装express、mysql

          npm install express

          npm install mysql

        4、项目结构

            

        5、搭建nodejs服务器

数据库连接池部分:

  1. /**
  2. * Created by renka on 2018/8/10.
  3. */
  4. const mysql = require("mysql");
  5. //连接上数据库(连接池)
  6. const pool = mysql.createPool({
  7. host : 'localhost',
  8. user : 'root',
  9. password : '123456',
  10. database:'test'
  11. });
  12. /*封装数据库操作方法query--用于增删改查*/
  13. const query=function(sql,sqlParams,callback){
  14. pool.getConnection(function(err,conn){
  15. if(err){
  16. callback(err,null,null);
  17. }else{
  18. conn.query(sql,sqlParams,function(qerr,vals,fields){
  19. //释放连接
  20. conn.release();
  21. //事件驱动回调
  22. callback(qerr,vals,fields);
  23. });
  24. }
  25. });
  26. };
  27. /*模块输出*/
  28. module.exports=query;

服务代码:

附上数据库表结构:

本地数据库名称 test1    

表名称   user_info

表内部字段如下:

  1. const express = require("express");
  2. //定义路由级中间件
  3. const router = express.Router();
  4. //引入数据库连接池,防止数据库超过最大连接数
  5. const query=require("./db/db");
  6. /*
  7. * 增删改查服务路由
  8. * */
  9. /*新增*/
  10. router.use('/test/add', function (req, res) {
  11. let sql ="INSERT INTO user_info (name,country,date,score) VALUES(?,?,?,?);";
  12. let sqlParams = [
  13. req.body.name,
  14. req.body.country,
  15. req.body.date,
  16. req.body.score
  17. ];
  18. query(sql,sqlParams,function (err,result) {
  19. if(err){
  20. res.json({
  21. ok:false,
  22. message:'创建失败!'
  23. })
  24. }else{
  25. res.json({
  26. ok:true,
  27. id:result.insertId,
  28. message:'创建成功!'
  29. })
  30. }
  31. res.end();
  32. })
  33. });
  34. /*删除*/
  35. router.use('/test/delete', function (req, res) {
  36. let delSql = 'DELETE FROM user_info where id='+req.body.id;
  37. query(delSql,null, function(err, rows, fields) {
  38. if(err){
  39. res.json({
  40. ok:false,
  41. message:'删除失败!',
  42. error:err
  43. })
  44. }else{
  45. res.json({
  46. ok:true,
  47. message:'删除成功!'
  48. })
  49. }
  50. res.end();
  51. })
  52. });
  53. /*编辑*/
  54. router.use('/test/edit', function (req, res) {
  55. let editSql = 'UPDATE user_info SET name=?,country=?,date=?,score=? WHERE id ='+req.body.id;
  56. let editSqlParams = [
  57. req.body.name,
  58. req.body.country,
  59. req.body.date,
  60. req.body.score
  61. ];
  62. query(editSql,editSqlParams,function (err,result) {
  63. if(err){
  64. res.json({
  65. ok:false,
  66. message:'修改失败!'
  67. })
  68. }else{
  69. res.json({
  70. ok:true,
  71. message:'修改成功!'
  72. })
  73. }
  74. res.end();
  75. })
  76. });
  77. /*查询*/
  78. router.use('/test/query', function (req, res) {
  79. let pageNumber = req.body.pageNumber;
  80. let pageSize = req.body.pageSize;
  81. let start = (pageNumber-1)*pageSize;
  82. let end = pageNumber*pageSize;
  83. let sql = "SELECT * FROM user_info ORDER BY score DESC LIMIT "+start+","+end;
  84. let countSql = "SELECT COUNT(id) FROM user_info";
  85. const promise = new Promise(function(resolve, reject) {
  86. query(countSql,null,function (err, rows, fields) {
  87. resolve(rows);
  88. })
  89. }).then((count)=>{
  90. query(sql, function(err, rows, fields) {
  91. if(err){
  92. res.json({
  93. ok:false,
  94. message:'查询失败!',
  95. info:null
  96. })
  97. }else{
  98. res.json({
  99. ok:true,
  100. message:'查询成功!',
  101. info:rows,
  102. total:count[0]["COUNT(id)"]
  103. })
  104. }
  105. res.end();
  106. });
  107. })
  108. });
  109. /*将路由模块输出*/
  110. module.exports = router;

    6、前端nodejs服务器

 

    7、本地调试

        pm2 start -i max   //启动本地后端服务器(多集群模式)

        npm run dev  //启动本地前端项目

        pm2 start   //打包后,启动nodejs前端静态资源服务器(像nginx一样将dist文件夹作为静态资源使用)

        pm2 list  //查看当前运行的进程

        pm2 stop all //停止所有进程运行

        pm2 stop <App name> //单独停止1个进程

        pm2 delete all  //删除pm2 list中缓存的所有项目 

        pm2 delete <id> //根据id删除pm2 list中缓存的单独项目

   

8、部署上线(1台web服务器,1台nodejs服务器)

Nginx配置可以参考 : /qq_29480353/article/details/80048391

        (1)Linux系统先安装nodejs,并配置全局变量,本地的虚拟机linux需要解开防火墙,否则无法进行测试

        (2)将相关node_modules模块压缩,然后解压至Nodejs服务器上,使用ftp上传压缩包,然后用linux命令进行解压

      (3)将相关node_modules模块压缩,然后解压至web服务器上,再上传dist文件夹至web服务器上,放到node_modules文件夹的同级目录下。

        (4)使用SecureCRT或者xShell分别连接你的服务器,进入项目目录,

                执行pm2 start -i max(pm2启动配置文件)  //启动nodejs服务

                执行pm2 start (你的前端服务器文件) //启动web服务器

    9、总结

        由于是第一次写这类文章,记录下自己对nodejs的探索之路,并针对探索之路,不断更新该文章,还请大家多多支持!