中国建设银行山西分行招聘网站,外贸seo网站,中国风网站模板下载,网站制作思路day-061-sixty-one-20230504-vue2项目-跳转拦截-重定向并返回前一页-使用vuex调用接口-全选与全不选-总价计算
vue2项目
跳转拦截
设置跳转拦截#xff0c;比如在用户没token时#xff0c;不能进入具体详情页#xff0c;而是进入登录页进行登录。
跳转拦截具体思路
前端…day-061-sixty-one-20230504-vue2项目-跳转拦截-重定向并返回前一页-使用vuex调用接口-全选与全不选-总价计算
vue2项目
跳转拦截
设置跳转拦截比如在用户没token时不能进入具体详情页而是进入登录页进行登录。
跳转拦截具体思路
前端和后端约定好一个返回码如resultCode为416那么前端就跳转到登录页。前端根据这返回码在axios的响应拦截器axios.interceptors.response.use()钩子函数中进行处理如跳转到首页或登录面之类的操作。前端发起一个需要token的请求。后端收到前端的请求校验token是否存在或合法。 如果存在并合法正常返回数据。如果token不存在或不合法返回resultCode并为416。 如果后端返回resultCode并为416就会触发axios的响应拦截器中的钩子函数重定向到登录页。
跳转拦截实际步骤
在axios实例对象或axios原型上设置响应拦截器 /src/http/http.js import axios from axios;import router from ../router/index.js// 添加响应拦截器
axios.interceptors.response.use((response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么// 后端的resultCode为416时要求重新登录。let { message, resultCode } response.data;if (resultCode 416) {router.push(/LoginView)}return response.data;},function (error) {return Promise.reject(error);}
);
export default axios;重定向并返回前一页
因重定向跳转登录页并登录成功后在登录页中跳转返回前一页
重定向并返回具体思路
在在axios的响应拦截器axios.interceptors.response.use()钩子函数中跳转到登录页时给路由加一个字段表示要重返前一页如needback为true。在登录页中设置登录成功后如果this.$route?.query?.needback存在就返回到前一页。
重定向并返回实际步骤 在axios实例对象或axios原型上的响应拦截器进行跳转时在需要的路由中加上?needbacktrue。 /src/http/http.js import axios from axios;
import router from ../router/index.js// 添加响应拦截器
axios.interceptors.response.use((response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么// 后端的resultCode为416时要求重新登录。let { message, resultCode } response.data;if (resultCode 416) {router.push(/LoginView?needbacktrue)}return response.data;},function (error) {return Promise.reject(error);}
);
export default axios;在登录成功后跳转的页面中根据this.$route?.query?.needback决定是返回前一页还是首页。 /src/views/LoginView.vue script
import { Notify } from vant;export default {components: {Verify,},data() {return {username: ,password: ,flag: true,verifyFlag: false,};},methods: {onSubmit() {this.$api.login(this.username, this.password).then((value) {let { resultCode, message, data } value;if (resultCode ! 200) {return;}// 有needback就返回上一页if (this.$route?.query?.needback) {this.$router.back();return;}// 无needback就返回前面this.$router.push(/IndexView);}).catch((error) {console.log(error--, error);}).finally(() {console.log(登录操作后执行);});},},
};
/script使用vuex调用接口
使用vuex调用接口以便使用vuex中的全局数据制作如购物车这类效果。
使用vuex调用接口具体思路
定义一个接口。在vuex中配置state及mutations用于同步修改stateactions用于请求数据并调用mautaions方法间接修改state。在需要中页面中引入state中的数据及actions方法根据需要使用state中的数据和调用actions中的方法。
使用vuex调用接口实际步骤 在axios中添加一个接口用于vuex中进行操作。 /src/http/index.js import http from ./http.js;// 获取购物车所有的产品
function getCartList() {return http.get(/shop-cart);
}export default {getCartList,
};在vuex中配置state及mutations用于同步修改stateactions用于请求数据并调用mautaions方法间接修改state。 /src/store/index.js import Vue from vue;
import Vuex from vuex;import api from ../http/index;Vue.use(Vuex);export default new Vuex.Store({state: {list: null,},mutations: {changeList(state, payload) {// 默认添加选中状态payload.map((item) {item.selected true;return item;});state.list payload;},},actions: {async getCartListAsync({ commit }) {try {let res await api.getCartList();console.log(res--, res);let { data, resultCode } res;if (resultCode ! 200) {commit(changeList, []);return;}commit(changeList, data);} catch (err) {console.log(err--, err);}},},
});在需要中页面中引入state中的数据及actions方法根据需要使用state中的数据和调用actions中的方法。 /src/views/DetialView.vue templatediv classdetial-wrapvan-goods-actionvan-goods-action-iconv-showlist?.length 0iconcart-otext购物车/van-goods-action-iconv-showlist?.length 0iconcart-otext购物车:badgelist?.length//van-goods-action/div
/templatescript
import { mapState, mapActions } from vuex;
export default {data() {return {detialData: {},};},computed: { ...mapState([list]) },created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script/src/components/FooterPage.vue templatedivvan-tabbar v-modelactive active-color#1baeae :routetruevan-tabbar-itemiconshopping-cart-ov-showlist?.length 0to/CartView购物车/van-tabbar-itemvan-tabbar-itemiconshopping-cart-ov-showlist?.length 0:badgelist?.lengthto/CartView购物车/van-tabbar-item/van-tabbar/div
/templatescript
import { mapState, mapActions } from vuex;
export default {data() {return {active: 0,};},computed: {...mapState([list]),},methods: {...mapActions([getCartListAsync]),},created() {if (this.list null) {this.getCartListAsync();}},
};
/script全选与全不选
可以用一个变量isAll表示是否全选用一个数组变量来记录所有已选值对应id。 之后对已选数组进行监听或对于所有会改变的已选数组的事件都执行判断已选数组长度与选项数组总长度是否全等。 若已选选项数组长度与选项数组总长度相等那么就为true。若已选选项数组长度与选项数组总长度不相等值就为false。 全选与全不选中间态用另一个变量来表示。 如果已选数组长度为0 或 已选数组长度与选项数组总长度全等值为false。已选数组长度不为0并且已选数组长度与选项数组总长度不全等值为true。 可以用计算属性来做处理用对象变量的布尔值属性来表示该对象是否被选中。 在data或computed中定义一个基础对象数组对象上有一个属性表示是否选中。在计算属性的get()来做返回的结果值。在计算属性的set()里来修改源头数组对象的表示是否选中的属性值进而让get()得到的值发生改变。这个的前提是数组里对象及它的属性值是响应式的。
全选与全不选-计算属性版具体思路
在data或computed中定义一个基础对象数组对象上有一个属性表示是否选中。在计算属性的get()来做返回的结果值。在计算属性的set()里来修改源头数组对象的表示是否选中的属性值进而让get()得到的值发生改变。
全选与全不选实际步骤 在vuex中定义好state并引入到单文件组件中的计算属性。 /src/store/index.js import Vue from vue;
import Vuex from vuex;import api from ../http/index;Vue.use(Vuex);export default new Vuex.Store({state: {list: null,},mutations: {changeList(state, payload) {// 默认添加选中状态payload.map((item) {item.selected true;return item;});state.list payload;},},actions: {async getCartListAsync({ commit }) {try {let res await api.getCartList();console.log(res--, res);let { data, resultCode } res;if (resultCode ! 200) {commit(changeList, []);return;}commit(changeList, data);} catch (err) {console.log(err--, err);}},},
});或者是在单文件组件里的data或computed中定义好要用的基础对象数组。 /src/views/CartView.vue script
import { mapState, mapActions } from vuex;
export default {computed: {...mapState([list]),},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script在计算属性的get()来做返回的结果值通过基础对象数组的every()函数。 /src/views/CartView.vue script
import { mapState, mapActions } from vuex;
export default {computed: {...mapState([list]),checkedAll: {get() {return this.list?.every((item) item.selected true);},},},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script在计算属性的set()里来通过基础对象数组map()修改源头数组对象的表示是否选中的属性值进而让get()得到的值发生改变。 /src/views/CartView.vue script
import { mapState, mapActions } from vuex;
export default {computed: {...mapState([list]),checkedAll: {set(value) {this.list?.map((item) {item.selected value;return item;});},},},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script/src/views/CartView.vue完整 templatediv classcart-wrapdiv classcontentvan-swipe-cell v-foritem in list :keyitem.goodsIddiv classitemvan-checkboxv-modelitem.selectedchecked-color#1BAEAE/van-checkboximg :srcitem.goodsCoverImg alt /divp{{ item.goodsName }}/ph3span{{ item.sellingPrice }}/spanvan-stepper v-modelitem.goodsCount //h3/div/divtemplate #rightvan-button square text删除 typedanger classdelete-button //template/van-swipe-cell/divvan-submit-bar:priceallPricebutton-text结算button-color#1BAEAEvan-checkbox v-modelcheckedAll全选/van-checkbox/van-submit-bar/div
/templatescript
import { mapState, mapActions } from vuex;
export default {data() {return {};},computed: {...mapState([list]),checkedAll: {get() {return this.list?.every((item) item.selected true);},set(value) {this.list?.map((item) {item.selected value;return item;});},},allPrice() {return this.list?.reduce((res, item) {return (res (item.selected ? item.sellingPrice * item.goodsCount * 100 : 0));},0);},},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script总价计算
总价计算思路
在data或computed中定义一个基础对象数组对象上有想要进行计算所需的全部数据。在计算属性的get()来做返回的结果值或计算属性的函数式写法中计算出想要的结果。
总价计算步骤 在vuex中定义好state并引入到单文件组件中的计算属性。 /src/store/index.js import Vue from vue;
import Vuex from vuex;import api from ../http/index;Vue.use(Vuex);export default new Vuex.Store({state: {list: null,},mutations: {changeList(state, payload) {// 默认添加选中状态payload.map((item) {item.selected true;return item;});state.list payload;},},actions: {async getCartListAsync({ commit }) {try {let res await api.getCartList();console.log(res--, res);let { data, resultCode } res;if (resultCode ! 200) {commit(changeList, []);return;}commit(changeList, data);} catch (err) {console.log(err--, err);}},},
});在data或computed中定义一个基础对象数组对象上有想要进行计算所需的全部数据。 /src/views/CartView.vue script
import { mapState, mapActions } from vuex;
export default {computed: {...mapState([list]),},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script在计算属性的函数式写法中用reduce()计算出想要的结果。 /src/views/CartView.vue script
import { mapState, mapActions } from vuex;
export default {data() {return {};},computed: {...mapState([list]),allPrice() {return this.list?.reduce((res, item) {return (res (item.selected ? item.sellingPrice * item.goodsCount * 100 : 0));},0);},},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script/src/views/CartView.vue完整 templatediv classcart-wrapdiv classcontentvan-swipe-cell v-foritem in list :keyitem.goodsIddiv classitemvan-checkboxv-modelitem.selectedchecked-color#1BAEAE/van-checkboximg :srcitem.goodsCoverImg alt /divp{{ item.goodsName }}/ph3span{{ item.sellingPrice }}/spanvan-stepper v-modelitem.goodsCount //h3/div/divtemplate #rightvan-button square text删除 typedanger classdelete-button //template/van-swipe-cell/divvan-submit-bar:priceallPricebutton-text结算button-color#1BAEAEvan-checkbox v-modelcheckedAll全选/van-checkbox/van-submit-bar/div
/templatescript
import { mapState, mapActions } from vuex;
export default {data() {return {};},computed: {...mapState([list]),checkedAll: {get() {return this.list?.every((item) item.selected true);},set(value) {this.list?.map((item) {item.selected value;return item;});},},allPrice() {return this.list?.reduce((res, item) {return (res (item.selected ? item.sellingPrice * item.goodsCount * 100 : 0));},0);},},created() {if (this.list null) {this.getCartListAsync();}},methods: {...mapActions([getCartListAsync]),},
};
/script进阶参考
新峰商城vant2 – 配合vue2Blob的三种应用场景及Bloburlbase64之间的转换为什么视频网站的视频链接地址是blob
