重点内容:
-
了解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的应用!!!
运行结果:
关于里面不懂的东西,请看我的下一篇文章,主解释代码里面的一些问题,还有就是用到的框架以及数据库使用!!!