尚品汇前端项目难点

最新推荐文章于 2024-07-04 16:37:43 发布

左丘超然

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量1.7k

点赞数 2

分类专栏：暑假每日笔记打卡文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_61643292/article/details/126254627

版权

暑假每日笔记打卡专栏收录该内容

4 篇文章 0 订阅

订阅专栏

尚品汇前端项目

1.如何运行后浏览器自动打开

解决方法：找到package.json 找到 script serve 后面加 –open

2.打开后发现第一次打开网页显示http://0.0.0.0:8080/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。

解决方法：
在vue.config.js中添加代码：

devServer: {host: ‘localhost’,port: 8080 }

如果没有vue.config.js文件的，在根目录下创建一个，把下面代码复制进去即可

3.ESLint校验功能的关闭

解决方案：

在根目录下创建一个vue.config.js

然后写入

module.exports = {
    // 关闭EsLint
    lineOnSave:false
}

4.给src文件夹配置别名

为了直接从根目录往下写

原因：将src用@替换,这样将来文件过多，找的时候比较方便

在jsconfig.json文件中

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
        //这里最关键
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

5.路由页面的分析

前端所谓路由就是键值对

key：URL地址栏中的路径

value：相应的路由组件

注意：尚品汇项目是上中下结构

路由组件：

Home首页组件、Search路由组件、login登录路由、Register注册路由

非路由组件：

Header【首页、搜索页、登录页、注册页】

Footer 【在首页、搜索页】，但是在登录和注册页面没有

6.开发项目时候的流程

书写静态页面（html css）
拆分组件
获取服务器的数据动态显示
完成相应的动态业务逻辑

7.创建非路由组件（通用组件）

（Header、Footer）一直存在的组件

非路由组件使用分为几步：

定义
引用
注册

8.路由的跳转

路由跳转就两种形式

声明式导航（router-link：务必要有to属性）
编程式导航(类似于@click = “方法名”，下面methods中写逻辑方法this.$router.push(‘/search’))push||replace，编程式导航更好用：因为可以书写自己的业务逻辑

尚品汇项目中路由组件有四个 Home Search Login Register

9.目录结构组件放置注意：

components文件夹，经常放置的非路由组件（共用全局组件）
pages|views文件夹经常放置路由组件

10.路由组件和非路由组件的区别

路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中
路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
注册完路由，不管路由组件还是非路由组件，身上都有 $ro u t e,$ router属性

route：一般用来获取路由信息【路径、query、params等等】
router：一般进行编程式导航进行路由跳转【push|replace】

11.Footer组件的显示与隐藏

显示或者隐藏组件：v-if|v-show

v-show性能比较好，显示与隐藏 v-if直接操纵DOM树，直接删除组件

Footer组件：在Home、Search显示Footer组件

在登录注册时候隐藏

方法一：我们可以根据组件身上的$route获取当前路由的信息（路径），通过路由路径判断Footer显示与隐藏，如果元素多了就会出现代码冗余

方法二：配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的key不能瞎写胡写乱写

在这里插入图片描述

12.路由传参（一知半解）

路由传参、参数共有几种写法

params参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位
query参数：不属于路径当中的一部分，/home？k=v

搜索框中如何将数据带到Search页面

搜集表单数据v-model
在路由中占位

//1.字符串形式
this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
//2.模板字符串形式
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
//3.对象写法  首页在路由中给对应路由起一个name
this.$router.push({
    name:"search",
    params:{
        //此处的keyword已经提前在路由中站好位了
        keyword:this.keyword
    },
    query:{
        k:this.keyword.toUpperCase()
    }
})


//可以直接在Search页面中使用params和query中的值
query:{{this.$route.query.k}}
params:{{this.$route.params.keyword}}

路由传参相关面试题

路由传递参数（对象写法）path是否可以结合params参数一起使用？
- 不能，路由跳转传参的时候对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用
如何指定params参数可传可不传？

在占位后面加问号，否则占位后不传路径会发生错误！

params参数可以传递可以不传递如果传递是空串如何解决？如果不解决会发生路径错误！
- 使用undefined
路由组件能不能传递props数据？
- 可以三种写法
  - 1.布尔值写法
  - 2.对象写法

在这里插入图片描述

1. 函数写法

在这里插入图片描述

解决出现Navigation报错的问题

重写push和replace方法

在这里插入图片描述

某一个组件在很多模块中都能使用，则注册为一个全局组件

如何注册全局组件

全局组件的好处：只需要注册一次则可以在项目的任意位置使用

给某一个全局组件取好名字

在main.js中注册全局组件

//三级联动组件--全局组件
import TypeNav from '@/pages/Home/TypeNav'
//第一个参数：全局组件的名字  第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav)

在Home模块（展示页）中使用

目录结构（组件）

在这里插入图片描述

不是普通的组件需要注册

在这里插入图片描述

axios二次封装

向服务器发请求的方式：

XMLHttpRequest、
fetch、
JQ、
axios

为什么需要进行二次封装axios？

主要为了使用请求拦截器和响应拦截器

请求拦截器：可以在发请求之前可以处理一些业务

响应拦截器：当服务器数据返回以后，可以处理一些事情

项目中经常出现的API目录就是存放axios请求的

src/api/request.js

//对于axios进行二次封装
import axios from "axios"

//1:利用axios对象的方法create，去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests  = axios.create({
    //基础路径，发请求的时候，路径当中会出现api
    baseURL:"/api",
    //代表请求超时的时间为5s
    timeout:5000
})

