溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、簡述
二、項目結構
雖然是一個很簡單的后臺吧，但是還是應該有一個清晰的結構：
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快速搭配一個后臺
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) => {
res.render('index.html',{
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>
<tr>
<th>書名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{ each books }}
<tr>
<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>
六、數據庫連接+模型創建
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三個屬性的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('/')
})
})
九、刪除和修改
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
