硅谷外卖

难点:

image.png

异步显示食品分类轮播列表

1.通过一维数组生成二维数组 ?

通过二维数组遍历显示图片

异步显示食品分类列表

2.延迟到更新界面如何做?

使用watch$nextTick(callback)解决轮播bug

由于创建的Swiper实例对象,更新早于数据更新,无法实现轮播.
使用setTimeout可以实现效果,但不是很好,因为不知道数据何时更新完,无法准确控制时间进行界面更新.
$nextTick()
用法:将回调延迟到下次DOM更新循环之后执行.在修改数据之后立即使用它,然后等待DOM更新.它跟全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上.

3.开发 Star 组件: 通过计算属性实现

4.前后台交互相关问题

1).如何查看你的应用是否发送某个ajax请求?
浏览器的network;
2).发ajax请求404
请求的路径不对
代理是否生效(配置和重启)
服务器应用是否运行
3).后台返回了数据,但页面没有显示?
vuex中是否有
组件中是否读取

5.异步数据：
封装ajax：
promise+axios封装ajax请求的函数
封装每个接口的对应的请求函数（能根据接口定义ajax请求函数）
解决ajax的跨域问题：配置代理，对代理的理解
浏览器是不知道代理的存在，浏览器提交的是对当前前台应用的请求，请求的是8080，
前台服务器的端口号：8080， 后台服务器的端口号4000，前后台都是运行在服务器之上
前台应用发的8080的请求，代理服务器去拦截它，将它转发后台服务器4000去处理，返回的结果代理又将它转发给8080