1. 智慧商城
1. 路由设计配置
单个页面，独立展示的，是一级路由
2.二级路由配置
- 规则&组件
- 配置导航链接
- 配置路由出口
<template>
<div id="app">
<!--二级路由出口-->
<router-view></router-view>
<van-tabbar route active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item>
<van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
<van-tabbar-item to="/myorder" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
<router-view/>
</div>
</template>
3.登录页静态布局
<template>
<div id="app">
<div class="login">
<!--头部-->
<van-nav-bar title="会员登录" left-arrow></van-nav-bar>
<!--主体-->
</div>
// 重置默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// 文字溢出省略号
.text-ellipsis-2 {
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
// 添加导航的通用样式
.van-nav-bar {
.van-nav-bar_arrow {
color: #333;
}
}
2.购物车-request模块
1.axios封装
使用axios来请求后端接口，所以会对axios进行一些配置，项目开发中，对axios进行二次封装，单独封装到一个requeat模块中，便于维护使用
import axios from 'axios'
// 创建axios实例，对将来创建出来的实例，进行自定义配置
// 不会污染原始的axios实例
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 5000,
headers: { 'X-Custom-Header': 'foobar' }
})
// 自定义配置-请求/相应 拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么(默认axios会多包装一层data)
return response.data
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error)
})
// 导出配置好的实例
export default instance
2. 图形验证码
说明：
- 图形验证码，本质就是一个请求回来的图片
- 用户将来输入图形验证码，用于强制人机交互，可以抵御机器自动化攻击
需求：
动态将请求回来的base64图片，解析渲染出来
点击验证图片盒子，要刷新验证码
import request from '@/utils/request'
export default {
name: 'LoginIndex',
data () {
return {
picCode: '', // 用户输入图形验证码
picKey: '', // 将来请求传递的图形验证码唯一标识
picUrl: '' // 存储请求渲染的图片地址
}
},
async created () {
this.getPicCode()
},
methods: {
// 获取图形验证码
async getPicCode () {
request.get()
}
}
}
3. 封装图形验证码接口
将请求封装成方法，统一存放到api模块，与页面分离
新建请求模块，封装请求函数，页面导入调用
好处：
- 请求与页面逻辑分离
- 相同的请求可以直接复用
- 请求进行了统一管理
3.购物车-Toast轻提示
注册安装
import { Toast } from 'vant'
Vue.use(Toast)
两种使用方法：
- 导入调用（组件内或非组件中均可）
import { Toast } from 'vant'
Toast(提示内容)
- 通过this直接调用（必须组件内）
本质：将方法，注册挂载到了Vue原型上Vue.prototype.$toast=xxx
this.$toast('提示内容')
4.购物车-验证码图形校验
5.登录功能
封装api接口，实现登录功能
- 阅读接口文档，封装登录口
- 登录前的校验（手机号，图形验证码，短信验证码）
- 调用方法，发送请求，成功添加提示并跳转
6.响应拦截器统一处理错误提示
问题：每次请求，都可能会有错误，就需要错误提示
说明：响应拦截器是我们拿到数据的第一个数据流转站，可以在里面统一处理错误
7.登录权证信息存储
目标：vuex构建user模块存储登录权证（token&userld）
补充说明：
- token存入vuex的好处，易获取，响应式
- vuex需要分模块=>user模块
state()提供数据
mutations()提供修改数据的方法
actions()提供异步操作
getters()提供一些基于state所派生出的一些属性的
8.storage存储模块-vuex持久化处理
利用本地存储，进行vuex持久化处理
- getInfo
- setInfo
- removeInfo
9.添加请求loading效果
统一在每次请求后台时，添加loading效果
好处：
- 节流处理：防止用户在一次请求还没回来之前，多次进行点击，发送无效请求。
- 友好提示：告知用户，目前是在加载中，请耐心等待，用户体验会更好
实操步骤：
(1)请求拦截器中，每次请求，打开loading
(2)响应拦截器中，每次响应，关闭loading
10.页面访问拦截
对于支付页，订单页，必须用户登录才能访问，游客不能进入的空间，需要做拦截处理
路由导航守卫-全局前置守卫
- 所有的路由一旦被匹配到，都会先经过前置守卫放行。
- 只有前置守卫放行，才会真正解析渲染组件，看到页面内容
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
})
11.首页
- 首页-静态结构准备&动态渲染
静态结构->封装接口-> 页面调用->动态渲染 - 搜索-历史记录管理
(1)搜素历史基本渲染
(2)点击搜索添加历史
若之前没有关键字，则追加到最前面
若之前有关键字，则先移除，在追加
(3)清空历史：添加清空图标，可以清空
(4)持久化：刷新历史不丢失
12.商品详情页
获取商品评价
export const getProComments = (goodsTd, limit) = > {
return request.get('/comment/listRows', {
params: {
goodsId,
limit
}
})
}
加入购物车，唤起弹层
13.购物车模块
1.编辑切换状态，删除功能
删除购物车数据
async delSelect (content) {
const selCartList = context.getters.selCartList
const cartTds = selCartList.map(item => item.id)
await delSelect(cartIds)
Toast('删除成功')
}
