一、前言

本节内容主要对小案例做一个总结:

1、如何开始搭建小项目

2、路由设计

3、模块应用

4、项目源码以及实现过程github地址:

项目演示如下:

二、主要内容

1、项目的关键性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

app.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 // 这样也不方便
// module.exports = function (app) {
// app.get('/students', function (req, res) {
// // readFile 的第二个参数是可选的,传入 utf8 就是告诉它把读取到的文件直接按照 utf8 编码转成我们能认识的字符
// // 除了这样来转换之外,也可以通过 data.toString() 的方式
// fs.readFile('./db.json', 'utf8', function (err, data) {
// if (err) {
// return res.status(500).send('Server error.')
// } // // 从文件中读取到的数据一定是字符串
// // 所以这里一定要手动转成对象
// var students = JSON.parse(data).students // res.render('index.html', {
// fruits: [
// '苹果',
// '香蕉',
// '橘子'
// ],
// students: students
// })
// })
// }) // app.get('/students/new', function (req, res) { // }) // app.get('/students/new', function (req, res) { // }) // app.get('/students/new', function (req, res) { // }) // app.get('/students/new', function (req, res) { // }) // app.get('/students/new', function (req, res) { // })
// }

功能实现模块

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

student.js

2、项目搭建以及具体实现 

第一步:搭建目录,用public文件夹来存放css img等静态文件,用views来存放页面

 第二步:app.js作为整个项目的入口,先用express创建好服务器,

安装好express: npm install express

//引入express
var express = require('express'); //创建
var app = new express();
//请求访问
app.get('/',function (req, res){
res.send('hello student')
})
//设置端口
app.listen(3000, function () { console.log('server is running')
})

 第三步:配置开放静态资源 :项目中我们一般让public目录下的资源作为公共资源,可以给用户访问

//配置开放静态资源
app.use('/public/', express.static('./public/'))
app.use('/node_moudles/', express.static('./node_moudles/'))

 第四步:读取数据文件将首页渲染出来,这里需要用到express-art-template包

安装:npm install express-art-template

配置如下:

//配置express-art-template
app.engine('html', require('express-art-template'))
//使用模板来渲染
app.get('/',function (req, res){
//这里会默认到views文件下面去找index.html
res.render('index.html', {
fruits: [
'苹果',
'香蕉',
'橘子'
]
})
})

第五步:读取数据,将数据渲染到页面中,先输出一下看看data里面的内容,

data中的内容如下:发现为一串十六进制数据,

用JSON.parse()函数可以将字符串转换为对象,如下图所示,现在我们可以拿到里面的对象了

 第六步:需要进行路由设计,路由就相当于一张记录有所有路径信息的一张表,我们将所有要访问的路径存放在一张表中,利用node.js中的模块化思想,将每一个功能分块实现

(1)  路由表设计如下:

请求方法

请求路径

GET

POST

备注作用

GET

/ students

渲染首页

GET

GET

/students/new

/students/edit

点击 跳到一个新的添加页面,

跳到编辑页

POST

/students

Name age gender

点击Submit 按钮,跳到首页

post

/students/edit

Id

Name age gender

点击“编辑”,跳到编辑那个页面

GET

/students/delete

id

操作删除

(2)设计好路由表之后先将路由表的壳子搭好  

//按照上面的表格配置好路由壳子
router.get('/', function (req, res) { }); router.get('/students/new', function (req, res){ });
router.get('/students/edit', function (req, res){ }); router.post('/students', function (req, res) { }); router.post('/students/edit', function (req, res) { }); router.get('/students/delete', function(req, res) { });

(3)我们要在app.js中引用这个自定义的路由模块,所以需要在router.js中导出, 在app.js中引用

router.js中导出方法:

//最后还要导出这个路由
module.exprots = router;

在app.js中引用

//引入路由
var router = require(./router.js) //使用路由模块
app.use(router)

将第五步中的请求/的一条路由放到router.js里面,测试一下是能请求成功的

 第七步:上面的router.js中既有get 路由的功能,又有fs查询读取文件的功能,我们也可以用模块化 的思维,将router里面的增删改功能给抽取出来放到一个新的student.js模块中,让这个新的模块实现我们需要的功能

(1)同样先搭建好壳子,也需要导出,这里我们就用exports导出

//查找学生信息
exports.find = function(){} //添加保存学生信息
exports.save = function(){} //修改更新学生信息
exports.updateById = function(){} //删除学生信息
exports.deleteById = function(){}

(2)同样也需要在那边引用

