尚品汇前端项目难点

article/2025/10/29 5:29:19

尚品汇前端项目

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 = {// 关闭EsLintlineOnSave: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.开发项目时候的流程

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

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

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

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

  1. 定义
    在这里插入图片描述

  2. 引用
    在这里插入图片描述

  3. 注册

  4. 在这里插入图片描述

8.路由的跳转

路由跳转就两种形式

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

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

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

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

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

  1. 路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中
  2. 路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
  3. 注册完路由，不管路由组件还是非路由组件，身上都有 r o u t e , route, route,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页面

  1. 搜集表单数据v-model
  2. 在路由中占位
//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}}

路由传参相关面试题

  1. 路由传递参数（对象写法）path是否可以结合params参数一起使用？
    • 不能，路由跳转传参的时候对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用
  2. 如何指定params参数可传可不传？
    在这里插入图片描述

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

  1. params参数可以传递可以不传递 如果传递是空串如何解决？ 如果不解决会发生路径错误！

    • 使用undefined在这里插入图片描述

  2. 路由组件能不能传递props数据？

    • 可以三种写法

      • 1.布尔值写法在这里插入图片描述

      • 在这里插入图片描述

      • 2.对象写法在这里插入图片描述

在这里插入图片描述

    1. 函数写法

在这里插入图片描述

解决出现Navigation报错的问题

重写push和replace方法

在这里插入图片描述

在这里插入图片描述

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

如何注册全局组件

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

  1. 给某一个全局组件取好名字在这里插入图片描述

  2. 在main.js中注册全局组件

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

  3. 在Home模块（展示页）中使用在这里插入图片描述

目录结构（组件）

在这里插入图片描述

不是普通的组件需要注册

在这里插入图片描述

axios二次封装

向服务器发请求的方式：

  1. XMLHttpRequest、
  2. fetch、
  3. JQ、
  4. axios

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

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

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

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

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

src/api/request.js

//对于axios进行二次封装
import axios from "axios"//1:利用axios对象的方法create，去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests  = axios.create({//基础路径，发请求的时候，路径当中会出现apibaseURL:"/api",//代表请求超时的时间为5stimeout: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({//基础路径，发请求的时候，路径当中会出现apibaseURL:"/api",//代表请求超时的时间为5stimeout: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的基本使用

  1. 在这里插入图片描述

  2. 在这里插入图片描述

  3. 在button上加入点击事件方法add

  4. 在这里插入图片描述

  5. 在actions中写方法具体

    1. 在这里插入图片描述

vuex模块化开发

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

在这里插入图片描述

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

在这里插入图片描述

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

  1. 在这里插入图片描述

  2. 在这里插入图片描述

  3. 在这里插入图片描述

  4. 在这里插入图片描述

某个全局组件

  1. 在这里插入图片描述

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

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

方法一：采用css样式修改

在这里插入图片描述

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

  1. 在这里插入图片描述

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

3.在这里插入图片描述

  1. 动态添加类名在这里插入图片描述

  2. 给类名设置样式在这里插入图片描述

  3. 鼠标移出样式取消：同理可得在这里插入图片描述

在这里插入图片描述

二三级分类的显示与隐藏

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

第二种方法：js

在这里插入图片描述

函数的防抖与节流

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

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

防抖：

在这里插入图片描述

节流：

在这里插入图片描述

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

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

三级联动节流操作

在这里插入图片描述

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

效果图

在这里插入图片描述

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

路由跳转：

声明式导航router-link:

在这里插入图片描述

编程式导航push/replace

在这里插入图片描述

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

在这里插入图片描述

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

注意：

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

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

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

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

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

第二个问题：利用event

在这里插入图片描述
在这里插入图片描述

mockjs模拟数据

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

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

  1. 安装mockjs

  2. 在src目录下创建mock

  3. 在mock文件夹中创建json文件，准备json数据进行展示

  4. 把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会有响应的资源原封不动的打包到dist文件夹】

  5. 开始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})

  6. mockServe.js文件在入口文件中引入（至少使用一次才能模拟出）在这里插入图片描述

获取mockjs数据

  1. 重新封装axios在这里插入图片描述

  2. 封装请求函数在这里插入图片描述

  3. 派发action在这里插入图片描述

  4. 在这里插入图片描述

在这里插入图片描述

  1. 在这里插入图片描述

  2. 组件中引入数据

在这里插入图片描述

未完待续…


http://chatgpt.dhexx.cn/article/BeH3hunD.shtml

相关文章

九龙证券|券商春季策略扎堆来袭 风格切换成焦点

