Node.js学习笔记----day04之学生信息管理系统

认真学习，认真记录，每天都要有进步呀！！！

加油叭！！！

一、起步

项目结构

安装需要的包
初始化显示index.html

index.html

var express = require('express')

var app = express()

app.use('/node_modules/', express.static('./node_modules/'))

app.use('/public/', express.static('./public/'))

app.engine('html', require('express-art-template'))

app.get('/',function (req,res) {

   res.render('index.html',{

   	fruit:[

   	'苹果',

   	'香蕉',

   	'橘子'

   	]

   })

 })

app.listen(3000, function () {

  console.log('running 3000...')

})

<!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">

  <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 container">

  <h2 class="sub-header">学生信息系统</h2>

<a class="btn btn-success" href="/students/new">添加学生</a>

<table class="table">

  <thead class="thead-light">

    <tr>

      <th scope="col">#</th>

      {{each fruit}}

       <th scope="col">{{$value}}</th>

      {{/each}}

     <!--  <th scope="col">First</th>

      <th scope="col">Last</th>

      <th scope="col">Handle</th> -->

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">1</th>

      <td>Mark</td>

      <td>Otto</td>

      <td>@mdo</td>

    </tr>

    <tr>

      <th scope="row">2</th>

      <td>Jacob</td>

      <td>Thornton</td>

      <td>@fat</td>

    </tr>

    <tr>

      <th scope="row">3</th>

      <td>Larry</td>

      <td>the Bird</td>

      <td>@twitter</td>

    </tr>

  </tbody>

</table>

</div>

</body>

</html>

来吧展示：

二、从文件中读取数据

直接写入json数据渲染页面

app.js

app.get('/',function (req,res) {

   res.render('index.html',{

   	// fruit:[

   	// '苹果',

   	// '香蕉',

   	// '橘子',

   	// ]

   	students:[

	{"id":1,"name":"张三","gender":0,"age":18,"hobbies":"吃饭，睡觉，打豆豆"},

	{"id":2,"name":"张三","gender":0,"age":18,"hobbies":"吃饭，睡觉，打豆豆"},

	{"id":3,"name":"张三","gender":0,"age":18,"hobbies":"吃饭，睡觉，打豆豆"},

	{"id":4,"name":"张三","gender":0,"age":18,"hobbies":"吃饭，睡觉，打豆豆"},

	{"id":5,"name":"张三","gender":0,"age":18,"hobbies":"吃饭，睡觉，打豆豆"},

	{"id":6,"name":"张三","gender":0,"age":18,"hobbies":"吃饭，睡觉，打豆豆"}

	]

   })

 })

index.html

<table class="table">

  <thead class="thead-light">

    <tr>

    <th scope="col">id</th>

    <th scope="col">姓名</th>

    <th scope="col">性别</th>

    <th scope="col">年龄</th>

    <th scope="col">兴趣</th>

    </tr>

  </thead>

  <tbody>

    {{each students}}

    <tr>

      <th scope="row">{{$value.id}}</th>

      <td>{{$value.name}}</td>

      <td>{{$value.gender}}</td>

      <td>{{$value.age}}</td>

      <td>{{$value.hobbies}}</td>

    </tr>

    {{/each}}

  </tbody>

</table>

来吧展示：

2. 通过fs.readFile()读取db.json文件渲染页面

var fs = require('fs')

fs.readFile('./db.json','utf8',function(err,data){

	if(err){

		return res.status(500).send('Server error...')

	}

	console.log(data)

})

打印结果是：

app.get('/',function (req,res) {

	fs.readFile('./db.json','utf8',function(err,data){

	   if(err){

		return res.status(500).send('Server error...')

	    }

	   res.render('index.html',{

	   students:JSON.parse(data).students

	   })

    })

})

三、设计路由

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

四、把路由都挂载到路由容器中

路由模块的职责

处理路由，根据不同的请求方法 + 路径设置具体的请求处理函数

模块职责要单一，不要乱写

划分模块的目的就是为了增加代码的可维护性，提高开发效率

方式一（不推荐）：

当node执行app.js的时候，页面不能正常显示

