Node.js实现简单管理系统

2023-08-13 18:24:04 73

一、简述

主要是面向初学者的node攻略，需要有node基础(了解一点npm和express)。
使用express框架+mongodb数据库，前端使用的是原生html。
实现了对图书的增删改查基本功能。
源代码会上传到GitHub配合博客一起看。点击这里看源代码
为了方面没有写css。

二、项目结构

虽然是一个很简单的后台吧，但是还是应该有一个清晰的结构：

1.index.js入口文件

2.model.js模型文件

3.router.js路由文件

4.views页面文件

–index.html主页
–new.html新建页
–edit.html编辑页

5.node_modules模块文件夹
6.db数据库文件夹

三、初始化项目

因为我们使用的是express框架，先用npm下载好express后，创建index.js快速搭配一个后台

constexpress=require('express')
constapp=express()
app.get('/',(req,res)=>{
res.send('helloworld')
})
app.listen(3000,()=>{
console.log('serverisrunning...')
})

打开终端使用node（推荐使用nodemon）运行后台，终端显示running而且localhost:3000渲染上了helloworld证明express初始化成功了。

四、配置路由和渲染模块

1.使用npm下载art-template和express-art-template，并在index.js中加入

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

2.使用原生html的话是后端配置路由，所以我们将一开始对‘/'的get请求删掉，转而新建一个router.js并添加如下代码：

constexpress=require('express')
//创建路由实例
constrouter=express.Router()

router.get('/',(req,res)=>{
res.render('index.html',{
books:[{//可以先传一个假数据测试下
name:'a',
author:'aa',
press:'aaa'
}]
})
})
module.exports=router//暴露router

上面这段代码就完成了后端加载主页并将数据渲染上去的功能。

当然要把router引入到入口文件中，在index.js中加入：

constrouter=require('./router')
app.use(router)

五、完成首页

首页没啥好说的，上一个表格就得啦。
像each这种形式在后端是比较常见的表达，和foreach非常像，读取数组按行渲染到html中。



{{eachbooks}}

{{/each}}



书名
作者
出版社
操作



{{$value.name}}
{{$value.author}}
{{$value.press}}

编辑
删除



添加新书

书名	作者	出版社	操作
{{$value.name}}	{{$value.author}}	{{$value.press}}	编辑删除

六、数据库连接+模型创建

创建model.js并npm安装mongoose
接下来都是常规操纵了，连接数据库，创建Schema，导出Schema
对于每一个属性这里为了方面只给一个type

constmongoose=require('mongoose')

mongoose.connect('mongodb://localhost/book',{useNewUrlParser:true,useUnifiedTopology:true})

constSchema=mongoose.Schema

constBookSchema=newSchema({
name:{
type:String,
},
author:{
type:String,
},
press:{
type:String,
}
})
module.exports=mongoose.model('Book',BookSchema)

七、路由导入数据库

在router.js中引入Book
constBook=require('./model')这样我们就可以在router中利用Book来进行数据库的增删改查了。
mongoose的方法都可以在文档中查到。
渲染主页就可以改成如下代码，在数据库中查找所有项然后传到前端。

router.get('/',(req,res)=>{
Book.find((err,book)=>{//book就是查找的所有对象是一个数组
res.render('index.html',{
books:book
})
})
})

八、设计添加页的html和路由

首先来分析一个添加页的逻辑代码，html部分我们需要一个表单，填写书的具体信息后存到数据库里，所以嘞，我们就需要一个get路由加载这个页面，同时需要一个post请求接收前端发送过来的数据。
html部分很简单，form+input就可以搞定，记得action的路径要一致，name也要一样哦。



书名



作者



出版社


Submit

get路由非常简单，直接渲染new.html即可。
但是post路由就有一个问题，如何拿到前台传过来的数据呢，这里就需要用到body-parser中间件了。它就可以获取请求体（req.body）——包含了name、author和press三个属性的json对象。
想要使用它先得npm安装并引入，同时还要加上两条语句（要放在userouter的前面！很重要！）

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

接下来就是保存新增数据的操作了，在mongoose文档中可以找到对应的save方法。

then是一个回调函数，是保存后的操作。

router.post('/new',(req,res)=>{
console.log(req.body);
newBook(req.body).save().then(()=>{
res.redirect('/')
})
})

九、删除和修改

看mongoose文档可知不管是删除查找修改都可以通过id来索引。
编辑所以我们直接使用get方法把id值传过去，后台通过req.query.id就能拿到id的具体值。
修改的具体操作和新建类似，只是value赋了初始值而已。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Node.js实现简单管理系统

热门推荐

随机推荐