一、项目介绍

①使用nodejs+bootstrap开发

②对文件进行合理的模块化

③实现基本的增删改查功能

二、思路

①处理模块，处理模块，配置开发静态资源，配置模块引擎

②路由设计，提取路由模块

③单独的文件用于封装一些方法：查找学生数据，保存学生数据，更新学生数据，删除学生数据

④单独的路由模块实现具体功能：通过路由接收请求，调用数据操作API处理数据，发送操作结果给客户端

三、功能实现

①目录

②npm安装的包

③代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>管理系统</title>
  6.     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9.     <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
  10.         <a class="navbar-brand" href="#">学生管理系统</a>
  11.     </nav>
  12.     <main class="container mt-5">
  13.         <h1 class="alert-heading">学生管理
  14.             <a class="btn btn-link btn-sm" href="/students/new">添加学生</a>
  15.         </h1>
  16.         <table class="table table-hover">
  17.             <thead>
  18.                 <tr>
  19.                     <th>ID</th>
  20.                     <th>姓名</th>
  21.                     <th>性别</th>
  22.                     <th>年龄</th>
  23.                     <th>爱好</th>
  24.                     <th class="text-center" width="140">操作</th>
  25.                 </tr>
  26.             </thead>
  27.             <tbody>
  28.                 {{each students}}
  29.                 <tr>
  30.                   <td>{{$value.id}}</td>
  31.                   <td>{{$value.name}}</td>
  32.                   <td>{{$value.gender}}</td>
  33.                   <td>{{$value.age}}</td>
  34.                   <td>{{$value.hobbies}}</td>
  35.                   <td>
  36.                     <a href="/students/edit?id={{$value.id}}">编辑</a>
  37.                     <a href="/students/delete?id={{$value.id}}">删除</a>
  38.                   </td>
  39.                 </tr>
  40.                 {{/each}}
  41.             </tbody>
  42.         </table>
  43.         <ul class="pagination justify-content-center">
  44.             <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
  45.             <li class="page-item"><a class="page-link" href="#">1</a></li>
  46.             <li class="page-item"><a class="page-link" href="#">2</a></li>
  47.             <li class="page-item"><a class="page-link" href="#">3</a></li>
  48.             <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
  49.         </ul>
  50.     </main>
  51. </body>
  52. </html>

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>添加学生</title>
  6.     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9.     <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
  10.         <a href="#" class="navbar-brand">学生管理系统</a>
  11.     </nav>
  12.     <main class="container mt-5">
  13.         <h1 class="alert-heading">添加学生</h1>
  14.         <form action="/students/new" method="post" autocomplete="off">
  15.             <div class="form-group">
  16.                 <label for="name">姓名</label>
  17.                 <input type="text" name="name" id="name" class="form-control">
  18.             </div>
  19.             <div class="form-group">
  20.                 <label for="gender" class="radio-inline">性别</label><br>
  21.                 <input type="radio" name="gender" value="0" id="gender">男&nbsp;&nbsp;&nbsp;
  22.                 <input type="radio" name="gender" value="1" id="gender">女
  23.             </div>
  24.             <div class="form-group">
  25.                 <label for="age">年龄</label>
  26.                 <input type="number" name="age" id="age" class="form-control">
  27.             </div>
  28.             <div class="form-group">
  29.                     <label for="hobbies">爱好</label>
  30.                     <input type="text" name="hobbies" id="hobbies" class="form-control">
  31.             </div>
  32.             <button class="btn btn-primary">保存</button>
  33.         </form>
  34.     </main>
  35. </body>
  36. </html>

new.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>添加学生</title>
  6.     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9.     <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
  10.         <a href="#" class="navbar-brand">学生管理系统</a>
  11.     </nav>
  12.     <main class="container mt-5">
  13.         <h1 class="alert-heading">添加学生</h1>
  14.         <form action="/students/edit" method="post" autocomplete="off">
  15.             <div class="form-group">
  16.                 <label for="id"></label>
  17.                 <input type="hidden" name="id" id="id" class="form-control" value="{{student.id}}">
  18.             </div>
  19.             <div class="form-group">
  20.                 <label for="name">姓名</label>
  21.                 <input type="text" name="name" id="name" class="form-control" value="{{student.name}}" >
  22.             </div>
  23.             <div class="form-group">
  24.                 <label for="gender" class="radio-inline">性别</label><br>
  25.                 <input type="radio" name="gender" value="0" id="gender">男&nbsp;&nbsp;&nbsp;
  26.                 <input type="radio" name="gender" value="1" id="gender">女
  27.             </div>
  28.             <div class="form-group">
  29.                 <label for="age">年龄</label>
  30.                 <input type="number" name="age" id="age" class="form-control" value="{{student.age}}">
  31.             </div>
  32.             <div class="form-group">
  33.                     <label for="hobbies">爱好</label>
  34.                     <input type="text" name="hobbies" id="hobbies" class="form-control" value="{{student.hobbies}}">
  35.             </div>
  36.             <button class="btn btn-primary">保存</button>
  37.         </form>
  38.     </main>
  39. </body>
  40. </html>

