项目优化
项目整体介绍
基于vue3.0新特性开发的一个订单支付平台，项目中采用vuex来管理购物车和用户数据，在项目的开发中，自己对商品、购物车订单和支付的功能进行了进一步的完善，也进一步完成了购物系统功能的开发和后期维护。
后台接口是用node开发的，（数据库部分不太完善），使用了mock.js来模拟数据。
对于项目购物车功能整体介绍
因为分析到购物车的各种操作都会有两种状态的区分，所以不会在组件中去区分。而是在封装在vuex中的actions中去区分，在组件上只需调用actions即可。在actions中通过user信息去区分登录状态
未登录，通过mutations修改vuex中的数据即可，vuex已经实现数据持久化，会同步保持在本地。
已登录，通过api接口去服务端操作，响应成功后通过mutations修改vuex中的数据即可，它也会同步在本地。
（可以不说了） 不管何种操作何种状态返回一个promise，然后组件能够判断操作是否完毕是否成功，再而去做其他事情。 注意：
登录后，需要合并本地购物车到服务端。
退出后，清空vuex数据也会同步清空本地数据。
说一下购物车的逻辑?
//vue中购物车逻辑的实现
1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性
2. 在vuex中state中添加一个数据 cartList 用来保存这个数组
3. 由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中
4. 加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象
5. 在商品详情页，点击加入购物车按钮的时候，调用vuex提供的addToCart这个mutation将当前的商品信息 （id count）传给addTocart this.$store.commit("addToCart", {id: , count：})
// js中购物车逻辑的实现 1.商品页点击“加入购物车”按钮，触发事件
2.事件调用购物车“增加商品”的Js程序（函数、对象方法）
3.向Js程序传递传递“商品id”、“商品数量”等数据
4.存储“商品id”、“商品数量”到浏览器的localStorage中
展示购物车中的商品****
1.打开购物车页面
2.从localStorage中取出“商品Id”、“商品数量”等信息。
3.调用服务器端“获得商品详情”的接口得到购物车中的商品信息（参数为商品Id）
4.将获得的商品信息显示在购物车页面。
完成购物车中商品的购买****
1.用户对购物车中的商品完成购买流程，产生购物订单
2.清除localStorage中存储的已经购买的商品信息
备注1：购物车中商品存储的数据除了“商品id”、“商品数量”之外，根据产品要求还可以有其他的信息，例如完整的商品详情（这样就不用掉服务器接口获得详情了）、购物车商品的过期时间，超过时间的购物车商品在下次打开网站或者购物车页面时被清除。
备注2：购物车商品除了存储在localStorage中，根据产品的需求不同，也可以存储在sessionStorage、cookie、session中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。
对于项目支付功能整体介绍（用的是沙箱支付宝）
- PC前台点击支付按钮，新开标签页打开后台提供的支付链接带上订单ID还有回跳地址
- 后台服务发起支付，等待支付结果，修改订单状态，回跳PC前台结果页
- PC前台在结果页获取回跳URL参数订单ID查询支付状态，展示支付结果 （聊到支付细节，就说沙箱支付宝）
说一下前端登录的流程（介绍可说可不说）?
初次登录的时候，前端调后调的登录接口，发送用户名和密码，后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token，和一个用户信息的值，前端拿到token，将token储存到Vuex中，然后从Vuex中把token的值存入浏览器Cookies中。把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页，有就跳转到相应的页面，我们应该再每次发送post/get请求的时候应该加入token，常用方法再项目utils/service.js中添加全局拦截器，将token的值放入请求头中 后端判断请求头中有无token，有token，就拿到token并验证token是否过期，在这里过期会返回无效的token然后有个跳回登录页面重新登录并且清除本地用户的信息
项目注意事项（如果聊到数据库和后端的开发：后台接口是node开发的，服务器是本地服务器，数据库部分不太完善，使用了mock.js来模拟数据）
- 后台接口基本完毕，但是数据缺乏（分类，商品），所以会有一些本地mock数据。
为什么用mock.js：
mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。
- 采用vuex来管理购物车和用户数据，vuex的持久化保持数据。 vuex持久化(vue总结有)
农场类小游戏的总结
模拟农场小游戏根据vue开发的农场类游戏，主要根据鼠标操作。
1、对农场游戏的业务逻辑进行代码实现，通过对各种蔬菜的品种种植，最终赚取游戏币的益智类游戏，添加季节变换和不同的音效（使用audio标签），增加了农场游戏成就、游戏记录等功能。
其中季节变换是根据时间计时器的来实现的，根据时间的变换来完成季节的变换包括音效的变化。使用ransition实现漂浮物的动画，根据窗口对漂浮物的位置进行改变。
2、项目整体主要是使用vue-router处理页面之间的跳转，使用ransition实现动画，使用axios请求后台数据，利用Node.js搭建的本地服务端，给游戏提供数据接口。
（项目里的）原生JS实现轮播图是怎么做的？
答：（实现方法应该不止一种，这里只说我的实现方法）（项目里有五张图片以及五个与之对应的圆点）①先给每个图片和圆点都添加一个自定义属性index，这样就能把图片和圆点一一对应。②一个变量preIndex保存上一次被显示的图片和圆点的index。③给每个圆点添加点击事件，若被点击的圆点的index不等于preIndex，则通过添加删除类名的方式改变显示的图片和高亮的圆点。
（事件代理）如果一个列表中有很多项，给每个项都绑定点击事件的话会有很大开销，怎么优化？浏览器的事件传播机制是怎样的？有考虑过为什么要有这样的事件流（传进来又传出去）吗？
答：①利用事件冒泡，给父元素绑定点击事件而不是给子元素绑定。②事件捕获（根节点->触发事件的元素）->目标阶段->事件冒泡（ 触发事件的元素->根节点）。③Ⅰ刚开始是因为网景和微软的浏览器的实现方式不同，后来的浏览器为了兼容他俩所以都这样设计了。Ⅱ更重要的是可以根据想要的效果不同而在不同的阶段处理事件。如果某个元素被点击了，但是我不想让它被触发，就可以在事件捕获阶段把它直接砍掉。
