# 仿京东前台项目

**Repository Path**: spacewt/shangpinhui

## Basic Information

- **Project Name**: 仿京东前台项目
- **Description**: vue项目实战
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-02
- **Last Updated**: 2022-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 尚品汇项目笔记 (包括：项目结构、项目知识点、项目遇到的问题等)

## 一、vue-cli 脚手架初始化项目

    1.node+webpack+淘宝镜像

    2.各个文件作用简介
    public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。
    pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的
        js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的
        index.html。
    src文件夹（程序员代码文件夹）
    assets： 存放公用的静态资源
    components： 非路由组件（全局组件）
    pages|views：路由组件
    App.vue： 唯一的根组件
    main.js： 程序入口文件，最先执行的文件
    babel.config.js: 配置文件（babel相关）
    package.json: 项目的详细信息记录
    package-lock.json: 缓存性文件（各种包的来源）
    README.md：说明性文件

## 二、项目配置

    1、项目运行，浏览器自动打开
    package.json
        "scripts": {
        "serve": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
        },
    2、关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）

        根目录下创建vue.config.js,进行配置
        module.exports = {
        //关闭eslint
        lintOnSave: false
        }

    3、src文件夹配置别名,创建jsconfig.json，用@/代替src/
        {
            "compilerOptions": {
                "baseUrl": "./",
                    "paths": {
                    "@/*": [
                        "src/*"
                    ]
                }
            },

            "exclude": [
                "node_modules",
                "dist"
            ]
        }

## 三、项目路由分析

    路由组件：Home、Login、Register、Search
    非路由组件：Header（都有）、Footer（首页、搜索页）

## 四、完成非路由组件 Header 和 Footer

    1、开发一个前端模块可以概括为以下几个步骤：
    （1）写静态页面；
    （2）拆分静态组件；
    （3）写api,向服务器发请求
    （4）在vuex中存储数据
    （5）进行动态数据展示
    （6）完成相应的动态业务逻辑

    2、注意：
        (1)创建组件时，组件结构+组件样式+图片资源
        (2)组件页面的样式使用的是less样式，浏览器不识别该样式，需要下载相关依赖
            npm install --save less less-loader@5
        (3)<script scoped lang="less">，使组件识别less

## 五、路由组件的搭建

    1、配置路由
    创建router文件夹，并创建index.js进行路由器配置，然后在main.js中引入注册路由器，最后在其他组件使用路由。

    2、路由组件和非路由组件区别：
        (1).非路由组件放在components中，路由组件放在pages或views中
        (2).非路由组件通过标签使用，路由组件通过router-view和router-link使用
        (3).在main.js注册完路由，所有的路由和非路由组件身上都会拥有$router、$route属性
            $router：一般进行编程式导航进行路由跳转(push|replace)
            $route： 一般获取路由信息（name、path、params等）
    3、路由跳转方式

        声明式导航：router-link标签
        编程式导航 ：声明式导航能做的编程式都能做，而且还可以处理一些业务

## 六、Footer 组件的显示与隐藏

        显示|隐藏组件：v-if|v-show
        Footer组件：Home、Search显示；Login、Register隐藏

        1.$route获取当前路由信息，通过路由路径判断Footer的显示与隐藏
        2.配置路由时，可添加路由元信息meta

## 七、路由传参

    1、路由跳转的方式？
        声明式导航：router-link实现
        编程式导航：$router.push|replace实现（可以书写自己的逻辑）

    2、路由传参的参数写法有几种？
        params：属于路径的一部分，配置路由时需要占位
        query：不属于，不需要

