Vue项目——尚品会

1： 项目的初始化
环境要求：node + webpack + 淘宝镜像
初始化项目： vue create 项目名称
目录/文件分析:

- node_modules文件夹:放置项目依赖的地方
- public文件夹:一般放置一些共用的静态资源（图片），在打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
- src（程序员源代码文件夹）：
  - assets文件夹：经常放置一些静态资源（多个组件共用的静态资源），assets文件夹里面资源webpack会进行打包为一个模块，打包js文件夹里面
   - components文件夹：一般放置非路由组件（或者项目共用的组件）
   - App.vue 唯一的根组件 
   - main.js 入口文件，程序最先执行的文件
- babel.config.js：babel配置文件
- package.json：里面包含项目描述、项目依赖、项目运行指令
- package-lock.json：可以删除（没必要），是一个缓存性文件
- README.md:项目说明文件

2：项目的其他配置

    1.项目运行起来的时候浏览器自动打开
    ---package.json
        "serve" : "vue-cli-service serve --open"

    2.eslint校验功能关闭
        根目录下创建vue.config.js文件
        比如,声明变量但是没使用eslink校验工具报错
        modules.exports = [
            //关闭eslint
            linkOnSave:false
        ]
    3.src文件夹简写方法,配置别名
        jsconfig.json配置别名@提示
        {
            "compilerOptions":{
                "baseUrl" : "./",
                "paths" : {
                    "@/*" : ["src/"]
                },
                "exclude" : ["node_modules","dist"]
            }
        }

3:项目路由分析

需要安装好vue-router
    前端所谓路由:KV键值对.
    key:URL(地址栏中的路径)
    value:相应的路由组件
    注意:项目是上中下结构

    路由组件:
        Home首页路由组件,Search路由组件，Login登录路由,Refister注册路由
    非路由组件:
        Hearder[在首页,搜索页]，Footer[在首页,搜索页,登录页没有]

4.完成非路由组件Header与Footer业务

在开发项目的时候
    1.书写静态页面(HTML+CSS)
    2.拆分组件
    3.获取服务器的数据动态展示
    4.完成相应的动态业务逻辑
注意:
    1.创建组件的时候,组件结构+组件的样式+图片资源
    2.项目采用less样式,浏览器不识别less样式,需要通过less,less-loader[安装5版本]进行处理less,把less样式变为css样式,浏览器才可以识别
    3.让组件识别less样式,需要在style标签身上添加lang=less

4.1 使用组件的步骤(非路由组件)
    创建或者定义
    引入
    注册
    使用

5.路由组件的搭建

   vue-router
        路由组件应该有四个:Home,Search,Login,Register
        -components文件夹:经常放置的非路由组件(共用全局组件)
        -pages|views文件夹:经常放置路由组件
    1.配置路由
        项目当中配置的路由一般放置在router文件夹中
    2.总结
        路由组件与非路由组件的区别
        (1).路由组件一般放置在pages|views文件夹,非路由组件一般放在components文件夹中
        (2).路由组件一般需要在router文件夹中进行注册(使用的既为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用
        (3).注册完路由,不管路由组件,还是非路由组件身上都有$route,$routes属性

        $route:一般获取路由信息[路径,query,params等]
        $routes:一般进行编程式导航进行路由跳转[push|replace]
    3.路由的跳转
        路由的跳转有俩种形式:
            1.声明式导航router-link,可以进行路由的跳转
            2.编程式导航push|replace,可以进行路由跳转
        编程式导航:声明式能做的都能做
        但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑

6.Footer组件显示与隐藏

显示或者隐藏组件:v-if|v-show
    Footer组件:在Home,Search显示Footer组件
    Footer组件:在登录,注册时候隐藏

1.根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏
2.配置路由的时候可以给路由添加路由元信息[meta],路由需要配置对象,它的key不能乱写

7.路由传参

1.路由跳转的几种方式
    比如:a->b
    声明式导航:router-link(要有to属性),可以实现路由的挑战
    编程式导航:利用的式组件实例的$router.push|replace方法,可以实现路由的跳转.(可以写一些逻辑)

2.路由传参,参数的几种写法
    params参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位
    query参数:不属于路径当中的一部分,类似于ajax中的queryString /home?k=v&kv=,不需要占位

8.路由传参相关面试题

1.路由传递参数(对象写法)path是否可以结合params参数一起使用？
this.$router.push({path:'/search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
    路由跳转传参的时候，对象的写法可以是name,path形式,但是path不能与params参数一起使用

2.如何指定params参数可传可不传？
this.$router.push({name:'search',query:{k:this.keyword.toUpperCase()}})
配置路由的时候,占位了(params参数),但是路由跳转的时候不传递，路径会出现问题
http://localhost:8080/#/?k=DD 不指定params
http://localhost:8080/#/search?k=DD 指定params
如何指定params参数可以传递,或者不传递,在配置路由的时候,在占位的后面加上一个"?"[这样params参数就可以传递或者不传递]

3.params参数可以传递也可以不传递,但是如果传递是空串,如何解决？
使用undefined解决:params参数可以传递,不传递(空的字符串)
this.$router.push({name:'search',params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}})

4.路由组件能不能传递props数据？
可以传递props数据
    //布尔值写法 params
        // props:true,
    //对象写法:额外的给路由组件传递一些props
        // props:{a:1,b:2}
    //函数写法:可以params参数,query参数,通过props传递给路由组件
        props:($route)=>{
            return {keyword:$route.params.keyword,k:$route.query.k}
        },
        props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})