edit.html

  1. {
  2.     "students": [{
  3.         "id": 1,
  4.         "name": "赵一",
  5.         "gender": 0,
  6.         "age": 18,
  7.         "hobbies": "足球"
  8.     }, {
  9.         "id": 2,
  10.         "name": "孙二",
  11.         "gender": 1,
  12.         "age": 20,
  13.         "hobbies": "篮球"
  14.     }, {
  15.         "id": 3,
  16.         "name": "张三",
  17.         "gender": 0,
  18.         "age": 30,
  19.         "hobbies": "彩票"
  20.     }, {
  21.         "id": 4,
  22.         "name": "李四",
  23.         "gender": 1,
  24.         "age": 25,
  25.         "hobbies": "代码"
  26.     }, {
  27.         "id": 5,
  28.         "name": "王五",
  29.         "gender": 0,
  30.         "age": 10,
  31.         "hobbies": "游戏"
  32.     }]
  33. }

db.json

  1. /**
  2.  * app.js入口模块:
  3.  * 1.创建服务,
  4.  * 2.服务相关配置:模板引擎,body-parser配置,静态服务资源,挂载路由
  5.  * 3.监听端口启动服务
  6.  */
  7. //npm安装并加载express
  8. var express=require('express');
  9. var app=express();
  10. // 加载路由模块
  11. var router=require('./router');
  12. // npm安装并加载body-parser
  13. var bodyParser=require('body-parser');
  14. //公开node_modules和public目录
  15. app.use('/node_modules/',express.static('./node_modules/'));
  16. app.use('/public/',express.static('./public/'));
  17. // npm安装art-template和express-art-template并配置express-art-template(需要在挂载路由之前)
  18. app.engine('html',require('express-art-template'));
  19. // 配置body-parser(需要在挂载路由之前)
  20. app.use(bodyParser.urlencoded({extended:false}));
  21. app.use(bodyParser.json());
  22. // 挂载路由
  23. app.use(router);
  24. // 绑定端口
  25. app.listen(3000,function(){
  26.     console.log('server is running at port 3000...')
  27. });

app.js

  1. /**
  2.  * router.js路由模块:
  3.  * 处理路由,根据不同的请求方法或者请求路径设置具体的返回数据
  4.  */
  5. // 加载相关模块
  6. var fs=require('fs');
  7. var express=require('express');
  8. var Student=require('./student');
  9. // 创建一个路由容器
  10. var router=express.Router();
  11. /** 路由设计:
  12.  * 请求方法 ==== 请求路径 ==== 参数  =====备注
  13.  * GET ==== /students ==== 参数无 ====渲染首页
  14.  * GET ==== /students/new ===== 参数无 ======渲染添加学生页面
  15.  * POST ==== /students/new ===== 参数name,age,gender,hobbies ======添加学生页面提交表单
  16.  * GET ==== /students/edit ===== 参数id ======渲染编辑页面
  17.  * POST ==== /students/edit ===== 参数id,name,age,gender,hobbies ======编辑学生页面表单提交
  18.  * GET ==== /students/delete ===== 参数id ======处理删除请求
  19.  */
  20. // 处理路由:把路由都挂载到路由容器
  21. router.get('/students',function(req,res){
  22.     Student.find(function(err,students){
  23.         if(err){
  24.             return res.status(500).send('server error')
  25.         }
  26.         res.render('index.html',{
  27.             students:students
  28.         })
  29.     });
  30. });
  31. router.get('/students/new',function(req,res){
  32.     res.render('new.html')
  33. });
  34. router.post('/students/new',function(req,res){
  35.     // 获取表单数据-->处理(保存到db.json)-->发送响应
  36.     Student.save(req.body,function(err){
  37.         if(err){
  38.             return res.status(500).send('server error')
  39.         }
  40.         res.redirect('/students')
  41.     })
  42. });
  43. router.get('/students/edit',function(req,res){
  44.     Student.findById(parseInt(req.query.id),function(err,student){
  45.         if(err){
  46.             return res.status(500).send('server error')
  47.         }
  48.         res.render('edit.html',{
  49.             student:student
  50.         });
  51.     });
  52. });
  53. router.post('/students/edit',function(req,res){
  54.     Student.updateById(req.body,function(err){
  55.         if(err){
  56.             return res.status(500).send('server error')
  57.         }
  58.         res.redirect('/students')
  59.     })
  60. });
  61. router.get('/students/delete',function(req,res){
  62.     Student.deleateById(req.query.id,function(err){
  63.         if(err){
  64.             return res.status(500).send('server error')
  65.         }
  66.         res.redirect('/students')
  67.     });
  68. });
  69. // 把路由导出
  70. module.exports=router;

