1.前言
综合练习 ,旨在了解前后端逻辑
2.express db一套走
const express = require('express'); const db = require("./db") var app = express() app.use(express.static(__dirname+"/public")) app.set("views",__dirname +"/view") app.set("view engine","ejs") app.listen(9091,function(){ console.log("9091 服务启动"); })
3.表单get请求
app.get("/postData",app.get("/postData", (req, res) => { { var connection = db() connection.connect(function(err){ if(err){ return console.log("网络繁忙:",err); } // console.log("req query:",req.query); var { username, tel, sex } = req.query connection.query("insert into students (name,tel,sex) values(?,?,?)",[username, tel, sex], (err, result) => { if(err){ return console.log("网络繁忙,数据库查询超时:",err); } // res.end() 会乱码 因为这个是node 自带的 方法 ,需要手动配置编码信息 // res.send() express 已经配置过了编码信息 res.send("添加成功"+"<a href='/'> 返回首页</a>") connection.end() }) }) })
4.列表请求
前面操作都一样,只是数据库SQL语句不同
请求
app.get("/list", (req, res) => {})
SQL语句
// 获取数据库配置信息 var connection = db() // 根据配置信息 链接数据库 connection.connect(err => { if (err) { return console.log("list 链接数据库失败:", err); } // 执行SQL语句 connection.query("select * from students", [], (err, result, field) => { if (err) { return console.log("执行SQL 查询列表 语句失败:", err) } // 获取 查询结果 一般是数组 console.log("查询结果:", result); // 返回给前端 res.render("list", { list: result }) //关闭链接 connection.end() }) })
模板
view/list.ejs
一定养成好的习惯 不然报错这个格式非常不好排查
<% list.forEach(function(item){ %> <li> <h3> <%= item.name %> </h3> <p> <%= item.tel %> </p> <p> <%= item.sex %> </p> </li> <% }) %>
5.删除
请求
app.get("/delete",function(req,res){})
SQL
通常前端收到删除成功的提示后,会在发送一个请求,查询数据;
而不是把 请求数据写到数据库的删除里
var connection = db() connection.connect(err => { if (err) { return console.log("删除 操作链接数据库失败", err); } //删除逻辑 // 一般都是根据主键来删除字段 // 因为主键是唯一 ,不会重复 // 需要删除的主键从哪来 // 前端传过来的 console.log("query",req.query); connection.query("delete from students where Id=?", [req.query.id], function (err, result) { if (err) { return console.log("删除操作失败", err) } //返回前端内容 res.send("<a href='/list'>返回首页 </a>") // 执行SQL语句完成 // 在关掉数据库 connection.end() }) })
Id的传递
<a href="/delete?id=<%= item.Id %>">删除</a>
Id的大小写去数据库字段查看一下,和数据库保持一致,不容易出错
6.分页
分页这里要求数据量比较多,
找下生成多条数据的 SQL语句,导入到数据库里 执行下就好了
app.get('/',function(req,res){ // 需要 前端请求的 页码 和每页的条数 // 页码 var pageNum = req.query.pageNum || 1 // 每页条数 var pageSize = req.query.pageSize || 10 // 总条数 var total = 100 // SQL语句查询的时候 从哪条数据开始查 var start = (pageNum-1)*pageSize var connection = db() connection.connect(function(err){ if(err){ return console.log("链接失败:",err); } connection.query("select * from tab_route limit ?,?",[start,pageSize],(err, result)=>{ // console.log("查询结果:",result); res.render("index", {list:result,total:total,pageNum:pageNum}) connection.end() }) }) })
模板
<% for(var i=0;i<total/10;i++){ %> <% if(i==pageNum-1){ %> <a href="/?pageNum=<%= i+1 %>" class="active"> <%= i+1%></a> <% }else{ %> <a href="/?pageNum=<%= i+1%>"> <%= i+1%> </a> <% }%> <% }%>
每页数据量 自己扩展哦 ,算个小练习
这里可以自己添加样式 优化 ,人靠衣装,马靠鞍嘛
优化的好,感觉前端后端不过如此,我要当
全栈
哈哈欢迎入坑 大前端