实现效果：

项目源码可在主页资源进行下载,网站地址：http://zhangwangyun.web3v.work

1、软件准备

1. 问题: 新的电脑上, 需要准备哪些软件, 我们才能开发vue项目?
   • VSCode -> 写代码
     • Vetur插件 (让.vue文件代码高亮)
     • VueHelper插件 (有些代码块, 补全代码)
     • ESLint插件 (帮我们根据打开项目文件夹根目录eslintrc配置检查和修复问题)
   • Node环境 -> 为了得到node命令和npm命令, 下载全局包, 得到一些扩展命令
     • 下载@vue/cli全局包(一次)(得到vue命令, 用于创建脚手架项目)
   • 谷歌浏览器
     • 查看我们写完的项目, 运行html网页
     • vue-devtool插件 -> 调试开发环境下vue项目, 直接看变量值…
   • git软件 -> 管理代码版本/和别人合并代码
   • 接口文档
   • 项目设计图

2、项目简单介绍

2.1 注册功能

核心思想: 注册就是把用户输入的账号和密码做好校验以后, 收集到变量中, 再调用接口发给后台, 后台代码把他们存储到数据库中,再给前端返回提示.

2. 2 登录功能

核心思想: 通过表单校验, 收集用户输入内容, 调用接口带给后台验证, 返回响应结果, 前端给用户提示结果

2.2.1 持久化存储

核心思路：把登录成功, 后台返回的token字符串存到vuex中，然后通过一个vuex插件包vuex-persistedstate进行持久化存储。

2.2.2 退出登录

核心思想: 退出登录就是清除vuex和本地所有缓存的值, 然后页面强制切换到登录页面

2.3 路由功能

2.4 echarts完成图表功能

2.5 修改个人基本信息功能

2.6 更换个人头像功能

2.7 重置密码功能

2.8 文章分类功能

2.8.1 增删改文章分类

2.9 文章列表功能

2.9.1 增删查文章列表

2.9.2 分页功能

2.10 表单验证功能

2.11 富文本编辑功能

还有一些功能就不一 一列举了。

注： 每个用户看到的数据不同，每个用户只能看到自己发布的文章, 只能删除自己管辖内的文章