效果概述：
列表页面显示数据，点击跳转到对应的详情页，详情页可以添加并跳转到购物车，购物车具有常见功能。
具体效果：
1、所有页面根据效果图100%还原。 2、列表页面通过axios请求拿到数据并显示。 3、跳转到详情页时，显示对应列表的数据。 4、详情页内容可以添加到购物车中并显示。 5、购物车商品的所有小计可根据数量的变化而动态显示。 6、购物车商品的总计可根据数量的变化动态显示。 7、购物车的全选按钮可以选中所有商品，所有商品均被选中时，全选按钮也会自动显示被选中。
实现后效果图：
vue实现列表的渲染并跳转至详情，并可以加入购物车
大致代码思路
- 根页面：
使用 router-link 标签写出页面跳转块 并在 vuex 里引入购物车里的内容，把他的长度显示在购物车字体的左上角
列表页：
在 main.js 页面引入 axios 插件 在 main.js 页面引入 rem 移动端适配代码 通过 rem 进行移动端适配 通过 axios 接口地址请求数据 把请求到的数据赋值给data里的选项 在 html 代码中通过 v-for 实现循环，把数据渲染至视图中 使用 router-link 标签实现跳转功能，并把列表的 id 通过 query 传递至跳转后的页面
详情页：
使用 this.$route.query.id 获取上个页面通过 query 传递的 id 值 使用 axios 接口地址和接收到的 id 值请求详细数据 把请求到的数据赋值给data里的选项 在 html 代码中通过 v-for 实现循环，把数据渲染至视图中 通过编程式导航，实现页面跳转效果，并在组件中整理需要添加至购物车里的内容 并通过动画效果实现添加时执行的动画效果 把需要添加至购物车的内容，通过 vuex 的同步请求，把内容添加至 vuex 里面 添加后把内容保存至本地
购物车页
通过 vuex 的辅助函数获取到上个页面中添加的内容 通过 v-for 循环，渲染到视图中 通过全选按钮实现全选/全不选功能 点击全选则全选的值进行反转 通过 some 循环，把全选的值赋值给所有单选框 单选全部选中则全选也选中 使用 filter 过滤出所有单选框为 true 的列表 把他的长度和所有列表的长度进行比较 如果等于则全选框为 true，否则全选框的值为 false 点击加则数量加一，点击减则数量减一 单价等于 单个的价格乘以数量 总价等于 单价乘以数量后所有的加在一起
main.js 代码
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false // 引入rem import "./rem" // 引入axios import axios from 'axios' // 将axios添加到vue的原型上 Vue.prototype.$axios = axios new Vue({ router, store, render: h => h(App) }).$mount('#app')
移动端rem适配代码
const WIDTH = 375//如果是尺寸的设计稿在这里修改 const setView = () => { //设置html标签的fontSize document.documentElement.style.fontSize = (100 * document.documentElement.clientWidth / WIDTH) + 'px' } window.onresize = setView setView()
解决跨域问题，在vue.config.js里添加代码
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 解决跨域问题 devServer:{ proxy:{ '/api':{ target: 'http://192.168.1.13:8765/', pathRewrite:{ '^/api': '' } } } } })