//请求拦截器：在发请求之前 请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
    //config:配置对象，对象里面有一个属性很重要，headers请求头
    return config
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('false'))
})

//对外暴露
export default requests;

API接口统一管理

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

如在组件的mounted 、 created钩子函数中进行发送请求

如果项目很大：

src/api/index.js

//当前这个模块：api进行统一管理
import requests from './request'

//三级联动接口
//   /api/product/getBaseCategoryList   get   无参数
//将某个接口函数暴露出来 直接在需要调接口的模块中引入该函数调用即可
export const reqCategoryList = () =>{
    //发请求,返回的结果是Promise对象
    return requests({url:'/product/getBaseCategoryList',method:'get'})
}

在这里插入图片描述

出现了404 则会产生跨域…

跨域

什么是跨域？

协议、域名、端口号不同请求，称之为跨域

http://localhost:8080/#/home ---------------前端项目本地服务器

http://39.98.123.311 -----------------------------后台服务器

解决跨域的方法：JSONP\CROS\代理

vue.config.js

在这里插入图片描述

nprogress进度条的使用

npm安装，请求数据时有进度条请求结束后进度条消失

在axios请求拦截器和响应拦截器中进行使用

//对于axios进行二次封装
import axios from "axios"
import nprogress from "nprogress"
//start 进度条开始   done  进度条结束
//引入进度条样式
import "nprogress/nprogress.css"

//1:利用axios对象的方法create，去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests  = axios.create({
    //基础路径，发请求的时候，路径当中会出现api
    baseURL:"/api",
    //代表请求超时的时间为5s
    timeout:5000
})

//请求拦截器：在发请求之前 请求拦截器可以检测到，可以在请求发出去之前做一些事情
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('false'))
})

//对外暴露
export default requests;

vuex状态管理库

vuex是什么？

vuex是官方提供一个插件，状态管理库，集中式管理项目中组件共用的数据

并不是全部的项目都需要vuex，如果项目很小，完全不需要vuex，如果项目很大，组件很多、数据很多，数据维护很费劲用vuex

vuex的核心要素

state
mutations
actions
getters
modules

vuex的基本使用

在button上加入点击事件方法add
在actions中写方法具体

vuex模块化开发

如果项目过大，组件过多，接口也很多，数据也很多，可以让Vuex实现模块化开发

在这里插入图片描述

把这一个个小仓库引到大仓库里进行开发

在这里插入图片描述

实例（接口获取数据存到vuex中提取出来渲染到页面上）

某个全局组件

完成三级联动动态背景颜色

效果图：在这里插入图片描述

方法一：采用css样式修改

在这里插入图片描述

方法二：JS修改，通过动态添加类，然后设置类的样式来修改颜色

2.鼠标移入，目的是让上面的现索引值改变在这里插入图片描述

3. 在这里插入图片描述

动态添加类名
给类名设置样式
鼠标移出样式取消：同理可得

在这里插入图片描述

二三级分类的显示与隐藏

第一种方法：用样式来显示与隐藏

第二种方法：js

在这里插入图片描述

函数的防抖与节流

节流：在规定的间隔时间内不会重复触发回调，只有大于这个事件间隔才会触发回调，把频繁触发变成少量触发（技能cd）轮播图

防抖：前面的所有触发都消失最后一次在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次（回城）输入框

防抖：

在这里插入图片描述

节流：

在这里插入图片描述

防抖：用户操作很频繁，但是只能执行一次

节流：用户操作很频繁，但是把频繁的操作变成少量操作【可以给浏览器有充裕的时间解析代码】

三级联动节流操作

在这里插入图片描述

三级联动组件的路由跳转和传递参数

效果图

在这里插入图片描述

三级联动用户可以点击一级二级三级分类，当你点击的时候与Home模块跳转到Search模块，一级会把用户选中的产品（产品名字、ID）在路由跳转的时候，当作参数进行传递

路由跳转：

声明式导航router-link:

在这里插入图片描述

编程式导航push/replace

在这里插入图片描述

这样并非最佳选择，因为循环后会产生1000+回调函数，因此我们可以使用事件的委派（冒泡），写在最近的父元素里面

在这里插入图片描述

没有经历过循环语句的父元素

注意：

如果使用声明式导航router-link，可以实现路由的跳转和传参

但是需要注意，会出现卡顿的现象

router-link：是一个组件，当服务器的数据返回之后，会循环出很多的router-link组件【创建出很多的组件实例】1000+

而创建组件实例的时候，一瞬间创建1000+是很耗内存的，因此出现了卡顿的现象

最终利用事件委派 + 编程式导航实现路由跳转与传递参数

在这里插入图片描述

第一个问题：利用自定义属性

在这里插入图片描述

第二个问题：利用event

在这里插入图片描述

mockjs模拟数据

mock数据（模拟）：如果你想mock数据，需要用到一个插件mockjs

mockjs：生成随机数据，拦截Ajax请求

安装mockjs
在src目录下创建mock
在mock文件夹中创建json文件，准备json数据进行展示
把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会有响应的资源原封不动的打包到dist文件夹】

开始mock虚拟数据，通过mockjs实现

创建mockServe.js

//先引入mockjs模块
import Mock from 'mockjs'
//把JSON数据格式引入进来【JSON数据格式根本没有对外暴露，但是可以引入】
//webpack默认对外暴露：图片、JSON数据格式
import banner from './banner.json'
import floor from './floor.json'

//mock数据：第一个参数请求地址  第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner})
Mock.mock("/mock/floor",{code:200,data:floor})