30.登录与注册静态组件（处理公共图片资源问题）
- 登录与注册的静态组件
- assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放在assets文件夹里的静态资源，在webpack打包时，会把此静态资源当作一个模块，打包到JS文件中。
- 在CSS样式中也可以使用@符号【src别名】，切记在前面加上~
修改代码：
在assets/新建images/文件夹，并把共用图片icons.png放在里面；
同时删除src/pages/Home/ListContainer/images路径下的icons.png图片
src/pages/Login/index.vue
background: url(~@/assets/images/icons.png) no-repeat -10px -201px;
src/pages/Home/ListContainer/index.vue
background-image: url(~@/assets/images/icons.png);
注意点1：把共用的图片icons.png放在目录下assets/images/，在CSS中使用时写成~@/xxx/icons.png，即可使用。
31.注册的业务
重难点说明
1) 注册/登陆请求后组件的响应处理
- 登陆后自动携带token数据
- 注册业务|登录业务中表单验证先不处理【最后一天统一处理】
- 获取验证码的接口
- 注册---通过数据库存储用户信息（名字、密码）
修改代码：
src/api/index.js
//获取验证码
//URL:/api/user/passport/sendCode/{phone} method:get
export const getCode = (phone)=>requests({url:`/user/passport/sendCode/${phone}`,method:'get'});
//注册
//url:/api/user/passport/register method:post phone code password
export const registerUser = (params)=>requests({url: `/user/passport/register`,method: 'post', data: params});
src/store/index.js
把注册js和登录js合并到一起，统一叫用户模块业务
src/store/loginAndRegister/index.js
import {getCode, registerUser} from "@/api";
//Login+register模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {
//获取验证码
async getCode({commit}, phone) {
let response = await getCode(phone);
console.log("******获取验证码-response:{}", response);
if (response.code == 200) {
commit('GET_CODE', response.data);
//返回的是成功的标记
return "OK";
} else {
//返回的是失败的标记
return Promise.reject(new Error("fail"))
}
},
//用户注册
async registerUser({commit}, data) {
let response = await registerUser(data);
console.log("******注册用户-response:{}", response);
if (response.code == 200) {
//返回的是成功的标记
return "OK";
} else {
//返回的是失败的标记
return Promise.reject(new Error("fail"))
}
},
}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {
GET_CODE(state, code) {
state.code = code;
}
}
//state代表仓库中的数据
const state = {
code: ''
}
//getters理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}
//创建并暴露store
export default {
actions,
mutations,
state,
getters
}
src/pages/Register/index.vue
<input type="text" placeholder="请输入你的手机号" v-model="phone">
<button style="width: 100px; height: 38px" @click="getCode">获取验证码</button>
<input type="password" placeholder="请输入你的登录密码" v-model="password">
<input type="password" placeholder="请输入确认密码" v-model="passwordConfirm">
<input name="m1" type="checkbox" v-model="checkedAgreement">
data() {
return {
// 收集表单数据--手机号
phone: '',
//验证码
code: '',
//密码
password: '',
//确认密码
passwordConfirm: '',
//是否同意
checkedAgreement: true,
}
},
methods: {
//获取验证码
async getCode() {
try {
//成功
//如果获取到验证码
const {phone} = this;
phone && await this.$store.dispatch('getCode', phone);
//将组件的code属性值变为仓库中验证码[验证码直接自己填写了]
this.code = this.$store.state.user.code;
} catch (error) {
//失败
alert(error.message)
}
},
//用户注册
async registerUser() {
try {
//成功
//全部表单验证成功，在向服务器发请求，进行祖册
//只要有一个表单没有成功，不会发请求
const {phone, code, password, passwordConfirm} = this
phone && code && password==passwordConfirm && await this.$store.dispatch('registerUser', {phone, password, code})
//注册成功进行路由的跳转
this.$router.push('/login')
} catch (error) {
//失败
alert(error.message)
}
},
},
32.登录业务
- 登录---登陆成功的时候，后台为了区分你这个用户是谁-服务器下发token【令牌：唯一标识符】
修改代码：
src/api/index.js
//登录
//URL:/api/user/passport/login method:post phone password
export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'});
src/store/loginAndRegister/index.js
import {reqUserLogin} from "@/api";
//用户登录
async reqUserLogin({commit}, data) {
let response = await reqUserLogin(data);
console.log("******登录用户-response:{}", response);
//服务器下发token，用户唯一标识符(uuid)
//将来经常通过带token找服务器要用户信息进行展示
if (response.code == 200) {
//用户已经登录成功且获取到token
commit('REQ_USER_LOGIN', response.data.token);
//返回的是成功的标记
return "OK";
} else {
//返回的是失败的标记
return Promise.reject(new Error(response.message))
}
},
REQ_USER_LOGIN(state, token) {
state.token = token;
},
token: '',
src/pages/Login/index.vue
<button class="btn" @click.prevent="reqUserLogin">登 录</button>
methods: {
//登录的回调函数
async reqUserLogin() {
try {
//成功
const {phone, password} = this;
phone && password && await this.$store.dispatch('reqUserLogin',{phone, password});
this.$router.push("/home");
} catch (error) {
//失败
alert(error.message)
}
}
}
注意点1：vuex存储的数据不是持久化的，一刷新页面就没了。
注意点2：登录接口会返回一个token令牌，这个是后端生成的，跟咱之前前端生成的uuid不一样。
注意点3：给登录按钮绑定事件时，要清除form上面的action条件以及默认跳转，否则会出现哪怕登录失败后也会跳转页面到首页的场景
<form action="##"> 改为 <form>
<button class="btn" @click.prevent="reqUserLogin">登 录</button>
本人其他相关文章链接
1.vue尚品汇商城项目-day05【30.登录与注册静态组件（处理公共图片资源问题）+31.注册的业务+登录业务】
2.vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
3.vue尚品汇商城项目-day05【36.导航守卫理解】
