vue php mongodb,VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）...

前言

学习前端也有一段时间了

做个个人博客网站吧

正好总结练习一下这段时间的所学

文章很长，会拆成三篇来讲

效果

后台管理系统：

前端页面：

架构

可以看到，在整个项目中，没有页面的跳转

只有前后端的数据交换，所有的页面更新都是组件更新和数据更新

后端只对数据库进行增删查改，以及接受前端的异步请求返回数据

所以本质上这是一个单页面应用

所有的重心全部放在前端

文件目录：

数据

我的网站内容分成了三个板块

文章：关于前端知识的个人原创内容

杂谈：畅所欲言，不一定与前端相关的个人内容

收藏：别人的优秀文章，做成收藏夹的形式，点击直接跳转至对应网站链接

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)

})

}))

至此我们便完成了项目中的这一块部分

接下来

之后我们便要开始前端部分的制作了

这个我打算分成两块来讲

后台管理系统和前台页面

敬请期待接下来的文章