首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Node.js中使用express实现简易学生管理系统-增删改查

学生管理系统开发过程(用文件进行操作)

1. 创建各个目录,按照一定的标准创建

主目录下有public,views目录app.js文件

public目录下用于存放公共可见的内容,如css可以存放css相关样式文件,lib一般用于存放从外面导入的文件。。。

views目录下一般存放各个页面的HTML文件

app.js入口模块职责:

做一些相关配置,如文件

模板引擎(art-template)

body-parser解析表单post请求

提供静态资源服务(use)

监听端口启动服务(listen)

启动服务

挂载路由

router路由模块

处理get,post请求

处理路由,将请求路径设置

2. 开发开始

首先对npm进行初始化

npminit-yes

导入art-template模块引擎和express-art-template,中间空格可同时安装多个

npminstall--saveart-template express-art-template

加载请求express,使用服务器

varexpress=require('express')

varapp=express()

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

})

// 监听使用端口

app.listen(3000)

开放public和node_modules模板引擎的目录

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

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

加载express-art-template模板引擎

// 第一个参数表示读取数据的后缀名

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

在处理get请求有express足够了,但是处理post请求的时候需要使用的一个插件:body-parser。get和post为表单提交的两种方式。

// 安装

npminstallbody-parser

// 加载

varbodyParser=require('body-parser')

// 使用

app.use(bodyParser.urlencoded({extended:false}))

app.use(bodyParser.json())

此处将app.get的各种方法独立出来,用路由的方式指过去使用,因此需要加载路由并挂载路由在app.js上

// 加载路由,根目录下的文件

varrouter=require('./router')

// 挂载路由,一般放在各模块最后面,监听之前

app.use(router)

接下来在路由中书写对表单的get和post操作,为使代码简介,额外封装了一个student类,书写对学生的各种操作的方法

/// 路由处理

// 文件读取

// 具体的处理方法在student.js中

varfs=require('fs')

// 加载express模块

varexpress=require('express')

// 用express中专门用来处理路由的方法创建一个路由

varrouter=express.Router()

// 额外封装了一个学生类,定义了对学生的各种操作的方法

varStudent=require('./student')

// ----------------------开始使用express的各种方法-----------

// 展示所有学生信息的首页

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

// 调用student.js中导出的find方法

Student.findAll(function(err,students) {

// 展示不成功时,输出错误在页面上

if(err) {

returnres.status(500).send('Server Error...')

}

// 成功时,使用express中的render方法,进入到index.html页面

// 展示所有的学生

res.render('index.html',{

students:students

})

})

})

// 增加一个学生的页面

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

res.render('new.html')

})

// 处理增加学生表单的方法

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

Student.save(req.body,function(err) {

if(err) {

returnres.status(500).send('Server Error...')

}

// 处理成功,将页面重新加载到students页面

res.redirect('/students')

})

})

// 填写更新学生信息的表单

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

// 需要找到当前的学生信息再跳转

Student.findById(req.query.id,function(err,student) {

if(err) {

returnres.status(500).send('Server Error...')

}

// 如果获取当前信息成功了则跳转到更新学生界面

// 遍历这个学生的每一个属性

res.render('edit.html', {

student:student

})

})

})

// 处理更新一个学生的表单的方法

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

Student.updateById(req.body,function(err) {

if(err) {

returnres.status(500).send('Server Error...')

}

res.redirect('/students')

})

})

// 删除学生的操作

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

Student.deleteById(req.query.id,function(err) {

if(err) {

returnres.status(500).send('Server Error...')

}

res.redirect('/students')

})

})

// 将router导出,使app.js可以挂载成功

module.exports=router

页面准备工作

// 需要导入页面需要的Bootstrap样式和自定义的一些样式

// 下载Bootstrap到node_modules目录中

npminstall--savebootstrap

// 将自定义的一些样式放在public/css/main.css中