9.编程式路由跳转到当前路由(参数不变),多次执行会抛出NavigationDuplicated的警告错误吗?

--路由跳转有俩种形式,编程式导航，声明式导航
--声明式导航没有这类问题,因为vue-router底层已经处理好了
(1).为什么编程式导航进行路由跳转的时候会有这种警告错误?
    "vue-router":"^3.5.3":最新的vue-router引入promise
    1.通过给push方法传递相应的成功,失败的回调，可以捕获到当前错误，可以解决
    2.通过底层的代码，可以实现解决错误
        this.$router.push({name:"search",params:{keyword:this.keyword},query:{k=this.keyword.toUpperCase()}},()=>{},()=>{})
        这种写法:治标不治本,将来在别的组件中push|replace,编程式导航还是有类似错误
    3.
        this:当前组件实例(search)
        this.$router属性:当前的这个属性,属性值VueRouter类的一个实例,当在入坑文件注册路由的时候，给组件实例添加$route|$router属性
        push:VueRouter类的一个实例

        function VueRouter(){}
        //原型对象的方法
        VueRouter.prototype.push=function(){
            //函数的上下文为VueRouter类的一个实例
        }
        let $router = new VueRouter();
        $router.push(xxx);
        this.$router.push()
    4.    
        //先把VueRouter原型对象的push先保存一份
        let originPush = VueRouter.prototype.push;
        let originReplace = VueRouter.prototype.replace;
        // console.log(originPush)

        //重写push|replace
        //第一个参数:告诉原来push方法,往哪里跳转(传递哪些参数)
        VueRouter.prototype.push = function(location,resolve,reject){
            if(resolve && reject) {
                //call||apply区别
                //相同点,都可以调用函数一次,都可以篡改函数的上下问一次
                //不同点:call与apply传递参数:call传递参数用逗号隔开,apply方法执行,传递数组
                originPush.call(this,location,resolve,reject);
            }else{
                originPush.call(this,location,()=>{},()=>{})
            }
        }
        VueRouter.prototype.replace = function(location,resolve,reject){
            if(resolve && reject) {
                originReplace.call(this,location,resolve,reject);
            }else{
                originReplace.call(this,location,()=>{},()=>{})
            }
        }

10.Home组件拆分

--先把静态页面完成
--拆分出静态组件
--获取服务器的数据进行展示
--动态业务

11.三级联动组件完成

---由于三级联动,在Home,Search,Detail,把三级联动注册为全局组件
好处:只需要注册一次,就可以在项目任意地方使用

12.完成其余静态组件

