首先我们看看需求
首先初始化我们的项目文件夹,idx文件夹里放我们页面的文件,在同一根目录放我们的服务器文件(hot就是用node搭建的服务器)
实现内容很简单,总共四个模块,增删改查,我们先用layui框架搭建下页面结构,还需要layui的css,js,和jquery,这里我就不写了,layui的使用详情可参考www.layui.com/
<form class="layui-form"> <div class="layui-form-item"> <div class="layui-input-inline"> <input type="text" name="name" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input ipt"> </div> <button class="layui-btn layui-btn-normal btn" lay-submit lay-filter="formDemo">发布消息</button> </div> <div class="layui-form-item"> <table class="layui-table"> <tbody id="tbd"> </tbody> </table> </div> </form>
首先我们先把服务器给搭建起来,不会的小伙伴可以直接看代码,三步搭建服务器,express需要下载
npm i express@4.17.1
端口自己设置(我设置的8080,不要设置8000以下,可能与系统接口冲突)
// 这是我们的数据,没有数据库所以用数组替代
var arr = ["吃饭", "睡觉", "打豆豆"]
// 1,引入express
const express = require("express")
// 2,搭建服务器
const app = express()
// 3,监听listen
app.listen(8080, () => {
console.log("127.0.0.1:8080");
})
打开终端,切换到hot所在目录,运行
代码即可开启服务器,代码如下,记得打开服务器,请求数据需要服务器运行,修改代码后,需要重启服务器,停止服务器ctrl + c ,然后 在终端按↑ 可切换上一次代码,直接回车,开启服务器
第一个模块,渲染模块
因为进网页就会显示数据,所以我们先完成这个模块,先写请求,这里不用传参数,所以用get请求,我们把渲染模块封装成一个函数,后面增删改查都会调用,res为我们从服务器拿到的数据,是一个数组,我们把他们渲染到tbody里,这里可以使用模板引擎渲染,因为数据比较简单,我直接用的for循环添加tr到tbody中,代码如下
// 查询 function getList() { $("tbody").html("") $.ajax({ method: "GET", url: 'http://127.0.0.1:8080/list', success: function (res) { if (res.status != 0) { return layer.msg("获取资料失败") } const arr = res.data for (i = 0; i < arr.length; i++) { $("#tbd").append(` <tr> <td> <span date-ids="${i}">${arr[i]}</span><a href="javascript:;" date-id="${i}">删除</a></td> </tr> `) } } }) } getList();
现在写服务器中的接口,要与请求的接口一致
服务器端代码如下
// -----渲染列表
app.get('/list', (req, res) => {
res.send({
status: 0,
data: arr
});
})
服务器代码还是比较简单的,添加一个get请求接口,req为传过来的参数,这里没有,res为传给html页面的数据,用send方法直接把数组arr传过去写完后重启服务器,就能渲染数据了,如图
后面的方法如出一辙,html页面写请求,服务器文件里写接口,通过传过来的数据把arr数组里的数据进行增删改查,然后再渲染到页面,我就不一一解释了,这里要注意(静态托管,data数据传过来的数据处理问题,和跨域)的问题,当你看到服务器报错 很长一段 cors为第三方包 下载代码
npm i cors
啥的,直接写下面代码
// 跨域问题
const cors = require('cors')
app.use(cors())
// 静态托管
app.use(express.static('./idx'))
// 4. 导入 Node 内置模块 querystring
const qs = require('querystring')
// 4,监听请求
// --------中间件
app.use((req, res, next) => {
// 定义中间价具体的业务逻辑
// 1. 定义一个 str 字符串,专门用来存储客户端发送过来的请求体数据
let str = ''
// 2. 监听 req 的 data 事件
req.on('data', (chunk) => {
str += chunk
})
req.on('end', () => {
// 在 str 中存放的是完整的请求体数据
// 将字符串格式的请求体数据,解析成对象
// 5. 调用 qs.parse() 方法,将查询字符串解析成对象
const body = qs.parse(str)
req.body = body
next()
})
})
下面是各个模块的html请求代码
// 查询 function getList() { $("tbody").html("") $.ajax({ method: "GET", url: 'http://127.0.0.1:8080/list', success: function (res) { if (res.status != 0) { return layer.msg("获取资料失败") } const arr = res.data for (i = 0; i < arr.length; i++) { $("#tbd").append(` <tr> <td> <span date-ids="${i}">${arr[i]}</span><a href="javascript:;" date-id="${i}">删除</a></td> </tr> `) } } }) } getList(); // 添加 $(".btn").on("click", function (e) { e.preventDefault() $.ajax({ method: "POST", url: "http://127.0.0.1:8080/add", data: { name: $(".ipt").val() }, success: function (res) { if (res.status != 0) { return layer.msg("添加失败") } layer.msg("添加成功") getList() $(".ipt").val("") } }) }) // 删除 $("tbody").on("click", "a", function (e) { e.preventDefault() var ids = $(this).attr("date-id") $.ajax({ method: "POST", url: "http://127.0.0.1:8080/del", data: { id: ids }, success: function (res) { if (res.status != 0) { return layer.msg("删除失败") } layer.msg("删除成功") getList() } }) }) // 双击编辑功能 $("tbody").on("dblclick", "span", function () { $(this).html(`<input type="text" class="pp">`) }) // 失去焦点 $("tbody").on("blur", ".pp", function () { var ids = $(this).parent().attr("date-ids") $(this).hide() $.ajax({ method: "POST", url: "http://127.0.0.1:8080/edit", data: { name: $(".pp").val(), id: ids }, success: function (res) { if (res.status != 0) { return layer.msg("编辑失败") } layer.msg("编辑成功") getList() } }) })
下面是各个模块服务器接口代码
// -----渲染列表
app.get('/list', (req, res) => {
res.send({
status: 0,
data: arr
});
})
// -------添加
app.post("/add", (req, res) => {
arr.push(req.body.name)
res.send({
status: 0
})
})
// --------删除
app.post("/del", (req, res) => {
const newarr = arr.filter(function (value) {
return value != arr[req.body.id]
})
arr = newarr
res.send({
status: 0
})
})
// -------编辑
app.post("/edit", (req, res) => {
arr[req.body.id] = req.body.name
res.send({
status: 0
})
})