//--------------index.html中的学生表格数据处理-------------------

{{ each students }}

{{$value.id }}

{{$value.name }}

{{$value.gender }}

{{$value.age }}

{{$value.hobbies }}

编辑

删除

{{ /each }}

//--------------new.html增加学生界面---------

//--------------edit.html增加学生界面---------

与上面导入css样式类似,其余无需大改

书写student.js,实现增删改查操作

// 额外封装的student,负责处理对学生的增删改查操作

// 加载文件模块

varfs=require('fs')

// 对要操作的路径进行保存,方便修改

// db.json在此处用于存储学生信息,暂不使用数据库

vardbPath='./db.json'

// 1.创建一个可以查看所有学生信息的方法,node.js中没有全局变量的概念,因此需要用exports导出,让router可以使用这里面的方法

// 第一个参数为读取文件所在路径,第二个为以utf8来读,第三个为文件读取

// 这里采用回调函数,只有这样才能让find获得数据data

exports.findAll=function(callback) {

// 读取db.json这个文件,里面存储的是学生信息

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

// 读取不成功时,返回错误,不处理

if(err) {

returncallback(err)

}

// 读取成功时,err为null,第二个参数为将在db.json中读取到的数据转换成student对象

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

})

}

// 2.创建一个能够通过学号查找学生的函数,以便后面的更新删除操作使用

exports.findById=function(id,callback) {

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

if(err) {

returncallback(err)

}

// 读取成功了,则将读取到的字符转成对象封装为一个学生

varstudents=JSON.parse(data).students

// 再在这个封装的学生中获取学号,这个find方法为express中封装好的

varret=students.find(function(item) {

returnitem.id===parseInt(id)

})

callback(null,ret)

})

}

// 3.增加学生并保存的方法

exports.save=function(student,callback) {

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

if(err) {

returncallback(err)

}

varstudents=JSON.parse(data).students

// 增加操作不会插入编号,编号为自动生成,为了使增加的学生编号唯一

student.id=students[students.length-1].id+1

// 将用户输入封装成的学生对象保存到学生数组中

students.push(student)

// 将对象转为字符串,调用原有的stringify方法

varfileData=JSON.stringify( {

students:students

})

// 然后再将学生字符串写入db.json中存放

fs.writeFile(dbPath,fileData,function(err) {

if(err) {

returncallback(err)

}

callback(null)

})

})

}

// 4. 书写更新学生的方法,修改学生的信息

exports.updateById=function(student,callback) {

// 从文件中读取数据

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

if(err) {

returncallback(err)

}

// 读取成功,则转为对象

varstudents=JSON.parse(data).students

// 单独获取学生的编号

student.id=parseInt(student.id)

// 调用ecmascript6里面的方法,获取id

varstu=students.find(function(item) {

returnitem.id=student.id

})

// 分别获取每个学生的个人信息

for(varkeyinstudent) {

stu[key]=student[key]

}

// 将获取的学生整个的信息转为字符串

varfileData=JSON.stringify( {

students:students

})

// 将转为字符串之后的写入文件中存放

fs.writeFile(dbPath,fileData,function(err) {

if(err) {

returncallback(err)

}

callback(null)

})

})

}

// 5.书写删除学生的方法通过学号找到该学生

exports.deleteById=function(id,callback) {

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

if(err) {

returncallback(err)

}

varstudents=JSON.parse(data).students

// 通过id找元素的下标Es6的方法

vardeleteId=students.findIndex(function(item) {

returnitem.id===parseInt(id)

})

// 根据下标删除数组中的元素

students.splice(deleteId,1)

// 将对象转为字符串写入文件

varfileData=JSON.stringify({

students:students

})

fs.writeFile(dbPath,fileData,function(err) {

if(err) {

returncallback(err)

}

callback(null)

})

})

}

大功告成,通过127.0.0.1:80/students可以访问使用该简易系

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190121G1C1C300?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券