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. 如何使用API接口批量查询图书信息？

    之前小编讲过在Excel表格中根据ISBN查询图书信息可以使用我们的图书查询公式,但偶然间发现少部分书籍由于年份久远导致查不出来,今天小编就教给大家另一种查询图书信息的方式,即通过API接口返回的JS ...

  2. 输出以二叉树表示的算术表达式（严6.51）--------西工大noj

    题解 这道题目说的很诡异,其实没有什么把括号补上....仅仅是先序读入,然后中序输出就行了 代码 #include <stdio.h> #include <stdlib.h> ...

  3. linux学习随笔

    date +%Y-%m-%d\ %H:%M:%S cal 10 2009 yum install bc //计算器 bc 安装thefuck yum install gcc gcc++ python ...

  4. 智慧文旅IOC大数据可视化建设方案

    一.建设背景 自2020年以来,疫情对各行各业的都造成了不同程度的影响,对依赖人口消费实现商业价值的文旅行业更是受到了更大的冲击,因此在疫情当下以及科技发达的今天,如何利用科技的手段赋能文旅行业进行数 ...

  5. .NET 扩展 官方 Logger 实现将日志保存到本地文件

    .NET 项目默认情况下 日志是使用的 ILogger 接口,默认提供一下四种日志记录程序: 控制台 调试 EventSource EventLog 这四种记录程序都是默认包含在 .NET 运行时库中 ...

  6. flutter系列之:用来管理复杂状态的State详解

    目录 简介 StatefuWidget和State State的生命周期 总结 简介 Flutter的基础是widget,根据是否需要跟用户进行交互,widget则可以分为StatelessWidge ...

  7. 最大连续子序列（简单DP实现）

    最大连续子序列 最大连续子数列和一道很经典的算法问题,给定一个数列,其中可能有正数也可能有负数,我们的任务是找出其中连续的一个子数列(不允许空序列),使它们的和尽可能大.我们一起用多种方式,逐步优化解 ...

  8. 漂亮简洁的PHP导航源码-蘑菇导航

    蘑菇导航 蘑菇导航是根据SimpleWebNavigation修改而来的一个php网址导航.支持php8,支持左侧锚点,支持自定义fontawesome图标. 可以作为群组导航.图床导航.vps导航等 ...

  9. KingbaseES R6 集群主机锁冲突导致的主备切换案例

    ​ 案例说明: 主库在业务高峰期间,客户执行建表等DDL操作,主库产生"AccessExclusiveLock "锁,导致大量的事务产生锁冲突,大量的会话堆积,客户端session ...

  10. lombok Builder注解

    使用了@Builder 将会失去无参构造函数 可以通过 @Tolerate 来添加构造函数