VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

xcold 發布于2019-08-30 10:48 / 1542人閱讀

摘要：前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目地址效果后臺管理系統前端頁面架構可以看到，在整個項目中，沒有頁面的跳轉只有前后端的數據交換，所有的頁面更新都是組件更新和數據更新后端只對數

前言

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

項目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...

云數據庫MySQL 云數據庫MongoDB wordpress個人博客系統 node博客前臺調用后臺 asp后臺加前臺

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114576.html

VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

摘要：前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目地址效果后臺管理系統前端頁面架構可以看到，在整個項目中，沒有頁面的跳轉只有前后端的數據交換，所有的頁面更新都是組件更新和數據更新后端只對數前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目github地址：https://git...

不知名網友 2019-08-02 16:16 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

摘要：前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目地址效果后臺管理系統前端頁面架構可以看到，在整個項目中，沒有頁面的跳轉只有前后端的數據交換，所有的頁面更新都是組件更新和數據更新后端只對數前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目github地址：https://git...

tinyq 2019-08-26 13:43 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

摘要：前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目地址效果后臺管理系統前端頁面架構可以看到，在整個項目中，沒有頁面的跳轉只有前后端的數據交換，所有的頁面更新都是組件更新和數據更新后端只對數前言學習前端也有一段時間了做個個人博客網站吧正好總結練習一下這段時間的所學文章很長，會拆成三篇來講項目github地址：https://git...

kidsamong 2019-06-26 18:01 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（下）

摘要：前文上篇中篇地址現在只剩下把東西展示出來了頁面這里有四種頁面其實是四個組件文章，雜談，收藏，具體的文章或雜談前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法我還是定義了三個組件以及具體的那個可以看到它們前文上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

YacaToy 2019-08-02 16:16 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（下）

摘要：前文上篇中篇地址現在只剩下把東西展示出來了頁面這里有四種頁面其實是四個組件文章，雜談，收藏，具體的文章或雜談前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法我還是定義了三個組件以及具體的那個可以看到它們前文上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

EdwardUp 2019-08-30 10:50 評論0 收藏0