推荐设备MORE

html 网页模板

html 网页模板

行业新闻

北京小程序开发服务_Node.js完成简略管理体系

日期:2021-01-07
我要分享
Node.js实现简单管理系统       这篇文章主要为大家详细介绍了Node.js实现简单管理系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要是面向初学者的node攻略,需要有node基础(了解一点npm和express)。 使用express框架+mongodb数据库,前端使用的是原生html。 实现了对图书的增删改查基本功能。 源代码会上传到GitHub配合博客一起看。 为了方面没有写css。

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

1.index.js 入口文件

2.model.js 模型文件

3.router.js 路由文件

4.views 页面文件

<
– 新建页
– 编辑页

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

三、初始化项目

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

const express = require('express')
const app = express()
app.get('/',(req,res) = {
 res.send('hello world')
app.listen(3000,() = {
 console.log('server is running...')
})

打开终端使用node(推荐使用nodemon)运行后台,终端显示running而且localhost:3000渲染上了hello world证明express初始化成功了。

四、配置路由和渲染模块

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

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

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

const express = require('express')
//创建路由实例
const router = express.Router()
router.get('/',(req,res) = {
 ',{
 books: [{ //可以先传一个假数据测试下
 name: 'a',
 author: 'aa',
 press: 'aaa'
module.exports = router //暴露router

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

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

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

五、完成首页

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

 div 
 table 
 thead 
 th 书名 /th 
 th 作者 /th 
 th 出版社 /th 
 th 操作 /th 
 /tr 
 /thead 
 tbody 
 {{ each books }}
 td {{ $value.name }} /td 
 td {{ $value.author }} /td 
 td {{ $value.press }} /td 
 td !--这里路由后面再添加-- 
 a href="#" 编辑 /a 
 a href="#" 删除 /a 
 /td 
 /tr 
 {{ /each }}
 /tbody 
 /table 
 a href="/new" 添加新书 /a !--跳转至添加页-- 
 /div 

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

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

mongoose.connect('mongodb://localhost/book',{ useNewUrlParser: true , useUnifiedTopology: true }) const Schema = mongoose.Schema const BookSchema = new Schema({ name: { type: String, author: { type: String, press: { type: String, module.exports = mongoose.model('Book',BookSchema)

七、路由导入数据库

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

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

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

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

 form action="/new" method="post" 
 div 
 label for="" 书名 /label 
 input type="text" name="name" 
 /div 
 div 
 label for="" 作者 /label 
 input type="text" name="author" 
 /div 
 div 
 label for="" 出版社 /label 
 input type="text" name="press" 
 /div 
 button type="submit" Submit /button 
 /form 
<即可。
但是post路由就有一个问题,如何拿到前台传过来的数据呢,这里就需要用到body-parser中间件了。它就可以获取请求体(req.body) ——包含了name、author和press三个属性的json对象。
想要使用它先得npm安装并引入,同时还要加上两条语句(要放在use router的前面!很重要! )

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

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

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

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

九、删除和修改

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