电商项目 全部操作流程

1. 项目初始化
A. 安装 Vue 脚手架
B. 通过脚手架创建项目
新建文件夹(VUE1)
在文件夹中打开cmd  输入 vue ui 电商项目 全部操作流程_第1张图片

新建vue 新项目

电商项目 全部操作流程_第2张图片

第一步

电商项目 全部操作流程_第3张图片

 第二部

电商项目 全部操作流程_第4张图片

第三部

电商项目 全部操作流程_第5张图片

第四部

电商项目 全部操作流程_第6张图片

跳转可视化窗口

电商项目 全部操作流程_第7张图片

在可视化窗口下载   elementUI

电商项目 全部操作流程_第8张图片

电商项目 全部操作流程_第9张图片

 配置Axios(运行依赖)

电商项目 全部操作流程_第10张图片

把项目提交到 gitee 上  

gitee官网  Gitee - 基于 Git 的代码托管和研发协作平台

电商项目 全部操作流程_第11张图片

创建好自己的仓库

电商项目 全部操作流程_第12张图片

 在当前文件夹里打开   gitee  窗口

电商项目 全部操作流程_第13张图片

 添加到本地仓库

电商项目 全部操作流程_第14张图片
提交代码
电商项目 全部操作流程_第15张图片

 先把本地库连接上远程库

电商项目 全部操作流程_第16张图片

上传
电商项目 全部操作流程_第17张图片

刷新gitee的仓库 

电商项目 全部操作流程_第18张图片

链接数据库

 打开数据库  新建新数据库

电商项目 全部操作流程_第19张图片

找到要导入的数据库文件

电商项目 全部操作流程_第20张图片

 把文件拖进新建的数据库

电商项目 全部操作流程_第21张图片

电商项目 全部操作流程_第22张图片

链接好了后

改数据库的账号密码 

电商项目 全部操作流程_第23张图片

然后测试

先启动服务器

电商项目 全部操作流程_第24张图片

用postman测试接口是否通过
电商项目 全部操作流程_第25张图片

实现登录功能

先创建并切换一个gitee 叫( login )的 分支 

电商项目 全部操作流程_第26张图片

 查看分支

电商项目 全部操作流程_第27张图片

 打开 vue ui   运行 app

电商项目 全部操作流程_第28张图片

 默认样式

电商项目 全部操作流程_第29张图片

 修改App.vue根组件 里的   template  script  style  清空即可

改之前

电商项目 全部操作流程_第30张图片

 该之后

电商项目 全部操作流程_第31张图片

修改路由js文件

 改之前电商项目 全部操作流程_第32张图片

 该之后

电商项目 全部操作流程_第33张图片

然后将 views 删除,将 components 中的
helloworld.vue 删除
components 文件夹中新建Login.vue 页面  写好默认
电商项目 全部操作流程_第34张图片

 配置路由规则

router.js 中导入组件并设置规则
电商项目 全部操作流程_第35张图片

安装开发依赖  less

电商项目 全部操作流程_第36张图片

 安装 [email protected]版本 电商项目 全部操作流程_第37张图片

重启后 成功   

如果失败就在重启一遍 

电商项目 全部操作流程_第38张图片

 然后需要添加公共样式,在assets文件夹下面添加css文件夹,创建global.css文件,添加全局样式

电商项目 全部操作流程_第39张图片

main.js中导入global.css,使得全局样式生效

电商项目 全部操作流程_第40张图片

再次从起 vue ui  运行app后  默认样式变了

电商项目 全部操作流程_第41张图片

编辑 Login.vue 页面
下载 element-ui  插件  

在min.js 里导入 

电商项目 全部操作流程_第42张图片

plugins 文件夹中打开 element.js 文件,进行 elementui 的按需导入
电商项目 全部操作流程_第43张图片

运行 element-ui  启动app

电商项目 全部操作流程_第44张图片

校验

点击提交按钮自动校验
给表单添加 ref属性
电商项目 全部操作流程_第45张图片

给登陆按钮  重置按钮注册事件

触发后 校验
点击登陆按钮校验账号密码
电商项目 全部操作流程_第46张图片

方法 可以是生命周期

点击重置按钮 清空

电商项目 全部操作流程_第47张图片

然后

校验通过发送 ajax 请求
电商项目 全部操作流程_第48张图片

导入并配置 axios
电商项目 全部操作流程_第49张图片

设置登陆的ajax

电商项目 全部操作流程_第50张图片

注意测试ajax的时候  要启动服务器  

 电商项目 全部操作流程_第51张图片

如果失败会显示弹窗

电商项目 全部操作流程_第52张图片

 如果不成功  配置一下

电商项目 全部操作流程_第53张图片

登陆成功的话

先保存 token  并且跳转  并且弹窗

电商项目 全部操作流程_第54张图片

 创建一个home都首页 vue

电商项目 全部操作流程_第55张图片

配置Home 的路由

电商项目 全部操作流程_第56张图片

在写退出功能

在Home 页面写一个按钮 并注册事件

电商项目 全部操作流程_第57张图片

电商项目 全部操作流程_第58张图片

如果登陆没有 token 不能访问home  如果页面没有token 强制跳转登陆页面

电商项目 全部操作流程_第59张图片

测试  总结 

登陆成功 跳转 home 弹窗 并且添加token

电商项目 全部操作流程_第60张图片

点击退出  删除token  并跳转 login

电商项目 全部操作流程_第61张图片

 修改网页的home 

电商项目 全部操作流程_第62张图片

依然 强制跳转login

 

但是有有一个bug  

自己添加假token  依然能访问到home 

电商项目 全部操作流程_第63张图片

现在开始做Home里的样式

电商项目 全部操作流程_第64张图片

先把  Home里的样式写一下

先写布局

电商项目 全部操作流程_第65张图片

 电商项目 全部操作流程_第66张图片        

在写 

你可能感兴趣的:(vue.js,html5,javascript)