vue.js+php开发个人博客系统

图片 20

原文链接:

更新:
如果自己注册的话则为普通账户,无法进入博客后台添加分类以及文章,存在验证(默认没有数据,所以第一次启动都是空的),数据都是管理员账户去博客后台创建的.
解决办法:需要在mongodb中手动插入一条isAdmin属性为true的管理员账户,
具体结构参考下图(无需手动设置id)…然后去登陆创建分类或是文章数据,再返回首页查看效果即可真是不好意思!

前言

图片 11.png

图片 2

这篇文章实现的博客系统使用 Vue 做前端框架,Node + express
做后端,数据库使用的是
MongoDB。实现了用户注册、用户登录、博客管理(文章的修改和删除)、文章编辑(Markdown)、标签分类等功能。

前端源码地址: :

image.png

前端模仿的是 hexo 的经典主题
NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成
vue components。

该博客于2018年7月开始开发,8月完成并上线第一个版本,至今处于优化+添加新功能…

前言:

完全使用ajax交互, 无服务端模版渲染
后端部分基本完全参考妙味课堂腾讯课堂公开的nodejs搭建博客视频
但是该视频是完全的后端项目,后端模版渲染,十分不习惯就用vue重写了
没有node基础和mongoose基础的同学可以去看看,两天快速刷完
传送门

项目截图:

  1. client

图片 3

博客首页

图片 4

查看文章

  1. admin

图片 5

分类管理

图片 6

新建文章

使用技术:

  • 前端

    1. vue
    2. vue-router 前端路由管理
    3. axios 发送ajax请求
    4. stylus css 预处理
    5. element-ui 后台管理ui
    6. marked.js 新建文章支持markdown语法
    7. highlight.js 新建文章支持代码高亮
  • 后端

    1. express
    2. body-parser 获取post请求内容
    3. cookies cookie处理模块
    4. mongoose 数据库操作模块
  • 功能需求

前端:

  1. 首页内容聚合
  2. 列表页 —— 分类列表
  3. 内容页 —— 评论
  4. 注册
  5. 登录

后台:

  1. 登录

  2. 分类管理

    • 分类列表
    • 添加分类
    • 修改分类
    • 删除分类
    • 查看分类下的所有博文 (暂未实现)
  3. 文章管理

    • 文章列表 : 所有文章; 按分类查看文章 (暂未实现)
    • 添加文章
    • 修改文章
    • 删除文章
    • 查看文章下所有评论(暂未实现)
  4. 评论管理 (暂未实现)

    • 评论列表 : 所有评论; 查看指定文章评论
    • 删除评论
  5. 移动端适配 (暂未实现)

实现的功能

一直想搭建自己的个人博客,写博客可以记录我的学习笔记、总结经验、分享技术等等。尝试过csdn、博客园、hexo写博客,但作为一名程序猿,还是想拥有属于自己的个人博客!

开始

# server目录以及vue项目根目录均需npm install
npm install

# 进入mongodb的bin目录启动数据库 (需了解mongodb的初步启动)
mongod --dbpath=E:projectblogserverdb 

# 进入server目录启动服务端
node app.js

# 启动浏览器端
npm run dev

图片 7

启动数据库

图片 8

启动服务端(node)

图片 9

启动浏览器端(vue)

      1.文章的编辑,修改,删除

  • 最初接触vue是今年年初的时候,我的毕业设计是做一个二手车销售网站…一开始看到这题目我是拒绝的,因为我想做android,没办法,老师不给换题目)。这个时候我的前端知识还处于html+css+单纯js或jq实现的阶段,慢慢在网上了解到vue,了解到vue<code>提供了响应式
    和组件化 (Composable)
    的视图组件</code>,这正是我喜欢的,所以就用vue写毕业设计,之后就一发不可收拾,接连写了(用Vue实现海报排版设计功能)、视频播放网站。这次就决定用vue写个个人博客。
  • 记得两三年接触的php,当时是跟朋友一起做项目,用的thinkphp(不过当初我做的是前端,php就了解一下),之后就一直做android,也是因为我的毕业设计,才开始重新使用php,选择了最容易上手的ci框架,边学边做毕业设计,也慢慢封装了一个方便使用的项目(基本只需写controller和model,配置router、数据库就行),所以这次博客也就选择这个来开发,速度快些。