HTML+CSS+图片资源 ----信息[结构,样式,图片资源]

13.postman测试接口

--经过测试，接口无问题
--如果服务器返回的数据code字段200,海表服务器返回数据成功
--整个项目,接口前缀都有/api字样

14.axios二次封装

XMLHttpRequest,fetch,JQ,axios
1.为什么要进行二次封装axios
    请求拦截器,响应拦截器:·
        请求拦截器,可以再发请求之前可以处理一些业务,
        响应拦截器,当服务器数据返回以后,可以处理一些事情
2.项目中经常出现API文件夹[axios]
    接口当中:路径都带有/api
        baseURL:"/api"
        http://xxx.xxx.:8080/api

15.接口统一管理

   项目很小:完全可以在组件的生命周期函数中发请求

    项目大:axios.get('xxx')

    1.跨域问题
        什么是跨域:协议,域名,端口号不同请求,成为跨域问题
        http://localhost:8080/#/home ---前端项目本地服务器
        http://39.98.123.211 ---后台服务器

        JSONP,CROS,代理

16.nprogress进度条使用

start:进度条开始
done:进度条结束
进度条颜色可以修改,需要修改人家的样式

17.vuex状态管理库

    1.vuex是什么
        vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据.
        切记，并不是全部项目都需要vuex，如果项目小，不需要vuex，项目大，组件很多，数据很多，数据维护很费劲，vuex
    state,mutaions,actions,getters,modules

    2.vuex基本使用
        //state:仓库存储数据的地方
        const state = {
            count:2,
        };

        //mutations:修改state的唯一手段
        const mutations = {

        };

        //action:处理action,可以书写自己的业务逻辑,也可以处理异步
        const actions = {
            //可以书写业务逻辑,但是不能修改state

        };

        //getters:理解为计算属性,用于简化仓库数据,让组件获取仓库数据更加方便
        const getters = {};

        //对外暴露Store类的一个实例
        export default {
            state,
            mutations,
            actions,
            getters
        }
    
    3.vuex实现模块式开发
    如果项目过大,组件过多,接口也很多,数据也很多,可以让Vuex实现模块式开发
    模型state存储数据
    {
        home:{},
        search:{}
    }

18.完成TypeNav三级联动展示数据业务

    [
        {
            id:1,
            name:'电子书',
            child:[
                {id:2,name:'htt',child:[]}
            ]
        }
    ]

19.完成一级分类动态添加背景颜色

    第一种解决方案:采用样式完成
    第二种解决方案:通过js完成

20.通过js控制二三级商品分类的显示与隐藏

最开始的时候通过css样式display:block|none显示与隐藏二三级商品分类

21.演示卡顿现象

正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果事件很短,而回调函数内部有计算,那么很可能出现浏览器卡顿)
节流:在规定的间隔事件范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发
防抖:在前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是连续快速触发,只会执行一次

22.完成三级联动节流的操作

使用lodash下的throttle节流函数进行操作

23.三级联动组件的路由跳转与传递参数

    三级联动用户可以点击的:一级分类,二级分类,三级分类
    Home模块跳转到Search模块,一级会把用户选中的产品(产品名字,产品ID)在路由跳转的时候,进行传递

    路由跳转:
        声明式导航:router-link
        编程式导航:push|replace

    三级联动:如果使用声明式导航router-ilink,可以实现路由的跳转与传递参数。但是会出现卡顿现象

    router-link:可以一个组件,当服务器的数据返回之后,循环出很多的router-link组件[创建组件实例的]

    创建组件实例的时候,一瞬间创建大量的实例,很耗内存,因此出现了卡顿现象

24.三级路由跳转与传递参数

this.$router.push({name:'search',query:{categoryName:'xxx',2id:'xx'}})

25.复习:

1.商品分类的三级列表由静态变为动态形式[获取服务器数据:解决跨域问题]
2.函数防抖与节流[面试频率很高]
3.路由跳转:声明式导航(router-link),编程式导航
编程式导航解决这个问题:自定义属性

26.开发Search模块中的TypeNav商品分类菜单(过渡动画效果)

