一、簡(jiǎn)述

• 主要是面向初學(xué)者的node攻略，需要有node基礎(chǔ)(了解一點(diǎn)npm和express)。
• 使用express框架+mongodb數(shù)據(jù)庫(kù)，前端使用的是原生html。
• 實(shí)現(xiàn)了對(duì)圖書的增刪改查基本功能。
• 源代碼會(huì)上傳到GitHub配合博客一起看。點(diǎn)擊這里看源代碼
• 為了方面沒有寫css。
  

二、項(xiàng)目結(jié)構(gòu)

雖然是一個(gè)很簡(jiǎn)單的后臺(tái)吧，但是還是應(yīng)該有一個(gè)清晰的結(jié)構(gòu)：

1.index.js 入口文件

2.model.js 模型文件

3.router.js 路由文件

4.views 頁(yè)面文件

– index.html 主頁(yè)
– new.html 新建頁(yè)
– edit.html 編輯頁(yè)

5.node_modules 模塊文件夾
6.db 數(shù)據(jù)庫(kù)文件夾

三、初始化項(xiàng)目

因?yàn)槲覀兪褂玫氖莈xpress框架，先用npm下載好express后，創(chuàng)建index.js快速搭配一個(gè)后臺(tái)

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）運(yùn)行后臺(tái)，終端顯示running而且localhost:3000渲染上了hello world證明express初始化成功了。

四、配置路由和渲染模塊

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

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

2.使用原生html的話是后端配置路由，所以我們將一開始對(duì)‘/'的get請(qǐng)求刪掉，轉(zhuǎn)而新建一個(gè)router.js并添加如下代碼：

const express = require('express')
//創(chuàng)建路由實(shí)例
const router = express.Router()

router.get('/',(req,res) => {
 res.render('index.html',{
 books: [{ //可以先傳一個(gè)假數(shù)據(jù)測(cè)試下
 name: 'a',
 author: 'aa',
 press: 'aaa'
 }]
 })
})
module.exports = router //暴露router

上面這段代碼就完成了后端加載主頁(yè)并將數(shù)據(jù)渲染上去的功能。

當(dāng)然要把router引入到入口文件中，在index.js中加入：

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

五、完成首頁(yè)

首頁(yè)沒啥好說的，上一個(gè)表格就得啦。
像each這種形式在后端是比較常見的表達(dá)，和foreach非常像，讀取數(shù)組按行渲染到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> <!--跳轉(zhuǎn)至添加頁(yè)-->
</div>

六、數(shù)據(jù)庫(kù)連接+模型創(chuàng)建

• 創(chuàng)建model.js并npm安裝mongoose
• 接下來都是常規(guī)操縱了，連接數(shù)據(jù)庫(kù)，創(chuàng)建Schema，導(dǎo)出Schema
• 對(duì)于每一個(gè)屬性這里為了方面只給一個(gè)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)

七、路由導(dǎo)入數(shù)據(jù)庫(kù)

在router.js中引入Book
const Book = require('./model')這樣我們就可以在router中利用Book來進(jìn)行數(shù)據(jù)庫(kù)的增刪改查了。
mongoose的方法都可以在文檔中查到。
渲染主頁(yè)就可以改成如下代碼，在數(shù)據(jù)庫(kù)中查找所有項(xiàng)然后傳到前端。

router.get('/',(req,res) => {
 Book.find((err,book) => { //book就是查找的所有對(duì)象是一個(gè)數(shù)組
 res.render('index.html',{
 books: book
 })
 })
})

八、設(shè)計(jì)添加頁(yè)的html和路由

首先來分析一個(gè)添加頁(yè)的邏輯代碼，html部分我們需要一個(gè)表單，填寫書的具體信息后存到數(shù)據(jù)庫(kù)里，所以嘞，我們就需要一個(gè)get路由加載這個(gè)頁(yè)面，同時(shí)需要一個(gè)post請(qǐng)求接收前端發(fā)送過來的數(shù)據(jù)。
html部分很簡(jiǎn)單，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路由非常簡(jiǎn)單，直接渲染new.html即可。
但是post路由就有一個(gè)問題，如何拿到前臺(tái)傳過來的數(shù)據(jù)呢，這里就需要用到body-parser中間件了。它就可以獲取請(qǐng)求體（req.body） ——包含了name、author和press三個(gè)屬性的json對(duì)象。
想要使用它先得npm安裝并引入，同時(shí)還要加上兩條語(yǔ)句（要放在use router的前面！很重要！ ）

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

接下來就是保存新增數(shù)據(jù)的操作了，在mongoose文檔中可以找到對(duì)應(yīng)的save方法。

then是一個(gè)回調(diào)函數(shù)，是保存后的操作。

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值傳過去，后臺(tái)通過req.query.id就能拿到id的具體值。
• 修改的具體操作和新建類似，只是value賦了初始值而已。
  

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論