当node执行router.js的时候，页面能正常显示

方式二（也不推荐）

方式三

Express提供了一种更好的方式，专门用来包装路由的

创建一个路由容器

var router = express.Router()

把路由都挂载到 router 路由容器中
把 router 导出

module.exports = router

把路由容器挂载到 app 服务中

app.use(router)

来吧展示：

整合一下 router.js，

var fs = require('fs')

var express = require('express')

//1. 创建一个路由容器

var router = express.Router()

//2. 把路由都挂载到 router 路由容器中

router.get('/students',function (req,res) {

	fs.readFile('./db.json','utf8',function(err,data){

	   if(err){

		return res.status(500).send('Server error...')

	    }

	   res.render('index.html',{

	   students:JSON.parse(data).students

	   })

    })

 })

router.get('/students/new',function (req,res) {

 })

router.post('/students/new',function (req,res) {

 })

router.get('/students/edit',function (req,res) {

 })

router.post('/students/edit',function (req,res) {

 })

router.get('/students/delete',function (req,res) {

 })

//3. 把 router 导出

module.exports = router

五、处理添加页面以及配置body-parse

点击添加学生跳转添加页面

inde.html

<a class="btn btn-success" href="/students/new">添加学生</a>

渲染添加学生页面

router.js

router.get('/students/new', function (req, res) {

  res.render('new.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">

  <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

  <div class="container">

      <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>

</body>

</html>

安装body-parser中间件
配置中间件

app.js

//引入包

var bodyParser = require('body-parser')

// 配置模板引擎和 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)

查看是否能接收数据

router.get('/students/new', function (req, res) {

  res.render('new.html')

})

router.post('/students/new',function (req,res) {

	console.log(req.body)

 })

来吧展示：

7. 将数据存入db.json文件用以持久化

先读取出来，转成对象，

然后往数据中push数据

然后将对象转成字符串

然后将字符串再次写入文件

六、封装提取Student数据操作模块

students.js

数据操作文件模块

职责：操作文件中的数据，只处理数据，不关心业务

var fs = require('fs')

var dbPath = './db.json'

exports.find = function (callback) {

  fs.readFile(dbPath, 'utf8', function (err, data) {

    if (err) {

      return callback(err)

    }

    callback(null, JSON.parse(data).students)

  })

}

router.js

var Student = require('./student')

router.get('/students', function (req, res) {

  Student.find(function (err, students) {

    if (err) {

      return res.status(500).send('Server error.')

    }

    res.render('index.html', {

      students: students

    })

  })

})

七、封装保存学生的API

student.js

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)

    })

  })

}

//处理添加学生

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')

  })

})

来吧展示：

八、完成渲染编辑学生页面

在index.html中添加编辑和删除的标签并跳转到相应的页面

   <tr>

    <th scope="col">id</th>

    <th scope="col">姓名</th>

    <th scope="col">性别</th>

    <th scope="col">年龄</th>

    <th scope="col">兴趣</th>

    <th scope="col">操作</th>

    </tr>

  <tbody>

    {{each students}}

    <tr>

      <th scope="row">{{$value.id}}</th>

      <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>

edit.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">

  <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

  <div class="container">

      <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" required min="1" value="{{ student.age }}" max="150">

          </div>

          <div class="form-group">

            <label for="">爱好</label>

            <input class="form-control" type="text" id="" value="{{ student.hobbies }}" name="hobbies">

          </div>

          <button type="submit" class="btn  btn-success">添加</button>

        </form>

      </div>

  </div>

</body>

</html>

根据id去获取想要查找的学生信息

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)

  })

}

渲染编辑学生页面

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

    })

  })

})

封装添加保存学生函数

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

    })

    // 这种方式比较麻烦

    // 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)

    })

  })

}

处理编辑学生保存数据跳转到首页

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')

  })

})

来吧展示：

九、完成删除功能

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)

    })

  })

}

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')

  })

})

来吧展示：

Node.js学习笔记----day04之学生信息管理系统的更多相关文章