//加入student模块
var Student = require('./student.js') //调用
Student.find()

 第八步:查找实现,由于这个函数里面还用到了读取文件的操作,是异步的,所以不能用传统的函数调用的方式,要获取里面的数据需要用到回调函数来拿到数据

(1)在student.js中写查找方法

//可以先模拟调用写法
//data=Student.find()由于函数中是异步的所以不能用传统的方式
Student.find( function (data) {
console.log(data)
})
exports.find = function (callback) {

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

             if (err) {
return callback(err); //如果文件读取错误,就结束让回调函数处理 } //文件读取成功,第一个参数为null说明成功,这里需要将得到的二进制字符串转化为对象
callback(null, JSON.parse(data).students) }) }

(2)  router.js中调用如下:

//请求路径为/students的时候,调用find方法,并在页面中渲染数据
router.get('/students', function (req, res) { Student.find(function (err, students) {
if(err) {
return res.status(500).send('Server err');
} res.render('index.html', {
fruits: [
'苹果',
'香蕉',
'橘子'
],
students: students
})
}) });

 第九步:

(1)在student.js中写save添加方法,同样也可以先模拟调用再来写这个方法,添加的时候需要将要添加的对象传进去,然后在文件中添加传进去的对象,由于data文件是一个对象,还要将数组转化为对象

exports.save = function (student, callback ) {

     fs.readFile('./data.json', function (err, data) {
if(err){
return callback(err) //回调函数中如何处理错误,在这里我们不用关心
} //接受文件,这里得到的为数组
var students = JSON.parse(data).students
student.id = students[students.length-1].id+1; //push向数组中添加新的
students.push(student); //执行完上面几步之后得到的是一个数组,但是在data中存入的是json格式的对象
var fileData = JSON.stringify({
students: students
}) //然后将文件写入data里面
fs.writeFile('./data.json', fileData, function (err){
if(err){
callback(err);
} callback(null);
}) })
}

(2)在router.js中调用:由于上面添加的过程提交的数据是以post方式提交,而express是不支持post提交的,所以要先安装一个body-parser包

安装:npm install body-parser

配置:

//安装好后引用包
var bodyParse = require('body-parse'); //配置
app.use(bodyParse.urlencoded({ extentend: false}))
app.use(bodyParse.json())

点击按钮跳到添加页面,然后点击提交按钮,将数据提交,并且页面重新跳到首页

router.get('/students/new', function (req, res){
res.render('new.html')
}); router.post('/students/new', function (req, res) {
//先打印提交的内容
console.log(req.body);
Student.save(req.body, function (err) {
if(err) {
return res.status(500).send('Server err');
}
//重新跳会首页
res.redirect('/students')
}) });

  第十步:实现点击“编辑”跳到编辑页面

(1)这里需要通过id查询到点击的那条数据,并且在编辑页中渲染

//封装一个通过id请求的的函数

exports.findById = function(id, callback) {
fs.readFile('./data.json', 'utf8', function (err, data) {
if (err) {
return callback(err)
}
var students = JSON.parse(data).students
//这个方法是es6提供的,当满足了item.id === parseInt(id),的时候会会返回整个对象
var ret = students.find(function (item) {
return item.id === parseInt(id);
}) callback(null, ret);
});
}

(2)在router.js函数中get方式请求/students/edit

/这一次通过get到那个编辑页面
router.get('/students/edit', function (req, res) { //调用得到的是保存之后的数据
//1.如何获取数据
//2.处理数据
//3.发送响应
//4.将数据再次写入data.json文件
Student.findById(req.query.id, function (err, student) {
if (err) {
return res.status(500).send('Server err');
}
//console.log(student);
res.render('edit.html',{ student: student
})
}) });

(3)更新数据,需要以post方式提交数据到/students/edit,先在student

exports.find = function (callback){
fs.readFile('./data.json', function (err, data) {
if(err){
return callback(err) //回调函数中如何处理错误,在这里我们不用关心
}
//这里的err=null说明请求成功
callback(null, JSON.parse(data).students); }) }

(4)router.js中调用

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

 Student.updateById(req.body, function(err){
if (err){
return res.status(500).send('Server err');
} res.redirect('/students')
}) });

第十一步:实现删除,删除的时候也要通过url地址拿到删除的id,然后查询到删除的对象

exports.deleteById = function (id, callback) {

     fs.readFile('./data.json','utf8', function (err, data) {
if(err){
return callback(err) //回调函数中如何处理错误,在这里我们不用关心
}
//得到的是一个数组
var students = JSON.parse(data).students; var deleteId = students.findIndex(function (item) {
return item.id === parseInt(id);
}) //做删除操作
students.splice(deleteId, 1); //删除之后吧数组转化为对象
var fileData = JSON.stringify({
students:students
}) fs.writeFile('./data.json', fileData, function(err){
if(err) {
return callback(err)
} callback(null);
})
}); }

