前端尚硅谷尚品汇Vue项目笔记
目录
1，脚手架初始化项目
1.1，要求
1.2，脚手架使用
1.3，文件目录分析
2，项目的其他配置
2.1，项目运行，浏览器自动打开
2.2，关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）
2.3，src文件夹配置别名,创建jsconfig.json，用@/代替src/，exclude表示不可以使用该别名的文件
3，组件页面样式
3.1，清除vue页面默认的样式
4，项目路由的分析
6，路由组件的搭建 vue-router （pages文件夹）
6.1，配置路由
6.2，总结
6.3，路由跳转方式
8，路由传参
8.1，路由的跳转
8.2，路由传参，参数有几种写法？
8.3，面试题
1：路由传递参数（对象写法），path是否可以结合params参数一起使用？
2：如何制定params参数可传可不传？
3：params参数可以传递也可以不传递，但是如果传递的是空串，如何解决?
4：路由组件能不能传递props数据？
9.1，为什么编程式导航进行路由跳转的时候，就有这种警告错误？
9.2， 原因&方法
9.3，这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
9.4
10，将Home组件的静态组件拆分
11，定义全局组件
12，项目实时更新
13，AIPOST测试接口
14，二次封装axios
14.1，二次封装好处：
14.2，API 文件
14.2.1，导入axios
14.2.2，用creat方法创造axios实例，
14.2.3配置请求和响应拦截器，用创造的实例instance去配置
14.2.4，对外暴露
14.3，nprogress进度条
15，前端解决跨域问题-webpack
16，接口同一管理
17，Vuex状态管理库
17.1，vuex是什么？
17.2，vuex的基本使用
17.2.1 ，安装
17.2.2 ，引入
根目录创建store文件夹，文件夹下创建index.js
18，动态展示三级联动列表数据
18.1，发送请求
18.2，async和await
18.3，接收数据
18.4，展示数据
19，优化商品分类三级列表
20，loadsh插件防抖和节流
20.1，正常
20.2，防抖
20.3，节流
21，三级联动路由跳转与传参（编程式导航+事件委派）
22，mock数据
23，轮播图swiper
24，开发floor组件
25，把首页当中的轮播图拆分为一个公用全局组件
26，Search模块--getters（vuex store中的计算属性）
27，params参数
28，面包屑
29，全局事件总线
30，自定义事件
31，排序结构
31.1，考虑的问题：
31.2，总结search模块开发
32，分页器
32.1，为什么用分页器？
32.2，分页器的展示，需要哪些数据（条件）？
33，滚动条
34，undefined细节
35，商品详情放大镜
36，浏览器存储功能
37，购物车组件（临时游客身份)
38，加入购物车
39，修改购物车产品的数量
39.1，判断底部复选框是否勾选【全部产品都选中才勾选】
39.2， 修改某一个产品购物车的个数，操作减号过快时，数量会变成负数，所以这里要用节流
40，购物车状态修改和商品删除
40.1，删除购物车某一个产品
40.2，修改购物车里某一个商品的选中状态
41，全选（actions扩展）
41.1，删除全部选中的产品
41.2， 修改购物车里全部产品的勾选状态
42，注册（表单验证）
42.1，ES6 const语法
42.2，获取验证码
42.3，注册
42.4，表单验证
43，登录（token)
43.1，登录
43.2，登录后展示用户信息
43.3，退出登录
44，全局守卫
45，交易界面（不使用vuex）
45.1，统一接收api
45.2，提交订单
46，qrcode和弹窗
46.1，弹窗
46.2，qrcode
47，个人中心（我的订单二级路由）
48，组件独享守卫
49，图片懒加载
50，路由懒加载
51，打包项目
51.1，打包 文件夹右键git bash ----npm run build
51.2，购买服务器
51.3，nginx
51.4，nginx服务器跑起来
52，组件通信方式
52.1，porps
52.2，自定义事件
52.3，全局事件总线$bus
52.4，Pubsub-js在React框架中使用比较多（发布于订阅）
52.5，Vuex
52.6，插槽
53，自定义事件
54，v-model（组件通信方式的一种）
55，sync属性修饰符
56，$attrs与$listeners
57，$children与$parent
58，混入mixin
59，插槽
1，脚手架初始化项目
1.1，要求
1:node + webpack + VScode + 谷歌浏览器 + git
2:数组的方法 + promise + await + async + 模块化…
1.2，脚手架使用
vue init webpack 项目的名字
新建文件夹后，cmd ----- vue create 项目名称
1.3，文件目录分析
node_mudules文件夹：项目依赖文件夹
public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，而不会当做一个模块打包到 js文件里。
src文件夹（程序员代码文件夹）：
- assets文件夹：一般放置静态资源（一般放置多个组件共用的静态资源），需要注意，放在在assets文件夹里面静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块打包到js文件里。
- component文件夹，一般放置的是非路由组件（全局组件）
- App.vue：唯一的根组件，Vue当中的组件（.vue)
- main.js：程序入口文件，也是整个程序当中最先执行的文件
- babel.config.js：配置文件（babel相关）
- package.json：认为项目‘身份证’，记录项目叫做什么，项目当中有哪些依赖，项目怎么运行
- package-lock.json：缓存性文件
- README.md:说明性文件
2，项目的其他配置
2.1，项目运行，浏览器自动打开
Package.json文件
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},2.2，关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）
根目录下创建vue.config.js,进行配置
module.exports = {
lintOnSave: false,
}2.3，src文件夹配置别名,创建jsconfig.json，用@/代替src/，exclude表示不可以使用该别名的文件
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
3，组件页面样式
组件页面的样式使用的是less样式，浏览器不识别该样式，需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式，则在组件中设置
根目录下vue.config.js文件设置 --刚刚经过工具测试，接口没有问题 --如果服务器返回的数据code字段200，代表服务器返回数据成功 --整个项目，接口前缀都有/api字样 Config.js文件下 axios是一个基于promise的网络请求库，可以方便我们进行网络请求。 便于我们更好的管理我们的接口，不至于请求接口很多的情况下，出现混乱。 请求拦截器，响应拦截器： 请求拦截器：在发请求之前可以处理业务 响应拦截器：服务器数据返回以后，处理数据 npm install -- save axios 在根目录src文件夹里创建 API 文件夹，一般都是用来放axios请求，创建request.js文件。 import axios from "axios"; 这里是const requests，那最后要暴露的也是 requests。 export default requests; // 进度条开始 nprogress.start(); // 进度条结束 nprogress.done(); 如果要修改进度条的颜色，直接在nprogress.css修改bar request.js文件全部代码 在根目录下的vue.config.js中配置,proxy为通过代理解决跨域问题。 项目小，可以在组件的声明周期函数中发请 项目大：axios.get('xxx'); 16.1，封装所有请求：在 api 文件中创建index.js文件，引入封装的axios实例 16.2， 将每个请求分装为一个函数并暴露出去，通过封装的axios发送请求，将来在别的模块中比，如APP.vue或者其他组件发请求，只需要在这对外暴露一个函数，别的模块可以看到，调用就可以发送请求，把服务器返回数据给别的模块用。 函数体一执行就可以发请求，用axios请求函数的形式，传入请求的地址 export const reqCategoryList = () => { return requests ({ url:'/product/getBaseCategoryList'，method:'get'}); } 当有组件需要使用相关请求，即前面二次封装axios请求时定义的nprogress.start和ngprogress.done，则在store文件夹的模块中，引入函数并调用。 import {reqCategoryList} from '@/api'; 是一个插件，状态管理库，可以集中式管理项目中组件公用的数据 并不是全部的项目都需要vuex，项目小不需要，如果项目大，组件和数据多，数据维护费劲才需要 vuex有几大核心的概念：state,mutations,actions,modules npm install vuex@next --save 在main.js中引入并注册 如果前端应用和后端 API 服务器没有运行在同一主机上，那就需要通过vue.config.js 中的devServer.proxy 选项来配置，解决跨域问题，将 API 请求代理到 API 服务器，代理是前端和后端的中间商。 请求到 /api/xxx，那就会被代理请求到 http://gmall-h5-api.atguigu.cn/api/xxx ，现在我们要请求到的地址是 /api/product/getBaseCategoryList vuex核心的概念：state，mutations，actions，modules state只能由mutations修改，actions获取到的数据用commit提交给mutations，{commit}是解构赋值的结果，dispatch是异步操作，用action接收，actions出来的是promise，需要async，因为三级联动是公共组件，home要使用的话，就要挂载，使用他的数据. 要求当TypeNav组件挂在完毕就是mounted一执行，就得发请求，获取服务器数据和展示数据。 这时候相应的组件TypeNav就拿到数据，要去template将数据展示出来。 由于拿到的数据是三层结构，所以要遍历三层，遍历的是计算出来的属性categoryList 由于home和search切换过程中需要执行无数次，所以放到APP组件，只会执行一次，this.$store.dispatch("categoryList"); 代码不能放在main.js文件当中，因为main.js不是组件，没有$store，也没有this. TypeNav组件代码如下 由于路径跳转的时候没有search字样，所以要在路由index.js文件里给search路由起名， name：“search” 整理路由参数时， let location = { name: "search" }; query = {...} 路由跳转时 this.$router.push({name:“search",query:{categoryName:'xxx'}}) 事件触发非常频繁，而且每一次的触发，回调函数都要去执行(如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿) //正常情况（用户慢慢的操作):鼠标进入，每一个一级分类h3，都会触发鼠标进入事件 //非正常情况（用户操作很快）:本身全部的一级分类都应该触发鼠标进入事件，但是经过测试,只有部分h3触发了 //就是由于用户行为过快，导致浏览器反应不过来。如果当前回调函数中有一些大量业务， 前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次 例子:输入框搜索 输入完内容之后 一秒后才发送一次请求 使用插件lodash lodash里面有自己封装的函数，可以用于防抖于节流： 解决： lodash插件或者引用js文件，封装函数的防抖与节流业务（闭包+延迟器） npm i lodash npm i --save lodash import _.debounce(func, [wait=0], [options=]) 在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发 例子：计数器限定一秒内不管用户点击按钮多少次，数值只能加一 解决： _throttle() _.throttle(func, [wait=0], [options=]) 这一整个是个函数 throttle回调函数别用箭头函数，可能出现上下文this TypeNav代码如下 合并params和query参数，如果路由跳转的时候带有params参数，也要捎带传递过去，这里的goSearch是点击三级联动。 我们可以通过在函数中传入event参数，获取当前的点击事件，通过event.target属性获取当前点击节点，再通过dataset属性获取节点的属性信息。 event是系统属性，所以我们只需要在函数定义的时候作为参数传入，在函数使用的时候不需要传入该参数。 Header组件代码如下，这里的goSearch是点击Header的搜索按钮。 服务器返回的数据（接口）只有商品分类菜单数据，对于ListContainer组件与Floor组件数据服务器没有提供 mock数据（模拟）：如果你想mock数据，需要用到一个插件mockjs，拦截ajax请求，前端mock数据不会和你的服务器进行任何通信 npm i --save mockjs MockServe.js代码如下 在new Swpier实例之前，页面中结构必须的有，先做body结构再做script ListContainer组件开发的重点：安装swiper插件，最新版本是6，要用5 npm install --save swiper@5 main.js文件代码 注意：在创建swiper对象时，我们会传递一个参数用于获取展示轮播图的DOM元素，官网直接通过class（而且这个class不能修改，是swiper的css文件自带的）获取。但是这样有缺点：当页面中有多个轮播图时，因为它们使用了相同的class修饰的DOM，就会出现所有的swiper使用同样的数据，这肯定不是我们希望看到的。 解决方法：在轮播图最外层DOM中添加ref属性 通过ref属性值获取DOM let mySwiper = new Swiper(this.$refs.cur,{...}) 经常制作轮播图（移动端，pc端都可以使用） 使用步骤： 1）引入相应依赖包swiper.js,swiper.css 2）页面的结构必须有 3）初始化swiper实例，给轮播图添加动态效果 4）mock数据，通过mockjs模块实现 解决方法3：watch监听属性+nextTick watch：监听已有数据的变化 $nextTick:在下次DOM更新循环结束会后执行延迟回调，在修改数据之后，立即使用这个方法，获取更新后的DOM 可以保证页面中的结构已经有了，经常和很多插件一起使用【都需要DOM存在了】 nextTick：在下次DOM更新循环结束会后执行延迟回调，在修改数据之后，立即使用这个方法，获取更新后的DOM，当你执行这个回调的时候，保证服务器数据回来了，v-for执行完毕了【一定轮播图的结构已经有了】 this.$nextTick(() => { } 仓库当中的state数据格式，取决于服务器返回的数据 getFloorList这个action在哪里触发，需要在home路由组件当中的mounted发，因为floor有两个，我们需要在home组件v-for遍历floor组件 Home组件下的代码如下： floor组件代码如下：Floor是子组件，home是父组件，我们在home组件中实现了由home组件向Floor组件传递信息的操作，即父组件向子组件传递信息。 v-for也可以在自定义标签上使用 组件通信的方式有哪些： props：用于父子组件通信 自定义事件：@on,@emit 可以实现子给父通信 pubsub-js：vue当中几乎不用 全能 插槽 vuex 原理：父组件设置一个属性绑定要传递的数据 子组件props接受该属性值 本项目的 父组件:home文件下的index.js //...省略 子组件：Floor下的index.vue //...省略 将轮播图放在Carousel组件中，这样ListContainer和Floor都能引用 floor组件代码如下： Carousel组件代码如下： 获取search模块需要的服务器数据，并且存储于仓库中，并且有一些数组数据我们已经通过getters进行简化 如果不使用getters属性，我们在组件获取state中的数据表达式为：this.$store.state.子模块.属性， 如果有多个组件需要用到此属性，我们要么复制这个表达式，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。 Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 个人理解：getters将获取store中的数据封装为函数，代码维护变得更简单（和我们将请求封装为api一样）。而且getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 注意：仓库中的getters是全局属性，是不分模块的。即store中所有模块的getter内的函数都可以通过$store.getters.函数名获取 Search模块中获取仓库里的数据，用...mapGeters，mapGetters里面的写法：传递的数组，因为getters是不分模块的，state会分state下的home或者search模块，直接写函数名即可。 向服务器发送请求获取Search模块数据 Search组件代码如下： search模块，删除面包屑的点击事件代码如下 Header模块的代码如下 子组件SearchSelector下获取仓库getters的数据 Search模块下的代码 排序方式： 1: 综合,2: 价格 asc: 升序,desc: 降序 示例: "1:desc" 1，谁应该有类名（红色底色），默认是综合，点击价格会变成价格有红色：通过order的属性值当中包含1（综合）还是包含2（价格） 2，谁应该有箭头，谁有箭头取决于谁有类名是红色，用v-if v-show 3，箭头用什么制作：阿里图标库，到public index文件里引入,箭头上升还是下降取决于是asc还是desc 很多电商平台为什么要用分页器，比如电商平台同时展示的数据有很多，渲染会卡顿 采用分页功能 ElementUI是有相应的分页组件，使用起来超级简单，但是我们前台项目目前不用，自主掌握 面试的时候：是否封装过组件：分页器，日历 1， 需要知道当前是第几页：pageNo字段代表当前页数 需要知道每页展示多少条数据：pageSize字段进行代表 需要知道整个分页器一共有多少条数据：total字段进行代表---【获取另外一条信息：一共有多少页】，向上取整 ...连续的页码数... 分页器连续的页码个数；5|7【奇数对称好看】 总结：对于分页器而言，自定义的前提需要知道四个前提条件 pageNo pageSize total Continues 2，自定义分页器。在开发的时候先自己传递假的数据进行调试，调试成功后再用服务器的数据, 3，对于分页器而言，重要的地方【算出：连续页面起始数字和结束数字】 当前第八页 6 7 8 9 10 当前第十五页 13 14 15 16 17 前提：分页器数字没有0和负数 假如当前是第一页 -1 0 1 2 3（不行）----- 1 2 3 4 5 假如当前是第二页 0 1 2 3 4（不行）---- 1 2 3 4 5 假如当前是第三页 1 2 3 4 5（可以 ） 假如当前页是31，总页数是31 29 30 31 32 33（不行）------- 27 28 29 30 31 假如当前页是30 ， 28 29 30 31 32 （不行）-------27 28 29 30 31 假如当前页是29， 27 28 29 30 31（可以） 4，分页器的动态展示【上，中，下】 v-for：数组|对象|字符串|数字，都能遍历, 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 使用声明式导航vue-router。 router--index.js代码如下： 访问undefined的属性值会引起红色警告，可以不处理，但是要明白警告的原因。 以获取商品categoryView信息为例，categoryView是一个对象。 下细节在于getters的返回值。如果getters按上面代码写为return state.goodInfo.categoryView，页面可以正常运行，但是会出现红色警告。 原因：假设我们网络故障，导致goodInfo的数据没有请求到，即goodInfo是一个空的对象，当我们去调用getters中的return state.goodInfo.categoryView时，因为goodInfo为空，所以也不存在categoryView，即我们getters得到的categoryView为undefined。所以我们在html使用该变量时就会出现没有该属性的报错。 即：网络正常时不会出错，一旦无网络或者网络问题就会报错。 总结：所以我们在写getters的时候要养成一个习惯在返回值后面加一个||条件。即当属性值undefined时，会返回||后面的数据，这样就不会报错。 如果返回值为对象加||{}，数组：||[ ]。 此处categoryView为对象，所以将getters代码改为return state.goodInfo.categoryView||{} 商品详情唯一难点就是点击轮播图图片时，改变放大镜组件展示的图片。 在轮播图组件中设置一个currendIndex，用来记录所点击图片的下标，并用currendIndex实现点击图片高亮设置。当符合图片的下标满足currentIndex===index时，该图片就会被标记为选中。 轮播图组件和放大镜组件是兄弟组件，所以要通过全局总线通信。 轮播图组件和放大镜组件是兄弟组件，所以要通过全局总线通信。 在轮播图组件中，点击图片触发全局事件changeCurrentIndex，参数为图片所在数组的下标。 轮播图组件ImageList.vue代码如下： 放大镜组件zoom.vue代码如下： 放大镜组件中也会有一个currentIndex，他用表示大图中显示的图片的下标（因为放大镜组件只能显示一张图片），全局事件传递的index赋值给currentIn 浏览器存储功能：HTML5中新增的，本地存储和会话存储 本地存储：持久化的-----5M （就算浏览器关闭和关机都有） 会话存储：并非持久-----会话结束就消失 sessionStorage、localStorage概念： sessionStorage：为每一个给定的源维持一个独立的存储区域，该区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。 localStorage：同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。 注意：无论是session还是local存储的值都是字符串形式。如果我们想要存储对象，需要在存储前JSON.stringify()将对象转为字符串，在取数据后通过JSON.parse()将字符串转为对象。 服务器发起ajax，获取购物车数据 ,操作vuex三连环，组件获取数据展示数据 发现：发请求的时候，获取不到你购物车里面的数据，因为服务器不知道你是谁 如果想要获取详细信息，还需要一个用户的uuidToken，用来验证用户身份。但是该请求函数没有参数，所以我们只能把uuidToken加在请求头中。 创建utils工具包文件夹，创建生成uuid的js文件，对外暴露为函数（记得导入uuid => npm install uuid）。 生成临时游客的uuid（随机字符串）,每个用户的uuid不能发生变化，还要持久存储 新建utils文件夹，新建uuid_token.js文件 store---detail.js 注意this.$store只能在组件中使用，不能再js文件中使用。如果要在js中使用，需要引入import store from '@/store'; store--detail.js代码如下 Detail--index.js代码如下 store--shopcart.js代码如下 shopcart---index.js代码如下 store--shopcart.js代码如下 shopcart---index.js代码如下 由于后台只提供了删除单个商品的接口，所以要删除多个商品时，只能多次调用actions中的函数。 我们可能最简单的方法是在method的方法中多次执行dispatch删除函数，当然这种做法也可行，但是为了深入了解actions，我们还是要将批量删除封装为actions函数。 actions扩展 官网的教程，一个标准的actions函数如下所示： deleteAllCheckedById(context) { console.log(context) } 我们可以看一下context到底是什么 context中是包含dispatch、getters、state的，即我们可以在actions函数中通过dispatch调用其他的actions函数，可以通过getters获取仓库的数据。 这样我们的批量删除就简单了，对应的actions函数代码让如下 Store---shopcart.js代码如下 注意：没有一次删除很多产品的接口，但是有通过ID可以删除产品的接口（一次删除一个） promise.all([p1,p2,p3]) p1|p2|p3 每一个都是promise对象，如果有一个promise失败，都失败，如果都成功，返回的结果就是成功 Shopcart--index.js代码如下 Store---shopcart.js代码如下 Shopcart--index.js代码如下 const {comment,index,context} = this 上面的这句话是一个简写，最终的含义相当于: const comment = this.comment const index = this.index const context= this.context Store-user.js代码如下： Register---index.js代码如下 表单验证个人推荐使用element ui的from表单验证，看一下官网的示例就会用。 element ui from表单验证链接 npm i vee-validate@2 main.js文件代码： 根目录下新建plugins文件夹，新建validate.js文件 第一步：插件安装与引入 第二步：提示信息 第三步：基本使用 登陆成功时，后台为了区分你这个用户是谁，服务器下发token（令牌，唯一标识），获取到token，存储于仓库当中（非持久化），路由跳转到home首页 登录接口：做的不完美，一般登陆成功服务器会下发token，前台持久化存储token，（带着token找服务器要用户信息进行展示） 一刷新home 首页，获取不到用户信息（token：vuex非持久化存储） 持久化存储token，在utils文件夹下新建token.js文件 Api-request.js 导航：表示路由正在发生改变，进行路由跳转 守卫：你把它当做紫禁城守卫 全局守卫：你的项目当中只要发生路由变化，守卫就能监听到 举例子：紫禁城【皇帝，太后，妃子】，紫禁城大门守卫全要排查 路由独享守卫 举例子：紫禁城【皇帝，太厚，妃子】，是相应【皇帝，太后，妃子】路上守卫 组件内守卫 举例子：我要去皇帝的屋子，只负责皇帝屋子的门口 比如：用户已经登录，用户不应该还会在login页面 router index.js全局前置守卫代码 Main.js文件代码如下 Element UI基本使用 npm i element-ui -S 按需引入 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-component： npm install babel-plugin-component -D 然后，将 .babelrc 修改为： 然后，将 .babelrc（.babel.config.js） 修改为： 接下来，如果你只希望引入部分组件，那么需要在 main.js 中写入以下内容： 按照需求引入相应的组件即可 Vue.component(); Vue.prototype.$xxx = xxx; npm i qrcode --save 判断支付状态 GET|POST：短轮询，请求发一次，服务器响应一次，完事。 第一种做法：前端开启定时器，一直找服务器要用户支付信息【定时器】 第二种做法：项目务必要上线 + 和后台紧密配合 当用户支付成功以后，需要后台重定向到项目某一个路由中，将支付情况通过URL参数形式传给前端， 前端获取到服务器返回的参数，就可以判断了。 routers.js 注意： 二级路由要么不写/，要么写全：‘/center/myorder’。 { path: '', redirect: 'myorder' }表示当我们访问center路由时，center中的router-view部分默认显示myorder二级路由内容。 只要从购物车界面才能跳转到交易界面（创建订单） 只有从交易界面(创建订单)页面才能跳转到支付页面 只有从支付页面才能跳转到支付成功页面 routers.js npm i [email protected] 路由懒加载链接 Routes.js 项目到此基本就完成了，接下来就是打包上线。在项目文件夹下执行npm run build。会生成dist打包文件。 dist就是我们打包好的项目文件 dist文件下的js文件存放我们所有的js文件，并且经过了加密，并且还会生成对应的map文件。 map文件作用：因为代码是经过加密的，如果运行时报错，输出的错误信息无法准确得知时那里的代码报错。有了map就可以向未加密的代码一样，准确的输出是哪一行那一列有错。 当然map文件也可以去除（map文件大小还是比较大的） 在vue.config.js配置productionSourceMap: false即可。 注意：vue.config.js配置改变，需要重启项目 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错 所以该文件如果项目不需要是可以去除调 vue.config.js配置 productionSourceMap:false, 1，阿里云 2，腾讯云 2，设置安全组，让服务器一些端口号打开 3，利用xshell工具登录服务器 4，linus：/更目录 3，linux常用指令：cd跳转目录 ls查看 mkdir创建目录 pwd：查看绝对路径 1：为什么访问服务器io地址就可以访问到我们的项目--配置一些东西 刚刚在服务器上=>root/jch/www/shangpinhui/dist http://182.92.128.115; 2.项目的数据源来自于http://gmall-h5-api.atguigu.cn, 3，nginx配置 1，xshell进入根目录/ect 2，进入etc目录，这个目录下有一个nginx目录，进入到这个目录【已经安装过nginx：如果没安装过，四五个文件】 3，如果想安装nginx ：yum install nginx 4，安装完nginx服务器之后，你会发现在nginx目录下，多了一个nginx.conf文件，在这个文件中进行配置 5，vim nginx.conf进行编辑，主要添加如下两项 location / { root /root/jch/www/shangpinhui/dist index index.html; try_files $uri/ /index.html; } //解决第二个问题 locatin /api{ proxy_pass ttp://gmall-h5-api.atguigu.cn; }, service nginx start 适用于场景：父子组件通信 注意事项： 如果父组件给子组件传递数据（函数）：本质是子组件给父组件传递数据 如果父组件给子组件传递的数据（非函数）：本质就是父组件给子组件传递数据 书写方式：3种 ['todos'] , {type:Array,default[ ]} 小提示：路由的props 书写形式：布偶值，对象，函数形式 适用于场景：子组件给父组件传递数据 $on $emit 适用于场景：万能 Vue.protype.$bus = this ; 适用于场景：万能 适用于场景：万能 适用于场景：父子组件通信（一般结构） 默认插槽 具名插槽 作用域插槽 事件：系统事件（原生DOM事件）：click，双击，鼠标系列等等 自定义事件：事件源：给谁绑定 事件类型 事件回调 1，原生DOM---button可以绑定系统事件--click单机事件等等 2，组件标签--event1可以绑定系统事件（不起作用：以内属于自定义事件）---native（可以把自定义事件变为原生DOM事件） 组件标签身上写的@click是自定义事件 <Event2 @click="handler3" @xxx="handler4">Event2> 在原生DOM写的@click是原生DOM事件 <button @click="$emit('xxx','我是自定义事件xxx')">分发自定义xxx事件button><br> handler3(params){ console.log(params); }, v-model是Vue框架指令，它主要结合表单元素一起使用（文本框，复选，单选框等） 主要的作用是收集表单数据 v-model实现原理：value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据同步 父组件代码 子组件代码 属性修饰符.sync，组件通信方式的一种，可以实现父子数据同步。 父组件 子组件 他们两者是组件实例的属性，可以获取到父组件给子组件传递props与自定义事件 父组件 子组件 ref：可以在父组件内部获取子组件---实现父子通信 $children：可以在父组件内部获取全部的子组件【返回数组】 $parent：可以在子组件内部获取唯一的父组件【返回组件实例】 父组件 子组件 如果项目当中出现很多结构类似功能，想到组件复用。 如果项目当中很多的组件JS业务逻辑相似。想到mixin。【可以把多个组件JS部分重复、相似地方】 将不同的组件里共同的methods封装成一个js文件，组件使用的时候引入 插槽：父子组件通信（HTML结构） 插槽slot： 默认插槽|具名插槽|作用域插槽 作用域插槽：子组件的数据来源于父组件，但是子组件决定不了自身结构与外观。 父组件 子组件12，项目实时更新
module.exports = {
//关闭eslint
lintOnSave: false,
devServer: {
// true 则热更新，false 则手动刷新，默认值为 true
inline: true,
// development server port 8000
port: 8001,
}
}13，AIPOST测试接口
module.exports = {
// transpileDependencies: true,
productionSourceMap:false,
lintOnSave: false,
// 代理跨域
devServer: {
//代理服务器解决跨域
proxy: {
//会把请求路径中的/api换为后面的代理服务器
// 前端在发请求的时候，路径中有/api的请求，代理服务器会工作，找 http://gmall-h5-api.atguigu.cn 这台服务器要数据，服务器与服务器之间没有跨域问题，浏览器之间才有
'/api': {
//提供数据的服务器地址
target: 'http://gmall-h5-api.atguigu.cn',
}
},
},
}
14，二次封装axios
14.1，二次封装好处：
14.2，API 文件
14.2.1，导入axios
14.2.2，用creat方法创造axios实例，
const requests = axios.create({
// 配置对象
// 基础路径，发请求的时候，路径当中会出现api
baseURL:"/api",
timeout:5000, // 代表请求超时的时间5s
});14.2.3，配置请求和响应拦截器，用创造的实例instance去配置
requests.interceptors.request.use((config)=>{
//在请求发送前做的操作xxxxxxx;
//config内主要是对请求头Header配置，比如添加token
return config;
});
requests.interceptors.response.use((res)=>{
//res：实质就是项目中发请求，服务器返回的数据
//成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
return res.data;
},(error)=>{
alert(error.message); //响应失败的回调函数
return Promise.reject(new Error('faile'));
}
if (error?.response.status === 401) {
/** * 1. 获取当前出现401的页面路径（目的：成功登陆之后，回到上次访问的页面）
* 2. 跳回登录页带上401页面的地址 */
const redirectUrl = router.currentRoute.value.fullPath
router.replace(`/login?redirectUrl=${redirectUrl}`) }
});
14.2.4，对外暴露
14.3，nprogress进度条
// 对于axios进行二次封装
import axios from "axios";
// 引入进度条
import nprogress from "nprogress";
// 引入进度条样式 如果要修改进度条的颜色，直接在nprogress.css修改bar
import "nprogress/nprogress.css"
// start：进度条开始 done：进度条结束
// 1:利用axios对象的方法create，去创建一个axios实例
// 2：request就是axios，只不过稍微配置一下
const requests = axios.create({
// 配置对象
// 基础路径，发请求的时候，路径当中会出现api
baseURL:"/api",
timeout:5000, // 代表请求超时的时间5s
});
// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
// config：配置对象，对象里面有一个属性很重要，headers请求头
// 进度条开始
nprogress.start();
return config;
});
// 响应拦截器
requests.interceptors.response.use((res)=>{
// 成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
// 进度条结束
nprogress.done();
return res.data;
},(error)=>{
// 响应失败的回调函数
return Promise.reject(new Error('faile'));
});
// 对外暴露 这里暴露的不是axios本身，是进行二次封装的axios实例
export default requests; 15，前端解决跨域问题-webpack
module.exports = {
// transpileDependencies: true,
productionSourceMap:false,
lintOnSave: false,
// 代理跨域
devServer: {
//代理服务器解决跨域
proxy: {
//会把请求路径中的/api换为后面的代理服务器
// 前端在发请求的时候，路径中有/api的请求，代理服务器会工作，找 http://gmall-h5-api.atguigu.cn 这台服务器要数据，服务器与服务器之间没有跨域问题，浏览器之间才有
'/api': {
//提供数据的服务器地址
target: 'http://gmall-h5-api.atguigu.cn',
}
},
},
}
16，接口同一管理
// 当前这个模块：API进行统一管理
import requests from "./request";
// 三级联动接口
// /api/product/getBaseCategoryList get 无参数
// 将来在别的模块中发请求，比如APP.vue或者其他组件发请求，只需要在这对外暴露一个函数，别的模块可以看到，调用就可以发送请求，把服务器返回数据给别的模块用
// 写一个函数通过封装的axios发送请求，只要是需要请求相同api接口地方的直接调用函数就可以
// 发请求：axios发请求返回的结果是Promise对象
export const reqCategoryList = ()=>requests({url:'/product/getBaseCategoryList',method:'get'});
// 函数体一执行就可以发请求，用axios请求函数的形式，传入请求的地址
// 需要把服务器返回的结果return返回给模块使用，如果没写return，则返回的结果是undefined
// return requests({url:'/product/getBaseCategoryList',method:'get'}) //baseURL已经加了api，所以这里的地址不需要加api了
17，Vuex状态管理库
17.1，vuex是什么？
17.2，vuex的基本使用
17.2.1 ，安装
17.2.2 ，引入
根目录创建store文件夹，文件夹下创建index.js
import Vue from 'vue';
import Vuex from 'vuex';
// 需要使用插件一次
Vue.use(Vuex);
// state:仓库存储数据的地方
/* const state = {
count:1
};
// mutations：修改state的唯一手段
const mutations = {
ADD(state){
state.count++;
}
};
// actions：处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {
// 这里可以书写业务逻辑，但是不能修改state
add({commit}){
commit("ADD");
}
};
// getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}; */
// 引入小仓库
import home from './home';
import search from './search';
import detail from './detail';
import shopCart from './shopCart';
import user from './user'
import trade from './trade';
// 对外暴露store类的一个实例
export default new Vuex.Store({
/* state,
mutations,
actions,
getters */
modules:{
home,
search,
detail,
shopCart,
user,
trade
}
})
// 引入仓库
import store from '@/store';
new Vue({
render: h => h(App),
// 注册仓库：组件实例的身上会多个属性$store属性
store,
}).$mount('#app')
18，动态展示三级联动列表数据
18.1，发送请求
// const { defineConfig } = require('@vue/cli-service')
module.exports = {
// transpileDependencies: true,
lintOnSave: false,
// 代理跨域
devServer: {
//代理服务器解决跨域
proxy: {
//会把请求路径中的/api换为后面的代理服务器
// 前端在发请求的时候，路径中有/api的请求，代理服务器会工作，找 http://gmall-h5-api.atguigu.cn 这台服务器要数据，服务器与服务器之间没有跨域问题，浏览器之间才有
'/api': {
//提供数据的服务器地址
target: 'http://gmall-h5-api.atguigu.cn',
}
},
},
}
18.4，展示数据
19，优化商品分类三级列表
mounted() {
//派发一个action，起名categoryList,获取商品分诶的三级列表数据。由于home和search切换过程中需要执行无数次，所以放到APP组件，只会执行一次
// 以下这个代码不能放在main.js文件当中，因为main.js不是组件，没有$store，也没有this
this.$store.dispatch("categoryList");
},
mounted() {
// 通知Vuex发请求，获取数据，存储于仓库中
/* 因为用了模块化开发，dispatch方法需要传入两个参数，第一个参数指定哪个模块中的哪个方法，这里是'home/categoryList'，
这里只需要发送ajax请求，不需要传值，所以不需要写第二个参数 */
// this.$store.dispatch("categoryList"); //派发一个action，起名categoryList，要去找到响应的仓库home，去书写action
// （由于home和search切换过程中需要执行无数次，所以放到APP组件，只会执行一次）
// 当组件挂载完毕，让全部商品分类的show变为false
// 如果不是Home路由组件，就将TypeNav隐藏
if (this.$route.path != "/Home") {
this.show = false;
}
}，
20，loadsh插件防抖和节流
20.1，正常
20.2，防抖
20.3，节流
import { mapState } from "vuex";
methods: {
// 鼠标进入，修改响应式数据currentIndex属性
/* changeIndex(index){
// index：鼠标移上某一个一级分类的元素的索引值
this.currentIndex = index;
}, */
// throttle回调函数别用箭头函数，可能出现上下文this
changeIndex: throttle(function (index) {
this.currentIndex = index;
}, 20),
}
21，三级联动路由跳转与传参（编程式导航+事件委派）
三级联动用户可以点击：一级分类，二级分类，当你点击的时候，Home模块跳转到Search模块，一级会把用户选中的产品（产品的名字，产品的ID）在路由跳转的时候带着，工作量大
路由跳转：
1，声明式导航：router-link， 如果使用声明式导航router-link，可以实现路由的跳转与传递参数 但是会出现卡顿。
当服务器的数据返回之后，循环出很多的router-link组件【创建组件实例】1000+， 当服务器的数据返回之后，循环出很多的router-link组件【创建组件实例】1000+
2，编程式导航：push|replace,
所以用编程式导航和事件委派的方法来解决。
事件委派： 将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能event中的target表示的触发事件的对象 ，使用它对触发事件的元素进行判断。
利用事件委派存在一些问题：
1，是把全部子节点【h3,dt,dl,em】的事件委派给父亲节点，点击a标签时，才会进行路由跳转【怎么确定点击的一定是a标签】
2，即使你能确定点击的是a标签，如何获取参数【1,2,3级分来的产品的名字、id】
解决方法：
1，把子节点当中a标签，我自己加上自定义属性data-categoryName,其余的子节点是没有的
2，在点击事件goSearch函数中 传入event参数，通过event.target属性获取当前点击节点，节点有一个属性dataset属性，可以获取节点的自定义属性与属性值， 再通过dataset属性获取节点的属性信息。
例如，console.log(element.dataset); 这里点击a标签才会得到一个对象例如{xxx：'xxx',categoryname：‘手机’}（浏览器自动匹配成小写的categoryname），所以我们可以把它解构出来
同时，给各级a标签加上自定义属性 data-category1Id，这样通过dataset可以获取1,2,3级a标签的商品名字和id。
let { categoryname, category1id, category2id, category3id } =element.dataset;
goSearch(event) {
// 最好的解决方法：编程式导航 + 事件委派
// 利用事件委派存在一些问题：1，是把全部子节点【h3,dt,dl,em】的事件委派给父亲节点
// 点击a标签时，才会进行路由跳转【怎么确定点击的一定是a标签】
// 即使你能确定点击的是a标签，如何获取参数【1,2,3级分来的产品的名字、id】
// 第一个问题：把子节点当中a标签，我自己加上自定义属性data-categoryName,其余的子节点是没有的
let element = event.target;
// 获取到当前触发这个事件的节点【h3,a,dt,dl】，需要带有data-categoryname这样节点【一定是a标签】
// 节点有一个属性dataset属性，可以获取节点的自定义属性与属性值
// console.log(element.dataset); 这里点击a标签才会得到一个对象例如{xxx：'xxx',categoryname：‘手机’}（浏览器自动匹配成小写的categoryname），所以我们可以把它解构出来
let { categoryname, category1id, category2id, category3id } =
element.dataset;
// 如果标签身上拥有categoryname一定是a标签
if (categoryname) {
// 整理路由跳转的参数
let location = { name: "search" };
let query = { categoryName: categoryname }; //categoryname是解构出来的值
// 一级分类，二级分类，三级分类的a标签
if (category1id) {
query.category1Id = category1id;
} else if (category2id) {
query.category2Id = category2id;
} else {
query.category3Id = category3id;
}
// 判断：如果路由跳转的时候带有params参数，也要捎带传递过去
if (this.$route.params) {
location.params = this.$route.params;
// 整理完参数
// console.log(location,query); 这里得到的是两个对象，需要将这两个对象合并
location.query = query;
// 路由跳转
this.$router.push(location);
}
}
},methods: {
// 搜索按钮的回调函数，需要向search路由进行跳转
goSearch(){
// 路由传递参数：
// 第一种：字符串形式，params参数：this.keyword（传参数前，要在原来的路径最后加/），需要占位，在路由的index.js文件里path: "/Search/:keyword"， query参数：this.keyword.toUpperCase()
// this.$router.push("/Search/" + this.keyword+"?k="+this.keyword.toUpperCase());
// 第二种：模板字符串
// this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase}`)
// 第三种：对象,需要给路由命名
// this.$router.push({name:"search",params:{keyword:this.keyword || undefined}}) //如果在搜索华为，则路径是127.0.0.1:8000/#/search/华为
if(this.$route.query){
// 代表的是如果有query参数也带过去
let location = {name:"search",params:{keyword:this.keyword || undefined}};
location.query = this.$route.query;
this.$router.push(location);
}
},
},22，mock数据
使用步骤：
1，在项目当中src创建mock文件夹
2，准备json数据（在mock文件夹中创建json文件）---格式化，别留有空格，会跑不起来
3，把mock数据需要的图片放到public文件夹中，public文件夹在打包的时候，会把相应的资源原封不动打包到 dist文件夹中
4，开始mock（虚拟的数据）创建mockServe . js通过mockjs插件实现模拟数据
5，把mockServe.js文件在入口文件中main.js引入（至少引入一次，才能模拟数据)
// 引入MockServe.js---mock数据
import '@/mock/mockServe';
// 把mockServe当成一个本地服务器，这个mockServe就是服务器的入口文件，只需要运行一下就是启动了，不需要暴露
// 先引入mockjs模块，这里一定要写Mock
import Mock from 'mockjs';
// 把JSON数据格式引入进来(json数据格式没有对外暴露但是可以引入)
// webpack默认对外暴露的：图片，JSON数据格式
import banner from './banner.json';
import floor from './floor.json';
// mock数据
// Mock是对象，对象身上有个mock方法，这个方法需要两个参数：第一个参数请求地址 第二个参数请求数据
Mock.mock("/mock/banner",{code:200,data:banner}); //模拟首页大的轮播图
Mock.mock("/mock/floor",{code:200,data:floor})
6，在api文件夹下创建mockAjax.js文件，复制request.js文件，将baseurl改为/mock，在api文件夹下的index.js文件中引入mockAjax.js
// 获取banner （Home首页轮播图接口）
export const reqGetBannerList = () =>mockRequest.get('/banner'); 7，去ListContainer文件下要求一挂载就派发action--getBannerList，系统会输出不认识getBannerList
8，由于是home组件下的，所以要去找store文件夹下的home，引入函数reqGetBannerList，并派发action,书写mutations和state
这时候home仓库已经拿到了数据就是四个轮播图，但是ListContainer组件没有数据，所以要去组件引入
computed: {
...mapState({
bannerList: (state) => state.home.bannerList, //大仓库下的小仓库
}),
},
总结：只要是公共数据都会放在store中，之后的实现步骤就是上面的固定步骤。
23，轮播图swiper
// 引入swiper样式,没有对外暴露，不需要from b
import "swiper/css/swiper.css";var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
将轮播图作为LsitContainer的子组件，由于在new Swpier实例之前，页面中结构必须的有，所以不能在mounted里new Swiper实例，因为这时候结构中的bannerList不完整，还没接收到数据。
解决方法1：在mounted加定时器，延迟一秒new Swiper实例
解决方法2： 监听属性watch，监听bannerList数据的变化：因为这条数据发生过变化--由空数组变为数组里面有四个元素，只要发生变化就newSwiper。如果执行handler方法，代表组件实例身上这个属性的属性值已经有了【数组：四个元素】， 当前这个方法执行，只能保证数组的数据有了，但是没法保证v-for已经执行结束，结构已经完整，v-for执行完毕，才会有结构【watch无法保证】
24，开发floor组件
mounted() {
// 派发action，获取floor组件的数据
this.$store.dispatch("getFloorList");
// 获取用户信息在登录后，在首页展示
// this.$store.dispatch("getUserInfo"); 放在路由里
},
25，把首页当中的轮播图拆分为一个公用全局组件
以后在开发项目时，如果看到一个组件在很多地方都使用，就把它变成全局组件
注册一次，可以在任意地方使用，公用组件放在component文件夹中
26，Search模块--getters（vuex store中的计算属性）
发送请求，由于本次请求的方式POST，并且需要带参数
// 获取搜索模块数据，地址/api/list，请求的方式是POST,需要带参数
// 当前这个函数需要接收外部传递的参数
// 两种写法：axios.get(`url`)--对象写法 axios({})--函数调用
// 当前这个接口，给服务器传递一个默认参数（调用的时候），至少是一个空对象，例如console.log(reqGetSearchInfo({}))
export const reqGetSearchInfo = (params)=>requests({url:"/list",method:"post",data:params});import {reqGetSearchInfo} from '@/api';
// search模块的小仓库
const state = {
searchList:{}, //初识状态是个对象
};
const mutations = {
GETSEARCHLIST(state,searchList){
state.searchList = searchList;
}
};
const actions = {
// 获取search模块数据
// async 函数第一个参数是上下文，第二个参数是dispatch派发一个action时传递过来的
async getSearchList({commit},params={}){
//当前这个reqGetSearchInfo函数在调用获取服务器数据的时候，至少传递一个参数（空对象）
// params形参：是当用户派发action的时候，第二个参数传递过来的，至少是一个空对象
let result = await reqGetSearchInfo(params);
if(result.code=200){
commit("GETSEARCHLIST",result.data);
}
},
};
// 计算属性，在项目当中，为了简化仓库中的数据而生
// 可以把我们将来在组件当中需要用的数据简化一下【将来组件在获取数据的时候就方便了】
const getters = {
// 当前形参state，是当前仓库中的state，不是大仓库中的state
goodsList(state){
// 这样书写是有问题的，state是从空对象变成有内容的，如果没网，请求发不出去，那state就还是个空对象，那就找不到state.searchList.goodsList，是undefined,
// 所以要返回一个空数组
return state.searchList.goodsList||[];
},
trademarkList(state){
return state.searchList.trademarkList;
},
attrsList(state){
return state.searchList.attrsList;
},
};
export default {
state,
mutations,
actions,
getters
}
computed: {
// 这里不再用mapState，用mapGetters，数据都在getters里
/* ...mapState({
goodsList:state=>state.search.searchList.goodsList
}) */
// mapGetters里面的写法：传递的数组，因为getters是不分模块的，state会分state下的home或者search模块
...mapGetters(["goodsList"]),
}27，params参数
data() {
return {
// 带给服务器的参数
searchParams: {
// 一级分类的id
category1Id:"",
// 二级分类的id
category2Id:"",
// 三级分类的id
category3Id: "",
// 分类名字
categoryName: "",
// 搜索框输入关键字
keyword: "",
// 排序:初识的窗台应该是综合降序
order: "1:desc",
// 分页器代表现在第几页
pageNo: 1,
// 每一页展示数据个数
pageSize: 10,
// 平台售卖属性操作低的参数
props: [],
// 品牌
trademark: "",
},
};
},
mounted() {
// 在发请求之前带给服务器参数【searchParams参数发生变化有数值带给服务器】
this.getData();
},
methods: {
// 向服务器发送请求获取Search模块数据（根据参数不同返回不同的数据进行展示）
// 把这次请求封装成一个函数，当需要在调用时候调用即可
getData() {
// 先测试接口返回的数据是数组还是对象，第二个参数是需要传递的params参数
this.$store.dispatch("getSearchList",this.searchParams);
},
}28，面包屑
beforeMount() {
// 复杂的写法
/* this.searchParams.category1Id = this.$route.query.category1Id;
this.searchParams.category2Id = this.$route.query.category2Id;
this.searchParams.category3Id = this.$route.query.category3Id;
this.searchParams.categoryName = this.$route.query.categoryName;
this.searchParams.keyword = this.$route.params.keyword; */
// Object.assign:ES6新增的语法，合并对象
// 在发请求之前，把接口需要传递参数，进行整理（再给服务器发请求之前，把参数整理好，服务器会返回查询的数据）
Object.assign(this.searchParams,this.$route.query,this.$route.params)
},
29，全局事件总线
要求删除搜索框的面包屑时，兄弟组件Header中的搜索框的keyword也会消失。
先在入口文件main.js中配置全局事件总线$bus
new Vue({
render: h => h(App),
// 全局事件总线$bus配置
beforeCreate(){
Vue.prototype.$bus = this; //这里的this是VM
},
// 注册路由，底下的写法KV一致省略V【router小写的】
// 当这里书写router的时候，组件身上都拥有$route,$router属性
router,
// 注册仓库：组件实例的身上会多个属性$store属性
store,
}).$mount('#app')removeKeyword(){
// 给服务器带的参数searchParams的keyword置空
this.searchParams.keyword = undefined;
// 再次发请求 让search重回手机列表
this.getData();
// 通知兄弟组件Header清除关键字
this.$bus.$emit("clear");
// 需要进行路由的跳转
if(this.$route.query){ //和上面一样，这里要加query判断，这里只是为了删除params参数，如果本来就有query参数那就要带上
this.$router.push({name:"search",query:this.$route.query});
}
},mounted() {
// 通过全局事件总线清除关键字
this.$bus.$on("clear",()=>{
this.keyword = "";
})
},30，自定义事件
methods: {
tradeMarkHandler(trademark){
// 点击了品牌（苹果），还是需要整理参数，向服务器获取相应的数据进行展示
// 在哪个组件中发请求：父组件，因为父组件中searchParams参数是带给服务器参数，子组件把你点击的品牌的信息，需要给父组件传递过去-----用自定义事件
this.$emit('trademarkInfo',trademark); //把品牌信息trademark带过去
},
// 平台售卖属性的点击事件
attrInfo(attr,attrValue){
// [“属性ID：属性值：属性名"]
this.$emit("attrInfo",attr,attrValue);
}
},
methods: {
trademarkInfo(trademark){ //自定义事件
// console.log(trademark); 这里的trademark是个对象
// 1，整理品牌字段的参数 “ID:品牌名称"
this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
this.getData();
},
attrInfo(attr,attrValue){
// [“属性ID：属性值：属性名"]
// 参数格式整理好
let props = `${attr.attrId}:${attrValue}:${attr.attrName}`;
// 数组去重
// if语句里面只有一行代码，可以省略大花括号
if(this.searchParams.props.indexOf(props)==-1)this.searchParams.props.push(props);
this.getData();
},
}31，排序结构
31.1，考虑的问题：
computed: {
// 判断order是否包含1和2
isOne() {
//这里得到的是布偶值
return this.searchParams.order.indexOf("1") != -1;
},
isTwo() {
return this.searchParams.order.indexOf("2") != -1;
},
// 判断是升序还是降序，才可以确定图标
isAsc() {
return this.searchParams.order.indexOf("asc") != -1;
},
isDesc() {
return this.searchParams.order.indexOf("desc") != -1;
},
// 获取Search模块展示产品一共多少数据
...mapState({
total: (state) => state.search.searchList.total,
}),
},
methods：{
changeOrder(flag){
// flag形参：它是一个标记，代表用户点击的是综合（1）还是价格（2） 【用户点击的时候传递进来的】
let originOrder = this.searchParams.order;
// 这里获取到的是最开始的状态，例如 1：desc
let originFlag = this.searchParams.order.split(":")[0]; //获取是综合1还是价格2
let originSort = this.searchParams.order.split(":")[1]; //获取是desc还是asc
//准备一个新的order属性值
let newOrder = '';
// 点击的是综合，因为初始值是综合1
if(flag==originFlag){ //如果点击的和初始值一样，那就将降序改为升序
newOrder = `${originFlag}:${originSort == "desc" ? "asc":"desc"}`;
}else{
// 点击的是价格
newOrder = `${flag}:${'desc'}`; //默认价格降序
}
// 将新的order赋予searchParams.order
this.searchParams.order = newOrder;
this.getData();
}
}31.2，总结search模块开发
1，先静态页面+静态组件拆分
2，发请求（API）
3，vuex三连环
4，组件获取仓库数据，动态展示数据
32，分页器
32.1，为什么用分页器？
32.2，分页器的展示，需要哪些数据（条件）？
computed:{
// 总共多少页
totalPage(){
// 向上取整
return Math.ceil(this.total/this.pageSize);
},
//计算出连续页码的起始数字与结束数字[连续页码的数字：至少是4]
startNumAndEndNum(){
const {continues,pageNo,totalPage} = this; //这里是解构，如果不解构下面就要写this
// 先定义两个变量存储起始数字和结束数字
let start = 0, end = 0;
// 连续页码数字5【就是至少是5页】，如果出现不正常现象【就是不够5页】
if(continues > totalPage){
start = 1;
end = totalPage;
}else{
// 正常现象【连续页码数是5，但是你的总页数一定是大于5】
// 起始数字
start = pageNo - parseInt(continues/2); //这里不能写死pageNo-2，因为这样就把连续页码数写死为5
// 结束数字
end = pageNo + parseInt(continues/2);
// 把出现不正常的现象【start数字出现0和负数】纠正
if(start<1){
start = 1;
end = continues;
};
// 把出现不正常的现象【end>总页数total】纠正
if(end > totalPage){
start = totalPage - continues + 1;
end = totalPage;
};
};
return { start, end };
},
}
33，滚动条
// 配置路由
let router= new VueRouter({
// 配置路由
// routes:routes
routes,
// 滚动行为,路由跳转的时候滚动条位置
scrollBehavior (to, from, savedPosition) {
// 返回的这个y=0，代表的滚动条在最上方
return {y:0};
}
});
34，undefined细节
//对应的getters代码
const getters = {
categoryView(state){
return state.goodInfo.categoryView
}
//对应的computed代码
computed:{
...mapGetters(['categoryView'])
}
//html代码
{{categoryView.category1Name}}
{{categoryView.category2Name}}
{{categoryView.category3Name}}
35，商品详情放大镜
methods: {
// 修改响应式数据
changeCurrentIndex(index){
this.currentIndex = index;
// 通知兄弟组件：当前的索引值为几,才能在点击小图的时候，传到放大镜,把数据送出去所以用$emit,不用$on
this.$bus.$emit('getIndex',this.currentIndex);
}
},
mounted() {
// 全局事件总线：获取兄弟组件传递过来的索引值
this.$bus.$on('getIndex',(index)=>{ //第一个参数是自定义事件，第二个参数是回调
// 修改当前响应式数据
this.currentIndex = index;
})
},
computed:{
// 要求数组的[0]至少是个对象，不能是undefined
imgObj(){
return this.skuImageList[this.currentIndex]||{}
}
},
36，浏览器存储功能
37，购物车组件（临时游客身份)
import {v4 as uuidv4} from 'uuid';
// 生成一个随机字符串，且每次执行不能发生变化，游客身份持久存储
export const getUUID = () =>{
// 先从本地存储获取uuid，看一下本地存储里面是否有
let uuid_token = localStorage.getItem('UUIDTOKEN');
// 如果没有
if(!uuid_token){
// 我生成游客临时身份
uuid_token = uuidv4();
// 本地存储存储一次
localStorage.setItem('UUIDTOKEN',uuid_token);
}
// 切记有返回值，没有的话是undefined
return uuid_token
}
// 封装游客身份模块uuid--生成一个随机字符串（不能再变）
import {getUUID} from "@/utils/uuid_token";
const state = {
goodInfo:{},
// 游客的临时身份
uuid_token:getUUID() //这个函数不论执行一次还是一百次，返回的临时身份只有一个,且函数要有返回值
};
// 在当前模块中引入store
import store from "@/store";
// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
// config：配置对象，对象里面有一个属性很重要，headers请求头
// 进度条开始
if(store.state.detail.uuid_token){
// 请求头添加一个字段：和后台老师商量好了
config.headers.userTempId=store.state.detail.uuid_token;
}
nprogress.start();
return config;
});
38，加入购物车
// 将产品添加到购物车中
async addOrUpdateShopCart({commit},{skuId,skuNum}){ //{skuId,skuNum}用的解构，传参的时候可以不按顺序
// 加入购物车返回的结果
// 加入购物车以后（发请求），前台将参数带给服务器
// 服务器写入数据成功，并没有返回其他的数据，只是返回code=200,代表这次操作成功
// 因为服务器没有返回其余数据，因此咱们不需要三连环存储数据
let result = await reqAddOrUpdateShopCart(skuId,skuNum);
if(result.code==200){ //代表服务器加入购物车成功
return "ok"
}else{ //代表加入购物车失败
return Promise.reject(new Error('faile'));
}
}
// 加入购物车的回调
async addShopcar(){
// 派发actions
// 1，发情求--将产品加入到数据库（通知服务器），点击购物车按钮的时候，将参数带给服务器（发请求），通知服务器加入购物车的产品是谁
// 当前这里是派发一个action，也向服务器发请求，判断加入购物车是成功还是失败，进行相应的操作
/* 下面这行代码，是调用了仓库中addOrUpdateShopCart这个函数，仓库中只是声明，这个方法之前在仓库里加上async，返回的一定是个Promise，要么成功要么失败,
所以这里加上await等待这个Promise的成功与失败，方法前面加上async */
// let result = await this.$store.dispatch('addOrUpdateShopCart',{skuId:this.$route.params.skuid,skuNum:this.skuNum}) //{skuId,skuNum}用的解构，传参的时候可以不按顺序
// 2，需要知道这次请求是成功还是失败，如果成功进行路由跳转，如果失败需要给用户提示
try {
// 成功
await this.$store.dispatch('addOrUpdateShopCart',{
skuId:this.$route.params.skuid,
skuNum:this.skuNum
});
// 3，进行路由跳转
// 4，在路由跳转的时候还需要将产品的信息带给下一级的路由组件
// 一些简单的数据skuNum，通过query形式给路由组件传递过去，产品信息的数据【比较复杂：skuInfo】，通过会话存储（不会持久，会话结束数据再消失）
// 本地存储或者是会话存储，一般存储的是字符串
sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo));
this.$router.push({name:'addCartSuccess',query:{skuNum:this.skuNum}});
// 5，
} catch (error) {
// 失败--给用户进行提示
alert(error.message);
}
},
39，修改购物车产品的数量
全选
39.1，判断底部复选框是否勾选【全部产品都选中才勾选】
isAllChecked() {
// every遍历数组里面的元素，只要所有元素isChecked属性都为1才会返回true，只要有一个不等于1，就返回false
return this.cartInfoList.every((item) => item.isChecked == 1);
},
39.2， 修改某一个产品购物车的个数，操作减号过快时，数量会变成负数，所以这里要用节流
handler: throttle(async function (type, disNum, cart) {
// type：为了区分这三个元素是加还是减还是input框
// disNum：+变化量（1），-变化量（-1），input最终的个数（并不是变化量）
// cart：哪一个产品（身上有id）
// 向服务器发请求，修改数量
switch (type) {
// 加号
case "add":
// 带给服务器变化量
disNum = 1;
break;
case "minus":
// 判断产品的个数大于1，才可以传递给服务器-1
// 如果出现产品的个数小于等于1，传递给服务器个数为0（原封不动）
/* if(cart.skuNum > 1){
disNum = -1;
}else{
// 产品的个数小于等于1
disNum = 0;
} */
disNum = cart.skuNum > 1 ? -1 : 0;
break;
case "change":
// 假如用户输入进来的最终量，是非法的（带有汉字|出现负数），带个服务器数字0
/* if(isNaN(disNum)||disNum<1){
disNum = 0 ; //这里的disNum不再是最终个数而是变化量
}else{
// 假如用户输入了小数点数字，例如用户输入12.5，原来的数量为10，则变化量为2，parseInt是取整，不是向上取整，这里的disNum不再是最终个数而是变化量
disNum = parseInt(disNum) - cart.skuNum;
} */
disNum =
isNaN(disNum) || disNum < 1 ? 0 : parseInt(disNum) - cart.skuNum;
break;
}
// 派发action
// this.$store.dispatch('addOrUpdateShopCart',{skuId:cart.skuId,skuNum:disNum});
// 因为这里只是发送数据，修改后台数据库的数据，并没有修改当前组件数据，所以需要重新获取一次数据
try {
//由于detail仓库里的action，addOrUpdateShopCart有写成功与失败，所以这里要写trycatch
// 代表的是修改成功
await this.$store.dispatch("addOrUpdateShopCart", {
skuId: cart.skuId,
skuNum: disNum,
});
// 再一次获取服务器最新的数据进行展示,因为修改的是假数据，要是请求失败了或者用户没有网，不断点就不断加，这是不合理的，所以要重新获取数据，不能直接在前端修改展示
// 后端服务假如用户操作过快点十次加，但是解析慢只执行了八次代码，前端的数据加了十，但后端服务器只加了把，这样前后端数据就乱了，所以重新获取数据是较好的方法
this.getData();
} catch (error) {}
}, 500),
40，购物车状态修改和商品删除
40.1，删除购物车某一个产品
async deleteCartListBySkuId({commit},skuId){
let result = await reqDeleteCartById(skuId); // 因为服务器没有返回其余数据，因此咱们不需要三连环存储数据
// 组件需要知道是成功与失败，成功再发请求，失败弹出错误信息
if(result.code==200){
return "ok"
}else{
return Promise.reject(new Error('faile'));
}
},
// 删除某一个产品的操作
async deleteCartById(cart) {
try {
// 如果删除成功再次发请求获取新的数据进行展示
await this.$store.dispatch("deleteCartListBySkuId", cart.skuId);
this.getData();
} catch (error) {
alert(error.message);
}
},
40.2，修改购物车里某一个商品的选中状态
async updateCheckedById({commit},{skuId,isChecked}){
let result = await reqUpdateCheckedById(skuId,isChecked); // 因为服务器没有返回其余数据，因此咱们不需要三连环存储数据
// 组件需要知道是成功与失败，成功再发请求，失败弹出错误信息
if(result.code==200){
return "ok"
}else{
return Promise.reject(new Error('faile'));
}
},
// 修改购物车里某一个产品的状态
async updateChecked(cart,event){
// console.log(event.target.checked); 这里输出的是布偶值，不是0和1，我们带给服务器的参数isChecked应该是0|1
try {
// 如果修改数据成功，再次获取服务器数据（购物车）
let isChecked = event.target.checked ? "1":"0";
await this.$store.dispatch('updateCheckedById',{
skuId:cart.skuId,
isChecked,
});
this.getData();
} catch (error) {
// 如果失败提示
alert(error.message);
}
},
41，全选（actions扩展）
41.1，删除全部选中的产品
deleteAllCheckedCart({dispatch,getters}){ //这里传dispatch是为了派发action，传getters是为了捞取数据
// context:小仓库，commit【提交mutations修改state】 getters【计算属性】 dispatch【派发action】 state【当前仓库数据】
// 获取购物车中全部的产品（是一个数组）
let PromiseAll = []; // promise.all([p1,p2,p3])
getters.cartList.cartInfoList.forEach(item => {
// 派发action要用dispatch
// 当勾选状态位1时，执行dispatch('deleteCartListBySkuId',item.skuId)，返回值是 async deleteCartListBySkuId({commit},skuId) 的返回值，是个Promise
let promise = item.isChecked==1?dispatch('deleteCartListBySkuId',item.skuId):'';
// 将每一次返回的Promise添加到数组当中
PromiseAll.push(promise);
});
// 只要全部的p1|p2|p3....都成功，返回的结果即成功，如果有一个失败，则返回失败结果，组件在等待是成功还是失败，所以这里要返回结果
return Promise.all(PromiseAll);
// 删除全部选中的产品
// 这个回调函数没办法收集到一些有用的数据，拿不到cart.id
async deleteAllCheckedCart(){
// 派发一个action
try {
await this.$store.dispatch("deleteAllCheckedCart");
// 再发请求获取购物车列表
this.getData();
} catch (error) {
alert(error.message) ;
}
},
41.2， 修改购物车里全部产品的勾选状态
updateAllCartChecked({dispatch,state},isChecked){
// 数组
let PromiseAll = [];
state.cartList[0].cartInfoList.forEach(item => {
let promise = dispatch('updateCheckedById',{skuId:item.skuId,isChecked}) ; //这里要传多少个参数，得看原来的action里是多少个参数async updateCheckedById({commit},{skuId,isChecked})
PromiseAll.push(promise);
});
// 最终返回结果
return Promise.all(PromiseAll);
},
// 修改全部产品选中的状态
async updateAllCartChecked(event){
let isChecked = event.target.checked?"1":"0";
// 派发action
try {
await this.$store.dispatch('updateAllCartChecked',isChecked);
this.getData();
} catch (error) {
alert(error.message);
}
}
42，注册（表单验证）
42.1，ES6 const语法
42.2，获取验证码
42.3，注册
// 用户注册
async userRegister({commit},user){ //函数里面的参数只是形参，具体传什么参数，要到组件里派发action再传，这里的形参是user，是个对象，真正的参数是{phone,code,password}
let result = await reqUserRegister(user);
if(result.code==200){
commit("GETCODE",result.data);
return 'ok' //这里要知道是否注册成功,没有返回data，所以不需要数据三连环
}else{
return Promise.reject(new Error('faile'));
}
},
// 注册
async userRegister(){
const success = await this.$validator.validateAll();
//全部表单验证成功再向服务器发请求，进行注册，只要有一个表单不成功，不会发请求
if(success){
try {
const{phone,code,password,password1} = this;
// (phone&&code&&password==password1) && await this.$store.dispatch('userRegister',{phone,code,password}); 表单全部验证成功就不需要前面的东西了
await this.$store.dispatch('userRegister',{phone,code,password});
// 如果成功，路由跳转到登录页面
this.$router.push('/login') //这里填的是路由index.js里面的路径
} catch (error) {
alert(error.message);
}
}
},
42.4，表单验证
// 引入表单校验插件
import "@/plugins/validate";
// vee-validate插件：表单验证区域
import Vue from 'vue';
import VeeValidate from 'vee-validate';
// 中文提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate);// 表单验证
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
},
attributes: { // 给校验的 field 属性名映射中文名称
phone: '手机号', //如果这里不写手机号，会显示phone格式无效
code: '验证码',
password:'密码',
password1:'确认密码',
agree:'协议'
}
});
{{ errors.first("phone") }}
同意协议并注册《尚品汇用户协议》
{{ errors.first("agree") }}
// 自定义校验规则
VeeValidate.Validator.extend('agree', {
validate: value => {
return value
},
getMessage: field => field + '必须同意'
});
43，登录（token)
43.1，登录
const state = {
code:"",
// token: localStorage.getItem('TOKEN'), 这样写本来就是null，与空字符无差别，点击注册按钮，就会派发action，获取到服务器的token，vuex三连环修改，就会将这个数据由null改为真实token
// token永久化存储了，下一次就从本地存储里捞取token
token:getToken(),
userInfo:{},
};
// 登录
async userLogin({commit},data){ //这里带参data其实是个对象，带的是{phone，password}
let result = await reqUserLogin(data);
// 服务器下发token，用户唯一标识（类似于uuid）
// 将来经常通过带token找服务器要用户信息进行展示，比如用户登录之后，需要在顶部显示用户名
if(result.code==200){
// 用户已经登录成功且获取到token
commit("USERLOGIN",result.data.token);
// localStorage.setItem("TOKEN",result.data.token);
// 持久化存储token
setToken(result.data.token);
return 'ok'
}else{
return Promise.reject(new Error('faile'));
43.2，登录后展示用户信息
// 对外暴露一个函数,存储token
export const setToken = (token)=>{
localStorage.setItem('TOKEN',token);
}
// 获取token
export const getToken = ()=>{
// 这里要有返回值，在仓库才能调用
return localStorage.getItem('TOKEN');
}
// 清除本地存储的token
export const removeToken =()=>{
localStorage.removeItem('TOKEN');
}
// 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
// config：配置对象，对象里面有一个属性很重要，headers请求头
// 进度条开始
if(store.state.detail.uuid_token){
// 请求头添加一个字段：和后台老师商量好了
config.headers.userTempId=store.state.detail.uuid_token;
}
// 需要携带token带给服务器
if(store.state.user.token){ //一旦仓库里面有token，就带给服务器
config.headers.token = store.state.user.token;
}
nprogress.start();
return config;
});
43.3，退出登录
const mutations = {
// 清除本地数据
CLEAR(state){
// 帮仓库中相关用户信息情况
state.token='';
state.userInfo={};
// 本地存储数据清空
removeToken();
}
// 退出登录
async userLogout({commit}){
// 只是向服务器发起一次请求，通知服务器清除token
let result = await reqLogout();
// action里面不能操作state，提交mutation去修改state
if(result.code==200){
commit("CLEAR");
return'ok';
}else{
return Promise.reject(new Error('faile'));
}
}
44，全局守卫
// 全局守卫：前置守卫（在路由跳转之前进行判断）
router.beforeEach(async(to,from,next)=>{ //next放行
// to：获取到你要跳转到哪个路由信息
// from:获取你从哪个路由跳转而来的信息
// next:放行函数 写法：next(); next(path);放行到指定的路由 next(false);
next();
// 用户登陆了，才会有token，未登录不会有token
let token = store.state.user.token;
// 用户信息
let name = store.state.user.userInfo.name; //这里不能直接通过userInfo来判断，因为即使是空对象，它的布偶值也为真，所以要通过对象里面的属性来判断
// 用户已经登陆了
if(token){
// 用户已经登陆了不能再去login(不能去，停留在home首页)
if(to.path=='/login'){
next('/home');
}else{
// 登陆了，但是去的不是login【可能是home，shopcart，search】
// 如果用户名已有
if(name){
next();
}else{
// 没有用户信息,要派发action让仓库存储用户信息再跳转
try {
// 获取用户信息成功
await store.dispatch('getUserInfo');
// 放行
next();
} catch (error) {
// token失效了,获取不到 用户信息，重新登录
// 清除token
await store.dispatch('userLogout');
next('/login');
}
}
}
}else{
// 未登录，不能去交易相关，支付相关【pay，paySuccess】界面，不能去个人中心
// 未登录去上面的路由，-----登录
let toPath = to.path;
// if(toPath=='/trade')
if(toPath.indexOf('/trade')!=-1 || toPath.indexOf('/pay')!=-1 || toPath.indexOf('/center')!=-1){
// 把未登录的时候想去但是没去成的信息，存储于地址栏中【路由】
next('/login?redirect='+toPath);
}else{
// 去的不是上面这些路由【home，search，shopCart】----放行
next();
}
}
})
45，交易界面（不使用vuex）
45.1，统一接收api
// 统一接收api文件夹里面全部请求函数
// 统一引入
import * as API from '@/api';
new Vue({
render: h => h(App),
// 全局事件总线$bus配置
beforeCreate(){
Vue.prototype.$bus = this; //这里的this是VM
Vue.prototype.$API = API; //所有的请求接口统一接收到了，且挂载在Vue.prototype原型对象上，这样所有的组件都不需要一个一个引入了，直接找这个对象去用
},
// 注册路由，底下的写法KV一致省略V【router小写的】
// 当这里书写router的时候，组件身上都拥有$route,$router属性
router,
// 注册仓库：组件实例的身上会多个属性$store属性
store,
}).$mount('#app')
45.2，提交订单
data() {
return {
// 收集买家留言的信息
msg:'',
// 订单号
orderId:''
}
},
// 提交订单
async submitOrder(){
// console.log(this.$API);
// 交易编码
let {tradeNo} = this.orderInfo; //解构 orderInfo:{tradeNo:xxxxxx}
// 其余的六个参数
let data = {
consignee: this.userDefaultAddress.consignee, //最终的收件人名字
consigneeTel: this.userDefaultAddress.phoneNum, //最终的收件人手机号
deliveryAddress:this.userDefaultAddress.fullAddress, //收件人地址
paymentWay: "ONLINE", //支付方式
orderComment: this.msg, //买家的留言信息
orderDetailList: this.orderInfo.detailArrayList, //商品清单
};
// 需要带参数：tradeNo，data
let result = await this.$API.reqSubmitOrder(tradeNo,data);
console.log(result);
// 提交订单成功
if(result.code==200){
this.orderId = result.data;
// 路由跳转+路由传参
this.$router.push('/pay?orderId='+this.orderId)
// 提交订单失败
}else{
alert(result.message)
}
}
46，qrcode和弹窗
46.1，弹窗
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
import { Button, MessageBox } from 'element-ui';
// 注册全局组件，用elementUI里面的button还有MessageBox弹窗
Vue.component(Button.name,Button);
// ElementUI注册组件的时候，还有一种写法，挂在原型上
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
46.2，qrcode
import QRCode from 'qrcode'
// 点击支付弹窗
async open() {
// 生成二维码(地址)
let url = await QRCode.toDataURL(this.payInfo.codeUrl);
this.$alert(,"请你微信支付", {
dangerouslyUserHTMLString:true,
// 中间布局
center:true,
// 是否显示取消按钮
showCancelButton:true,
// 取消按钮的文本
cancelButtonText:"支付遇见问题",
// 确定按钮的文本
confirmButtonText:"已支付成功",
// 右上角的叉子没了
showClose:false,
//关闭弹出框的配置值
beforeClose:(type,instance,done)=>{
// type：区分取消还是确定按钮
// instance：当前组件实例
// done：关闭弹出框方法
if(type=='cancel'){ // 点击支付遇见问题
alert('请联系管理员');
// 清除定时器
clearInterval(this.timer);
this.timer = null;
// 关闭弹出框
done();
}else{ // 点击已支付成功
// 判断是否真的支付
// 开发人员为了自己方便，这里判断先不要了
// if(this.code==200){
clearInterval(this.timer);
this.timer = null;
done();
this.$router.push('/paysuccess');
// }
}
}
});
// 你需要知道是支付成功还是失败
// 支付成功,路由跳转,如果支付失败,提示信息
// 定时器没有，开启一个新的定时器
if(!this.timer){
this.timer = setInterval(async()=>{
// 发请求获取用户支付状态
let result = await this.$API.reqPayStatus(this.orderId);
console.log(result);
if(result.code==200){
// 支付成功
// 第一部：清除定时器
clearInterval(this.timer);
// 保存支付成功返回的code,防止没有扫码直接点支付成功
this.code = result.code;
// 关闭弹出框
this.$msgbox.close();
// 跳转到下一页路由
this.$router.push('/paySuccess');
}
},1000)
}
}
47，个人中心（我的订单二级路由）
{
path: "/center",
component: Center,
meta: { show: true },
// 二级路由组件
children:[
{
path:"myorder",
component:MyOrder,
},
{
path:"grouporder",
component:GroupOrder,
},
{
// 重定向
path:'/center',
redirect:'/center/myorder'
}
]
},
48，组件独享守卫
{
path: "/trade",
component: Trade,
meta: { show: true },
// 路由独享守卫
beforeEnter: (to, from, next) => {
// 去交易界面，必须是从购物车而来
if(from.path=="/shopcart"){
next();
}else{
// 其他的路由组件而来，停留在当前
next(false);
}
}
},
49，图片懒加载
// 引入插件
import VueLazyload from "vue-lazyload";
// 引入图片
import atm from '@/assets/1.gif';
// 注册插件
Vue.use(VueLazyload,{
// 懒加载默认的图片
loading:atm
});
组件内图片位置要改成
50，路由懒加载
// 不再用这种写法
// 引入一级路由组件
// import Home from '@/pages/Home';
// import Search from '@/pages/search';
{
path: "/home",
component: ()=>import("@/pages/Home"), //当访问到home的时候才会执行
meta: { show: true },
},
{
path: "/search/:keyword?", //要先占位
component: ()=>import("@/pages/Search"),
meta: { show: true },
name: "search",
// 路由组件能不能传递props数据？
// 布尔值写法：params
// props:true,
// 对象写法：额外给路由组件传递一些props
// props:{a:1,b:2}
// 函数写法：可以params参数、query参数，通过props传递给路由组件
props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k })
},
51，打包项目
51.1，打包 文件夹右键git bash ----npm run build
51.2，购买服务器
51.3，nginx
51.4，nginx服务器跑起来
52，组件通信方式
52.1，porps
52.2，自定义事件
52.3，全局事件总线$bus
52.4，Pubsub-js在React框架中使用比较多（发布于订阅）
52.5，Vuex
52.6，插槽
53，自定义事件
import Event1 from './Event1.vue'
import Event2 from './Event2.vue'
export default {
name: 'EventTest',
components: {
Event1,
Event2,
},
54，v-model（组件通信方式的一种）
input包装组件
55，sync属性修饰符
使用sync修改符
小明每次花100元
爸爸还剩{{money}}元
56，$attrs与$listeners
57，$children与$parent
methods: {
//小明借用100元
borrowFromXM() {
//父亲的钱加上100元
this.money += 100;
//
this.$refs.son.money -= 100;
},
borrowFromXH() {
this.money += 150;
this.$refs.dau.money -= 150;
},
borrowFromAll() {
//VC:组件实例自身有一个$children属性,可以获取当前组件的全部子组件[这个属性在用的时候很少用索引值获取子组件，因为没有办法确定数组里面的元素到底是哪一个子组件
this.money += 400;
this.$children.forEach((item) => {
item.money -= 200;
});
// 切记别这样书写，如果子组件过多，第0项不确定是哪个
// this.$childeren[0].money-=200;
},
},
BABA有存款: {{ money }}
儿子小明: 有存款: {{money}}
58，混入mixin
import myMixin from '.....'
import Son from "./Son";
import Daughter from "./Daughter";
export default {
name: "ChildrenParentTest",
mixins:[myMixin]
}
59，插槽
作用域插槽
{{todo.text}}----{{$index}}