登录与注册静态组件-(处理共用图片资源问题)
登录与注册功能(git):必须要会的技能
- 登录与注册的静态组件
- assets文件夹----全部组件共用的静态资源
- 在样式当中也可以使用@符号【src别名】,切记在前面加上~
注册的业务
- 注册业务 || 登录业务中表单验证先不处理【后期会处理】
- 获取验证码接口地址: /api/user/passport/sendCode/{phone} get
登录业务
- 注册—通过数据库存储用户信息(名字、密码)
- 登录—登录成功的时候,后台为了区分你这个用户是谁-服务器下发一个token【令牌:唯一标识符】
登录接口:不完美,一般登录成功服务器会下发token,前台持久化存储token【带着token找服务器要用户信息进行展示】 - 登录过后首页用户信息的展示
(1)当用户注册完成,用户登录【用户名+密码】向服务器发请求(组件派发action:userLogin),登录成功获取到token,存储于仓库当中(非持久化的),路由跳转到home首页
(2)因此在首页当中(mounted)派发action(getUserInfo)获取用户信息,以及动态展示header组件内容。
(3)一刷新home首页,获取不到用户信息(token:vuex非持久化存储)
(4)持久化存储token
(5)存在一些问题
- 问题1:多个组件展示用户信息需要在每一个组件的mounted中触发 this.$store.dispatch(“getUserInfo”); 不行
- 问题2:用户已经登录了,就不应该再回登录页面
- 退出登录
- 导航守卫
“导航”:表示路由正在发生改变。进行路由跳转
“守卫”:你把它当作 “紫禁城护卫”
- 全局守卫:你的项目当中只要发生路由变化,守卫就能监听到。
举例子:紫禁城【皇帝、太后、妃子】,紫禁城大门守卫全要排查- 路由独享守卫:
举例子:紫禁城【皇帝、太后、妃子】,是相应的【皇帝、太后、妃子】路上守卫- 组件内守卫:
举例子:我要去皇帝屋子,已经到了皇帝屋子的外面,也有守卫
比如:用户已经登陆,用户不应该还能回到login页面
-
获取交易页面用户信息
用户登陆了才可以获取用户地址信息,不登录没办法获取到的 -
交易页面完成(商品清单)
动态展示服务器数据完成 -
提交订单
(1)先把支付静态组件先搞定
(2)点击提交订单按钮的时候,还需要向服务器发一次请求【把支付一些信息传递给服务器】 -
获取支付信息(不再使用vuex)
(1)别在生命周期函数中使用async
(2)获取支付信息 -
elementUI使用+ 按需引入
已经学过的组件库:React(Vue): antd[PC] antd-mobile[移动端]
Vue: ElementUI[PC] vant[移动端的]
(1)elementUI按需引入,配置文件发生变化,项目需要重新启动的
个人中心
- 个人中心完成
面试的时候:是否封装过组件(分页器、日历)
个人中心当中:分页器 - 全局守卫
未登录访问,交易相关(trade)、支付相关(pay,paysuccess)、用户中心(center)相关跳转到 登录页面 - 组件内守卫
只有从购物车界面才能跳转到交易页面(创建订单)
只有从交易页面(创建订单)页面才能跳转到支付页面
只有从支付页面才能跳转到支付成功页面 - 图片懒加载
https://www.npmjs.com/package/vue-lazyload
安装插件:
npm i vue-lazyload@1.3.3 -S
- vee-validate 基本使用
第一步:插件安装与引入
npm i vee-validate@2 --save 安装的插件安装2版本的
import Vue from 'vue'
import VeeValidate from 'vee-validate'
//中文的提示信息
import zh_CN from '...vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate)
第二步:提示信息
// 表单验证
VeeValidate.Validator.localize('zh_CN', {
meaasges: {
...zh_CN.meaasges,
is: (field) => `${field}必须与密码相同` //修改内置规则的message,让确认密码和密码相同
},
attributes: {
// 给校验的 field 属性名映射中文名称
phone: '手机号',
code: '验证码',
password: '密码',
password1: '确认密码',
isCheck: '协议'
}
})
第三步:基本使用
<input placeholder="请输入你的手机号"
v-model="phone"
name="phone"
v-validate="{required: true, regex:/^1\d{10}$/ }"
:class="{invalid: errors.has('phone')}"
/>
// 自定义校验规则
VeeValidate.Validator.extend("agree", {
validate: (value) => {
return value
},
getMessage: (field) => field + "必须同意"
})
const success = await this.$validator.validateAll();全部验证
- 路由懒加载
- 打包上线
打包:npm run build
项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知时哪里的代码错误。
有了 map 就可以向未加密的代码一样,准确的输出是哪一行哪一列有错误。
所以该文件如果项目不需要是可以去除掉
vue.config.js 配置
productionSourceMap: false
购买服务器
1.阿里云 2.腾讯云
8. 设置安全组,让服务器一些端口号打开
9. 利用xshell工具登陆服务器
nginx配置
- xshell进入根目录下/etc
- 进入etc目录,这个目录下有一个nginx目录,进入到这个目录【已经安装过nginx:如果没有安装过,只有四五个文件】】
- 如果想nginx:
yum install nginx
- 安装完nginx服务器以后,你会发现在nginx目录下多了一个nginx.conf文件,在这个文件中进行配置
- vim nginx.conf 进行编辑,主要添加如下两项:
(1)解决第一个问题:为什么访问服务器ip地址就可以访问到项目
location / {
root /root/
index index.html;
try_files $uri $uri/ /index.html;
}
(2)解决第二个问题:项目的数据来自于http://gmall-h5-api.atguigu.cn
location /api {
proxy_pass http://gmall-h5-api.atguigu.cn;
}
- nginx服务器跑起来
service nginx start