持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
1.导入express
let express = require("express")
let app = express()
2.导入本地文件，并用解构赋值法结构
let { arr_user } = require("./indexser")
console.log(arr_user)
结构之后的样式
当我们在写后端接口的时候，每一次都要写res.setHeader("Access-Control-Allow-Origin", "*")，造成网页冗余，所以我们可以直接写一个中间件，替换这个代码
//中间件
//在处理服务器请求时,需要进行很多细节的处理,比如 请求体, 报文报头,以及设置cookie等等
// 我们前后端做重要的就是request,respond两个参数
// 其次就是next,因为每一个中间件执行完之后应该进入下一个中间件,因此调用next()
// 常见应用级别的中间件 app.use()或者是app.post(),或者是app.get()
app.use((req,res,next)=>{
//允许跨域
res.setHeader("Access-Control-Allow-Origin", "*")
// 调用next()方法表示通行,放行,继续执行
next()
})
启动，查询内容
app.listen(8000, (req, res) => {
// res.setHeader("Access-Control-Allow-Origin", "*")
// req 请求成功
// res 响应请求
console.log("服务器已启动，")
})
查询内容
app.get("/userInfor", (req, res) => {
// res.setHeader("Access-Control-Allow-Origin", "*")
res.send(arr_user)
})
启动和查询写完之后需要先在集成终端打开
在集成终端看到成功之后，打开浏览器，输入127.0.0.1:8000/userInfor就可以看到数据
<-------------------------------------------------------------------------->
启动，查询分页
app.listen(8000, (req, res) => {
// res.setHeader("Access-Control-Allow-Origin", "*")
// req 请求成功
// res 响应请求
console.log("服务器已启动，")
})
// 分页查询
app.get("/pages", (req, res) => {
// res.setHeader("Access-Control-Allow-Origin", "*")
// res.send(arr_user)
//获取url中的参数
console.log(req.query)
pageIndex和pageSize为在HTML文件中定义的变量
获取当前页面数量和页数
页数为对象req.query中的pageIndex， 每一页数量为req.query中的pageSize
let pageIndex = parseInt(req.query.pageIndex)
let pageSize = parseInt(req.query.pageSize)
// 分页查询获取每页数据的结果
// slice()截取
例如第一页，pageIndex=1,pageSize=2
let page=arr_user.slice((1-1)*2,1*2)
也就是截取arr_user里的[0,2)的数据，就是第一条和第二条，以此类推
let page = arr_user.slice((pageIndex - 1) * pageSize, pageIndex * pageSize)
// 获取总数据
let count = arr_user.length
可以看到当前有8条数据，也就是我们在js里写的8条数据
res.send(
{
page,
count
}
)
})
添加数据
//设置允许接受json格式的文件
app.use(express.json())
//设置允许接受url格式的文件
app.use(express.urlencoded({extended:false}))
//添加
app.post("/add", (req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*")
// req.body 存储在 post请求中的参数
let new_arr = req.body
arr_user.push(new_arr)
console.log(new_arr)
res.send(true)
})
req.body为添加数据时候我们输入的值
分页查询，添加
页面样式:
<style>
table {
border: 1px solid black;
width: 400px;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
text-align: center;
}
/* 添加 */
.adds {
border: 1px solid black;
text-align: center;
margin-top: 20px;
width: 400px;
}
input {
outline: none;
}
</style>
页面布局：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
<tfoot>
<tr>
<td colspan="4">
<button class="first">首页</button>
<button class="on">上一页</button>
<span class="pageIndex"></span>
<span>/</span>
<span class="pageAll"></span>
<button class="next">下一页</button>
<button class="end">尾页</button>
</td>
</tr>
</tfoot>
</table>
<!-- 添加数据-->
<div class="adds">
<p>
姓名:
<input type="text" class="add_name">
</p>
<p>
年龄:
<input type="text" class="add_age">
</p>
<p>
性别:
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" id="" value="女">女
</p>
<p>
<button class="tj">添加</button>
<button class="quxiao">取消</button>
</p>
</div>
引入Jq并操作后端数据
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
let pageIndex = 1
let pageAll = 1
let pageSize = 2
function loadData() {
$("#tbody").html("")
// 分页效果
$.get("http://127.0.0.1:8000/pages", {
pageIndex, pageSize
}, ({ page, count }) => {
//如果需要在html文件输出数据,需要在服务器文件中,加上允许跨域的请求
// ajax需要遵循 同源策略
// 同源策略就是请求的协议名和域名和端口号和当前文件的地址要完全一样.
// 我们前后端项目是分离的,三者不可能一样,所以需要跨域请求
// console.log(res)
//计算总页数
pageAll = Math.ceil(count / pageSize)
$(".pageIndex").html(pageIndex)
$(".pageAll").html(pageAll)
//遍历拿取信息
page.forEach(a => {
let tr = $(
` <tr>
<td>${a.name}</td>
<td>${a.age}</td>
<td>${a.sex}</td>
<td>
<button>编辑</button>
<button classs="sc">删除</button>
</td>
</tr>`
)
$("#tbody").append(tr)
});
})
}
loadData()
// 首页
$(".first").click(function () {
pageIndex = 1
loadData()
})
// 尾页
$(".end").click(function () {
pageIndex = pageAll
loadData()
})
// 上一页
$(".on").click(function () {
if (pageIndex-- <= 1) {
pageIndex = 1
}
loadData()
})
// 下一页
$(".next").click(function () {
if (pageIndex++ >= pageAll) {
pageIndex = pageAll
}
loadData()
})
// 点击添加
$(".tj").click(function () {
let name = $(".add_name").val()
let age = $(".add_age").val()
let sex = [...$("input[name='sex']")].find(key => key.checked).value
//将获取的数据放在对象中
if (!name || !age || !sex) {
alert("信息不能为空,请输入内容")
return
}
//将添加的内容发送到后端
$.post("http://127.0.0.1:8000/add",
{ name, age, sex }
, res => {
if (res) {
alert("添加成功")
loadData()
$(".quxiao").click()
}
})
})
// 点击取消
$(".quxiao").click(function () {
$(".add_name").val("")
$(".add_age").val("")
//点击取消,选中默认状态那个
$(" input[name='sex']")[0].checked = true
})
</script>
