Nodejs加Vue.js的简单增删改查

叁歲伎倆 2022-04-22 07:44 395阅读 0赞

用的node做的后台,数据库为mysql,数据交互和页面渲染用的vue,项目目录图:

20181103142936679.png

话不多说,首先来看node项目的配置文件app.js,注释我会写在代码里

  1. //引用模块
  2. var express = require('express');
  3. var path = require('path');
  4. var favicon = require('serve-favicon');
  5. var logger = require('morgan');
  6. var cookieParser = require('cookie-parser');
  7. var bodyParser = require('body-parser');
  8. var index = require('./routes/index');
  9. var persons = require('./routes/person');
  10. var app = express();
  12. // view engine setup
  13. // app.set('views', path.join(__dirname, 'views'));
  14. // app.set('view engine', 'ejs');
  16. //修改后的
  17. app.set('views', path.join(__dirname, './views'));
  18. app.engine('.html', require('ejs').__express);
  19. app.set('view engine', 'html');
  22. app.use(logger('dev'));
  23. app.use(express.json());
  24. app.use(express.urlencoded({extended: false}));
  25. app.use(cookieParser());
  27. //全局访问
  28. app.all('*', function (req, res, next) {
  29.     res.header('Access-Control-Allow-Origin', '*');
  30.     res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  31.     res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
  32.     if (req.method == 'OPTIONS') {
  33.         res.send(200);
  34.     }
  35.     else {
  36.         next();
  37.     }
  38. });
  39. //引入public文件夹,让页面能获取到public文件夹内的文件
  40. app.use(express.static(path.join(__dirname, 'public')));
  42. app.use('/', index);
  43. app.use('/persons', persons);
  45. app.use(express.static(__dirname));
  47. // app.use(express.static(__dirname + '../public'));
  49. // catch 404 and forward to error handler
  50. app.use(function (req, res, next) {
  51.     next(createError(404));
  52. });
  54. // error handler
  55. app.use(function (err, req, res, next) {
  56.     // set locals, only providing error in development
  57.     res.locals.message = err.message;
  58.     res.locals.error = req.app.get('env') === 'development' ? err : {};
  60.     // render the error page
  61.     res.status(err.status || 500);
  62.     res.render('error');
  63. });
  67. module.exports = app;

然后是连接数据库的js和路由配置

  1. //db.js
  2. // 连接MySQL
  3. var mysql = require('mysql');
  4. var pool = mysql.createPool({
  5.     host: 'localhost',//本机
  6.     user: 'root',//数据库帐号
  7.     password: 'root',//密码
  8.     database: 'test'//数据库
  9. });
  11. function query(sql, callback) {//执行sql
  12.     pool.getConnection(function (err, connection) {//err为错误信息 connection为连接数据库
  13.         // Use the connection
  14.         connection.query(sql, function (err, rows) {//rows为执行完sql的返回的信息
  15.             callback(err, rows);//回调
  16.             connection.release();//释放链接
  17.         });
  18.     });
  19. }
  20. exports.query = query;

路由,可部分可以理解为页面访问的链接配置,全程用的ajax访问数据

  1. var express = require('express');
  2. var router = express.Router();
  3. //引入数据库包
  4. var db = require("./db.js");
  6. /* GET  listing. */
  7. // router.get('/', function(req, res, next) {
  8. //   res.send('respond with a resource');
  9. // });
  11. /**
  12.  * 查询列表页,直接访问
  13.  */
  14. router.get('/', function (req, res, next) {
  15.     res.render('persons', {title: '人员管理', datas: 123});
  16. });
  17. /**
  18.  * 新增页面跳转
  19.  */
  21. router.get('/add', function (req, res) {
  22.     res.render('add');
  23. });
  24. router.post('/add', function (req, res) {
  25.     var name = req.body.name;
  26.     var age = req.body.age;
  27.     var professional = req.body.professional;
  28.     db.query("insert into person(name,age,professional) values('" + name + "'," + age + ",'" + professional + "')", function (err, rows) {
  29.         if (err) {
  30.             res.end('新增失败：' + err);
  31.         } else {
  32.             res.json(rows);//返回数据,为json格式
  33.         }
  34.     })
  35. });
  37. /**
  38.  * 删
  39.  */
  40. router.post('/del', function (req, res) {
  41.     var id = req.body.id;
  42.     db.query("delete from person where id=" + id, function (err, rows) {
  43.         // console.log(rows);
  44.         if (err) {
  45.             res.end('删除失败：' + err)
  46.         } else {
  47.             res.json(rows);
  48.         }
  49.     });
  50. });
  51. /**
  52.  * 修改
  53.  */
  54. router.post('/update', function (req, res) {
  55.     var id = req.body.id;
  56.     var name = req.body.name;
  57.     var age = req.body.age;
  58.     var professional = req.body.professional;
  59.     db.query("update person set name='" + name + "',age='" + age + "',professional= '" + professional + "' where id=" + id, function (err, rows) {
  60.         if (err) {
  61.             res.end('修改失败：' + err);
  62.         } else {
  63.          res.json(rows);
  64.          console.log(rows);
  65.         }
  66.     });
  67. });
  68. /**
  69.  * 查询
  70.  */
  71. router.post('/search', function (req, res) {
  72.     var name = req.body.s_name;
  73.     var age = req.body.s_age;
  74.     var professional = req.body.s_professional;
  75.     // console.log(req.body);
  76.     var sql = "select * from person where true ";
  77.     if (name) {
  78.         sql += " and name like '%" + name + "%' ";
  79.     }
  80.     if (age) {
  81.         sql += " and age=" + age + " ";
  82.     }
  83.     if (professional) {
  84.         sql += " and name like '%" + professional + "%' ";
  85.     }
  86.     // sql = sql.replace("and","where");
  87.     db.query(sql, function (err, rows) {
  88.         if (err) {
  89.             res.end("查询失败：", err)
  90.         } else {
  91.             res.json(rows);
  92.         }
  93.     });
  94. });
  97. module.exports = router;