Android（java）学习笔记195：学生信息管理系统案例（SQLite + ListView）
1.首先说明一个知识点,通常我们显示布局文件xml都是如下: setContentView(R.layout.activity_main): 其实每一个xml布局文件就好像一个气球,我们可以使用Vie ...
Android（java）学习笔记188：学生信息管理系统案例（SQLite + ListView）
1.首先说明一个知识点,通常我们显示布局文件xml都是如下: setContentView(R.layout.activity_main): 其实每一个xml布局文件就好像一个气球,我们可以使用Vie ...
Node.js学习笔记（3）：NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
Node.js学习笔记（2）：基本模块
Node.js学习笔记(2):基本模块模块引入模块为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...
一点感悟：《Node.js学习笔记》star数突破1000+
写作背景笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
Node.js学习笔记（1）：Node.js快速开始
Node.js学习笔记(1):Node.js快速开始 Node.js的安装下载官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...
Node.js学习笔记（4）：Yarn简明教程
Node.js学习笔记(4):Yarn简明教程. 引入Yarn NPM是常用的包管理工具,现在我们引入是新一代的包管理工具Yarn.其具有快速.安全.可靠的特点. 安装方式使用npm工具安装yarn ...
node.js(小案例)_实现学生信息增删改
一.前言本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...
Node.js学习笔记（一）
1.回调函数 node是一个异步事件驱动的平台,所以在代码中我们经常需要使用回调函数. 例: setTimeout(function(){ console.log('callback is calle ...

随机推荐

Optional用法与争议点
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介要说Java中什么异常最容易出现,我想NullPointerException一定当仁不让,为了解决这种null值 ...
重新整理 .net core 实践篇 ———— dotnet-dump [外篇]
前言本文的上一篇为: https://www.cnblogs.com/aoximin/p/16861797.html 该文为dotnet-dump 和 procdump 的实战介绍一下. 正文现在 ...
C#使用内存和指针方式将字节数组转换为Bitmap
/// <summary> /// 指针方式转 /// </summary> /// <param name="Width">图像的宽</ ...
Kubernetes—资源管理
3. 资源管理 3.1 资源管理介绍在kubernetes中,所有的内容都抽象为资源,用户需要通过操作资源来管理kubernetes. kubernetes的本质上就是一个集群系统,用户可以在集群中 ...
java 分布式游戏服务器框架，集群游戏服务器框架，游戏服务器网关框架 ioGame 网络游戏服务器框架
ioGame 国内首个基于蚂蚁金服 SOFABolt 的 java 网络游戏服务器框架:无锁异步化.事件驱动的架构设计通过 ioGame 可以很容易的搭建出一个集群无中心节点.有状态多进程的分步式游 ...
layui table表格使用table.resize()方法重置表格尺寸
解决使用layui中的table表格重置表格尺寸问题表格的高度共有两种写法相对应的就有两种解决方法第一种当表格高度设置为固定高度时,改变表格高度使用 tableIns=table.rend ...
c# 使用委托子窗体改变父窗体控件
首先创建两个窗体,在窗体1和窗体2放上对应的控件在窗体1的代码如下 using System; using System.Collections.Generic; using System.Comp ...
5 STL-string
重新系统学习c++语言,并将学习过程中的知识在这里抄录.总结.沉淀.同时希望对刷到的朋友有所帮助,一起加油哦! 生命就像一朵花,要拼尽全力绽放!死磕自个儿,身心愉悦! 写在前面,本篇章主要介绍S ...
关于sublime-build的配置详解
前言 sublime-build 可以做很多自定义的构建命令,然后用其执行代码,十分方便! 开始这里我就简单的用python 的配置来详细说明各个配置项目的作用 { "shell_cmd& ...
Class文件解析
1 准备工作获取class文件byte[] public static byte[] getFileBytes(File file) { try (FileInputStream fileInput ...

Node.js学习笔记----day04之学生信息管理系统

一、起步

二、从文件中读取数据

三、设计路由

四、把路由都挂载到路由容器中

五、处理添加页面以及配置body-parse

六、封装提取Student数据操作模块

七、封装保存学生的API

八、完成渲染编辑学生页面

九、完成删除功能

Node.js学习笔记----day04之学生信息管理系统的更多相关文章

随机推荐

热门专题