npm init -y(初始化项目)

npm install express（引入express）

npx express-generator -e（自动生成模板。添加对 ejs 模板引擎的支持）

npm i --save lodash（引入lodash）

app.js

  1. var createError = require('http-errors');
    var express = require('express');
  2. var path = require('path');
  3. var cookieParser = require('cookie-parser');
  4. var logger = require('morgan');

  5. //获取路由
  6. var indexRouter = require('./routes/index');//模板自带
  7. var usersRouter = require('./routes/users');//模板自带
  8. var studentRouter = require('./routes/student');
  10. var app = express();
  12. // view engine setup //获取视图路径,_dirname是lodash里的获取文件目录
  13. app.set('views', path.join(__dirname, 'views'));
  14. app.set('view engine', 'ejs');
  16. app.use(logger('dev'));
  17. app.use(express.json());
  18. app.use(express.urlencoded({ extended: false }));
  19. app.use(cookieParser());
  20. app.use(express.static(path.join(__dirname, 'public')));

  21. //绑定路由
  22. app.use('/index', indexRouter);
  23. app.use('/users', usersRouter);
  24. app.use('/', studentRouter);
  26. // catch 404 and forward to error handler
  27. app.use(function(req, res, next) {
  28.   next(createError(404));
  29. });
  31. // error handler
  32. app.use(function(err, req, res, next) {
  33.   // set locals, only providing error in development
  34.   res.locals.message = err.message;
  35.   res.locals.error = req.app.get('env') === 'development' ? err : {};
  37.   // render the error page
  38.   res.status(err.status || 500);
  39.   res.render('error');
  40. });
  42. module.exports = app;

student.js

  1. var express = require('express');
  2. var router = express.Router();
  3. const _=require("lodash");
  4.  
  5. let stus=[
  6.   {id:202201,name:"tom",age:18},
  7.   {id:202202,name:"rose",age:16},
  8.   {id:202203,name:"jack",age:20},
  9.   {id:202204,name:"lili",age:15},
  10.   {id:202205,name:"lucy",age:15}
  11. ];
  12.  
  13. /* GET home page. */
  14. router.get('/', function(req, res, next) {
  15.   res.render('student', {stus,msg: '',stu:{id:"",name:"",age:""}});
  16. });
  17.  
  18. router.get('/delete/:id', function(req, res, next) {
  19.   //查找选中id的索引
  20.   let index=_.findIndex(stus,{id:req.params.id})
  21.   //删除
  22.   stus.splice(index,1);
  23.   res.render('student', {stus,msg: '删除成功！',stu:{id:"",name:"",age:""}});
  24. });
  25.  
  26. //添加
  27. router.post('/add', function(req, res, next) {
  28.   //查找选中id的索引
  29.   let stu=req.body;
  30.   stus.push(stu);
  31.   //根据编号排序
  32.   let stus2=_.orderBy(stus,["id"]);
  33.   stu.id=_.last(stus2).id+1;
  34.   res.render('student', {stus,msg: '添加成功',stu:{id:"",name:"",age:""}});
  35. });
  36.  
  37. //修改
  38. router.get('/edit/:id', function(req, res, next) {
  39.   //查找选中id的索引
  40.   let stu=_.find(stus,{id:parseInt(req.params.id)})
  41.   console.log(stus);
  42.   res.render('student', {stus,msg: '',stu});
  43. });
  44.  
  45. //更新
  46. router.post('/update', function(req, res, next) {
  47.   //查找选中id的索引
  48.   let stuSubmit=req.body;
  49.   let stu=_.find(stus,{id:parseInt(stuSubmit.id)})
  50.   stu.name=stuSubmit.name;
  51.   stu.age=stuSubmit.age;
  52.   //重新渲染页面
  53.   res.render('student', {stus,msg: '更新成功',stu:{id:"",name:"",age:""}});
  54. });
  55.  
  56. module.exports = router;