前台展示页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title><%= title %></title>
  6.     <link rel="shortcut icon" href="#"/>
  7.     <style>
  8.         div {
  9.             width: 800px;
  10.             margin: 0 auto;
  11.         }
  13.         table {
  14.             border-collapse: collapse;
  15.             border-spacing: 0;
  16.             width: 800px;
  17.         }
  19.         table tr td, table tr th {
  20.             border-top: solid 1px #ccc;
  21.             border-left: solid 1px #ccc;
  22.             line-height: 40px;
  23.             text-align: center;
  24.         }
  26.         table tr td:last-child, table tr th:last-child {
  27.             border-right: solid 1px #ccc;
  28.         }
  30.         table tr:last-child td {
  31.             border-bottom: solid 1px #ccc;
  32.         }
  34.         a {
  35.             text-decoration: none;
  36.             font-size: 14px;
  37.         }
  39.         .text {
  40.             width: 150px;
  41.         }
  42.     </style>
  43.     <!--../public/javascripts-->
  44.     <script src="javascripts/jquery-3.3.1.js"></script>
  45. </head>
  46. <body>
  47. <div id="app">
  48.     <span id="finds">
  49.     <div style="">
  50.         <div style="float: left;width:10%;">
  51.             <a href="#" @click="edit()">新增</a>
  52.         </div>
  53.         <div style="float: right;width:90%;">
  54.             <form action="/persons/search" method="post" onsubmit="return false" id="forms">
  55.                 姓名：<input type="text" name="s_name" id="s_name" class="text">   
  56.                 年龄：<input type="number" name="s_age" id="s_age" class="text">   
  57.                 职业：<input type="text" name="s_professional" id="s_professional" class="text">   
  58.                 <input type="submit" value="查询" @click="find()">
  59.             </form>
  60.         </div>
  61.     </div>
  63.     <table style="">
  64.         <tr>
  65.             <th width="10%">编号</th>
  66.             <th width="15%">操作</th>
  67.             <th width="15%">姓名</th>
  68.             <th width="10%">年龄</th>
  69.             <th width="50%">职业</th>
  70.         </tr>
  71.         <tr v-for="item in list">
  72.             <td>{
  73.    {item.id}}</td>
  74.             <td>
  75.                 <a href="#" @click="remove(item.id)">删除</a>  
  76.                 <a href="#" @click="edit(item)">修改</a>
  77.             </td>
  78.             <td>{
  79.    {item.name}}</td>
  80.             <td>{
  81.    {item.age}}</td>
  82.             <td>{
  83.    {item.professional}}</td>
  84.         </tr>
  85.     </table>
  86.         </span>
  87.     <div style="width: 800px;margin: auto; display: none" id="edit">
  88.         <form action="/persons/add" method="post" onsubmit="return false">
  89.             <input type="hidden" id="id" name="id">
  90.             姓名：<input type="text" name="name" id="name">
  91.             年龄：<input type="number" name="age" id="age">
  92.             职业：<input type="text" name="professional" id="professional">
  93.             <input type="button" value="提交" @click="edits()">
  94.             <input type="button" value="返回" @click="backtrack()">
  95.         </form>
  96.     </div>
  97. </div>
  98. <script src="javascripts/vue.js"></script>
  99. <script>
  100.     var vue = new Vue({
  101.         el: '#app',
  102.         data: {
  103.             list: find(),
  104.         },
  105.         methods: {
  106.             find: function () {//查询
  107.                 this.list = find();
  108.             }, edit: function (item) {//点击编辑
  109.                 $('#finds').hide();
  110.                 $('#edit').show();
  111.                 $('#id').val(item.id);
  112.                 $('#name').val(item.name);
  113.                 $('#age').val(item.age);
  114.                 $('#professional').val(item.professional);
  115.             }, edits: function () {//修改和添加
  116.                 if ($('#id').val() == "" || $('#id').val() == null) {
  117.                     add();
  118.                 } else {
  119.                     edit();
  120.                 }
  121.                 this.list = find();
  122.             }, remove: function (id) {//删除
  123.                 if (confirm("确定要删除这条数据吗?")) {
  124.                     $.ajax({
  125.                         type: "post",
  126.                         url: "/persons/del",
  127.                         dataType: "json",
  128.                         data: {//传给servlet的数据,
  129.                             id: id,
  130.                         },
  131.                         async: false,//加上这个ajax先执行
  132.                         success: function (data) {
  133.                             if (data.affectedRows>0) {
  134.                                 alert('删除成功');
  135.                             }else{
  136.                                 alert('删除失败');
  137.                             }
  138.                         }
  139.                     });
  140.                 }
  141.                 this.list = find();
  142.             },backtrack:function () {//返回
  143.                 $('#finds').show();
  144.                 $('#edit').hide();
  145.             }
  146.         }
  147.     })
  149.     //查询
  150.     function find() {
  151.         var data2;
  152.         $.ajax({
  153.             type: "post",
  154.             url: "/persons/search",
  155.             dataType: "json",
  156.             data: {//传给servlet的数据,
  157.                 s_professional: $('#s_professional').val(),
  158.                 s_name: $('#s_name').val(),
  159.                 s_age: $('#s_age').val()
  160.             },
  161.             async: false,//加上这个ajax先执行
  162.             success: function (data) {
  163.                 // console.log(data);
  164.                 //返回处理的方法
  165.                 data2 = data;
  166.             }
  167.         });
  168.         return data2;
  169.     }
  171.     //修改
  172.     function edit() {
  173.         $.ajax({
  174.             type: "post",
  175.             url: "/persons/update",
  176.             dataType: "json",
  177.             data: {//传给servlet的数据,
  178.                 professional: $('#professional').val(),
  179.                 name: $('#name').val(),
  180.                 age: $('#age').val(),
  181.                 id: $('#id').val(),
  182.             },
  183.             async: false,//加上这个ajax先执行
  184.             success: function (data) {
  185.                 //返回处理的方法
  186.                 console.log(data);
  187.                 if (data.affectedRows > 0) {
  188.                     alert('修改成功');
  189.                     $('#finds').show();
  190.                     $('#edit').hide();
  191.                     $('#id').val("");
  192.                     $('#name').val("");
  193.                     $('#age').val("");
  194.                     $('#professional').val("");
  195.                 } else {
  196.                     alert('修改失败');
  197.                 }
  198.             }
  199.         });
  200.     }
  202.     //添加
  203.     function add() {
  204.         $.ajax({
  205.             type: "post",
  206.             url: "/persons/add",
  207.             dataType: "json",
  208.             data: {//传给servlet的数据,
  209.                 professional: $('#professional').val(),
  210.                 name: $('#name').val(),
  211.                 age: $('#age').val(),
  212.                 id: $('#id').val(),
  213.             },
  214.             async: false,//加上这个ajax先执行
  215.             success: function (data) {
  216.                 //返回处理的方法
  217.                 if (data.affectedRows > 0) {
  218.                     alert('添加成功');
  219.                     $('#finds').show();
  220.                     $('#edit').hide();
  221.                     $('#id').val("");
  222.                     $('#name').val("");
  223.                     $('#age').val("");
  224.                     $('#professional').val("");
  225.                 } else {
  226.                     alert('添加失败');
  227.                 }
  228.             }
  229.         });
  230.     }
  232. </script>
  233. </body>
  234. </html>

发表评论

表情：
评论列表 （有 0 条评论，395人围观）

还没有评论，来说两句吧...

相关阅读

    相关 nodejs+express+mysql 增删改查

    写在最前面的话：         鉴于评论区的问题有点超出自己的想象，故重拾express，从头开始重新敲了一遍基于express的增删改查，希望大家有疑问先点击[这里][L

    蔚落蔚落/ 0 赞/ 455 阅读