## 八、路由传参面试题

    1.路由传递参数（对象写法），path是否可以和params参数一起使用？
        不可以，需要使用name为路由命名
    2.如何指定params参数可传可不传？
        注意：占位但在路由跳转时不传参数，路径就会出现问题。
        在配置路由时，在占位符后面加上问号就可以实现可传可不传。
    3.params参数可传递也可不传递，如果传递的是空串，如何解决？
        使用undefined解决
    4.路由组件能不能传递props属性？
        可以，三种写法
        （1）布尔值写法：传递收到的params类型的参数
            props：true
        （2）对象写法：额外的传递一些props参数
            props:{a:1,b:2}
        （3）函数写法：把params、query参数通过props传给路由组件
            props:($route)=>(keyword:$route.params.keyword,k:$route.query.k)

## 九、重写 push 和 replace 方法

    1.编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误？

    （1）为什么会产生这种问题？
            因为vue-router引入了promise,而声明式导航vue-router底层已经处理好了，不会产生此类问题。

    （2）通过给push方法传递相应的成功、失败的回调函数，可以捕捉到当前错误，从而解决问题。
        this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase(),()=>{},()=>{}}})
        但是在别的组件中编程式导航还是有类似错误

    （3）通过重写底部的代码，给push方法传递相应的成功、失败的回调函数，可以捕捉到当前错误，从而解决问题。
        call|apply区别：
                相同点：都可以调用一次函数并修改this值
                不同点：call传递参数用逗号隔开，apply传递数组

        //先把VueRouter原型对象上的push、replace保存一份
            let originPush = VueRouter.prototype.push;

        //重写push|replace
        //第一个参数：告诉原来的push方法，往哪里跳转（传递哪些参数）
        //第二个参数：成功回调
        //第三个参数：失败回调

        VueRouter.prototype.push = function (location, resolve, reject) {
            if (resolve && reject) {
                originPush.call(this, location, resolve, reject);
            } else {
                originPush.call(this, location, () => { }, () => { })
            }
        }

    （4）this：当前组件实例对象（search）
        this.$router:VueRouter类的一个实例，注册路由时给组件实例添加$router、$route属性
        push：是VueRouter类的原型对象上的一个方法

## 十、home 模块组件拆分

    1.三级联动组件完成
        ---由于三级联动，在入口文件把三级联动注册为全局组件，只需注册一次，就可以在项目任意地方使用。
    2.结构+样式+图片资源

## 十一、postman 测试接口

    ---code字段200，代表服务器返回数据成功
    ---整个项目，接口前缀都有/api字样

## 十二、axios 二次封装

    1.为什么需要进行二次封装？
        请求拦截器:可以在发请求之前处理一些业务
        响应拦截器：发请求之后处理一些业务
    2.项目中经常使用API文件夹存放axios请求

## 十三、接口统一管理

    1.项目小：可以在组件的生命周期函数中发请求
        项目大：axios({xxx})
    2.跨域问题：
        协议、域名、端口号
        jsonp、cros、代理服务器

## 十四、nprogress 进度条的使用

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

## 十五、完成 TypeNav 三级联动动态背景颜色

    1.完成一级分类动态添加背景颜色
        （1）采用样式完成
        （2）通过js完成

    2.通过js控制二、三级商品分类的显示与隐藏
        （1）通过css样式display：block|none显示与隐藏二级分类
        （2）:style="{ display: currentIndex == index ? 'block' : 'none' }"
        （3）v-show="currentIndex === index"

## 十六、防抖和节流

    1.演示卡顿现象
        正常：事件触发非常频繁，每一次触发，回调函数都要执行（如果时间很短，而回调函数内部有计算，那么可能出现卡顿）。
        节流：在规定的间隔时间内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁操作变为少量操作。
        防抖：前面的所有触发都被取消，最后一次执行在规定时间后才会触发，即如果操作很频繁，只会执行一次。

    2.完成三级联动节流操作
        import throttle from "lodash/throttle";
        changeIndex: throttle(function (index) {
            this.currentIndex = index;
            }, 50),