student.ejs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>学生管理系统</title>
  8. </head>
  9. <body>
  10.     <h1>学生管理系统</h1>
  11.     <table width="100%" border="1">
  12.         <tr>
  13.             <th>编号</th>
  14.             <th>姓名</th>
  15.             <th>年龄</th>
  16.             <th>操作</th>
  17.         </tr>
  18.         <% for(let i=0;i<stus.length;i++){ %>
  19.             <tr>
  20.                 <td><%=stus[i].id%></td>
  21.                 <td><%=stus[i].name%></td>
  22.                 <td><%=stus[i].age%></td>
  23.                 <td>
  24.                     <a href="/delete/<%=stus[i].id%>" class="del">删除</a>
  25.                     <a href="/edit/<%=stus[i].id%>">修改</a>
  26.                 </td>
  27.             </tr>
  28.         <%} %>
  29.     </table>
  30.     <fieldset>
  31.         <legend>添加学生</legend>
  32.         <form method="post">
  33.             <p>
  34.                 <label>姓名：</label>
  35.                 <input type="text" name="name" value="<%=stu.name%>">
  36.             </p>
  37.             <p>
  38.                 <label>年龄：</label>
  39.                 <input type="text" name="age" value="<%=stu.age%>">
  40.             </p>
  41.             <input type="hidden" name="id" id="studentId" value="<%=stu.id%>">
  42.             <button formaction="/add">添加</button>
  43.             <button formaction="/update">更新</button>
  44.         </form>
  45.     </fieldset>
  46.  
  47.     <h4><%=msg%></h4>
  48.  
  49.     <script>
  50.       let dels=document.querySelectorAll(".del");
  51.       for(let i=0;i<dels.length;i++){
  52.         dels[i].onclick=function(){
  53.             return confirm("您确定要删除吗？");
  54.         }
  55.       }
  56.     </script>
  57. </body>
  58. </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. 音响音箱/恒温壶/电量显示/电子数字时钟等LED数码管显示驱动IC-VK1640B 8段12位/12段8位显示

    市面上最常用的数码管为七段/八段显示,八段数码管比七段数码管多一个发光二极管单元(比七段数码管多一个点),又按能显示多少个"8"可分为1位.2位.4位等等.数码管又分为共阳极驱动/ ...

  2. SP8496 NOSQ - No Squares Numbers 题解

    To SP8496 这道题可以用到前缀和思想,先预处理出所有的结果,然后 \(O(1)\) 查询即可. 注意: 是不能被 \(x^2(x≠1)\) 的数整除的数叫做无平方数. \(d\) 可以为 \( ...

  3. uniapp调用jar

    前言 此方法为使用uniapp开发前端资源,然后继承进安卓原生项目,达到调用uniapp调用jar的效果. 基于Android Studio进行开发. 本人不懂安卓以及gradle,只是基于搜索引擎以 ...

  4. C#Lambda表达式演变和Linq的深度解析

    Lambda 一.Lambda的演变 Lambda的演变,从下面的类中可以看出,.Net Framwork1.0时还是用方法实例化委托的,2.0的时候出现了匿名方法,3.0的时候出现了Lambda. ...

  5. Dubbo源码(四) - 服务引用（消费者）

    前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 上一篇文章,讲了Dubbo的服务导出: Dubbo源码(三) - 服务导出(生产者) 本文,咱们 ...

  6. Linux—搭建Apache(httpd)服务

    1.httpd简介? http是Apache超文本传输协议服务器的主程序.它是一个独立的后台进程,能够处理请求的子进程和线程. http常用用的两个版本是httpd-2.2和httpd-2.4 Cen ...

  7. .NET CORE 读书笔记之与.NET Framework对比

    .NET Framework存在的问题 它是属于系统级别安装的程序 操作系统内的所有程序共享一个.NET Framework实例,如果其中某一个应用程序需要升级Framework,其他程序也会收到影响 ...

  8. Spring源码 16 IOC refresh方法11

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  9. LibreCAD常用命令

    目录 常见命令 常见命令 .text_center { text-align: center } \3cp>.text_left { } 动作命令 命令 绘制直线 相对坐标系 @长度<角度 ...

  10. winform,获取http服务状态

    /// <summary> /// 获取http服务状态 /// </summary> /// <returns></returns> protecte ...