vue前台(九)
一，购物车的删除
1.封装请求删除购物车商品函数
//请求删除购物车商品 /api/cart/deleteCart/{skuId} delete
export const reqDeleteCart = (skuId) => Ajax.delete(`/cart/deleteCart/${skuId}`)
2.在vuex中定义发送请求
//删除一个
async deleteShopCart({commit},skuId){
const result = await reqDeleteCart(skuId)
if(result.code === 200){
return '删除成功'
}else{
return Promise.reject(new Error('删除失败'))
}
},
3.在组件中模板中点击删除按钮，dispatch到vuex中，调用删除的请求，然后在调用发送页面数据的请求，获取新数据
<a href="javascript:;" class="sindelet" @click="deleteCart(cart)">删除</a>
回调
//删除单个的购物车商品
async deleteCart(cart){
try {
await this.$store.dispatch('deleteShopCart',cart.skuId)
//重新发送请求，获取页面数据
this.getShopCartList()
} catch (error) {
alert(error.message)
}
},
4.点击删除选中的商品交互逻辑，点击删除按钮，在vuex的actions中定义一个函数deleteCheckedShopCart，作用，遍历每一条信息，然后对选中的每一条商品，dispatch到，删除一个商品的函数（里头是删除商品的请求）。达到对选中的商品进行删除，然后在发送页面数据请求
4,1 点击删除选中按钮，
<a href="javascript:;" @click="deleteChecked">删除选中的商品</a>
回调
//删除选中的多个购物车商品
async deleteChecked(){
try {
await this.$store.dispatch('deleteCheckedShopCart')
//重新发送请求，获取页面数据
this.getShopCartList()
} catch (error) {
alert(error.message)
}
}
4.2，在vuex中处理删除商品的逻辑
//删除一个
async deleteShopCart({commit},skuId){
const result = await reqDeleteCart(skuId)
if(result.code === 200){
return '删除成功'
}else{
return Promise.reject(new Error('删除失败'))
}
},
// 删除多个
deleteCheckedShopCart({commit,dispatch,state}){
let promises = []
state.shopCartList.forEach(item => {
// 没选中的不发送删除请求
if(!item.isChecked) return
// 选中的发送删除请求
let promise = dispatch('deleteShopCart',item.skuId)
promises.push(promise)
})
return Promise.all(promises)
}
二，注册和登录静态页面实现和准备工作，购物车完成，点击结算按钮，应该去创建订单页面
注，src-assets,该文件夹是保存的公共的静态资源，比如图片
登录和注册页面有连接按钮可以互相跳转，需要在各自组件中配置连接路由
1，注册的逻辑及验证码的处理
1,1 封装请求注册接口函数
//请求注册 /api/user/passport/register post
export const reqRegister = (userInfo) => Ajax.post('/user/passport/register',userInfo)
1,2在vuex,user.js中发送请求
const actions = {
async userRegister({commit},userInfo){
const result = await reqRegister(userInfo)
if(result.code === 200){
return '注册成功'
}else{
return Promise.reject(new Error('注册失败'))
}
},
1,3，在组件中，点击完成注册按钮，dispatch到vuex,发送注册请求，然后跳转到登录页面
<div class="btn"> <button @click="register">完成注册</button> </div>
回调
async register(){ let {mobile,password,code,password2} = this if(mobile&&password&&code&&password2&&password === password2){ let userInfo = {mobile,password,code} try { await this.$store.dispatch('userRegister',userInfo) alert('注册成功，自动跳转登录页面') this.$router.push('/login') } catch (error) { alert(error.message) } } },
注：根据api文档，收集
<input type="text" placeholder="请输入你的手机号" v-model="mobile"> <input type="text" placeholder="请输入确认密码" v-model="password2"> <input type="text" placeholder="请输入验证码" v-model="code"> <input type="text" placeholder="请输入确认密码" v-model="password2">
请求体对象userInfo中的参数，
data(){
return {
mobile:'',
password:'',
code:'',
password2:'',
}
},
注
<!-- 这两种都是ok的，上面的使用的是img图片的src特殊性，发送的普通请求 不跨域 --> <!-- 下面我们使用的是代理服务器转发的，我们认为是跨域的 --> <!-- <img ref="code" src="http://182.92.128.115/api/user/passport/code" alt="code" @click="changeCode"> --> <img ref="code" src="/api/user/passport/code" alt="code" @click="changeCode">
1,4点击验证码图片，重新设置src地址
changeCode(){
this.$refs.code.src = '/api/user/passport/code'
}
三，用户登录逻辑处理
登录：
静态组件
api
store
收集数据发送请求
请求成功后需要把用户信息保存在localStorage用于自动登录
state的用户信息也要修改，
state的用户信息读取先从localStorage里面去读，没有就是{},通过登录去修改
以后每次发请求都要携带这个用户信息的token
修改头部的用户状态信息
1.封账登录接口的函数，userinfo为请求体，需要收集登录账号，和密码
//请求登录 /api/user/passport/login post
export const reqLogin = (userInfo) => Ajax.post('/user/passport/login',userInfo)
在user.js中的vuex中的actions发送登录请求
//登录发送请求
async userLogin({commit},userInfo){
const result = await reqLogin(userInfo)
if(result.code === 200){
//把用户的信息保存起来,为了自动登录（下次再来还可以找到登录状态的用户信息）
localStorage.setItem('USERINFO_KEY',JSON.stringify(result.data))
commit('RECEIVEUSERINFO',result.data)
}
},
在mutations中配置数据
const mutations = {
RECEIVEUSERINFO(state,userInfo){
state.userInfo = userInfo
},
const state = {
userTempId:getUserTempId(),
userInfo: JSON.parse(localStorage.getItem('USERINFO_KEY')) ||{}
}
2.在登录login组件中，收集登录账号和密码.
注：在form表单中，是有默认提交跳转功能的，而button，默认时点击跳转的按钮，此时，需要阻止其默认行为，在vue中需要用到事件修饰符
<form> <div class="input-text clearFix"> <span></span> <input type="text" placeholder="邮箱/用户名/手机号" v-model="mobile" /> </div> <div class="input-text clearFix"> <span class="pwd"></span> <input type="text" placeholder="请输入密码" v-model="password" /> </div> <div class="setting clearFix"> <label class="checkbox inline"> <input name="m1" type="checkbox" value="2" checked /> 自动登录 </label> <span class="forget">忘记密码？</span> </div> <button class="btn" @click.prevent="login">登 录</button> </form>
在data中初始化mobile，password为空。 并且点击登录按钮dispatch到vuex.
async login() {
let { mobile, password } = this;
if (mobile && password) {
let userInfo = { mobile, password };
try {
await this.$store.dispatch("userLogin",userInfo);
alert('登录成功，跳转到首页去了')
this.$router.push('/home')
} catch (error) {
alert(error.message)
}
}
}
四，顶部用户登录状态信息展示
该html在header组件中，
1. 具体逻辑，从vuex中获取登录返回的信息userInfo，
computed:{
//从用户的state当中获取用户信息
...mapState({
userInfo:state => state.user.userInfo
})
},
2.然后新建一个p标签，通过登录账号，以及 v-if, v-else,逻辑来判断用户是否登录成功
<!-- 判断用户是否是登录状态，如果是显示这个p --> <p v-if="userInfo.name"> <a href="javascript:;">{{userInfo.name}}</a> <a href="javascript:;" class="register" @click="logout">退出</a> </p> <!-- 如果用户不是登录状态，显示这个p --> <p v-else> <span>请</span> <router-link to="/login">登录</router-link> <!-- <a href="###">登录</a> --> <router-link to="/register" class="register">免费注册</router-link> <!-- <a href="###" class="register">免费注册</a> --> </p>
五，用户自动登录的逻辑， 需要把登录请求返回的数据，保存起来，下次再次登录的时候，可以自动登录，可以把信息保存在浏览器的localStorage,登录后，再次刷新，登录状态就会一直存在
//登录发送请求
async userLogin({commit},userInfo){
const result = await reqLogin(userInfo)
if(result.code === 200){
//把用户的信息保存起来,为了自动登录（下次再来还可以找到登录状态的用户信息）
localStorage.setItem('USERINFO_KEY',JSON.stringify(result.data))
commit('RECEIVEUSERINFO',result.data)
}
},
const state = {
userTempId:getUserTempId(),
userInfo: JSON.parse(localStorage.getItem('USERINFO_KEY')) ||{}
}
六，用户退出登录逻辑
1.封装退出登录请求函数
//请求退出登录 /api/user/passport/logout get
export const reqLogout = () => Ajax.get('/user/passport/logout')
2.退出登录逻辑， 发送ajax,退出登录，此时登录的信息userInfo，需要清空，而且localStorage里的数据也要清空
在vuex中发送退出登录的请求
async userLogout({commit}){
const result = await reqLogout()
if(result.code === 200){
//退出成功后，去清除state.userInfo的信息 变为{}
// 还要去清除localStorage里面用户信息
localStorage.removeItem('USERINFO_KEY')
commit('RESETUSERINFO')
}
}
在mutation中清空userInfo
RESETUSERINFO(state){
state.userInfo = {}
}
在header组件中，点击退出登录按钮，dispatch到vuex,退出后，跳转到home页
<!-- 判断用户是否是登录状态，如果是显示这个p --> <p v-if="userInfo.name"> <a href="javascript:;">{{userInfo.name}}</a> <a href="javascript:;" class="register" @click="logout">退出</a> </p>
js逻辑
//退出登录
async logout(){
try {
await this.$store.dispatch('userLogout')
alert('退出成功,自动跳到首页')
this.$router.push('/home')
} catch (error) {
alert(error.message)
}
}
七，用户登录后的token携带（token和 userTempld区别）及跳转到trade页面
1.在请求拦截器中，配置用户登录的token,为什么配置呢，在请求头中配置token，后台记录该唯一值，以后用户在购物车添加商品，该信息都保存在这个token中。
先引入vuex,
import store from '@/store'
//请求拦截器内部一般不会处理错误的信息
service.interceptors.request.use(config => {
//config是发送请求的配置对象，必须处理完返回这个配置对象
//开启我们的进度条
NProgress.start()
//在请求头当中添加用户的临时id，让每个ajax请求都带着这个userTempId（购物车）
let userTempId = store.state.user.userTempId
if(userTempId){
config.headers.userTempId = userTempId
}
//添加用户登录过后的token信息，让每个ajax请求都带这个token，为了找到用户登录后相关信息（订单、购物车）
let token = store.state.user.userInfo.token
if(token){
config.headers.token = token
}
return config
});
注，登录状态下，每次发送请求，请求头都会携带该token
userTempId( 临时id,)和token的区别
userTempId 未登录状态下的用户身份识别标识
token 登录状态下的用户身份识别标识
两个都存在的话，后台会合并临时id和对应信息到token对应的信息上,主流电商都会这么搞
发送登录请求，返回的响应结果，里头有一个token
{
code: 200
message: "成功"
data:{
nickName:"Administrator",
name:"Admin",
token: 90aa16f24d04c7d882051412f9ec45b"
}
ok: true
} 八，在shopcart组件中，点击结算按钮，跳转到订单页面，trede组件
html页面
<div class="sumbtn"> <router-link to="/trade" class="sum-btn">结算</router-link> <!-- <a class="sum-btn" href="###" target="_blank">结算</a> --> </div>