过度动画:前提组件|元素务必要有v-if|v-show指令才可以进行过渡动画

27.三级分类列表优化

//派发一个action||获取商品分类的三级列表的数据
this.$store.dispatch('categoryList');
在App根组件当中发送请求[根组件mounted]执行一次

28.合并params与query参数

29.开发home首页当中的ListContainer组件与Floor组件

注意:服务器返回的数据(接口)只有商品分类数据,对于ListContainer组件与Floor组件数据服务器没有提供的

mock数据(模拟)：模拟数据,需要用到mockjs插件

使用步骤:
    1.在项目当中src文件夹中创建mock文件夹
    2.准备json数据(mock文件夹中创建相应的json文件)
    3.把mock数据需要的图片放置到public文件夹中[public文件夹打包的时候，会原封不动的打包到dist文件夹中]
    4.开始mock(虚拟的数据了),通过mockjs模块实现
    5.mockServe.js文件在入口文件中引入(至少执行一次,才能模拟数据)

30.ListContainer组件开发重点

安装Swiper插件:5版本
npm i --save swiper@5

31.复习:

1.完成商品分类的三级列表路由跳转一级路由传参(合并参数)
2.完成search模块中对于typeNav使用(过渡动画)
3.对于typeNav请求次数也进行优化
4.swiper插件:制作轮播图(移动端|pc端都可以使用)
    使用:
        1.引入相应依赖包(swiper.js|swiper.css)
        2.页面中结构务必要有
        3.初始化swiper实例,给轮播图添加动态效果
5.mock(模拟)数据,通过mockjs模块实现的

32.最完美的解决方案,解决轮播图问题

watch + nextTick:数据监听:监听已有数据变化

$nextTick:在下次DOM更新 循环结束之后 执行延迟回调.在数据修改之后立即使用这个方法,获取更新后的DOM
$nextTick:可以保证页面中的结构一定是有的,经常和很多插件一起使用

33.开发floor组件

切记:仓库当中的state的数据格式不能乱写,数据格式取决于服务器返回的数据

1.getFloorList这个action在哪里触发,是需要在Home路由组件当中触发的,不能在Floor组件内部发action

2.v-for可以在自定义标签当中使用

3.组件通信的方式有哪些
    props:用于父子组件通信
    自定义事件:@on @emit 可以实现子给父通信
    全局事件总线:$bus 全能
    pubsub-js:vue当中几乎不用 全能
    插槽
    vuex

34.把首页当中轮播图拆分为一个共用全局组件

切记:开发项目的时候,如果看到某一个组件在很多地方都在使用,就把它设置为全局组件
注册一次,可以在任意地方使用,共用的组件|非路由组件放到commponents文件夹当中

35.search模块开发

1.先静态页面 + 静态组件拆分出来
2.发请求(api)
3.vuex
4.组件获取仓库数据,动态展示数据

36.复习:

1. search模块需要的服务器数据,已经请求到了,而且存储于vuex仓库当中,而且有一些数组数据[已经通过getters]进行简化
切记:getters简化数据而生
2. 商品列表,平台售卖属性已经动态数据(来自于服务器数据)

37.动态开发面包屑中的分类名

编程式导航路由跳转[自己跳自己]

38.动态开发面包屑中的关键字

1.当面包屑中的关键字清除以后,需要让兄弟组件Header组件中的关键字清楚
设计组件通信:
    props:父子
    自定义事件:子父
    vuex:万能
    插槽:父子
    pubsub-js:万能
    $bus:全局事件总线

39.排序操作(重点)

1:综合 2:价格 | asc:升序,desc:降序
示例: "1:desc

1.问题
    order属性的属性值最多有多少种写法
        1:asc 1:desc 2:asc 2:desc

40.分页功能实现

ElementUI等组件库有相应的分页组件

分页器展示,需要哪些数据(条件)
    当前是第几个:pageNo字段代表当前页数
    每一个需要展示多少条数据:pageSize字段进行代表
    整个分页器一共有多少条数据:total字段进行代表----[获取另外一条信息:]
    分页器连续页面个数:5|7[奇数],因为奇数对称
    总结:对于分页器而言,自定义四个条件
        pageNo:当前第几个
        pageSize:每一页展示多少条数据
        total:分页一共要展示多少条数据
        continues:分页连续页码个数

