资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）

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

tinyq / 896人阅读

摘要：前言学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲项目地址效果后台管理系统前端页面架构可以看到，在整个项目中，没有页面的跳转只有前后端的数据交换，所有的页面更新都是组件更新和数据更新后端只对数

前言

学习前端也有一段时间了
做个个人博客网站吧
正好总结练习一下这段时间的所学
文章很长，会拆成三篇来讲

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

效果

后台管理系统：

前端页面：

架构


可以看到，在整个项目中，没有页面的跳转
只有前后端的数据交换，所有的页面更新都是组件更新和数据更新
后端只对数据库进行增删查改，以及接受前端的异步请求返回数据
所以本质上这是一个单页面应用
所有的重心全部放在前端

文件目录：

数据

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

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

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

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

Mongodb-数据定义与存放

文章，杂谈，收藏
这三种表结构是不一样的
我们要先对其进行定义

我用的数据库是mongodb
比较灵活，而且与node配合使用起来更为简洁

安装配置mongodb的过程这里就不再赘述
网上很容易搜到教程
如果安装中卡住了，就在安装时不要勾选左下角的compass（可视化工具）
然后在项目中安装mongodb的第三方操作库mongoose

</>复制代码 
  1. npm i mongoose --save

新建curd.js文件
引入mongoose并连接数据库（第一次连接并没有这个数据库，会帮我们自动创建）

</>复制代码 
  1. //curd.js
  2. const mongoose = require("mongoose")
  3. mongoose.connect("mongodb://localhost/gblog")

定义三种数据的结构

</>复制代码 
  1. //curd.js
  2. const MonBlog = mongoose.model("monblog", {
  3.     title: {
  4.         type: String,
  5.         required: true //表示这个属性是必需的
  6.     },
  7.     content: {
  8.         type: String,
  9.         required: true
  10.     },
  11.     date: {
  12.         type: String,
  13.         required: true
  14.     },
  15.     comments:[]
  16. })
  17. const MonEssay = mongoose.model("monessay", {
  18.     title: {
  19.         type: String,
  20.         required: true
  21.     },
  22.     content: {
  23.         type: String,
  24.         required: true
  25.     },
  26.     date: {
  27.         type: String,
  28.         required: true
  29.     },
  30.     comments:[]
  31. })
  32. const MonArticle = mongoose.model("monarticle", {
  33.     title: {
  34.         type: String,
  35.         required: true
  36.     },
  37.     link: {
  38.         type: String,
  39.         required: true
  40.     },
  41.     date: {
  42.         type: String,
  43.         required: true
  44.     }
  45. })

在新增数据的时候，mongodb会自动为每一个数据生成一个_id
以后就可以通过这个独一无二的_id来查找操作数据
然后将这三种数据模型导出给sever端使用

</>复制代码 
  1. //curd.js
  2. module.exports = {
  3.     MonBlog: MonBlog,
  4.     MonEssay: MonEssay,
  5.     MonArticle: MonArticle
  6. }
Sever端配置

使用Node来搭建我们的服务器
安装express框架,添加body-parser中间件，用来对传入的请求体进行解析
将路由写在另一个模块router.js中，并引入

</>复制代码 
  1. //app.js
  2. const express=require("express")
  3. const bodyParser=require("body-parser")
  4. const router=require("./router")
  5. const app=express()
  6. app.use(bodyParser.urlencoded({extended:false}))
  7. app.use(bodyParser.json())
  8. app.use("/",router)

监听7000端口

</>复制代码 
  1. app.listen(7000)
跨域

这里可能你们也注意到了
server端监听的是7000端口
但是前台页面其实在8080端口访问
为了实现跨域请求
我们需要对config文件夹中的index.js文件进行一些修改

给proxyTable添加一种跨域访问规则
这样，在8080端口的前端以/data开头的请求都可以跨域访问到在7000端口的sever了

增删查改

