VueCli+Node+mongodb打造我的博客（含前臺展現及後臺管理系統）（上）

前言

學習前端也有一段時間了
作個我的博客網站吧
正好總結練習一下這段時間的所學
文章很長，會拆成三篇來說

項目github地址：https://github.com/ssevenk/ss...

效果

後臺管理系統：

前端頁面：

架構

能夠看到，在整個項目中，沒有頁面的跳轉
只有先後端的數據交換，全部的頁面更新都是組件更新和數據更新
後端只對數據庫進行增刪查改，以及接受前端的異步請求返回數據
因此本質上這是一個單頁面應用
全部的重心所有放在前端

文件目錄：

數據

個人網站內容分紅了三個板塊

• 文章：關於前端知識的我的原創內容
• 雜談：暢所欲言，不必定與前端相關的我的內容
• 收藏：別人的優秀文章，作成收藏夾的形式，點擊直接跳轉至對應網站連接

Mongodb-數據定義與存放

文章，雜談，收藏
這三種表結構是不同的
咱們要先對其進行定義

我用的數據庫是mongodb
比較靈活，並且與node配合使用起來更爲簡潔

安裝配置mongodb的過程這裏就再也不贅述
網上很容易搜到教程
若是安裝中卡住了，就在安裝時不要勾選左下角的compass（可視化工具）
而後在項目中安裝mongodb的第三方操做庫mongoose

npm i mongoose --save

新建curd.js文件
引入mongoose並鏈接數據庫（第一次鏈接並無這個數據庫，會幫咱們自動建立）

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

定義三種數據的結構

//curd.js
const MonBlog = mongoose.model('monblog', {
    title: {
        type: String,
        required: true //表示這個屬性是必需的
    },
    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
    }
})

在新增數據的時候，mongodb會自動爲每個數據生成一個_id
之後就能夠經過這個獨一無二的_id來查找操做數據
而後將這三種數據模型導出給sever端使用

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

Sever端配置

使用Node來搭建咱們的服務器
安裝express框架,添加body-parser中間件，用來對傳入的請求體進行解析
將路由寫在另外一個模塊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)

監聽7000端口

app.listen(7000)

跨域

這裏可能大家也注意到了
server端監聽的是7000端口
可是前臺頁面其實在8080端口訪問
爲了實現跨域請求
咱們須要對config文件夾中的index.js文件進行一些修改

給proxyTable添加一種跨域訪問規則
這樣，在8080端口的前端以/data開頭的請求均可以跨域訪問到在7000端口的sever了

增刪查改

配置路由模塊，並引入curd.js導出的三種數據模型

//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

而後咱們就能夠運用mongoose提供的API來進行增刪查改了
好比咱們經過前端post的信息，來新增數據

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

把全部的文章數據送給前端

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

想要經過接收到前端送過來的信息，（用body-parser解析）來修改對應的數據

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)
        })
    })

刪除數據

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

至此咱們便完成了項目中的這一塊部分

接下來

以後咱們便要開始前端部分的製做了
這個我打算分紅兩塊來說
後臺管理系統和前臺頁面
敬請期待接下來的文章

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