九龙证券|券商春季策略扎堆来袭 风格切换成焦点

2月以来，国泰君安、中信建投、国金证券等10余家券商组织相继发布2023年春季战略。综合来看，组织对A股持达观预期，未来两三个月A股商场或迎来重要切换。风格上，“中心财物，生长接力”或许成为上半年装备主线&#xff0c…
阅读更多...
分击合进，锦江之星酒店与白玉兰酒店再领投资热潮

分击合进，锦江之星酒店与白玉兰酒店再领投资热潮

2022年11月11日，「山水画中游，暇享好时光」品牌品鉴会在广西桂林隆重召开。锦江酒店（中国区）旗下两大酒店品牌锦江之星酒店和白玉兰酒店携手亮相本次活动。 （品牌矩阵品鉴会活动现场） 后疫情时代&#xff…
阅读更多...
盛世昊通打造好品艺拍线上交易平台，助力推广中国艺术文化

盛世昊通打造好品艺拍线上交易平台，助力推广中国艺术文化

艺术品交易市场这两年的发展可谓是空前热烈，诸多艺术品皆迎来变现需求。新时代背景下，有数字技术的加持，数字文化资产作为数字经济发展的重要组成部分，成就了文化交易市场蓝海。 为响应国务院“全面复兴传统文化”，“提…
阅读更多...
上海亚商投顾：沪指高开低走涨0.45% 大消费王者归来

上海亚商投顾：沪指高开低走涨0.45% 大消费王者归来

上海亚商投顾前言：无惧大盘大跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。 市场情绪 沪指今日高开低走，深成指、创业板指较为强势，盘中均涨超2%，午后涨幅有所收窄。…
阅读更多...
《扬帆优配》互联互通扩容提升港股市场活力

《扬帆优配》互联互通扩容提升港股市场活力

作为国际最敞开的自由港和重要的国际金融中心之一，香港衔接内地与国际的优势不断稳固。自2022年以来，互联互通机制屡获打破性进展，港交所发挥“超级联系人”的效果不断提高。 今年3月，跟着港股通进一步扩容，一批成长型…
阅读更多...
活动回顾丨研发效能度量线下沙龙圆满举办

活动回顾丨研发效能度量线下沙龙圆满举办

2月18日，由跬智信息（Kyligence）联合甄知科技主办的研发效能度量线下沙龙圆满举办。本次沙龙在 Kyligence 上海总部举办，Kyligence 联合创始人兼 CTO 李扬、腾讯 Tech Lead 茹炳晟，以及甄知科技创始人兼 CTO 张礼军在现…
阅读更多...
2023COSP深圳户外展行业高峰论坛即将召开！博洋优选也将参加

2023COSP深圳户外展行业高峰论坛即将召开！博洋优选也将参加

2023COSP深圳户外展将在3月17日—19日，于深圳福田会展中心举办，此次展会邀请到知名品牌企业领头人、商协会负责人、圈内大咖；由市场趋势的洞察入手，多维度、多角度进行深度分享，引导行业从业者，以更宏观、更…
阅读更多...
精彩回顾 | 客户体验官俱乐部（CEOC）首届主题论坛在深圳圆满落幕

精彩回顾 | 客户体验官俱乐部（CEOC）首届主题论坛在深圳圆满落幕

2021年10月29日，客户体验官俱乐部（Customer Experience Officer Club，CEOC）首届主题论坛在深圳益田威斯汀酒店圆满落幕。本次论坛由客户体验官俱乐部主办，瀚一数据科技（深圳）有限公司和才博&…
阅读更多...
尚好房 04_服务拆分

尚好房 04_服务拆分

尚好房：服务拆分 一、业务介绍 1、项目模块划分 根据前面的介绍，目前我们的系统规划了3个dubbo服务提供者模块：权限服务、房源服务与会员服务，及2个服务消费者模块：尚好房管理平台（web-admin&#xff09…
阅读更多...
纯正体验，极致商务 | 丽亭酒店聚焦未来赛道，实现共赢发展

纯正体验，极致商务 | 丽亭酒店聚焦未来赛道，实现共赢发展

10月28日，锦江酒店(中国区)“齐鲁集锦 共话未来”投资人交流会在济南盛大召开，面向华东地区投资人，行业专家、商旅客、品牌代表齐聚一堂，共同聚焦酒店市场投资新价值，商讨新时代酒店行业新机遇，多维探索酒店…
阅读更多...
2023尚上优选-社区团购 优选电商Spring Cloud Alibaba

