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