vue-blog

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 网页开发工具
软件类型 开源软件
地区 不详
投 递 者 沈弘盛
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

环境准备

  • vue-cli v4.2.3
  • Node.js v12.13.0
  • MongoDB v4.2.3

安装依赖

1. cd server 进入 serve 文件夹

npm i

2. cd web 进入 web 文件夹

npm i

3. cd admin 进入 admin 文件夹

npm i

本地启动项目

1. cd server 进入 server 文件夹

运行前, 请确认是否已启动本地 mongoDB 数据库服务,默认地址:mongodb://127.0.0.1:27017/

npm run serve

2. cd web 进入 web 文件夹

npm run serve

3. cd admin 进入 admin 文件夹

npm run serve

后台管理系统

  • 新增分类

  • 分类列表(增删改查)

  • 新增文章

  • 文章列表(增删改查)

  • 文章评论列表

  • 新增友链

  • 友链列表(增删改查)

  • 留言列表

  • 留言用户列表

  • Markdown 编辑器集成

  • 图片上传功能

  • 新增用户

  • 用户列表(增删改查)

  • 通用增删改查接口实现(中间件 resourceMiddleware)

  • 登录注册功能

  • 登出功能

  • 添加 jwt 校验(1. 用户名查找 2. 密码校验 3. 返回 token)

  • 添加 http 拦截器(request、response)

博客系统

  • 博客首页 UI
  • 博客首页接口实现
  • 博客归档页面 UI
  • 博客归档页面接口实现
  • 博客标签页面 UI
  • 博客标签页面接口实现
  • 博客文章页面 UI
  • 博客文章页面接口实现
  • 博客友链页面 UI
  • 博客友链页面接口实现
  • 博客留言页面 UI
  • 博客留言页面接口实现

项目打包部署

  • web、admin 项目打包
  • 域名购买
  • 域名解析
  • linux 云服务器购买
  • git 安装, ssh key 添加
  • pm2 进程管理
  • ngnix 配置
  • mongodb 配置
  • mongodb 数据从本地迁移至服务器
  • 七牛云 cdn 全站免费加速

博客后台管理系统

博客系统

欢迎 Star,Issues

  • 您的 Star,是我不断更新维护的动力!!!
  • 若在使用过程中,存在某些问题,欢迎 Issues

To Do List

  • 性能优化,图片需要压缩处理,预加载处理
  • 给博文页面加上搜索功能
  • 浏览器兼容问题,移动端适配。只用了自己电脑的谷歌 chrome 浏览器开发和手机适配效果,其他种种都没试,不过不建议移动端使用,电脑登陆效果更佳
  • 解决 vue 的 seo 问题及刷新渲染页面抖动问题。先暂时做 vue 预渲染,不排除以后会做 vue 服务端渲染或 nuxt.js 服务端渲染
  • 整理代码,拆分出组件。让结构更清晰,代码量更少
  • 利用 typescript 重构整个项目
  • 想到有意思的功能也会慢慢加上,持续开发中...
  • vue2.6中对typescript的支持 Vue CLI 3 可以使用 TypeScript 生成新工程。 # 1. 如果没有安装 Vue CLI 就先安装 cnpm install --global @vue/cli # 2. 创建一个新工程,并选择 "Manually select features (手动选择特性)" 选项 vue create my-project-name 1. v

  • VUE ---- 利用vue-print-nb实现打印功能 一、安装vue-print-nb 没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。 Vue2.0版本安装方法: npm install vue-print-nb --save Vue3.0版本安装方法: npm install vue3-print-nb --s

  • 动态双向绑定 <select v-model="blog.author"> <option v-for="author in authors"> {{author}} </option> </select> //=====================

  • <template> <basic-container> <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissi

  • vue-router的实现原理大概如下: 1.通过用户传入的路由数组生成对应的路由表 2.在install方法中对vue进行全局混入,定义响应式属性_route,方便触发vue的更新 3.通过addEventListener监听hash的改变,或者支持h5的话优先使用pushState(在本文代码中没有使用) 4.实现router-link和router-view组件 代码如下,方便各位理解vue

  • 个人博客地址https://gitee.com/baymaxsjj 前言 经过前面一系列的配置,也可以开始对项目部分开始编写。其中会Vue 全家桶 Vue Router 及 Vuex 进行部分总结,还会对axios 进行封装,对错误进行统一的拦截。这些插件是对路由管理,数据交流,网络交互各个功能的实现,在项目中使用频繁,对其熟悉基本的使用方法,能够大大的提高效率。 Vue Router Vue R

  • ############ VUE.JS ########## 在【设置】中 file types 选中html后手动添加: *.vue ###网址: cn.vuejs.org 模板语法 API 指令 全局API methods computed watch 注意,不要在实例属性或者回调函数中(如 vm.$watch('a', newVal => thi

  • 参考文章:Vue + Spring Boot 项目实战 1.前后端框架搭建

  • 博主:kingrome2017 《vuejs2.0详细教程,结合Api文档》:https://blog.csdn.net/kingrome2017/article/details/70197574 v-text 与 v-html 区别 自定义事件如何触发 表单元素 过v-model 及时处理数据实例 计算属性及调用方法的优缺点 监听-watch 全局注册组件规范写法: 动态实现模板 父子级组件间的

 相关资料
  • 构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选

  • vue

    教程简介 本教程要实现一个简单的后台管理系统,包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能,教程会从 Vue 入门开始讲解,包含 es6、Sass、Webpack、Bootstrap、jQuery 等技术,再到后台管理系统的一些常规功能,用 Vue 如何去实现。 也许会有人质疑 Vue 和 jQuery 的搭配,在我本人看来,jQuery 本身已很成熟,而且包含了很多

  • FAQ 哇,非常长的一页!是否意味着 Vue 2.0 已经完全不同了呢,是否需要从头学起呢,Vue 1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是!几乎 90% 的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子,所以显得有点长。不用担心,你不必从头到尾把本节读一遍! 我该从哪里开始项目迁移呢? 首先,在当前项目下运行迁移工具。我们非常谨慎地把高级 Vue

  • Integration with Vue is easily done with the @tinymce/tinymce-vue package. To use it, install it with npm like this: npm install @tinymce/tinymce-vue For information on how to use the package, check

  • 本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解。 IDEs 更容易理解代码,从而提供高亮、格式化等辅助功能 更容易使用现有的工具 更容易实现缓存以及代码包的分拆 要点 尽量使用ES2015,遵循CommonJs规范 切勿直接操作DOM,所以也应该避免使用jQuery库 data属性一定要是一个函数并且返回一个json对象

  • 全局配置 Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列属性: silent 类型: boolean 默认值: false 用法: Vue.config.silent = true 取消 Vue 所有的日志与警告。 optionMergeStrategies 类型: { [key: string]: Function } 默认值: {} 用法: Vue.c