学习目的:
随着社会的发展,技术的更新换代。市场上有很多相关的后台管理系统,我们可以使用,但代码毕竟是别人写的,虽然可以直接拿来用,但还是需要很大的学习成本。市场上主流的node管理系统有iview-admin,elment-admin,然而我们在使用过程中发现他们功能虽全,但体积又太大。我们实际制作过程中并不需要那么多的组件,如果我们要删了这些组件,又是不少的工作量,而且组件之间还很有多的关联文件,删了之后会出现很多不必要的问题。大部分的主流构建工具都是使用的webpack,而实际在体验过程中发现并不友好,这种全功能的后台体积庞大,编译也非常慢,有时候稍微改一下要等3秒多才能看到效果,而且如果要优化编译速度,我们还得熟透webpack构建工具,从而又大大的降低了开发效率,提高了学习成本。所以接下来我们来一起学习element-plus+vite+guiplan+express+mongodb来手写一套属于自己的管理系统。这里为什么选elment-plus框架呢?原因很简单,就是因为它支持vite,vite热更新直接读取module模块,并不需要去编译,使用过程几乎是秒编译,而且配置也简单,大大提高开发效率,我们不用一味的去学习各种构建工具,那样效率只会更加低下。整个项目都由自己从零开发,项目也不会笨重,根据需求来调用组件以及插件。而且在guiplan里调用插件也是非常简单,一键即可搞定,自动安装,自动引用。由于guiplan可以可视化制作页面,想要封装组件也是轻松就能快速搞定,并不需要使用别人的组件来加大项目的体积,而且也不需要学习别人组件里的逻辑。做到整个项目由自己来定制。
学习目标:
手写一套属于自己的后台管理系统,从注册到登录,从路由创建到文章的增删改查。在制作的过程中将会学到整个前后端交互逻辑,以及整个流程。让你的知识更加全面,了解更加透彻。
学习内容:
前端
- element-plus + vite安装与启动
- vite配置
- vue-router 路由的创建与使用
- vuex 状态管理
- 用guiplan制作注册页面
- 滑动验证码调用
- 注册页面调用接口
- 用guiplan制作登录页面制作
- 登录页面接口调用
- 滑动验证码使用
- guiplan搭建后台框架
- guiplan制作文章管理页面
- guplan一键制作增删改查分页表格
- guiplan调用第三方组件,echart图表为列
- 前端项目打包
后端
- express安装
- express静态资源配置
- express路由创建
- express接口创建
- 用nodejs进行mongodb 增删改查
- mongose配置
- guiplan配置用户表
- 了解session原理
- guiplan配置注册接口
- 滑动验证码制作
- guiplan登录接口制作
- guiplan文章表配置
- guiplan增删改查接口配置
- 后端接口打包
- 前后端打包之后项目合并提交上线
- nginx配置与forever启动项目