day02
项目地址
一、异步数据
1、封装ajax：（第一天已写，这个很重要）
- 要学会promise+axios封装ajax请求的函数
- 要能封装每个接口对应的请求函数(根据接口定义ajax请求函数)
- 解决ajax的跨域问题：配置代理，对代理的理解。
- 配置--config--index.js
proxyTable: {
'/api': { // 匹配所有以 '/api'开头的请求路径
target: 'http://localhost:3000', // 代理目标的基础路径
changeOrigin: true, // 支持跨域
pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
'^/api': ''
}
}
}
2、vuex编码:
- 创建所有相关的模块: store/index|state|mutations|actions|getters|mutations-types
- 设计state：也就是从后台获取的数据存储在state中
- 出现问题：对于暴露导入的理解
const state = {}
export default state
import state from './xxx.js'
//暴露时没有加{},在import时也不需要加{}
const state = {}
export default {state}
//export default {} 导出的是对象，那么引入的时候就要 import {state} from './xxx.js'
- 实现actions，此文件是用来异步获取数据的
- 定义异步action： async/await
- 流程： 发送ajax获取数据，commit提交给mutation
- 实现mutation：给状态赋值，也就是更新state数据
- 实现index:创建store对象(固定的模式)
- main.js: 配置store
3、组件异步显示数据，解决swiper动态加载数据问题
- 异步获取数据,解决swiper动态加载数据问题
参考网址： https://www.jianshu.com/p/128f3c53b66f- 在mounted()通过$store.dispatch('actionName')来异步获取后台数据到state中
- mapActions(['getAddress'])以数组形式映射模块中的方法，在mounted中调用也可以异步获取后台数据
import { mapActions } from "vuex";
methods: {
//TODO: 方法2.以数组形式映射模块中的方法
...mapActions(['getAddress'])
},
mounted () {
//TODO: 方法1.含有异步操作，例如向后台提交数据
// this.$store.dispatch('getAddress')
this.getAddress();
}
- 读取数据
- mapState(['...'])读取state中数据到组件中
- 显示数据
- 在模板中显示xxx数据
4、模板中显示数据的来源
- data：自身的数据(内部改变)
- props:外部传入的数据(外部改变)
- computed： 根据data/props/别的compute/state/getters(计算的数据)
5、异步显示轮播图
- 通过vuex获取foodCategorys数据(发请求，读取)
- 对获取的数据进行整合计算(一维变特定的二维数据)
computed: {
...mapState(["categorys"]),
/*
根据categorys一维数组生成一个2维数组
小数组中的元素个数最大是8
*/
categorysArr() {
//解构赋值
const { categorys } = this;
// 准备空的2维数组
const arr = [];
// 准备一个小数组(最大长度为8)
let minArr = [];
categorys.forEach(c => {
// 如果当前小数组已经满了, 创建一个新的
if (minArr.length === 8) {
minArr = [];
}
// 如果minArr是空的, 将小数组保存到大数组中
if (minArr.length === 0) {
arr.push(minArr);
}
// 将当前分类保存到小数组中
minArr.push(c);
});
return arr;
}
},
- 通过双循环对二维数组进行遍历显示,如果没有数据时，显示预加载图片
- 使用Swiper显示轮播图，如何在界面更新之后创建Swiper对象？
- 使用watch+$nextTick(),监视显示的数据，如果数据有值立即更新
watch: {
categorys(value) {
// categorys数组中有数据了, 在异步更新界面之前执行
// 使用setTimeout可以实现效果, 但不是太好
/*setTimeout(() => {
//创建一个Swiper实例对象，实现轮播
new Swiper(".swiper-container", {
loop: true, // 循环模式选项,可以循环轮播
// 如果需要分页器
pagination: {
el: ".swiper-pagination"
}
});
}, 100);*/
// 界面更新就立即创建Swiper对象
this.$nextTick(() => {// TODO: 一旦完成界面更新, 立即调用(此条语句要写在数据更新之后)
// 创建一个Swiper实例对象, 来实现轮播
new Swiper('.swiper-container', {
loop: true, // 可以循环轮播
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
})
}
}
二、登录/注册：界面相关效果
- 切换登录方式
- 初始化一个boolean值(longinWay)，true为短信登录，false为密码登录
- 使用@click方法设置boolean值
- 定义一个class类绑定此布尔值控制表单显示选择
loginWay: true //true代表短信登陆, false代表密码
登录方式切换.png
登录方式切换.gif
- 手机号合法检查，发送验证码倒计时
- 通过计算属性验证输入的手机号是否正确，正确时可以点击发送获取验证码,
right_phone类改变字的颜色
data() {
return {
phone: "", // 手机号
computeTime: 0, //计时时间
}
},
computed: {
rightPhone() {
//使用计算属性测试输入的手机号是否正确，正确则显示类名
return /^1\d{10}$/.test(this.phone);
}
},
methods: {
//异步获取验证码
getCode() {
//如果当时没有计时
if (!this.computeTime) {
//启动倒计时
this.computeTime = 30;
//TODO: 间歇调用
const intervalId = setInterval(() => {
this.computeTime--;
if (this.computeTime <= 0) {
clearInterval(intervalId);
}
}, 1000);
}
}
}
手机号码检车，发送验证码倒计时.gif
- 切换显示或隐藏密码
- 通过两个输入框，一个按钮，改变密码的显示与隐藏状态
showPwd: false, //是否显示密码
密码显示和隐藏.gif
- 前台验证提示
- 学会如何使用模板组件
- 调用--components-AlertTip-AlertTip.vue组件，使用提示框组件
{{alertText}}
确认
import AlertTip from "../../components/AlertTip/AlertTip.vue";
data() {
return {
alertText: "", //提示文本
alertShow: false //是否显示警告框
}
}
methods: {
//展示提示框
showAlert(alertText) {
this.alertShow = true;
this.alertText = alertText;
},
//关闭警告框
closeTip() {
this.alertShow = false;
this.alertText = '';
},
//异步登录
login() {
//前台表单验证
if (this.loginWay) {
//短信登录
const { phone, code } = this;
if (!this.rightPhone) {
//手机号不正确
this.showAlert("手机号不正确");
} else if (!/^\d{6}$/.test(code)) {
alert(this.code)
//验证码必须是6位数字
this.showAlert("验证码必须是6位数字");
}
} else {
//密码登录
const { name, pwd, captcha } = this;
if (!this.name) {
//用户名必须指定
this.showAlert("用户名必须指定");
} else if (!this.pwd) {
//密码必须指定
this.showAlert("密码必须指定");
} else if (!this.captcha) {
//图形验证码必须指定
this.showAlert("图形验证码必须指定");
}
}
}
}
前台验证提示
三、前后台交互相关问题
- 如何查看你的应用是否发送某个ajax请求？
-
浏览器的network
查看network
-
- 发ajax请求404怎么办
- 查看请求路径的对错
- 单利是否生效(配置和重启)
- 服务器应用是否运行
- 后台返回了数据，但页面没有显示？
- vuex中是否有数据
- 组件是否读取了数据