node.js、框架express、Ajax的运用（表的数据删除等操作）

最新推荐文章于 2023-06-12 18:34:39 发布

我就是DaLing呀！

最新推荐文章于 2023-06-12 18:34:39 发布

阅读量464

点赞数

本文链接：https://blog.csdn.net/weixin_42418774/article/details/89493232

版权

重点内容：

了解layui的基本使用
理解Ajax的应用。
完成用户信息的查询与删除操作

数据库操作我这里是直接进行最后的结果，如果觉得难得话，可以先去看看简单的前期运行资料：

资料里面主要是讲：

npm的使用
nodemon工具的使用
express框架的使用
数据库操作

链接：https://pan.baidu.com/s/1eLCdqO7mWZNDI8m107fMmA
提取码：0ktm
复制这段内容后打开百度网盘手机App，操作更方便哦

一、新建一个文件夹，进入文件夹按住：shift键+右键，选择powershell窗口：

在上面的链接里面有资料，可以看到：

等等资料，所以我们现在就来安装这些包和框架：

二、安装包和框架

首先安装:nmp install nodemon(包名) -g

在安装本地包：先初始化一下：npm init 或者npm init -y

三、框架的安装（`express` ）：

最后就会在文件夹里面显示如下图的文件：

解释：

先初始化一下：npm init 可以生成package.json文件，里面主要是你安装的包和框架的一些版本信息

你什么都安装好了的话，你的node_modules文件里面还会有许多生成的文件：

好了，到这里准备就好了，现在就可以打开软件，新建index.js了，当然名字自己起，看你喜欢用什么软件咯，我这里用的是vsCode，下图是最终的页面文件，js等文件的结果：

时间关系，我直接贴源代码，你们可以自己看，运行：

index.js

const express = require('express');
const app = express();
// 导入mysql模块
const mysql = require('mysql');
// 使用ejs模板引擎
app.set('view engine', 'ejs');
app.set('views', 'ejsViews');

// 添加一个body-parser包
const bodyParser = require('body-parser');
// 解析post发送过来的数据
app.use(bodyParser.urlencoded({ extended: false }));
// 设置css,js文件图片文件的访问路径
// user的第一参数表示的是：请求的地址中包含了/public
// 第二个参数表示所访问的文件夹。
app.use('/public', express.static('public'));
const conn = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'test'
})
app.get('/', function(req, res) {
        res.render('userList.ejs');
    })
    //注意我们前面是使用$.post请求的，所以这里写成app.post
app.post('/userList', function(req, res) {
        // 查询数据库了。
        const sql = "select * from user";
        // 执行sql语句。
        conn.query(sql, function(err, result) {
            if (err) {
                // err.message:固定写法，表示存储的是错误信息
                // flag:'no' 就是一个表示，表示返回的数据是错误的。
                res.send({ msg: err.message, flag: 'no' });
            } else {
                res.send({ msg: result, flag: 'yes' })
            }
        })
    })
    // 删除数据
app.post('/delUser', function(req, res) {
    //通过req.body接收传递过来的数据，注意与前面保持一致
    // 如果是post请求，传递数据，必须安装一个包叫body-parser
    const userId = req.body.id;
    console.log(userId);
    const sql = 'delete from user where id=?'; //?表示占位符。要用具体的数值代替
    conn.query(sql, userId, function(err, result) {
        if (err) {
            res.send({ msg: '删除失败', flag: 'no' });
        } else {
            res.send({ msg: '删除成功', flag: 'yes' });
        }
    })

})
app.listen(3000, function() {
    console.log('server running.........');
})

ejsViews文件夹里面的userList.ejs：（注意后缀名是：ejs）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户列表页面</title>
    <link rel="stylesheet" href="public/css/layui.css">
    <script src="public/js/jquery-3.2.1.min.js"></script>
    <script src="public/layui.js"></script>


</head>

<body>

    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="tData">

        </tbody>
    </table>
</body>
<script>
    // 在什么时候发送请求。在浏览器把所有的html代码执行完成后，才去发送ajax请求，获取用户数据，然后填充表格中。
    // 当浏览器执行完所有的html代码以后，自动调用下面的方法。
    $(function() {

        loadData();
    })

    function loadData() {
        // 第一个参数：表示请求的地址
        // 第二个参数：发给服务器的数据。（给第一个参数传递的数据，如果不传递可以只写一个空的大括号）
        // 第三个参数：表示服务器处理后，将结果返回过来，这时自动调用该函数，同时该函数中的参数data里面存储的就是从服务器返回的数据。
        $.post('/userList', {}, function(data) {
            // 在这个函数中可以处理服务器返回的数据。
            //   console.log(data);
            if (data.flag === 'yes') {
                // 对返回的数据进行循环遍历
                //将数据填充到tbody标签中，该标签中显示的tr
                //所以在这里我们要动态的创建tr,并且把数据填充到tr中，在把tr添加到tbody中，而tbody是属于表格的，所以表格中就有数据了。
                //  $('#tData') //document.getElementById('tData')
                for (var i = 0; i < data.msg.length; i++) {
                    $('<tr><td>' + data.msg[i].id + '</td><td>' + data.msg[i].name + '</td><td>' + data.msg[i].pass_word + '</td><td><a href="#" class="delLinks" ids="' + data.msg[i].id + '">删除</a></td></tr>').appendTo('#tData');

                }
                // 完成删除操作.
                bindDeleteClick();

            } else {
                layer.msg(data.msg, {
                    icon: 5
                });
            }
        })

    }

    //专门完成删除操作，弹出询问的对话框
    function bindDeleteClick() {
        $('.delLinks').click(function() {
            var userId = $(this).attr('ids'); //获取a标签中的ids属性的值
            alert(userId);
            if (confirm('确定要删除吗？')) {
                $.post('/delUser', {
                    'id': userId
                }, function(data) {
                    if (data.flag === 'yes') {
                        // 先将表格中的旧数据删除，然后在追加新的数据.
                        $("#tData tr:gt(0)").remove();
                        loadData(); //重新请求加载数据
                    } else {

                    }
                })
            }
        })
    }
</script>

</html>

这就是主要的源代码了！！！

好了，以上就是node.js的运用，以及Ajax的应用！！！

运行结果：

关于里面不懂的东西，请看我的下一篇文章，主解释代码里面的一些问题，还有就是用到的框架以及数据库使用！！！

我就是DaLing呀！

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
node.js、框架express、Ajax的运用（表的数据删除等操作）

重点内容：了解layui的基本使用理解Ajax的应用。完成用户信息的查询与删除操作数据库操作我这里是直接进行最后的结果，如果觉得难得话，可以先去看看简单的前期运行资料：资料里面主要是讲： npm的使用 nodemon工具的使用 express框架的使用数据库操作链接：https://pan.baidu.c...
复制链接

扫一扫