## 十七、三级联动组件(TypeNav)的路由跳转与传递参数

        三级联动可以点击：一级分类、二级分类、三级分类
        点击时会有home模块跳转到search模块，一级会把用户选中产品的名字和id在路由跳转时进行传递。
    问题：
    (1)使用声明式导航存在的问题？
        如果使用声明式导航router-link，当服务器的数据返回之后，循环出很多的组件，组件在创建组件实例对象时，是非常耗费内存的，会出现卡顿现象。需要使用编程式导航。

    (2)使用编程式导航存在的问题？
        需要给a标签绑定很多个回调函数，也会影响性能。应该使用事件委派。

    (3)使用事件委派存在的问题？
        1)怎样确定点击是a标签？
        给每一级a标签使用自定义属性data-categoryName，参数传递对应的名字，以此与其他元素区分。
        （通过event.target.dataset可以获取自定义属性和属性值）
        2)如何区分一、二、三级分类的a标签？
        使用自定义属性data-category1Id、data-category2Id、data-category3Id，参数传递对应的id值。

## 十八、Search 模块中商品分类与过渡动画

    1）开发Search模块中的TypeNav商品分类菜单（过渡动画效果）
        前提：必须要有v-if|v-show指令才可以使用
    2）如何进行三级列表的优化？将请求放在App组件中，它只会执行一次。

    3）合并params和query参数:
        原来的三级列表只能传递query参数，Header组件中的搜索只能传递params参数。
        所以需要使三级列表能够传递params参数，使搜索能够传递query参数

## 十九、开发 ListContainer 组件

    1.开发Home首页ListContainer组件与Floor组件？
        1.服务器返回的只有商品分类菜单的数据。
        2.mock数据：插件mock.js

    2.用mock来模拟服务器：
        （1）在src中建立mock文件夹
        （2）在mock中建立json文件并放入json数据（注意格式化）
        （3）把mock数据需要的图片放到public文件夹中
        （4）创建mockServer.js，通过mockjs插件实现模拟数据
        （5）mockServer.js在入口文件引入（执行一次才能模拟数据）

    3.获取banner轮播图的数据
        （1）创建api发送请求
        （2）在vuex中存储数据并把数据存入组件中


    4.实现轮播图的第一种方法：延时器
        (1)安装Swiper插件：npm i swiper@5
        (2)swiper的基本使用：
            1)引入包（js、css）
            2)创建页面结构
            3)new Swiper实例(轮播图添加动态效果，结构必须有)
        (3)为什么在mounted中不可以new Swiper？因为mounted中是异步操作，请求的数据还没有存储，结构不完整，所以不能创建swiper实例。
        (4)在mounted中使用延时器来实现swiper

    5.实现轮播图的第二种方法：通过watch和nextTick实现轮播图
        (1)使用watch监听bannerList数据的变化
        (2)nextTick：在下次DOM更新循环结束之后执行延迟回调。（经常和插件一起使用）
        (3)使用nextTick来确保获取了服务器数据，v-for执行完毕，即DOM存在之后new Swiper。

## 二十、开发 Floor 组件

    1.因为需要用两次Floor组件，所以action请求应该在home路由组件中触发，需要v-for遍历Floor组件。

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

    3.组件通信的方式有哪些？
        (1)props：父向子组件通信（子也可以传父）
        (2)自定义事件：@on、@emit，子向父通信
        (3)全局事件总线：$bus，全能
        (4)消息订阅与发布：几乎不用，全能
        (5)插槽：父向子
        (6)vuex：任意组件间

    4.展示数据时直接在mounted中创建swiper实例，因为数据是父组件通过props传过来的，页面结构已完整。

    5、把home中的轮播图拆分成一个全局共用组件；共用组件、非路由组件放在components中。

