基于Vue前后端分离手机商城项目综合实训课程汇总

文
章
目
录

• 第1部分：前置知识补充及Vue基础
• 第2部分：vue-cli脚手架
• 第4部分：axios异步请求
• 第5部分：vue-router路由
• 第6部分：vuex基础
• 第7部分：MintUI入门
• 第8部分：ElementUI入门
• 第9部分：商城项目前端搭建-移动端和PC端
• 第10部分：商城项目后台开发
• 第11部分：服务器搭建

本篇文章是潘老师针对基于Vue前后端分离手机商城项目综合实训课程的汇总，前置知识需要掌握web前端开发、Java基础、Java Web基础以及Java SSM三大框架、Mysql数据库等，下面将此次实训课程汇总如下（其中部分不足，可有待后续补充）：

第1部分：前置知识补充及Vue基础

• HTML/CSS速写神器之Emmet语法
• 初识Vue
• 第一个Vue实例
• Vue常用指令
• Vue计算属性与侦听器
• Vue组件

第2部分：vue-cli脚手架

• vue-cli脚手架
• Vue实现简单轮播图
• Vue插槽slot

第4部分：axios异步请求

• axios异步请求获取天气预报

第5部分：vue-router路由

• vue-router路由之入门案例、命名路由和动态路由
• vue-router路由之编程式导航
• vue-router路由拦截实现将未登录请求跳转到登录页面

第6部分：vuex基础

• vuex入门案例
• vuex核心内容

第7部分：MintUI入门

• MintUI入门（1）——使用vue-cli集成Mint UI环境搭建步骤

第8部分：ElementUI入门

• ElmentUI入门（1）——使用vue-cli集成ElementUI环境搭建步骤

第9部分：商城项目前端搭建-移动端和PC端

• vue手机商城项目实战（1）-环境搭建
• vue手机商城项目实战（2）-底部选项卡公共组件实现
• vue手机商城项目实战（3）-首页搜索框组件实现
• vue手机商城项目实战（4）-首页轮播图组件实现
• vue手机商城项目实战（5）-首页类型组件实现
• vue手机商城项目实战（6）-首页商品列表组件实现
• vue手机商城项目实战（7）-商品详情组件实现
• vue手机商城项目实战（8）-路由跳转转场过渡动画效果实现
• vue手机商城项目实战（9）-添加购物车功能实现
• vue手机商城项目实战（10）-购物车组件实现

提示：部分功能模块可自行练习完成

• 使用ElementUI实现简单的后台管理首页布局

提示：PC端潘老师只给出了布局搭建，具体的菜单表格等组件使用来实现增删改查、分页等功能，可参考ElementUI官网

第10部分：商城项目后台开发

• Intellij IDEA下载安装步骤及永久破解的图文教程
• IntelliJ IDEA如何整合Maven图文教程详解
• IDEA整合码云Gitee配置步骤及使用详解
• JWT是什么？有什么作用？一文帮你了解JWT！
• SpringBoot整合JJWT实现Token登录认证
• 什么是跨域？产生原因是什么，有哪些解决方案规避跨域问题？

提示：至此应该已经可以尝试完成增删改查，分页等功能，潘老师没有写专门的文章来实现增删改查，后续可以补充上来，另外如果功能都使用postman测试不存在跨域问题，如果使用浏览器测试会存在跨域问题，在后面服务器部分我们会解决该问题

第11部分：服务器搭建

说明：前端代码部署在Nginx服务器，后端代码部署在Tomcat服务器（不做说明），图片资源存放在图片服务器

• Nginx服务器介绍、安装与配置（Windows）
• Linux系统安装与配置Nginx服务器
• VSFTP服务器安装与配置详解
• Nginx+VSFTP搭建图片服务器流程详解
• ElementUI+SpringBoot上传图片文件至VSFTP图片服务器