注意

  1. cookie相关:使用axios碰到的跨域cookie问题
    参考:axios
    cookie问题和表单上传问题探究

  2. markdown语法支持: marked.js + highlight.js
    使用方法可参见源文件 src => pages => admin => markdown.vue
    有详细的使用代码
    参考:marked.js简易手册

  3. mongoose以及express等后端部分代码有详细的注释,但是基本知识还是要了解,不懂可以看前面提到的视频

后话:
问题肯定特别多,做这个的时候也是特别糙,暑假还没结束,心还在浪.
除了上述暂未实现的功能外,很多代码没有优化,很脏,可能有不少重复代码,能够抽象出来却没有抽象,但是有一点好处就是阅读的话比较方便,不用到处跳(什么鬼理由-
-!!),好啦,就这样!

给我一颗小星星好不咯:github

谢谢哥哥姐姐弟弟妹妹!

      2.支持使用 Markdown 编辑与实时预览

项目放在我的阿里云ECS上,图片上传到七牛

      3.支持代码高亮

  • php
  • vue
  • vue-router
  • vuex-router-sync
  • vuex
  • web-storage-cache
  • element-ui
  • axios
  • cropperjs(图片裁剪,后台管理系统中使用)
  • highlight.js
  • marked(markdown文本转html)
  • mavon-editor(markdown编辑器)
  • moment
  • photoswipe

      4.给文章添加标签

参考hexo的next主题,根据自己的喜好和审美观稍作修改。

      5.支持用户注册登录

效果图

由于gif压缩比较模糊,可移步到博客直接浏览

  • 移动端

    图片 10博客图片 11后台管理

  • pc端

    图片 12博客图片 13后台管理

使用到的技术

php写博客接口

图片 14image.png

图片 15image.png

其中<code>success_result、fail_result</code>这两个方法是接口返回的json结构,<code>success、fail</code>这两个方法是model返回给controller的json结构,这样封装统一返回接口,比较好管理。

这里我使用了token作为权限认证,每次登陆都会重新生成一个新的token以及更新有效期,保存进数据库。在Common_model中实现token检查:

图片 16image.png

在Base_Controller中加载Common_model并获取客户端传来的accessToken:

图片 17image.png其他所有controller都继承Base_controller,在需要权限验证的controller构造方法里调用权限检查:图片 18image.png

前端

博客

后台管理系统与博客写在同一个项目里,使用vue-cli脚手架的项目,自己再改造一下。因为首屏加载慢问题,一些库(vue、element-ui等在非dev模式下改成由cdn加载)。

博客:
首页、分类/标签、归档、关于、友链、文章、文章列表、个人简历、搜索

后台管理系统:
首页、文章管理(发布、编辑、删除、预览等)、评论管理、分类/标签管理、网站配置(关于、简历、头像等)

一些共用组件: 评论模块(表情实现参考jquery
表情输入框,可存数据库)、markdown文章显示模块(使用marked解析(发布的时候解析成html存进数据库的)、highlight.js处理代码高亮、photoswipe实现大图预览)、图片裁剪上传(el-upload+cropperjs)、文章目录(根据html自动生成)

图片 19image.png

图片 20image.png

写这个博客系统初版用了大概一个月时间,现在陆陆续续在优化以及添加新功能学到了cdn加载、图片dataUrl转blob、动画效果、pc移动自适应等知识。每一次做项目都是在不断学习,不断进步

前端源码地址: :

      1.Vue.js

      2.vue-cli

      3.vue-router

      4.vue-resource

      5.element-ui

      6.marked

      7.highlight.js

后端

      1.Node.js

      2.Express

      3.Mongoose

基本思路

前端使用 vue-router 操作路由,实现单页应用的效果。使用 vue-resource
从后台获取数据,数据的处理全部都在前端,所以后端要做的事情很简单——把前端打包好的数据存进数据库中和从数据库中取出数据。前后端使用统一的路由命名规则。

项目目录

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图