## 二十一、Search 模块开发

    步骤：
        （1）写静态页面；
        （2）拆分静态组件；
        （3）写api,向服务器发请求
        （4）在vuex中存储数据
        （5）获取数据，动态数据展示
        （6）完成相应的动态业务逻辑

    1.search组件动态展示数据
        在发请求之前，路由跳转时，把home传递过来的query参数与params参数赋值给searchParams对象，传给服务器。

    2.通过watch监听路由的变化，多次发请求获取数据
        性能优化：把值为空的属性设置为undefined，这样就不会将其带给服务器，从而降低性能消耗。
        this.searchParams.category1Id = undefined;
        this.searchParams.category2Id = undefined;
        this.searchParams.category3Id = undefined;

## 二十二、面包屑

    1.分类面包屑的添加与删除
        (1)添加v-if与删除分类回调：保留params参数和置空searchParams分类名与Id

    2.关键字面包屑的添加与删除
        (1)添加v-if与删除关键字回调：保留query参数，置空搜索框关键字、searchParams关键字

    3.面包屑处理品牌信息
        （1）点击品牌功能：通过自定义事件获取品牌参数传给父组件的searchParams从而传给仓库，在子组件v-for遍历数据。
        （2）在面包屑展示和删除品牌信息：v-if展示数据；回调删除数据

    4.平台售卖属性的操作
        (1)点击平台售卖属性功能：通过自定义事件获取售卖属性并传给父组件的searchParams.props从而传给仓库，在子组件中v-for遍历数据。
        (2)在面包屑中展示和删除售卖属性功能：v-for展示数据(注意数组去重：indexOf,分割字符串：split(":")[1])；回调删除数据。

## 二十三、排序操作

    1.点击排序按钮实现切换：通过计算属性实现类名的切换
    2.引入阿里图标库：通过计算属性展示排序图标
    3.在回调里面写排序的逻辑：

## 二十四、分页器

    1.拆分静态组件
    2.分页功能分析
        (1)当前页数：pageNo字段
        (2)每个页面展示多少条数据：pageSize
        (3)分页器一共有多少条数据：total
        (4)分页器连续页码的个数(5|7，奇数,因为奇数对称)：continues
        (5)完成功能前先模拟数据
    3.连续页面起始数字和结束数字
    4.分页器动态数据展示,绑定点击事件
    5.分页器添加类名

## 二十五、Detail 组件

    1.滚轮行为
    （1）把router模块化
    （2）点击产品详情实现滚轮跳转：
            scrollBehavior (to, from, savedPosition) {
                return { x: 0, y: 0 }
            }
        //scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

    2.产品详情数据获取
        (1)写api
        (2)vuex

    3.产品详情展示动态数据
    4.放大镜展示动态数据
        skuInfo(state) {
            //设置{}的原因：防止发请求之后数据还没回来时报错。
            return state.goodInfo.skuInfo || {}
        },
    5.产品售卖属性展示动态数据
    6.产品售卖属性值排他操作：
        给点击事件绑定一个回调，在回调中遍历所有属性值并将active样式设为0，然后将点击的属性值设为1.

---

2022.7.22：

    7.放大镜
        (1)轮播图部分
            1)先使用swiper插件实现轮播效果
            2)获取索引值实现点击选中效果
            3)使用全局事件总线把索引值传给兄弟组件，实现轮播和原图的同步切换

        (2)放大镜具体实现
            1)绑定鼠标移动事件，在回调里面获取坐标、约束范围、修改属性值
            2)offset家族：

        offsetWidth:得到节点自己的的宽度  offsetWidth=width+border+padding(内)
        offsetHeight:得到节点自己的的高度 offsetHeight=height+border+padding(内)
        offsetParent: 得到他的最近的已定位父级节点

        问题1：offsetX和offsetLeft的区别？
        答：offsetX是鼠标相对于事件源(鼠标停留的那个节点)的左上角的x轴的位置。
            offsetY是鼠标相对于事件源(鼠标停留的那个节点)的左上角的y轴的位置。
            offsetLeft是当前节点左边框外边缘到最近的已定位父级节点左边框内边缘的距离。
            offsetTop是当前节点上边框外边缘到最近的已定位父级节点上边框内边缘的距离。

        问题2：元素和节点的区别？
        答：节点是 DOM 层次结构中任何类型对象的通用名称，有各种类型的节点比如元素节点，文本节点，注释节点等等。
            元素节点是一种特定类型的节点，可以当作 HTML 中的元素。

