您好,登錄后才能下訂單哦!
一、簡(jiǎn)述
二、項(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...') })
打開(kāi)終端使用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的話是后端配置路由,所以我們將一開(kāi)始對(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è)沒(méi)啥好說(shuō)的,上一個(gè)表格就得啦。
像each這種形式在后端是比較常見(jiàn)的表達(dá),和foreach非常像,讀取數(shù)組按行渲染到html中。
<div> <table> <thead> <tr> <th>書(shū)名</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" >添加新書(shū)</a> <!--跳轉(zhuǎn)至添加頁(yè)--> </div>
六、數(shù)據(jù)庫(kù)連接+模型創(chuàng)建
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來(lái)進(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和路由
首先來(lái)分析一個(gè)添加頁(yè)的邏輯代碼,html部分我們需要一個(gè)表單,填寫(xiě)書(shū)的具體信息后存到數(shù)據(jù)庫(kù)里,所以嘞,我們就需要一個(gè)get路由加載這個(gè)頁(yè)面,同時(shí)需要一個(gè)post請(qǐng)求接收前端發(fā)送過(guò)來(lái)的數(shù)據(jù)。
html部分很簡(jiǎn)單,form+input就可以搞定,記得action的路徑要一致,name也要一樣哦。
<form action="/new" method="post"> <div > <label for="">書(shū)名</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è)問(wèn)題,如何拿到前臺(tái)傳過(guò)來(lá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())
接下來(lái)就是保存新增數(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('/') }) })
九、刪除和修改
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。