VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（上）

不知名網(wǎng)友發(fā)布于2019-08-02 16:16 / 821人閱讀

摘要：前言學(xué)習(xí)前端也有一段時(shí)間了做個(gè)個(gè)人博客網(wǎng)站吧正好總結(jié)練習(xí)一下這段時(shí)間的所學(xué)文章很長(zhǎng)，會(huì)拆成三篇來(lái)講項(xiàng)目地址效果后臺(tái)管理系統(tǒng)前端頁(yè)面架構(gòu)可以看到，在整個(gè)項(xiàng)目中，沒(méi)有頁(yè)面的跳轉(zhuǎn)只有前后端的數(shù)據(jù)交換，所有的頁(yè)面更新都是組件更新和數(shù)據(jù)更新后端只對(duì)數(shù)

前言

學(xué)習(xí)前端也有一段時(shí)間了
做個(gè)個(gè)人博客網(wǎng)站吧
正好總結(jié)練習(xí)一下這段時(shí)間的所學(xué)
文章很長(zhǎng)，會(huì)拆成三篇來(lái)講

項(xiàng)目github地址：https://github.com/ssevenk/ss...

效果

后臺(tái)管理系統(tǒng)：

前端頁(yè)面：

架構(gòu)

可以看到，在整個(gè)項(xiàng)目中，沒(méi)有頁(yè)面的跳轉(zhuǎn)
只有前后端的數(shù)據(jù)交換，所有的頁(yè)面更新都是組件更新和數(shù)據(jù)更新
后端只對(duì)數(shù)據(jù)庫(kù)進(jìn)行增刪查改，以及接受前端的異步請(qǐng)求返回?cái)?shù)據(jù)
所以本質(zhì)上這是一個(gè)單頁(yè)面應(yīng)用
所有的重心全部放在前端

文件目錄：

數(shù)據(jù)

我的網(wǎng)站內(nèi)容分成了三個(gè)板塊

文章：關(guān)于前端知識(shí)的個(gè)人原創(chuàng)內(nèi)容

雜談：暢所欲言，不一定與前端相關(guān)的個(gè)人內(nèi)容

收藏：別人的優(yōu)秀文章，做成收藏夾的形式，點(diǎn)擊直接跳轉(zhuǎn)至對(duì)應(yīng)網(wǎng)站鏈接

Mongodb-數(shù)據(jù)定義與存放

文章，雜談，收藏
這三種表結(jié)構(gòu)是不一樣的
我們要先對(duì)其進(jìn)行定義

我用的數(shù)據(jù)庫(kù)是mongodb
比較靈活，而且與node配合使用起來(lái)更為簡(jiǎn)潔

安裝配置mongodb的過(guò)程這里就不再贅述
網(wǎng)上很容易搜到教程
如果安裝中卡住了，就在安裝時(shí)不要勾選左下角的compass（可視化工具）
然后在項(xiàng)目中安裝mongodb的第三方操作庫(kù)mongoose

npm i mongoose --save

新建curd.js文件
引入mongoose并連接數(shù)據(jù)庫(kù)（第一次連接并沒(méi)有這個(gè)數(shù)據(jù)庫(kù)，會(huì)幫我們自動(dòng)創(chuàng)建）

//curd.js
const mongoose = require("mongoose")
mongoose.connect("mongodb://localhost/gblog")

定義三種數(shù)據(jù)的結(jié)構(gòu)

//curd.js
const MonBlog = mongoose.model("monblog", {
    title: {
        type: String,
        required: true //表示這個(gè)屬性是必需的
    },
    content: {
        type: String,
        required: true
    },
    date: {
        type: String,
        required: true
    },
    comments:[]
})

const MonEssay = mongoose.model("monessay", {
    title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        required: true
    },
    date: {
        type: String,
        required: true
    },
    comments:[]
})

const MonArticle = mongoose.model("monarticle", {
    title: {
        type: String,
        required: true
    },
    link: {
        type: String,
        required: true
    },
    date: {
        type: String,
        required: true
    }
})

在新增數(shù)據(jù)的時(shí)候，mongodb會(huì)自動(dòng)為每一個(gè)數(shù)據(jù)生成一個(gè)_id
以后就可以通過(guò)這個(gè)獨(dú)一無(wú)二的_id來(lái)查找操作數(shù)據(jù)
然后將這三種數(shù)據(jù)模型導(dǎo)出給sever端使用

//curd.js
module.exports = {
    MonBlog: MonBlog,
    MonEssay: MonEssay,
    MonArticle: MonArticle
}

Sever端配置

使用Node來(lái)搭建我們的服務(wù)器
安裝express框架,添加body-parser中間件，用來(lái)對(duì)傳入的請(qǐng)求體進(jìn)行解析
將路由寫(xiě)在另一個(gè)模塊router.js中，并引入

//app.js
const express=require("express")
const bodyParser=require("body-parser")

const router=require("./router")
const app=express()

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

app.use(bodyParser.json())

app.use("/",router)

監(jiān)聽(tīng)7000端口

app.listen(7000)

跨域

這里可能你們也注意到了
server端監(jiān)聽(tīng)的是7000端口
但是前臺(tái)頁(yè)面其實(shí)在8080端口訪問(wèn)
為了實(shí)現(xiàn)跨域請(qǐng)求
我們需要對(duì)config文件夾中的index.js文件進(jìn)行一些修改

給proxyTable添加一種跨域訪問(wèn)規(guī)則
這樣，在8080端口的前端以/data開(kāi)頭的請(qǐng)求都可以跨域訪問(wèn)到在7000端口的sever了

增刪查改

配置路由模塊，并引入curd.js導(dǎo)出的三種數(shù)據(jù)模型

//router.js
const express = require("express")
const curd = require("./curd")
var router = express.Router()

const MonBlog = curd.MonBlog
const MonEssay = curd.MonEssay
const MonArticle = curd.MonArticle

然后我們就可以運(yùn)用mongoose提供的API來(lái)進(jìn)行增刪查改了
比如我們通過(guò)前端post的信息，來(lái)新增數(shù)據(jù)

router.post("/data/blog/new", (req, res) => {
    new MonBlog(req.body).save((err) => {
        if (err) res.send(err)
    })
})

把所有的文章數(shù)據(jù)送給前端

    router.get("/data/blog", function (req, res) {
    MonBlog.find((err, data) => {
        if (err) {
            res.send(err)
            return
        }
        res.send(data)
    })
})

想要通過(guò)接收到前端送過(guò)來(lái)的信息，（用body-parser解析）來(lái)修改對(duì)應(yīng)的數(shù)據(jù)

router.post("/data/blog/:id"，(req, res) => {
        MonBlog.findByIdAndUpdate(req.body.id, {
            title: req.body.title,
            content: req.body.content,
            comments:req.body.comments
        }, function (err, data) {
            if (err) res.send(err)
        })
    })

刪除數(shù)據(jù)

router.delete("/data/essay/:id"，(req, res) => {
        MonEssay.findByIdAndDelete(req.params.id, function (err, data) {
            if (err) res.send(err)
        })
    }))

至此我們便完成了項(xiàng)目中的這一塊部分

接下來(lái)

之后我們便要開(kāi)始前端部分的制作了
這個(gè)我打算分成兩塊來(lái)講
后臺(tái)管理系統(tǒng)和前臺(tái)頁(yè)面
敬請(qǐng)期待接下來(lái)的文章

已更新第二篇：https://segmentfault.com/a/11...
已更新第三篇：https://segmentfault.com/a/11...