2022.7.23：

    8.购买产品个数的操作
        (1)给+、-按钮添加点击事件
        (2)双向绑定input,添加change事件,使用正则限制输入
            1) /^[1-9][0-9]*$/   正整数
            2)test() 方法用于检测一个字符串是否匹配某个模式。如果字符串中有匹配的值返回 true ，否则返回 false。

## 二十六、AddCartSuccess 组件

    1.加入购物车
        (1)拆分静态组件
        (2)写api
        (3)vuex
        (4)绑定点击事件，派发请求,进行路由跳转

2022.7.24：

    2.加入购物车成功或失败的判断：
        async和await的使用：
        (1)async:
            1.返回结果不是promise类型的值时，返回结果就是一个成功的promise对象
            2.抛出错误，返回结果就是失败的promise对象
            3.是promise对象时，返回的是该promise对象成功或失败的值.
        (2)await:
            1.await必须写在async中
            2.await后面一般是promise对象
            3.await后面的promise成功，得到的值就是promise成功的值
            4.await后面的promise失败就会抛出一个异常，需要用try...catch进行处理

    3.路由传参结合会话存储
        (1)通过路由传参传递skuNum
        (2)通过会话存储传递对象
           1)JSON.stringify，将对象转化为json字符串
           2)JSON.parse，将json字符串转化为对象
           3)sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo)),设置会话
           4)sessionStorage.getItem("SKUINFO")，得到会话

## 二十七、开发 ShopCart 组件

    1.拆分购物车静态组件

2022.7.25：

    2.游客身份获取购物车数据
        (1)写api
        (2)vuex
        (3)创建utils文件夹，获取本地存储的uuid
        (4)把uuid保存在detail仓库，并在api请求头使用

        问题：发请求的时候请求头、请求行、请求体分别在哪里？
        答：发请求时，对于get请求，url后的请求参数就是请求行；post请求，url后的请求参数在请求体中。请求体是data对象里面的数据。headers的值就是请求头。

    3.购物车动态展示数据
        (1)every(),用于判断是否全部满足某个条件,满足返回true，一项不满足则返回false
        (2)some(),用于判断是否满足某个条件，一项满足则返回true。
        (3)reduce(),遍历输出一个结果(一般用于计数)

    4.处理购物车产品数量
        (1)给+、-和input绑定同一个事件，设三个参数type、disNum、cart处理数量，最后在try...catch中发请求修改产品数量、发请求获取修改后的数据。
        (2)switch...case的用法

        问题：快速点击 - 按钮会出现负数？使用节流

    5.删除购物车产品
        (1)写api
        (2)vuex
        (3)组件中给删除添加回调，发请求删除产品

    6.修改产品勾选状态
        (1)写api
        (2)vuex
        (3)组件中给选中添加回调，发请求修改产品状态

2022.7.26：

    7.删除所有选中的产品
        (1)在shopcart仓库中写删除选中产品的方法
            Promise.all([p1,p2,p3])方法,p1、p2、p3为promise对象，当所有的promise都是成功的时，返回成功；有一个失败，都失败。
        (2)给按钮绑定删除选中产品的回调
        (3)回调里面调用仓库的方法，实现删除选中的产品。

    8.修改全部产品的勾选状态
        (1)在shopcart仓库中写方法，修改全部产品选中状态
        (2)给按钮绑定修改全部产品状态的回调
        (3)回调里面调用仓库的方法，实现修改全部产品的勾选状态

        问题：所有产品删除时，全选框依旧选中？
        解决办法：给全选按钮加上判断：:checked="isAllCheck && cartInfoList.length > 0"

