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.js（五）学生管理CRUD的更多相关文章

  1. 4.Node.js 微信消息管理

    一.写在前面的话   当用户发送消息给公众号时(或某些特定的用户操作引发的事件推送时),会产生一个POST请求,开发者可以在响应包(Get)中返回特定XML结构,来对该消息进行响应.   消息推送也是 ...

  2. Node.js的安装以及Node.js的模块管理

    索引: Node.js的安装以及Node.js的模块管理Node.js开发环境搭建以及对ES6的支持Node.js构建Vue.js项目Vue.js单文件组件的开发基于Vue.js的UI组件(Eleme ...

  3. Node.js的进程管理

    众所周知Node基于V8,而在V8中JavaScript是单线程运行的,这里的单线程不是指Node启动的时候就只有一个线程,而是说运行JavaScript代码是在单线程上,Node还有其他线程,比如进 ...

  4. 使用yarn代替npm作为node.js的模块管理器

    使用yarn代替npm作为node.js的模块管理器 转 https://www.jianshu.com/p/bfe96f89da0e     Fast, reliable, and secure d ...

  5. 90%的人都不知道的Node.js 依赖关系管理（下）

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://dzone.com/articles/node-dependency-manage ...

  6. Node.js 安装与管理

    一.node安装 Windows下,官网下载 Node.js 安装包,运行安装即可, 安装成功后,可查看版本号 node -v 二.npm npm 是 node 包管理工具,随同node一起安装,安装 ...

  7. 90%的人都不知道的Node.js 依赖关系管理（上）

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://dzone.com/articles/nodejs-dependency-mana ...

  8. 关于node.js的进程管理

    如果是单纯的运行一个node进程,那会比较简单,例如: node ./example.js 但是一般来说,当我们运行一个node进程之后,我们可能希望对这个进程进行更多的管理,例如,当node程序是一 ...

  9. [Web 前端] 使用yarn代替npm作为node.js的模块管理器

    cp from : https://www.jianshu.com/p/bfe96f89da0e     Fast, reliable, and secure dependency managemen ...

随机推荐

  1. CSS（十四）：盒子模型

    页面布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子. 利用CSS设置好盒子样式,然后放到相应的位置 往盒子里面装内容 网页布局的本质:就是利用CSS摆盒子 盒子模型 组成 所 ...

  2. Linux系统上传公钥不生效问题

    Authentication refused: bad ownership or modes for file /home/yanbo.xu/.ssh/authorized_keys 原因: sshd ...

  3. Logo小变动，心境大不同，SVG矢量动画格式网站Logo图片制作与实践教程(Python3)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_207 曾几何时,SVG(Scalable Vector Graphics)矢量动画图被坊间称之为一种被浏览器诅咒的技术,只因为糟糕 ...

  4. WPF 截图控件之移除控件(九)「仿微信」

    WPF 截图控件之移除控件(九)「仿微信」 WPF 截图控件之移除控件(九)「仿微信」 作者:WPFDevelopersOrg 原文链接: https://github.com/WPFDevelope ...

  5. CF 559C - Gerald and Giant Chess （组合计数）

    \(C_{x+y}^y\)的公式,DP容斥删多余贡献. #include <cstdio> #include <iostream> #include <cstring&g ...

  6. EMAS Serverless系列～4步教你快速搭建小程序

    体验简介 本实验基于 EMAS Serverless 的云函数.云数据库.云存储等云服务能力一站式快速开发小程序<私人云相册>.Demo 主要包括如下功能: 1 相册管理 2 上传相片 3 ...

  7. Express 项目，res.cookie() 设置 Cookie 无法被保存在浏览器的 Application 中

    res.cookie() 给客户端响应头封装的 Cookie 无法被保存在客户端浏览器的 Application 中,只能在 Set-Cookie 中看到有这个值: 在前后端分离项目中,存在跨域问题, ...

  8. DL基础：cs231n assignment 2

    cs231n assignment 2 20210913 - 20211005. 目录 cs231n assignment 2 fully-connected nets 基本思想 编程细节 复习mul ...

  9. 回溯、贪心、DP的区别和联系

    四大常用算法:分治.贪心.回溯.动态规划 回溯算法是个"万金油".基本上能用跟动态规划.贪心解决的问题,都可以用回溯去解决.回溯算法相当于穷举搜索,穷举所有情况,然后得到最优解.不 ...

  10. P4767 [IOI2000]邮局 - 平行四边形不等式优化DP

    There is a straight highway with villages alongside the highway. The highway is represented as an in ...