Node.js实现简单管理系统

2020-06-17 05:30:51易采站长站整理

<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


const mongoose = require('mongoose')

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就是查找的所有对象是一个数组
res.render('index.html',{
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>

get路由非常简单,直接渲染new.html即可。
但是post路由就有一个问题,如何拿到前台传过来的数据呢,这里就需要用到body-parser中间件了。它就可以获取请求体(req.body) ——包含了name、author和press三个属性的