## 二十八、开发登陆与注册组件

    1.拆分静态组件
        (1)assets文件夹：放置全局组件共用静态资源
        (2)样式中也可以使用@(src别名)，但需要前面加~

    2.注册业务
        (1)写验证码和注册账号的api
        (2)创建user仓库
        (3)vuex
        (4)动态展示数据，写验证码和注册账号的回调

    3.登陆业务
        (1)写登录账号的api
        (2)vuex存储token(非持久化的)
        (3)动态展示数据，写登录业务的回调

2022.7.27：

    复习、放松

2022.7.28：

    复习、放松

---

2022.7.29：

    4.用户登录携带token获取用户信息
        (1)写获取用户信息的api
        (2)vux存储用户信息
        (3)动态展示用户信息

2022.7.30：

    5.登录业务中存在的问题
        (1)持久化存储token?
            使用localsession存储
        (2)多个组件展示用户数据时，组件刷新会失去用户信息？
            全局前置路由守卫中重新派发请求，获取用户信息。
        (3)用户已经登录还能跳转到登录页、注册页？（游客可以访问购物车？）
            使用全局前置路由守卫。

    6.退出登录
        (1)写退出登录的api
        (2)vuex中清除用户数据
        (3)给退出登录按钮添加回调

    复习路由知识

2022.7.31:

    复习、外出恰饭

2022.8.1:

    复习
    7.使用全局前置路由守卫解决登录业务中存在的问题

## 二十九、开发 trade 组件

    1.拆分trade静态组件
    2.获取交易页数据
        (1)写获取用户地址信息、获取商品清单数据的api
        (2)vuex三连环
        (3)派发请求
    3.用户地址信息的展示：排他操作、find方法

2022.8.2:

    关注台湾局势
    改 bug

2022.8.3:

    4.订单页面动态展示
    5.提交订单功能
        (1)写api发请求
        (2)在入口文件处引入api，并放在Vue原型上
        (3)写提交订单的回调

## 三十、开发 pay 组件

    1.拆分支付组件
    2.写api发请求获取订单号
    3.动态展示数据（不使用vuex）
    4.立即支付功能

## 三十一、开发 center 组件

    1.拆分静态组件
    2.在api中发请求
    3.在myorder组件动态展示数据

## 三十二、项目优化

    1.登录时路由跳转时存在的问题？

    登录和未登录状态下路由不能跳转的组件的情形：

    (1)登陆时不能进去的组件：
        1)直接：（pay、paysuccess、trade）、（addcartsuccess）、login、register
        2)按顺序：login、register————使用全局前置路由守卫

    (2)未登录时不能进去的组件：
        1)直接：(pay、paysuccess、trade)、（addcartsuccess）、center、shopcart
        2)按顺序：(addcartsuccess)、center、shopcart———全局前置路由守卫
        注：center组件包括myorder和grouporder

    (3)登录时和未登录时都不能进去的组件(直接)：
    pay、paysuccess、trade——————————使用独享路由守卫

    (4)登录或未登录进入addcartsuccess组件：——————单独设置独享路由守卫

    问题：未登录时按顺序去addcartsuccess组件，怎样在query参数中携带商品个数（商品信息已经通过sessionStorage获取）？

    答：虽然可以在其他组件获得商品个数，但是如果在query参数中携带商品个数，就无法进行路由跳转，所以应该把商品个数也存入会话存储中，进入addcartsuccess组件时再获取并使用。


    2.图片懒加载
        使用vue-lazyload

    3.表单验证
        vee-validate插件：不好用
        使用element-ui

    4.路由懒加载
        把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，更高效。

    5.打包处理map文件
        map：用来确定打包加密后的代码报错的位置。不需要可以在vue.config.js设置productionSourceMap:false来去除。

    6.购买服务器
        阿里、腾讯

---