router.js

  1. /**
  2.  * student.js模块:
  3.  * 用于数据操作,只处理数据,不关心业务
  4.  */
  5. // 加载相关模块
  6. var fs=require('fs');
  7. var dbPath='./db.json';
  8. // 获取所有学生数据列表
  9. exports.find=function(callback){
  10.     // callback有两个参数:第一个是err,第二个是data
  11.     fs.readFile(dbPath,'utf8',function(err,data){
  12.         if(err){
  13.             return(callback(err))
  14.         }
  15.         callback(null,JSON.parse(data).students)
  16.     });
  17. };
  18. // 根据id获取学生信息对象
  19. exports.findById=function(id,callback){
  20.     fs.readFile(dbPath,'utf8',function(err,data){
  21.         if(err){
  22.             return callback(err)
  23.         }
  24.         var students=JSON.parse(data).students;
  25.         var ret=students.find(function(item){
  26.             return item.id===parseInt(id)
  27.         });
  28.         callback(null,ret)
  29.     });
  30. }
  31. // 添加保存学生数据列表
  32. exports.save=function(student,callback){
  33.     fs.readFile(dbPath,'utf8',function(err,data){
  34.         if(err){
  35.             return callback(err)
  36.         }
  37.         var students=JSON.parse(data).students
  38.         // 处理id唯一的,不重复
  39.         student.id=students[students.length-1].id+1
  40.         // 保存到数组
  41.         students.push(student)
  42.         // 转为字符串
  43.         var fileDate=JSON.stringify({students:students})
  44.         // 保存到文件
  45.         fs.writeFile(dbPath,fileDate,function(err){
  46.             if(err){
  47.                 return callback(err)
  48.             }
  49.             callback(null)
  50.         })
  51.     });
  52. };
  53. // 更新学生数据列表
  54. exports.updateById=function(student,callback){
  55.     fs.readFile(dbPath,'utf8',function(err,data){
  56.         if(err){
  57.             return callback(err)
  58.         }
  59.         var students=JSON.parse(data).students;
  60.         student.id=parseInt(student.id);
  61.         // find 是ecmascript6的方法
  62.         var stu=students.find(function(item){
  63.             return item.id===student.id
  64.         });
  65.         // 遍历拷贝对象
  66.         for(var key in student){
  67.             stu[key]=student[key]
  68.         }
  69.         // 把对象数据转为字符串
  70.         var fileDate=JSON.stringify({
  71.             students:students
  72.         });
  73.         // 保存到文件
  74.         fs.writeFile(dbPath,fileDate,function(err){
  75.             if(err){
  76.                 return callback(err)
  77.             }
  78.             callback(null)
  79.         });
  80.     });
  81. };
  82. // 删除学生数据
  83. exports.deleateById = function(id,callback){
  84.     fs.readFile(dbPath,'utf8',function(err,data){
  85.         if(err){
  86.             return callback(err)
  87.         }
  88.         var students=JSON.parse(data).students;
  89.         var deleteId=students.findIndex(function(item){
  90.             return item.id===parseInt(id)
  91.         });
  92.         students.splice(deleteId,1);
  93.         var fileDate=JSON.stringify({students:students});
  94.         fs.writeFile(dbPath,fileDate,function(err){
  95.             if(err){
  96.                 return callback(err)
  97.             }
  98.             callback(null)
  99.         });
  100.     })
  101. }

student.js

  1. {
  2.   "name": "Code",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "app.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "art-template": "^4.12.2",
  14.     "body-parser": "^1.18.3",
  15.     "bootstrap": "^4.1.1",
  16.     "express": "^4.16.3",
  17.     "express-art-template": "^1.0.1"
  18.   }
  19. }

package.json

③效果展示

