教你用node做学生管理系统（基本CRUD,练手必备）

Bertha 。 2022-10-31 01:00 97阅读 0赞

### 文章目录 ###

*   *  项目链接
     *  展示
     *  router路由设计思路
     *  代码
     *   *  npm配置
         *  app.js 服务启动入口
         *  db.json 学生数据
         *  router.js 路由
         *  student.js 功能封装
         *  index.html 主页面
         *  new.html 添加
         *  edit.html 编辑

## 项目链接 ##

[https://download.csdn.net/download/weixin\_45525272/15385417][https_download.csdn.net_download_weixin_45525272_15385417]

## 展示 ##

![在这里插入图片描述][20210220201707579.gif_pic_center]

## router路由设计思路 ##

不同事件请求不同内容到 router.js中进行处理

<table> 
 <thead> 
  <tr> 
   <th>请求方法</th> 
   <th>请求路径</th> 
   <th>get 参数</th> 
   <th>post 参数</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>GET</td> 
   <td>/studens</td> 
   <td></td> 
   <td></td> 
   <td>渲染首页</td> 
  </tr> 
  <tr> 
   <td>GET</td> 
   <td>/students/new</td> 
   <td></td> 
   <td></td> 
   <td>渲染添加学生页面</td> 
  </tr> 
  <tr> 
   <td>POST</td> 
   <td>/studens/new</td> 
   <td></td> 
   <td>name、age、gender、hobbies</td> 
   <td>处理添加学生请求</td> 
  </tr> 
  <tr> 
   <td>GET</td> 
   <td>/students/edit</td> 
   <td>id</td> 
   <td></td> 
   <td>渲染编辑页面</td> 
  </tr> 
  <tr> 
   <td>POST</td> 
   <td>/studens/edit</td> 
   <td></td> 
   <td>id、name、age、gender、hobbies</td> 
   <td>处理编辑请求</td> 
  </tr> 
  <tr> 
   <td>GET</td> 
   <td>/students/delete</td> 
   <td>id</td> 
   <td></td> 
   <td>处理删除请求</td> 
  </tr> 
 </tbody> 
</table>

## 代码 ##

### npm配置 ###

express 框架  
art-template 模板引擎  
express-art-template 中间件  
bootstrap 第三方样式  
body-parser post插件

# 安装必要包
    npm init -y
    npm install --save express art-template express-art-template bootstrap body-parser
    
    # 运行
    nodemon ./app.js

### app.js 服务启动入口 ###

/** * app.js 入门模块 * 职责： * 创建服务 * 做一些服务相关配置 * 模板引擎 * body-parser 解析表单 post 请求体 * 提供静态资源服务 * 挂载路由 * 监听端口启动服务 */
    
    var express = require('express')
    var router = require('./router')
    var bodyParser = require('body-parser')
    
    var app = express()
    
    app.use('/node_modules/', express.static('./node_modules/'))
    app.use('/public/', express.static('./public/'))
    
    app.engine('html', require('express-art-template'))
    
    // 配置模板引擎和 body-parser 一定要在 app.use(router) 挂载路由之前
    // parse application/x-www-form-urlencoded
    app.use(bodyParser.urlencoded({  extended: false }))
    // parse application/json
    app.use(bodyParser.json())
    
    // 把路由容器挂载到 app 服务中
    app.use(router)
    
    app.listen(3000, function () { 
      console.log('running 3000...')
    })
    
    module.exports = app

### db.json 学生数据 ###

{ "students":[{ "name":"打大萨达","gender":"0","age":"5","hobbies":"的萨尔达的境况撒谎精客户达数据库","id":5},{ "name":"李四","gender":"0","age":"45","hobbies":"烧开水","id":6},{ "name":"张qiii","gender":"0","age":"85","hobbies":"女","id":7},{ "name":"李四","gender":"0","age":"8","hobbies":"个iOS房基地噢关键是丢反加速度","id":8}]}

### router.js 路由 ###

/** * router.js 路由模块 * 职责： * 处理路由 * 根据不同的请求方法+请求路径设置具体的请求处理函数 * 模块职责要单一，不要乱写 * 我们划分模块的目的就是为了增强项目代码的可维护性 * 提升开发效率 */
    
    var fs = require('fs')
    var Student = require('./student')
    
    // Express 提供了一种更好的方式
    // 专门用来包装路由的
    var express = require('express')
    
    // 1. 创建一个路由容器
    var router = express.Router()
    
    // 2. 把路由都挂载到 router 路由容器中
    
    /* * 渲染学生列表页面 */
    router.get('/students', function (req, res) { 
      Student.find(function (err, students) { 
        if (err) { 
          return res.status(500).send('Server error.')
        }
        res.render('index.html', { 
          fruits: [
            '苹果',
            '香蕉',
            '橘子'
          ],
          students: students
        })
      })
    })
    
    /* * 渲染添加学生页面 */
    router.get('/students/new', function (req, res) { 
      res.render('new.html')
    })
    
    /* * 处理添加学生 */
    router.post('/students/new', function (req, res) { 
      // 1. 获取表单数据
      // 2. 处理
      // 将数据保存到 db.json 文件中用以持久化
      // 3. 发送响应
      Student.save(req.body, function (err) { 
        if (err) { 
          return res.status(500).send('Server error.')
        }
        res.redirect('/students')
      })
    })
    
    /* * 渲染编辑学生页面 */
    router.get('/students/edit', function (req, res) { 
      // 1. 在客户端的列表页中处理链接问题（需要有 id 参数）
      // 2. 获取要编辑的学生 id
      // 
      // 3. 渲染编辑页面
      // 根据 id 把学生信息查出来
      // 使用模板引擎渲染页面
    
      Student.findById(parseInt(req.query.id), function (err, student) { 
        if (err) { 
          return res.status(500).send('Server error.')
        }
        res.render('edit.html', { 
          student: student
        })
      })
    })
    
    /* * 处理编辑学生 */
    router.post('/students/edit', function (req, res) { 
      // 1. 获取表单数据
      // req.body
      // 2. 更新
      // Student.updateById()
      // 3. 发送响应
      Student.updateById(req.body, function (err) { 
        if (err) { 
          return res.status(500).send('Server error.')
        }
        res.redirect('/students')
      })
    })
    
    /* * 处理删除学生 */
    router.get('/students/delete', function (req, res) { 
      // 1. 获取要删除的 id
      // 2. 根据 id 执行删除操作
      // 3. 根据操作结果发送响应数据
    
      Student.deleteById(req.query.id, function (err) { 
        if (err) { 
          return res.status(500).send('Server error.')
        }
        res.redirect('/students')
      })
    })
    
    // 3. 把 router 导出
    module.exports = router

### student.js 功能封装 ###

/** * student.js * 数据操作文件模块 * 职责：操作文件中的数据，只处理数据，不关心业务 * * 这里才是我们学习 Node 的精华部分：奥义之所在 * 封装异步 API */
    
    var fs = require('fs')
    
    var dbPath = './db.json'
    
    /** * 获取学生列表 * @param {Function} callback 回调函数 */
    exports.find = function (callback) { 
      fs.readFile(dbPath, 'utf8', function (err, data) { 
        if (err) { 
          return callback(err)
        }
        callback(null, JSON.parse(data).students)
      })
    }
    
    
    
    /** * 根据 id 获取学生信息对象 * @param {Number} id 学生 id * @param {Function} callback 回调函数 */
    exports.findById = function (id, callback) { 
      fs.readFile(dbPath, 'utf8', function (err, data) { 
        if (err) { 
          return callback(err)
        }
        var students = JSON.parse(data).students
        var ret = students.find(function (item) { 
          return item.id === parseInt(id)
        })
        callback(null, ret)
      })
    }
    
    /** * 添加保存学生 * @param {Object} student 学生对象 * @param {Function} callback 回调函数 */
    exports.save = function (student, callback) { 
      fs.readFile(dbPath, 'utf8', function (err, data) { 
        if (err) { 
          return callback(err)
        }
        var students = JSON.parse(data).students
    
        // 添加 id ，唯一不重复
        student.id = students[students.length - 1].id + 1
    
        // 把用户传递的对象保存到数组中
        students.push(student)
    
        // 把对象数据转换为字符串
        var fileData = JSON.stringify({ 
          students: students
        })
    
        // 把字符串保存到文件中
        fs.writeFile(dbPath, fileData, function (err) { 
          if (err) { 
            // 错误就是把错误对象传递给它
            return callback(err)
          }
          // 成功就没错，所以错误对象是 null
          callback(null)
        })
      })
    }
    
    /** * 更新学生 */
    exports.updateById = function (student, callback) { 
      fs.readFile(dbPath, 'utf8', function (err, data) { 
        if (err) { 
          return callback(err)
        }
        var students = JSON.parse(data).students
    
        // 注意：这里记得把 id 统一转换为数字类型
        student.id = parseInt(student.id)
    
        // 你要修改谁，就需要把谁找出来
        // EcmaScript 6 中的一个数组方法：find
        // 需要接收一个函数作为参数
        // 当某个遍历项符合 item.id === student.id 条件的时候，find 会终止遍历，同时返回遍历项
        var stu = students.find(function (item) { 
          return item.id === student.id
        })
    
        // 这种方式你就写死了，有 100 个难道就写 100 次吗？
        // stu.name = student.name
        // stu.age = student.age
    
        // 遍历拷贝对象
        for (var key in student) { 
          stu[key] = student[key]
        }
    
        // 把对象数据转换为字符串
        var fileData = JSON.stringify({ 
          students: students
        })
    
        // 把字符串保存到文件中
        fs.writeFile(dbPath, fileData, function (err) { 
          if (err) { 
            // 错误就是把错误对象传递给它
            return callback(err)
          }
          // 成功就没错，所以错误对象是 null
          callback(null)
        })
      })
    }
    
    /** * 删除学生 */
    exports.deleteById = function (id, callback) { 
      fs.readFile(dbPath, 'utf8', function (err, data) { 
        if (err) { 
          return callback(err)
        }
        var students = JSON.parse(data).students
    
        // findIndex 方法专门用来根据条件查找元素的下标
        var deleteId = students.findIndex(function (item) { 
          return item.id === parseInt(id)
        })
    
        // 根据下标从数组中删除对应的学生对象
        students.splice(deleteId, 1)
    
        // 把对象数据转换为字符串
        var fileData = JSON.stringify({ 
          students: students
        })
    
        // 把字符串保存到文件中
        fs.writeFile(dbPath, fileData, function (err) { 
          if (err) { 
            // 错误就是把错误对象传递给它
            return callback(err)
          }
          // 成功就没错，所以错误对象是 null
          callback(null)
        })
      })
    }

### index.html 主页面 ###

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../favicon.ico">
      <title>学生信息管理系统</title>
      
      <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      
      <link href="/public/css/main.css" rel="stylesheet">
      <style> body { background-color: pink; } </style>
    </head>
    <body>
      <div class="container">
        <div class="row container">
          <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">学生信息管理系统</h1>
            <h2 class="sub-header">首页</h2>
            <a class="btn btn-success" href="/students/new">添加学生</a>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>爱好</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {
       { each students }}
                  <tr>
                    <td>{
       { $value.id }}</td>
                    <td>{
       { $value.name }}</td>
                    <td>{
       { $value.gender }}</td>
                    <td>{
       { $value.age }}</td>
                    <td>{
       { $value.hobbies }}</td>
                    <td>
                      <a href="/students/edit?id={ { $value.id }}">编辑</a>
                      <a href="/students/delete?id={ { $value.id }}">删除</a>
                    </td>
                  </tr>
                  {
       { /each }}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </body>
    
    </html>

### new.html 添加 ###

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../favicon.ico">
      <title>添加学生信息</title>
      
      <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      
      <link href="/public/css/main.css" rel="stylesheet">
        <style> body { background-color: pink; } </style>
    </head>
    <body>
      <div class="container">
        <div class="row">
          <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="sub-header">添加学生</h2>
            <form action="/students/new" method="post">
              <div class="form-group">
                <label for="">姓名</label>
                <input type="text" class="form-control" id="" name="name" required minlength="2" maxlength="10">
              </div>
              <div class="form-group">
                <label for="">性别</label>
                <div>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="" value="0" checked> 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="" value="1"> 女
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label for="">年龄</label>
                <input class="form-control" type="number" id="" name="age" required min="1" max="150">
              </div>
              <div class="form-group">
                <label for="">爱好</label>
                <input class="form-control" type="text" id="" name="hobbies">
              </div>
              <button type="submit" class="btn btn-success">提交</button>
            </form>
          </div>
        </div>
      </div>
    </body>
    
    </html>

### edit.html 编辑 ###

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <meta name="description" content="">
      <meta name="author" content="">
      <link rel="icon" href="../../favicon.ico">
      <title>编辑学生信息</title>
      
      <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
      
      <link href="/public/css/main.css" rel="stylesheet">
      <style> body { background-color: pink; } </style>
    </head>
    
    <body>
      <div class="container">
        <div class="row">
          <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="sub-header">添加学生</h2>
            <form action="/students/edit" method="post">
              
              <input type="hidden" name="id" value="{ { student.id }}">
              <div class="form-group">
                <label for="">姓名</label>
                <input type="text" class="form-control" id="" name="name" required minlength="2" maxlength="10" value="{ { student.name }}">
              </div>
              <div class="form-group">
                <label for="">性别</label>
                <div>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="" value="0" checked> 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" id="" value="1"> 女
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label for="">年龄</label>
                <input class="form-control" type="number" id="" name="age" value="{ { student.age }}" required min="1" max="150">
              </div>
              <div class="form-group">
                <label for="">爱好</label>
                <input class="form-control" type="text" id="" name="hobbies" value="{ { student.hobbies }}">
              </div>
              <button type="submit" class="btn btn-success">提交</button>
            </form>
          </div>
        </div>
      </div>
    </body>
    
    </html>

[https_download.csdn.net_download_weixin_45525272_15385417]: https://download.csdn.net/download/weixin_45525272/15385417
[20210220201707579.gif_pic_center]: /images/20221024/765af9a7b3f94d96bf5a15ba87dd41c1.png