npm init -y(初始化项目)
npm install express（引入express）
npx express-generator -e（自动生成模板。添加对 ejs 模板引擎的支持）
npm i --save lodash（引入lodash）
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//获取路由
var indexRouter = require('./routes/index');//模板自带
var usersRouter = require('./routes/users');//模板自带
var studentRouter = require('./routes/student');
var app = express();
// view engine setup //获取视图路径,_dirname是lodash里的获取文件目录
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//绑定路由
app.use('/index', indexRouter);
app.use('/users', usersRouter);
app.use('/', studentRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
student.js
var express = require('express');
var router = express.Router();
const _=require("lodash");
let stus=[
{id:202201,name:"tom",age:18},
{id:202202,name:"rose",age:16},
{id:202203,name:"jack",age:20},
{id:202204,name:"lili",age:15},
{id:202205,name:"lucy",age:15}
];
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('student', {stus,msg: '',stu:{id:"",name:"",age:""}});
});
router.get('/delete/:id', function(req, res, next) {
//查找选中id的索引
let index=_.findIndex(stus,{id:req.params.id})
//删除
stus.splice(index,1);
res.render('student', {stus,msg: '删除成功！',stu:{id:"",name:"",age:""}});
});
//添加
router.post('/add', function(req, res, next) {
//查找选中id的索引
let stu=req.body;
stus.push(stu);
//根据编号排序
let stus2=_.orderBy(stus,["id"]);
stu.id=_.last(stus2).id+1;
res.render('student', {stus,msg: '添加成功',stu:{id:"",name:"",age:""}});
});
//修改
router.get('/edit/:id', function(req, res, next) {
//查找选中id的索引
let stu=_.find(stus,{id:parseInt(req.params.id)})
console.log(stus);
res.render('student', {stus,msg: '',stu});
});
//更新
router.post('/update', function(req, res, next) {
//查找选中id的索引
let stuSubmit=req.body;
let stu=_.find(stus,{id:parseInt(stuSubmit.id)})
stu.name=stuSubmit.name;
stu.age=stuSubmit.age;
//重新渲染页面
res.render('student', {stus,msg: '更新成功',stu:{id:"",name:"",age:""}});
});
module.exports = router;
student.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生管理系统</title>
</head>
<body>
<h1>学生管理系统</h1>
<table width="100%" border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<% for(let i=0;i<stus.length;i++){ %>
<tr>
<td><%=stus[i].id%></td>
<td><%=stus[i].name%></td>
<td><%=stus[i].age%></td>
<td>
<a href="/delete/<%=stus[i].id%>" class="del">删除</a>
<a href="/edit/<%=stus[i].id%>">修改</a>
</td>
</tr>
<%} %>
</table>
<fieldset>
<legend>添加学生</legend>
<form method="post">
<p>
<label>姓名：</label>
<input type="text" name="name" value="<%=stu.name%>">
</p>
<p>
<label>年龄：</label>
<input type="text" name="age" value="<%=stu.age%>">
</p>
<input type="hidden" name="id" id="studentId" value="<%=stu.id%>">
<button formaction="/add">添加</button>
<button formaction="/update">更新</button>
</form>
</fieldset>
<h4><%=msg%></h4>
<script>
let dels=document.querySelectorAll(".del");
for(let i=0;i<dels.length;i++){
dels[i].onclick=function(){
return confirm("您确定要删除吗？");
}
}
</script>
</body>
</html>
标签：Node,stus,req,res,app,express,CRUD,js,id From： https://www.cnblogs.com/zsbb/p/16707204.html