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

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

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

![20181103142936679.png][]

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

//引用模块
    var express = require('express');
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');
    var index = require('./routes/index');
    var persons = require('./routes/person');
    var app = express();
    
    // view engine setup
    // app.set('views', path.join(__dirname, 'views'));
    // app.set('view engine', 'ejs');
    
    //修改后的
    app.set('views', path.join(__dirname, './views'));
    app.engine('.html', require('ejs').__express);
    app.set('view engine', 'html');
    
    
    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    
    //全局访问
    app.all('*', function (req, res, next) {
        res.header('Access-Control-Allow-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);
        }
        else {
            next();
        }
    });
    //引入public文件夹,让页面能获取到public文件夹内的文件
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.use('/', index);
    app.use('/persons', persons);
    
    app.use(express.static(__dirname));
    
    // app.use(express.static(__dirname + '../public'));
    
    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });
    
    // error handler
    app.use(function (err, req, res, next) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};
    
        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });
    
    
    
    module.exports = app;

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

//db.js
    // 连接MySQL
    var mysql = require('mysql');
    var pool = mysql.createPool({
        host: 'localhost',//本机
        user: 'root',//数据库帐号
        password: 'root',//密码
        database: 'test'//数据库
    });
    
    function query(sql, callback) {//执行sql
        pool.getConnection(function (err, connection) {//err为错误信息 connection为连接数据库
            // Use the connection
            connection.query(sql, function (err, rows) {//rows为执行完sql的返回的信息
                callback(err, rows);//回调
                connection.release();//释放链接
            });
        });
    }
    exports.query = query;

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

前台展示页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= title %></title>
        <link rel="shortcut icon" href="#"/>
        <style>
            div {
                width: 800px;
                margin: 0 auto;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                width: 800px;
            }
    
            table tr td, table tr th {
                border-top: solid 1px #ccc;
                border-left: solid 1px #ccc;
                line-height: 40px;
                text-align: center;
            }
    
            table tr td:last-child, table tr th:last-child {
                border-right: solid 1px #ccc;
            }
    
            table tr:last-child td {
                border-bottom: solid 1px #ccc;
            }
    
            a {
                text-decoration: none;
                font-size: 14px;
            }
    
            .text {
                width: 150px;
            }
        </style>
        
        <script src="javascripts/jquery-3.3.1.js"></script>
    </head>
    <body>
    <div id="app">
        <span id="finds">
        <div style="">
            <div style="float: left;width:10%;">
                <a href="#" @click="edit()">新增</a>
            </div>
            <div style="float: right;width:90%;">
                <form action="/persons/search" method="post" onsubmit="return false" id="forms">
                    姓名：<input type="text" name="s_name" id="s_name" class="text">   
                    年龄：<input type="number" name="s_age" id="s_age" class="text">   
                    职业：<input type="text" name="s_professional" id="s_professional" class="text">   
                    <input type="submit" value="查询" @click="find()">
                </form>
            </div>
        </div>
    
        <table style="">
            <tr>
                <th width="10%">编号</th>
                <th width="15%">操作</th>
                <th width="15%">姓名</th>
                <th width="10%">年龄</th>
                <th width="50%">职业</th>
            </tr>
            <tr v-for="item in list">
                <td>{
       {item.id}}</td>
                <td>
                    <a href="#" @click="remove(item.id)">删除</a>  
                    <a href="#" @click="edit(item)">修改</a>
                </td>
                <td>{
       {item.name}}</td>
                <td>{
       {item.age}}</td>
                <td>{
       {item.professional}}</td>
            </tr>
        </table>
            </span>
        <div style="width: 800px;margin: auto; display: none" id="edit">
            <form action="/persons/add" method="post" onsubmit="return false">
                <input type="hidden" id="id" name="id">
                姓名：<input type="text" name="name" id="name">
                年龄：<input type="number" name="age" id="age">
                职业：<input type="text" name="professional" id="professional">
                <input type="button" value="提交" @click="edits()">
                <input type="button" value="返回" @click="backtrack()">
            </form>
        </div>
    </div>
    <script src="javascripts/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                list: find(),
            },
            methods: {
                find: function () {//查询
                    this.list = find();
                }, edit: function (item) {//点击编辑
                    $('#finds').hide();
                    $('#edit').show();
                    $('#id').val(item.id);
                    $('#name').val(item.name);
                    $('#age').val(item.age);
                    $('#professional').val(item.professional);
                }, edits: function () {//修改和添加
                    if ($('#id').val() == "" || $('#id').val() == null) {
                        add();
                    } else {
                        edit();
                    }
                    this.list = find();
                }, remove: function (id) {//删除
                    if (confirm("确定要删除这条数据吗?")) {
                        $.ajax({
                            type: "post",
                            url: "/persons/del",
                            dataType: "json",
                            data: {//传给servlet的数据,
                                id: id,
                            },
                            async: false,//加上这个ajax先执行
                            success: function (data) {
                                if (data.affectedRows>0) {
                                    alert('删除成功');
                                }else{
                                    alert('删除失败');
                                }
                            }
                        });
                    }
                    this.list = find();
                },backtrack:function () {//返回
                    $('#finds').show();
                    $('#edit').hide();
                }
            }
        })
    
        //查询
        function find() {
            var data2;
            $.ajax({
                type: "post",
                url: "/persons/search",
                dataType: "json",
                data: {//传给servlet的数据,
                    s_professional: $('#s_professional').val(),
                    s_name: $('#s_name').val(),
                    s_age: $('#s_age').val()
                },
                async: false,//加上这个ajax先执行
                success: function (data) {
                    // console.log(data);
                    //返回处理的方法
                    data2 = data;
                }
            });
            return data2;
        }
    
        //修改
        function edit() {
            $.ajax({
                type: "post",
                url: "/persons/update",
                dataType: "json",
                data: {//传给servlet的数据,
                    professional: $('#professional').val(),
                    name: $('#name').val(),
                    age: $('#age').val(),
                    id: $('#id').val(),
                },
                async: false,//加上这个ajax先执行
                success: function (data) {
                    //返回处理的方法
                    console.log(data);
                    if (data.affectedRows > 0) {
                        alert('修改成功');
                        $('#finds').show();
                        $('#edit').hide();
                        $('#id').val("");
                        $('#name').val("");
                        $('#age').val("");
                        $('#professional').val("");
                    } else {
                        alert('修改失败');
                    }
                }
            });
        }
    
        //添加
        function add() {
            $.ajax({
                type: "post",
                url: "/persons/add",
                dataType: "json",
                data: {//传给servlet的数据,
                    professional: $('#professional').val(),
                    name: $('#name').val(),
                    age: $('#age').val(),
                    id: $('#id').val(),
                },
                async: false,//加上这个ajax先执行
                success: function (data) {
                    //返回处理的方法
                    if (data.affectedRows > 0) {
                        alert('添加成功');
                        $('#finds').show();
                        $('#edit').hide();
                        $('#id').val("");
                        $('#name').val("");
                        $('#age').val("");
                        $('#professional').val("");
                    } else {
                        alert('添加失败');
                    }
                }
            });
        }
    
    </script>
    </body>
    </html>

[20181103142936679.png]: /images/20220422/af8a0f082b2f4227a3a68f77a3119caa.png