项目--5

项目--5

1、回顾

2、优化查看购物车接口

问题： 刷新购物车页面，列表请求不完整算法： 异步中嵌套了 循环的异步---请求不完整优化： promise.all() --- 把循环异步 ---- 等待所有的异步操作都介绍之后才会调用then

day06/myapp/routes/cart.js

router.get('/', function(req, res, next) { // 1、获取用户id let { userid } = req.query; let cartarr = [] // 用来记录 购物车的数据 // 2、依据用户id查询购物车的数据 sql.find(Cart, { userid }, { _id: 0 }).then(data => { // 如果没有数据，告诉用户没有数据 if (data.length === 0) { // 2.1 没有数据 res.send(utils.cartnull) } else { cartarr = data // 给购物车数据赋值 ---- 因为用到了promise let promise1 = data.map(item => { return sql.find(Pro, { proid: item.proid}, { _id: 0}) }) return Promise.all(promise1) } }).then(list => { console.log('list', list) console.log('cartarr', cartarr) let arr = [] list.map((item, index) => { arr.push({ proid: item[0].proid, proname: item[0].proname, proimg: item[0].proimg, price: item[0].price, cartid: cartarr[index].cartid, userid: cartarr[index].userid, num: cartarr[index].num }) }) res.send({ code: '200', data: arr }) })});

评论算法也需要使用promise.all

3、将token信息放入头信息中

每次请求都要携带token，token可以get/post，还可以是 头信息axios.get('/ ?token=' + token)axios.post('/', {token: token})

封装axios ​​axios from 'axios'let request = axios.create()request.defaults.headers['token'] = localStorage.getItem('token')export default request

使用时 直接 使用 import axios from '@/utils/reqest'代替 import axios form 'axios'，然后把涉及到 token信息的地方全部取出即可

4、状态管理器

符合单向数据流，有效解决组件间的耦合问题

4.1 修改首页 --- 使用状态管理器管理状态

views/home/index.vue + views/home/store.js

// store.jsexport default { state: {}, getters: {}, actions: {}, mutations: {}}// ==>import axios from '@/utils/request'export default { state: { // 首页需要的初始化数据 bannerlist: [] }, getters: { // state的计算属性 }, actions: { // 当前页面需要的异步操作 getBannerlist (context) { // 请求轮播图数据,context上下文对象 axios.get('/banner').then(res => { context.commit({ // 唯一改变状态管理器的方式就是显示的提交mutation type: 'changeBannerlist', data: res.data.data }) }) } }, mutations: { changeBannerlist (state, data) { state.bannerlist = data.data } }}

src/store/index.js 这里 划分 状态管理器模块

import Vue from 'vue'import Vuex from 'vuex'import home from '@/views/home/store' // ++++++++++++++Vue.use(Vuex)export default new Vuex.Store({ modules: { home // +++++++++++++++++++++ }})

页面中使用状态管理器的状态以及触发相应的函数

// views/home/index.vue

产品列表

// store.jsimport axios from '@/utils/request'export default { state: { // 首页需要的初始化数据 bannerlist: [], prolist: [] // +++++++++++++++ }, getters: { // state的计算属性 }, actions: { // 当前页面需要的异步操作 getBannerlist (context) { // 请求轮播图数据,context上下文对象 axios.get('/banner').then(res => { context.commit({ // 唯一改变状态管理器的方式就是显示的提交mutation type: 'changeBannerlist', data: res.data.data }) }) }, // ++++++++++++++++ getProlist ({ commit }) { // 参数解构 axios.get('/pro').then(res => { commit({ type: 'changeProlist', data: res.data.data }) }) } }, mutations: { changeBannerlist (state, data) { state.bannerlist = data.data }, // +++++++++++++++++++++ changeProlist (state, data) { state.prolist = data.data } }}// index.vue

上拉加载下拉刷新 ---

action 如果需要参数 ，必须传递对象，如果组件需要后续操作，必须使用promise

长风破浪会有时，直挂云帆济沧海

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。