Node.js（五）学生管理CRUD

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>

posted on 2022-09-19 11:47 最帅爸爸阅读(50) 评论(0) 收藏举报