目录
实现效果:
文章后台管理系统
项目源码可在主页资源进行下载,网站地址:http://zhangwangyun.web3v.work
1、软件准备
- 问题: 新的电脑上, 需要准备哪些软件, 我们才能开发vue项目?
- VSCode -> 写代码
- Vetur插件 (让.vue文件代码高亮)
- VueHelper插件 (有些代码块, 补全代码)
- ESLint插件 (帮我们根据打开项目文件夹根目录eslintrc配置检查和修复问题)
- Node环境 -> 为了得到node命令和npm命令, 下载全局包, 得到一些扩展命令
- 下载@vue/cli全局包(一次)(得到vue命令, 用于创建脚手架项目)
- 谷歌浏览器
- 查看我们写完的项目, 运行html网页
- vue-devtool插件 -> 调试开发环境下vue项目, 直接看变量值…
- git软件 -> 管理代码版本/和别人合并代码
- 接口文档
- 项目设计图
- VSCode -> 写代码
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 富文本编辑功能
还有一些功能就不一 一列举了。
注: 每个用户看到的数据不同,每个用户只能看到自己发布的文章, 只能删除自己管辖内的文章