学生管理系统(Nodejs)的更多相关文章

  1. 【IOS开发笔记02】学生管理系统

    端到端的机会 虽然现在身处大公司,但是因为是内部创业团队,产品.native.前端.服务器端全部坐在一起开发,大家很容易做零距离交流,也因为最近内部有一个前端要转岗过来,于是手里的前端任务好像可以抛一 ...

  2. 【IOS开发笔记01】学生管理系统（上）

    端到端的机会 虽然现在身处大公司,但是因为是内部创业团队,产品.native.前端.服务器端全部坐在一起开发,大家很容易做零距离交流,也因为最近内部有一个前端要转岗过来,于是手里的前端任务好像可以抛一 ...

  3. C程序范例（2）——学生管理系统”链表“实现

    1.对于学生管理系统,能够实现的方法有许多,但是今天我们用链表的方法来实现.虽然初学者很可能看不懂,但是不要紧,这是要在整体的系统的学习完C语言之后,我才编写出的程序.所以大家不必要担心.在这里与大家 ...

  4. jsp学习之基于mvc学生管理系统的编写

    mvc开发模式:分别是 model层 view层 Control层 在学生管理系统中,model层有学生实体类,数据访问的dao层,view层主要是用于显示信息的界面,Control层主要是servl ...

  5. java版本的学生管理系统

    import java.awt.BorderLayout; import java.awt.Color; import java.awt.Frame; import java.awt.event.Ac ...

  6. 学生管理系统-火车订票系统 c语言课程设计

    概要: C 语言课程设计一---学生管理系统 使使用 C 语言实现学生管理系统.系统实现对学生的基本信息和考试成绩的 管理.采用终端命令界面,作为系统的输入输出界面.采用文件作为信息存储介质. 功能描 ...

  7. Java学生管理系统项目案例

    这是一个不错的Java学生管理系统项目案例,希望能够帮到大家的学习吧. 分代码如下 package com.student.util; import java.sql.Connection; impo ...

  8. Java+Mysql+学生管理系统

    最近正在学java和数据库,想起以前写的学生管理系统,都是从网上下载,敷衍了事.闲来无事,也就自己写了一个,不过功能实现的不是很多. 开发语言:java: 开发环境:Mysql, java: 开发工具 ...

  9. JDBC学生管理系统--处理分页显示

    分页的思想: 假设一共有104条数据,每页显示10条数据: select * from student limit 0,10; 页数是index,第index页,对应的sql语句是: select * ...

随机推荐

  1. 部署.Net Core APi+Vue 到 linux centos 服务器（一）

    部署.Net Core APi+Vue 到 linux centos 服务器(一) 前言:项目采用的是 .net core 作为接口,vue作为前端. 此时需要把整个项目架设到linux centos ...

  2. win10下更新anaconda和pip源

    第一步:更新anaconda源. anaconda的官方源太慢,推荐清华源:https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 软件下载也可以在这个 ...

  3. Openstack Sahara组件和架构简介

    1.简介 Apache Hadoop是目前被广泛使用的主流大数据处理计算框架,Sahara项目旨在使用用户能够在Openstack平台上便于创建和管理Hadoop以及其他计算框架集群,实现类似AWS的 ...

  4. C语言 - 可变参数再stm32中的应用

    参考 C 可变参数 | 菜鸟教程 void func(const char* str,...) { ... } func的最后一个参数写成 ... ,表示可变参数, C语言的printf就是类似这种声 ...

  5. 异常来自 HRESULT:0x8007000B

    这个是64位应用32位产生的问题.相信大家搜索的时候很多都是建议改把项目的AnyCPU改成X86,可是很不幸我的改不了. 终于搜索了半天后发现,IIS里解决才是根本办法: .在IIS配置里面启用32位 ...

  6. [转]Sublime Text 3安装Json格式化插件

    1.安装Package control 首先需要安装Package control,如果已经安装请跳过此步骤.按Ctrl+Shift+p打开命令搜索框,输入PC,点击图中条目安装,如下图:   成功后 ...

  7. ElementUI table中el-table-column怎么设置百分比显示。

    看文档找到一种方法,是把 width 换成 min-width ,就支持百分比显示啦 !

  8. 创建Spring boot project报错：Project build error: Non-resolvable parent POM for xxx:0.0.1-SNAPSHOT: Could not transfer artifact org.springframework.boot:spring-boot-starter-parent

    刚开始创建Spring boot项目时,pom.xml文件时报如下图错误: 在网上百度的说让更新下Maven的update project,我试了没用,最后将version版本改了就行了,我原来版本是 ...

  9. Android开发常用开源框架：图片处理

    https://blog.csdn.net/SGQ_CSDN/article/details/79910709 Android开发常用开源框架:图片处理 框架名称 功能描述 Android Unive ...

  10. Java读书笔记

    一.背景 工作中越来越发现对基础理解的重要性,所谓基础不牢,地动山摇.所以抽了点时间看看几本Java体系的电子书,并做笔记,如下: 二.近期要看的电子书 1.Spring实战(第4版) 2.Sprin ...