自定义分页器,在开发的时候先传递假数据进行调试,调试成功后再用服务器数据

分页器动态展示
    分为上中下
    v-for

41.开发产品详情页面

   1.静态组件(详情页组件:还没有注册为路由组件)
        当点击商品的图片的时候,跳转到详情页面,在路由跳转的时候需要带上产品的id给详情页面

    2.发请求
    3.vuex
    4.动态展示组件

    数据解释   ----售卖属性
    [
        {
            attr:'颜色',
            attrValue:["粉色","黑色"]
        },
        {
            attr:'版本',
            attrValue:['16',29]
        }
    ]

42.加入购物车按钮

1.路由跳转之前发送请求
2.成功路由跳转与参数传递
浏览器存储功能,h5新增，本地存储和会话存储
本地存储:持久化----5m
会话存储:并非持久----会话结束消失
3.失败提示失败信息

43.addCartSuccess组件

1.查看详情
2.查看购物车

44.购物车

1.购物车静态组件-需要修改样式结构
调整css让各个项目对齐 删除第三项 15 35 10 17 10 13

2.向服务器发起ajax,获取购物车数据,操作vuex,组件获取数据展示数据
    发现:发送请求获取不到谁购物车里的数据,因为服务器不知道你是谁
    
3.UUID临时游客身份

4.动态展示购物车

45.修改购物车产品的数量(发请求:参数)

46.修改产品个数[函数节流]

47.删除选中全部产品的操作

注意:没有一次删除很多产品的接口,但有通过id可以删除产品的接口[一次删一个]
Promise.all([p1,p2,p3])
p1|p2|p3:每一个都是Promise对象,如果有一个Promise失败，则全失败,都成功则全成功

48.全选

49.登录与注册静态组件(处理共用图片资源问题)

登录与注册功能(git):必须要会的技能
1.登录与注册的静态组件
2.assets文件夹---放置全部组件共用静态资源
3.在css样式当中可以使用@符号(src别名),需要使用波浪符号"~"

50.注册业务

获取验证码接口
注册用户

51.登录业务

1.注册---通过数据库存储用户信息(名字,密码)
2.登录---登录成功,后台会区分你用户是谁-服务器下发token[令牌:标识符]
    登录接口:做的不完美,一般登录成功服务器会下发token,前台持久化存储token,[带着token找服务器要用户信息进行展示]

52.token令牌理解

vuex仓库存储数据----不是持久化

53.复习:

1.完成了登录与注册静态组件[assetc文件夹:组件共用的静态资源 Css当中书写@符号]
2.表单验证
3.vuex存储数据非持久化的

54.登录后首页用户信息的展示

1.当用户注册完成,用户登录[用户名+密码]向服务器发请求(组件派发action:userLogin),登录成功获取到token,存储与仓库当中(非持久化),路由跳转到home首页
2.因此在首页当中(mounted)派发action(getUserInfo)获取用户信息,一级动态展示header组件内容
3.一刷新home首页,获取不到用户信息(token:vuex非持久化存储)

4.持久化存储token

5.存在问题1,多个组件展示用户信息需要在每一个组件的mounted中触发action(getUserInfo)

6.问题2,用户登录了,不应该返回登录页面
    路由守卫

55.整个项目,游客(uuid),用户(token)，后台以token为主

56.统一登录的账号

1123456456  123456

57.获取交易页面用户信息

用户登录了才可以获取用户地址信息,不登陆无法获取到

58.交易页面完成(商品清单)

动态展示服务器数据完成

58.提交订单

1.先把支付静态组件搞定
2.点击提交订单的按钮的时候,需要向服务器发起一次请求[把支付一些信息传递给服务器]

59.获取支付信息(不再使用vuex)

60.elementUI使用+按需引入

61.二维码生成 qrcode

62.支付业务

63.个人中心