配置路由模块，并引入curd.js导出的三种数据模型

</>复制代码 
  1. //router.js
  2. const express = require("express")
  3. const curd = require("./curd")
  4. var router = express.Router()
  5. const MonBlog = curd.MonBlog
  6. const MonEssay = curd.MonEssay
  7. const MonArticle = curd.MonArticle

然后我们就可以运用mongoose提供的API来进行增删查改了
比如我们通过前端post的信息，来新增数据

</>复制代码 
  1. router.post("/data/blog/new", (req, res) => {
  2.     new MonBlog(req.body).save((err) => {
  3.         if (err) res.send(err)
  4.     })
  5. })

把所有的文章数据送给前端

</>复制代码 
  1.     router.get("/data/blog", function (req, res) {
  2.     MonBlog.find((err, data) => {
  3.         if (err) {
  4.             res.send(err)
  5.             return
  6.         }
  7.         res.send(data)
  8.     })
  9. })

想要通过接收到前端送过来的信息，（用body-parser解析）来修改对应的数据

</>复制代码 
  1. router.post("/data/blog/:id"，(req, res) => {
  2.         MonBlog.findByIdAndUpdate(req.body.id, {
  3.             title: req.body.title,
  4.             content: req.body.content,
  5.             comments:req.body.comments
  6.         }, function (err, data) {
  7.             if (err) res.send(err)
  8.         })
  9.     })

删除数据

</>复制代码 
  1. router.delete("/data/essay/:id"，(req, res) => {
  2.         MonEssay.findByIdAndDelete(req.params.id, function (err, data) {
  3.             if (err) res.send(err)
  4.         })
  5.     }))
  6.

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

接下来

之后我们便要开始前端部分的制作了
这个我打算分成两块来讲
后台管理系统和前台页面
敬请期待接下来的文章

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

云数据库MySQL 云数据库MongoDB wordpress个人博客系统 node博客 前台调用后台 asp后台加前台

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109367.html

相关文章

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

    摘要：前言学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲项目地址效果后台管理系统前端页面架构可以看到，在整个项目中，没有页面的跳转只有前后端的数据交换，所有的页面更新都是组件更新和数据更新后端只对数 前言 学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲 项目github地址：https://git...

    不知名网友 评论0 收藏0

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

    摘要：前言学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲项目地址效果后台管理系统前端页面架构可以看到，在整个项目中，没有页面的跳转只有前后端的数据交换，所有的页面更新都是组件更新和数据更新后端只对数 前言 学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲 项目github地址：https://git...

    kidsamong 评论0 收藏0

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

    摘要：前言学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲项目地址效果后台管理系统前端页面架构可以看到，在整个项目中，没有页面的跳转只有前后端的数据交换，所有的页面更新都是组件更新和数据更新后端只对数 前言 学习前端也有一段时间了做个个人博客网站吧正好总结练习一下这段时间的所学文章很长，会拆成三篇来讲 项目github地址：https://git...

    xcold 评论0 收藏0

  • VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（下）

    摘要：前文上篇中篇地址现在只剩下把东西展示出来了页面这里有四种页面其实是四个组件文章，杂谈，收藏，具体的文章或杂谈前三个虽然布局一样，但功能有细微差别，同时考虑到以后可能要针对不同种类做不同的布局方法我还是定义了三个组件以及具体的那个可以看到它们 前文 上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

    YacaToy 评论0 收藏0

  • VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（下）

    摘要：前文上篇中篇地址现在只剩下把东西展示出来了页面这里有四种页面其实是四个组件文章，杂谈，收藏，具体的文章或杂谈前三个虽然布局一样，但功能有细微差别，同时考虑到以后可能要针对不同种类做不同的布局方法我还是定义了三个组件以及具体的那个可以看到它们 前文 上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

    EdwardUp 评论0 收藏0

发表评论

登陆后可评论

0条评论

tinyq

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<