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. Centos7 安装mysql服务器并开启远程访问功能

    大二的暑假,波波老师送了一个华为云的服务器给我作测试用,这是我程序员生涯里第一次以root身份拥有一台真实的云服务器 而之前学习的linux知识在这时也派上了用场,自己的物理机用的是ubuntu系统, ...

  2. 类型转换_float()函数

    float()函数不能将文字类的字符串类型转换成小数类型 同时将整数转换成浮点数类型的时候会在整数后买你加上.0 print(float(1))//output:1.0 print(float('1' ...

  3. 基于EasyExcel的大数据量导入并去重

    源码:https://gitee.com/antia11/excel-data-import-demo 背景:客户需要每周会将上传一个 Excel 数据文件,数据量单次为 20W 以上,作为其他模块和 ...

  4. Clickhouse 实现 MaterializedPostgreSQL

    Clickhouse 实现 MaterializedPostgreSQL 开发环境:macOS 12.4 + docker 一.环境搭建 docker-compose.yml services: po ...

  5. python 生成Windows快捷方式

    此处以虚拟机镜像快捷方式为例 link_filepath:快捷方式的生成路径 win32_cmd:需要执行的应用程序 arg_str:exe的参数 快捷方式的目标:由win32_cmd + arg_s ...

  6. 使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_130 之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用v ...

  7. GTID主从和lamp架构运行原理

    目录 GTID主从 GTID概念介绍 GTID工作原理 GTID主从配置 lamp lamp简介 web服务器工作流程 cgi与fastcgi http协议 是什么? lamp架构运行的原理 Apac ...

  8. ETCD快速入门-01 ETCD概述

    1.ETCD概述 1.1 ETCD概述     etcd是一个高可用的分布式的键值对存储系统,常用做配置共享和服务发现.由CoreOS公司发起的一个开源项目,受到ZooKeeper与doozer启发而 ...

  9. ETCD快速入门-02 ETCD安装

    2.ETCD安装     etcd 安装可以通过源码构建也可以使用官方构建的二进制文件进行安装.我们以二进制文件为例,系统为CentOS 7.9,操作步骤如下所示: 2.1 Linux ETCD_VE ...

  10. 使用xshell linux安装nodejs,CentOS下安装并配置nodejs环境教程

    1. 下载node最新版本 : 连接   https://nodejs.org/zh-cn/(查看node最新版本) 在跟目录root下,命令行输入: wget https://nodejs.org/ ...