Node.js實(shí)現(xiàn)簡單管理系統(tǒng)
一、簡述
- 主要是面向初學(xué)者的node攻略,需要有node基礎(chǔ)(了解一點(diǎn)npm和express)。
- 使用express框架+mongodb數(shù)據(jù)庫,前端使用的是原生html。
- 實(shí)現(xiàn)了對圖書的增刪改查基本功能。
- 源代碼會上傳到GitHub配合博客一起看。點(diǎn)擊這里看源代碼
- 為了方面沒有寫css。
二、項(xiàng)目結(jié)構(gòu)
雖然是一個很簡單的后臺吧,但是還是應(yīng)該有一個清晰的結(jié)構(gòu):
1.index.js 入口文件
2.model.js 模型文件
3.router.js 路由文件
4.views 頁面文件
– index.html 主頁
– new.html 新建頁
– edit.html 編輯頁
5.node_modules 模塊文件夾
6.db 數(shù)據(jù)庫文件夾
三、初始化項(xiàng)目
因?yàn)槲覀兪褂玫氖莈xpress框架,先用npm下載好express后,創(chuàng)建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)運(yùn)行后臺,終端顯示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請求刪掉,轉(zhuǎn)而新建一個router.js并添加如下代碼:
const express = require('express') //創(chuàng)建路由實(shí)例 const router = express.Router() router.get('/',(req,res) => { res.render('index.html',{ books: [{ //可以先傳一個假數(shù)據(jù)測試下 name: 'a', author: 'aa', press: 'aaa' }] }) }) module.exports = router //暴露router
上面這段代碼就完成了后端加載主頁并將數(shù)據(jù)渲染上去的功能。
當(dāng)然要把router引入到入口文件中,在index.js中加入:
const router = require('./router') app.use(router)
五、完成首頁
首頁沒啥好說的,上一個表格就得啦。
像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)至添加頁--> </div>
六、數(shù)據(jù)庫連接+模型創(chuàng)建
- 創(chuàng)建model.js并npm安裝mongoose
- 接下來都是常規(guī)操縱了,連接數(shù)據(jù)庫,創(chuàng)建Schema,導(dǎo)出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)
七、路由導(dǎo)入數(shù)據(jù)庫
在router.js中引入Book
const Book = require('./model')這樣我們就可以在router中利用Book來進(jìn)行數(shù)據(jù)庫的增刪改查了。
mongoose的方法都可以在文檔中查到。
渲染主頁就可以改成如下代碼,在數(shù)據(jù)庫中查找所有項(xiàng)然后傳到前端。
router.get('/',(req,res) => { Book.find((err,book) => { //book就是查找的所有對象是一個數(shù)組 res.render('index.html',{ books: book }) }) })
八、設(shè)計(jì)添加頁的html和路由
首先來分析一個添加頁的邏輯代碼,html部分我們需要一個表單,填寫書的具體信息后存到數(shù)據(jù)庫里,所以嘞,我們就需要一個get路由加載這個頁面,同時需要一個post請求接收前端發(fā)送過來的數(shù)據(jù)。
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路由就有一個問題,如何拿到前臺傳過來的數(shù)據(jù)呢,這里就需要用到body-parser中間件了。它就可以獲取請求體(req.body) ——包含了name、author和press三個屬性的json對象。
想要使用它先得npm安裝并引入,同時還要加上兩條語句(要放在use router的前面!很重要! )
app.use(bodyParser.urlencoded({ extended: false })) app.use(bodyParser.json())
接下來就是保存新增數(shù)據(jù)的操作了,在mongoose文檔中可以找到對應(yīng)的save方法。
then是一個回調(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值傳過去,后臺通過req.query.id就能拿到id的具體值。
- 修改的具體操作和新建類似,只是value賦了初始值而已。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Node實(shí)現(xiàn)搜索框進(jìn)行模糊查詢
這篇文章主要為大家詳細(xì)介紹了Node實(shí)現(xiàn)搜索框進(jìn)行模糊查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06深入淺析Node.js 事件循環(huán)、定時器和process.nextTick()
這篇文章主要介紹了Node.js 事件循環(huán)、定時器和process.nextTick()的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10使用Node.js搭建Vue項(xiàng)目的詳細(xì)步驟
Vue.js 是一款流行的 JavaScript 框架,而 Node.js 提供了一個強(qiáng)大的運(yùn)行環(huán)境,兩者的結(jié)合使得開發(fā)者可以輕松構(gòu)建現(xiàn)代化的前端項(xiàng)目,本文將介紹如何使用 Node.js 搭建一個基本的 Vue 項(xiàng)目,需要的朋友可以參考下2023-12-12Node.js中console.log()輸出彩色字體的方法示例
這篇文章主要給大家介紹了關(guān)于Node.js中console.log()輸出彩色字體的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Node.js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12nodejs實(shí)現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片
這篇文章主要為大家詳細(xì)介紹了nodejs實(shí)現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12