2023尚上优选-社区团购 优选电商Spring Cloud Alibaba

尚上优选2023最新企业级微服务架构项目 分布式微服务后端VUE、小程序 尚上优选是真实居住社区内居民团体的一种互联网线上线下购物消费行为，是依托真实社区的一种区域化、小众化、本地化、网络化的团购形式。简而言之，它是依托社区和团长社交关系实现生…
阅读更多...
尚品汇项目搭建

尚品汇项目搭建

文章目录 一些问题大体流程一、基础配置路由7）路由的跳转8）路由传参9)重写replace|和push方法10）router和route axios引入进度条vuex三级联动防抖节流 Home组件轮播图mock共用组件Carousel 二.search页面内查看接口格式发送请求获取数据面包屑…
阅读更多...
BBS论坛

BBS论坛

BBS论坛的搭建 第一步:下载 Discuz_X3.2_SC_UTF8.zip 压缩包到/var/www/westos.com/bbs/html下。 mkdir /var/www/westos.com/bbs/html -p 第二步：解压的到 readme upload utility 三个文件夹，删除压缩包 第三步：编辑/etc/httpd/conf.d中的…
阅读更多...
尚好房 07_前端房源展示

尚好房 07_前端房源展示

尚好房&#xff1a;前端房源展示 一、分页显示房源列表 1、效果 2、项目搭建 2.1 创建项目 在web项目中创建子工程web-front 2.2 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0&…
阅读更多...
高地创新“至臻和鸣”体系甄选客户答谢会暨公益论坛隆重举行

高地创新“至臻和鸣”体系甄选客户答谢会暨公益论坛隆重举行

2022年1月5日，高地创新服务产业集团“至臻和鸣”体系甄选客户答谢会暨物业服务智造幸福生活公益论坛于上海豫园“海上梨园”召开。复星蜂巢合伙人、高地城市服务产业集团董事长冉飞，复星蜂巢副总裁、高地城市服务产业集团执行总裁陈煜宇，复星副首席赋能官、公共事务与企业传…
阅读更多...
关于万物悦享推广案例

关于万物悦享推广案例

关于万物悦享推广案例 项目介绍 万物悦享是一家改变传统消费模式的公司&#xff0c;致力于让消费者在衣食住行都能把消费变成开心享受的事情。该公司通过消费增值、绿色积分、12倍通证强制出局、卷轴和撸实现这一目标。在通证经济下&#xff0c;消费者可以通过获得通证再赚回…
阅读更多...
盛悦论坛打不开，盛悦论坛挂了，盛悦论坛被黑，请使用这个地址访问即可访问

盛悦论坛打不开，盛悦论坛挂了，盛悦论坛被黑，请使用这个地址访问即可访问

原文说明&#xff1a;http://www.58zn.cn/html/blogview-1245.html 如果盛悦网站打不开无法访问&#xff0c;请到这里打开盛悦镜像论坛。bbs.58zn.cn这个是盛悦论坛的网站备份镜像&#xff0c;盛悦所有数据保留在这里。 我经常是1个星期做一次数据备份与同步数据。所以&#xf…
阅读更多...
Aborted(core dumped)

Aborted(core dumped)

在用caffe训练的时候发现Aborted(core dumped)错误&#xff0c;搜索后发现可能原因是train_val.prototxt中train部分的batch_size设置过大导致。将batch_size修改调小后即可正常训练。 检查日志后发现确实是内存不够&#xff1a;
阅读更多...
net::ERR_ABORTED 404 (Not Found)错误

net::ERR_ABORTED 404 (Not Found)错误

今天开发Web&#xff0c;在引用静态资源的时候出现了net::ERR_ABORTED 404 (Not Found)这个错误。记录一下。 1、首先介绍一下我的项目的目录结构&#xff1a; 2、然后我原来的的引用js文件的代码是&#xff1a; 因为在eclipse中点击src中的路径可以跳转到对饮的js文件中&…
阅读更多...
Python爬虫报错requests.exceptions.ConnectionError: (‘Connection aborted.‘, BadStatusLine(“‘‘“,))

Python爬虫报错requests.exceptions.ConnectionError: (‘Connection aborted.‘, BadStatusLine(“‘‘“,))

Python爬虫报错requests.exceptions.ConnectionError: (‘Connection aborted.’, BadStatusLine("’’",)) Python爬虫报错requests.exceptions.ConnectionError: (Connection aborted., BadStatusLine("",)) 这个报错的原因一般由于网络状态不好&#x…
阅读更多...
推荐文章

Copyright @ 2022~2023