三、总结以及踩坑

1、做项目的时候可以将一些允许用户访问的静态资源文件放到一个public文件中,开放静态文件

2、要善于将项目中的功能分成模块化来处理

3、req.body拿到的是二进制或者十六进制数据,要对数据进行操作必须要用JSON.parse(data)转化为对象

4、将数组转化为对象用.

 var fileData = JSON.stringify({
students:students
})

node.js(小案例)_实现学生信息增删改的更多相关文章

  1. node.js(小案例)_使用mongodb对学生信息列表优化

    一.前言 1.这篇文章主要对上一篇案列在操作增删改的时候使用mongodb进行优化 2.项目源码(包含上):https://github.com/4561231/crud-express-node.g ...

  2. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  3. Sqlite3 实现学生信息增删改查

    import sqlite3 conn = sqlite3.connect('studentsdb.db') # 连接数据库 cursor = conn.cursor( ) # 创建数据表 def c ...

  4. MVC模式的学生信息增删改查

    准备:建一个名为 userdb的数据库.建一个student表,有stuid,stuname,gender三个字段.其中stuid为主键.j加入相应的驱动包,相应的JSTL标签 先看目录结构 代码: ...

  5. Java学生信息增删改查(并没用数据库)

    一个泛型的应用,Java版本增删改查,写的简陋,望批评指正 2016-07-02 很久前写的一个程序了.拿出来存一下,不是为了展示啥,自己用的时候还可以看看.写的很粗糙. import java.io ...

  6. Spring Boot实现学生信息增删改查

    上一篇博客写了如何初始化一个简单的Spring Boot项目,这次详细记录一下如何连接数据库并实现增删改查基本操作. 我使用的是MySQL 5.5+Navicat,MySQL量级比较轻,当然微软的SQ ...

  7. node.js 实现接口-操作文件进行用户增删改查

    首先安装npm,使用npm安装express npm install express -S /* * @Author: yinxin * @Date: 2020-03-27 10:18:41 * @L ...

  8. Model1模式的学生信息增删改查

    Student.java package entity; public class Student { private int stuid; private String stuname; priva ...

  9. 小草的Trouble学生信息管理系统

    小草最近上课学C++,在图书馆纠结了好久,决定做这个小东西,没想到遇到了好多困难,好吧,功夫不负有心人,小草也在敲代码中提高了不少. 小草硬是学了好几天,才搞完这个东西,也算是了结了小草的一个心结. ...

随机推荐

  1. UVA-11517 Exact Change(DP)

    题目大意:有n张钞票,面值可能不同.你要买一件东西,可能需要找零钱.问最少付多少钱,并求出最少的钞票张数. 题目分析:定义状态dp(i,w)表示前i张钞票凑成w元需要的最少钞票张数.则状态转移方程为d ...

  2. SQL Server安全(4/11):许可(Permissions)

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  3. Palindrome Partitioning II Leetcode

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  4. soem函数库的编译

    D:/并条机/soem/soem-master/doc/html/files.htm https://github.com/smits/soem https://github.com/OpenEthe ...

  5. virtual box ubuntu卡在开机光标

    创建虚拟机的时候选择之前保存的虚拟机盘vdi文件,打开的时候卡在光标.原来是因为虚拟机是64位的,但是新建的时候只有32位的ubuntu可以选择就选择的32位. 解决办法: 在bios设置里,打开cp ...

  6. javascript Array类

    Array类 toString()方法和valueOf()方法,返回特殊的字符串.该字符串是通过对每项调用toString()方法,然后用逗号把它们连接在一起构成的.例如,对具有项"red& ...

  7. uses-permission权限列表

    android.permission.ACCESS_CHECKIN_PROPERTIES允许读写访问”properties”表在checkin数据库中,改值可以修改上传 android.permiss ...

  8. [原]使用node-mapnik和openstreetmap数据初步搭建瓦片服务

    最近依然还是有点小忙,只能挤点时间来学习点,先解决有没有的问题,再解决好不好的问题:) 本文将承接上文<使用node-mapnik生成openstreetmap-carto风格的瓦片>的内 ...

  9. Firefly 配置说明!

    原地址:http://www.9miao.com/question-15-43023.html 下图一一个典型的config.json的配置:<ignore_js_op> "db ...

  10. hadoop 2.2.0 eclipse 插件编译 及相关eclipse配置图解

    https://github.com/winghc/hadoop2x-eclipse-plugin 官网 http://kangfoo.github.io/article/2013/12/build- ...