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. ACWing94.递归实现指数型枚举

    https://www.acwing.com/problem/content/description/94/ 题面 \92. 递归实现指数型枚举 从 1∼n 这 n 个整数中随机选取任意多个,输出所有 ...

  2. Vue3系列11--Teleport传送组件

    Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,不受父级style.v-show等属性影响,但data.prop数据依旧能够共用的技术:类似于 Rea ...

  3. 案例复现，带你分析Priority Blocking Queue比较器异常导致的NPE问题

    摘要:本文通过完整的案例复现来演示在什么情况会触发该问题,同时给出了处理建议.希望读者在编程时加以借鉴,避免再次遇到此类问题. 本文分享自华为云社区<Priority Blocking Queu ...

  4. MySQL 数据查询语句

    一般查询 字段取别名 别名不用加单引号,as 可省略. select t.id ID, t.name 名称 from grade t; 拼接字符串 concat(a, b) select concat ...

  5. Web 布局设计（一）：固定侧边栏

    前言 闲着无事,做一些实战练习,今天实现一个如标题所示的布局设计.通过此次布局设计,我希望掌握position属性值 fixed.absolute.relative.width和height属性值 i ...

  6. 介绍下Java内存区域（运行时数据区）

    介绍下Java内存区域(运行时数据区) Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域.JDK 1.8 和之前的版本略有不同. 下图是 JDK 1.8 对JV ...

  7. linux scsi相关的一些学习笔记

      最近看scsi相关处理的一些备忘,比较零碎,仅作参考. 先从最显而易见的打印入手: [0:0:0:0] disk ATA INTEL SSDSC2BX20 0150 - [0:0:1:0] dis ...

  8. 使用RandomAccessFile实现数据的插入效果

    @Testpublic void test3() { RandomAccessFile raf1 = null; try { raf1 = new RandomAccessFile("hel ...

  9. 简易的AutoPlayCarousel 轮播控件

    原理是使用StackPanel 的margin属性的偏移来实现轮播的效果 废话不多说直接上代码 AutoPlayCarousel核心代码 [ContentProperty(nameof(Childre ...

  10. 高颜值，类似Fliqlo的翻页时钟-BdTab新标签页插件组件

    起因: 很多用户在使用BdTab插件时,反馈说希望添加一个时钟的功能, 而BdTab又是组件模块化的插件,于是在空余时间就用html+js+css写了一款高颜值的分页时钟 源码如下: 需要其他网页组件 ...