- 博客(113)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端实现token无感刷新
假如token 的过期时间是5分钟，那么在高频率使用的情况下（每秒访问接口）每隔5分钟就会刷新一次token。如果web端有大屏展示页面的话，过期刷新的方案跟定时刷新的方案调用的token次数其实一样。但过期刷新的时候可能会阻碍接口的请求，导致每隔5分钟会出现一次接口变慢的情况。当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。后端每个需要token的接口，都返回token的失效时间指的是定时器的时间也是后端返回token失效的时间。
2023-04-06 10:54:47
958
原创 mockjs在项目种的使用
首先下载mockjsnpm i mockjs在src下新建mock文件夹新建banner.js[{ "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/banner2.jpg" }, { "id": "3", "imgUrl": "/images/banner3.jpg" }, { "id": "4", ".
2022-03-12 21:33:21
388
原创 在写三级联动时遇到的问题以及解决
1路由跳转问题 以及传参问题利用相应的生命式路由 会出现卡顿的现象改用编程式路由解决方式 ： 编程式路由 + 事件委派利用事件委派存在一些问题 1：点击一定是a标签 2 如何获取参数[1,2,3,级分类的产品的名字 id]把子节点当中a标签 加上那个自定义属性data-categoryName 其余是没有的html结构 <div class="sort"> <div class="all-sort-list2" @click="goSe
2022-03-12 09:51:26
622
原创 vuex的模块化使用
首先下载vuexnpm i vuex在src下新建store新建home/index.js//home模块的小仓库const state = { b:1, c:3,};const mutations = {};const actions = {};const getters = {};export default { state, mutations, actions, getters}新建search/indexcon
2022-03-11 13:05:08
431
原创 对axios进行二次封装 调用接口 跨域问题的解决
首先进行下载npm i axios在src下新建api/request.js//对axios进行二次封装import axios from "axios"//引入进度条import nprogress from 'nprogress'//引入进度条的样式 不喜欢原始颜色 可以在#nprogress .bar 哪里改颜色import "nprogress/nprogress.css"//start 代表进度条开始//done 代表进度条结束//1.利用axios对象的方法creat
2022-03-11 10:25:28
542
原创 小程序实现模块 格式化时间日期
比如在pages/dome/dome中新建一个utils.wxs文件function format(time){ //生成日期对象 var date = getDate(time) return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()}
2022-03-10 20:22:36
484
1
原创 小程序获取用户名与头像的流程
在pages/profile/profile.js文件下全局默认头像const defaultAvatarURL = "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"初始化数据Page({ /** * 页面的初始数据 */ data: {
2022-03-09 10:32:04
2024
原创 跨域问题的解决
跨域CORS前端最省事，在CORS，前端只需要考虑baseURL和环境变量。Proxy前端需要在开发环境中配置，还需要在生产环境配置（生产环境一般不需要前端做）CORS项目开始前，跟后台要接口地址开发环境接口http://192.168.1.xxx:8080 如果这个接口无法访问，超时，我们可以先在cmd中ping一下ip地址ping 192.168.1.xxx如果不能ping通，找后台要最新的ip地址生产环境接口有可能在项目开发初期，这个地址不存在，我们可以在项目先自定义一个，只
2022-03-08 10:43:51
595
原创 vue中传递参数的几种情况 以及相应的面试题
1 第一种 字符串形式this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase())2 第二种 模板字符串this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)第三种 对象 切记要给路由起名字 { path:"/search/:keyword", compo
2022-03-08 09:43:37
599
原创 小程序调用api实现数据的渲染以及详情的展示
首先我们可以先在开发工具中新建一个基础项目在app.json中可以添加一个新的页面 demo 放在最前面用于首页{ "pages":[ "pages/demo/demo", "pages/detail/detail", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor
2022-03-07 10:02:32
621
原创 Nginx服务器的使用
1. Nginx下载安装2. 1.1. 下载Nginxnginx：下载地址1.2. 安装Nginx把下载后的nginx移动到某个英文路径下，然后解压1.3. 运行nginx点击nginx.exe即可运行1.4. 访问网页在浏览器中访问localhost即可看到对应的页面2. Nginx使用2.1 nginx自带命令在nginx的目录中按住shift点击右键，打开powershell窗口测试配置是否生效./nginx -t重载配置文件./nginx -s reload
2022-03-05 22:27:21
701
原创 vue的开发流程 data版本与vuex版本
前端开发现在我们大部分项目都是基于前后端分离开发的，我在工作中，我的职责就是基于Vue或者React去解决前端UI层面的工作，包括界面布局，网页的交互，数据通信等相关的工作。我们和后台（Java PHP Golang）进行协同开发，利用后台接口，完成前端所需要的功能前端端分离开发流程（Vue）M V VM model View ViewModelModel提供数据View界面展示ViewModel 有数据，页面自动渲染界面和数据我们的界面靠数据渲染，我们首先要先解决的时template和da
2022-03-05 22:20:56
819
原创 react实现登录模拟拦截 实现记忆登录前路由登录后重定向到该路由
首先新建一个项目yarn create vite Login-in --template react下载 react-router-dom npm i react-router-dom下载相应的包yarn重构项目main.jsximport React from 'react'import ReactDOM from 'react-dom'import './index.css'import App from './App'import { BrowserRouter} fr
2022-02-24 19:20:42
1755
原创 利用vue3 调用api接口实现 数据的渲染 以及详情的实现
首先新建一个项目yarn create vite vue3-template --template vue然后下载相应的apinpm i axios router首先配置App.vue<script setup></script><template> <router-view></router-view></template><style></style>main.js
2022-02-24 10:10:56
12303
1
原创 react 实现todos案例
先建一个项目yarn create vite Todos-template --template react在src/components/TodoApp.jsx 建文件import { useState } from ‘react’import TodoList from ‘./TodoList’import TodoInput from ‘./TodoInput’function TodoApp() { const [ todos,setTodos] = useState([
2022-02-23 20:38:45
476
原创 react 调用api实现数据列表的渲染
首先建一个项目 （vite构建）yarn create vite Topics-Date --template react封装axiosnpm i axios //在该文件夹下下载zxios新建utils/request.jsimport axios from 'axios'const instance = axios.create({ baseURL:"https://cnodejs.org/api/v1"})export default instance新建 src
2022-02-23 20:20:35
892
原创 vue项目开发中 路由参数变化以及页面切换时出现的问题的解决
1路由参数变化但组件未触发created和mounted生命周期因为参数变化，使用的组件是同一个，不会导致我们对应路由组件的销毁，那么就不存在重新创建的问题，所以不会触发created和mounted我们可以给对应的router-view添加key,使用fullPath作为我们key的值找到Layout.vue中的router-view<router-view :key="$route.fullPath"></router-view>2 页面在进行切换时，会导致数据的频繁
2022-02-13 10:49:08
1217
原创 vue中路由双击bug的解决 以及地址栏中#去除的配置
双击跳转路由时，会报错，可以给VueRouter设置相关的重置方法解决问题，找到router/index.js添加下面两行代码在这里插入代码片//解决 用this.routes.push 跳转时报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(er
2022-02-13 10:36:15
514
原创 后台管理项目中如何实现顶部进度条效果
首先安装npm i nprogress# 或者yarn add nprogress除了功能外，进度条还有样式，首先需要在main.js中引入样式import 'nprogress/nprogress.css'在router/index.js中，引入该模块import nprogress from 'nprogress'在全局前置守卫中 路由跳转之前去开启nprogressrouter.beforeEach((to,from,next)=>{ //在路由跳转之前开启
2022-02-13 10:31:16
591
原创 jwt的学习
JWT什么是JWTjwt：json web token 是目前来说，最流行的跨域认证解决方案。身份认证验证身份，鉴定权限。服务端渲染推荐使用session认证机制前后端分离推荐使用JWT认证机制工作原理和流程用户的信息通过Token字符串的形式，保存在客户端浏览器中。服务器通过还原Token字符串的形式来认证用户的身份。JWT的组成部分分为三部分组成：Header（头部），Payload（载荷），Signature（签名）Token是字符串，三者之间使用英文的.分割。【h
2022-01-20 23:20:51
2587
原创 vue跨域问题的解决 调用别的网站接口实现详情的渲染
跨域问题解决什么是跨域： 协议 域名/IP 端口 这三个只要有一个不同，就会出现跨域。json-server默认支持跨域。但是在公司开发中，因为绝大多数都是前后盾分离的方式进行开发，在开发阶段进行接口调试的时候，肯定会出现跨域问题。怎么解决呢？ 使用代理。代理：反向代理和正向代理。正向代理：会隐藏了真实的【请求客户端】，服务端不知道真实的客户端是谁。客户端请求的服务都被【代理服务器】代替来请求了。在vue.config.js中配置代理的方式，只能在开发阶段使用实例vue.config.js
2022-01-18 20:28:42
1056
原创 vue拦截器的学习
拦截器：本质上就是一些函数，分为两大类：请求拦截器和响应拦截器。 跟我们学习路由时的导航守卫功能类似。请求拦截器：在发送请求之前，对请求的参数或内容进行一些处理或校验。如果没有问题，再去发送请求，否则可以取消请求。响应拦截器：在接受响应之后，可以对响应的结果进行处理或校验。区别登录鉴权 守卫鉴权是前端路由方面，axios拦截器做鉴权是后端路由方面。守卫鉴权是校验有没有权限从一个组件跳转到另外一个组件。axios拦截器鉴权：有没有权限从后端获取数据。如代码所示Home.vue<
2022-01-18 20:20:23
576
原创 axios的介绍与使用
axios1.什么是axiosaxios不是一门新的技术。Axios是一个基于promise的HTTP库，简单的讲就是可以发送get、post等请求。本质上是对原生Ajax的封装，只不过它是Promise的实现版本。2.为什么要使用axios原生的ajax使用起来十分繁琐。原来发送http请求采用JQuery.ajax（）非常方便。既然已经开始使用vue进行前端开发，抛弃了对页面的DOM元素操作，再加载jQuery就十分多余了。买椟还珠。Vue本身不支持Ajax请求，需要使用第三方插件。Vue
2022-01-18 18:54:18
1634
原创 完整的路由解析流程(面试题)
完整的导航解析流程：1. 导航被触发（/index=>/about） 2. 在失活的组件（index）中调用beforeRouteLeave守卫。3. 调用全局的beforeEach守卫。4. 在复用的组件中调用beforeRouteUpdate（如果有复用的话）5. 调用路由独享守卫beforeEnter6. 解析异步路由组件7. 在被激活的组件中调用beforeRouteEnter8. 调用全局的beforeResolve守卫（全局解析守卫）9. 导航被确认10. 调用全局后置
2022-01-17 18:35:46
281
原创 vue导航守卫
导航守卫VueRouter提供的导航守卫主要用于在导航的过程中重定向或取消路由、或者添加权限验证、数据获取等业务逻辑。导航守卫分为三类：全局守卫、路由独享守卫和组件内守卫。可以用于路由导航过程中的不同阶段。每一个导航守卫都有三个参数：to、from和next。to：表示即将进入的目标路由对象from：当前导航正要离开的路由对象next：函数，以下是next的常用方法next(): 进行管道中的下一个钩子next(false): 中断当前导航next( ./xx ): 中断当前导航，并跳
2022-01-15 21:36:19
1325
原创 vue获取参数的几种方式
路由基础1.SPA与路由1.1 SPA介绍1.1.1 什么是SPA？SPA（single-page application），只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次。、我们熟知的JS框架如react,vue,angular,ember都属于SPA。1.1.2 什么是MPA（多页面应用）平常写的普通页面就是MPA，通过a标签实现页面切换，每次切换页面都要重新加载公共资源部分。1.1.3 SPA和MPA的区别区别SPAMPA组成一个
2022-01-13 21:43:34
12505
原创 vue路由的介绍
路由基础SPASPA：single-page application 单页面应用 整个项目只有一个HTML页面，通过前端路由来实现页面内的局部切换，公共资源只加载一次。（以后要常用的）MPA多页面应用 通过a标签来实现页面切换。每次切换都需要重新加载公共资源部分。 （之前常用的）SPA和MPA的区别区别SPAMPA组成一个外壳页面和多个页面片段组成多个完整的页面组成公用资源（js，css，img）公用，只加载一次每个页面都需要加载刷新方式局部刷新
2022-01-12 21:20:38
196
原创 hash与history的介绍
hash案例介绍<body> <div id="app"> <a href="#/home">首页</a> <a href="#/about">关于</a> <!-- 渲染到该div下面 --> <div id="router-view"> </div> </div> <script
2022-01-12 20:55:24
139
原创 用vue ui 图形化创建vue项目流程
在vscode中打开你想要创建的项目目录 在终端中输入以下指令vue ui此时会在浏览器中弹出 一个项目管理页面点击创建项目下一步第一次创建可以选择 手动填写预设 下一次不用配置 可以直接使用...
2022-01-12 20:37:07
138
原创 vue-cli脚手架的介绍
vue-cli1. 单文件组件将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“Home.vue”。需要使用第三方构建工具将vue文件转换为正常的html文件才能被浏览器解析。比如webpack和官方提供的：vue-cli。webpack是什么Webpack 是一个前端资源的打包工具，它
2022-01-11 18:18:34
799
原创 自定义指令的介绍与案例
自定义指令分为全局指令 和局部指令自定义指令官方api 文档里有这么一句话：对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。1.全局指令举例1：让指定文本框自动获取焦点如果我们想实现这个例子，原生js的写法是：//原生js写法：网页一打开，就让指定的输入框自动获取焦点document.getElementById('search').focus()但我们不建议这样做。我们可以通过Vue中的自定义指令来实现这个例子。1.1 定义所谓全局指令，是指可以在多个vue实例中使用的
2022-01-11 18:01:51
900
原创 vue中的过渡介绍与案例
什么是vue过渡：元素在显示和隐藏时，不会直接显示和隐藏，而是会有一个过渡或动画效果。过渡能够提升用户的体验。我们可以通过控制类名或样式的方式，自己去实现元素或组件的过渡效果。但是vue也给我们提供了一套规则，用于方便的实现css过渡。在以下几种情况中，可以给元素和组件添加 进入/离开 过渡 （进入：进入页面，隐藏=>显示离开：离开页面，显示=>隐藏）v-if v-show 动态组件 组件根节点vue会在元素进入/离开的时候，会有6个class的切换，会给元素添加6个
2022-01-10 19:56:50
2767
原创 swiper的简单封装
封装之前首先去官网下载相应的css文件 然后引入<link rel="stylesheet" href="css/swiper-bundle.css">示例代码乳如下 图片自己可改为自己的css部分<link rel="stylesheet" href="css/swiper-bundle.css"> <style> .swiper { width: 600px; height: 375px; } img
2022-01-10 19:32:57
412
原创 插槽的介绍与应用
在vue中，引入的子组件标签中间的内容是无法直接显示在子组件中，但是我们可以插槽，让子组件使用的时候添加一些自定义的内容。 格式： <slot></slot>插槽其实相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西，它本身会被替换多个slot标签，内容就会被重复填充多份。插槽可以指定默认数据，如果使用者没有填充内容，这显示默认数据。示例<body><div id="app"> <hello><
2022-01-06 13:59:50
1784
原创 迭代器的介绍
Iterator（遍历器）的概念 JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object） ES6 添加了Map和Set 这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构。这样就需要一种统一的接口机制，来处理所有不同的数据结构。 遍历器就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用
2022-01-05 20:03:08
653
原创 JavaScript中for、for...in、for...of、forEach的区别和用法
1.for循环for (初始化变量; 条件表达式; 操作表达式) { 循环体语句;} 普通for循环在Array和Object中都可以使用。for循环中可以使用return、break等来中断循环遍历数组 var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); //遍历的是每一项的值 }遍历对象 v
2022-01-05 19:48:33
182
原创 父子组件生命周期的执行顺序
创建阶段： 父组件的beforeCreated => 父组件的Created => 父组件的beforeMount => 子组件的beforeCreated => 子组件的Created => 子组件的beforeMount => 子组件的mounted => 父组件的mounted更新阶段: 父组件的beforeUpdate =>子组件的beforeUpdate => 子组件的updated => 父组件的updated销毁阶段：
2022-01-05 19:13:37
615
原创 nextTick与ref的介绍与案例
nextTick vue:异步更新队列。 vue在观察到数据变化时，并不会直接更新DOM，而是开启一个队列（让大家都去排队），缓冲在同一事件中所有的数据变化。 for循环，对num++执行100次，在页面上输出结果。 1.num的值每改变一次，就操作DOM修改一下页面的结果 （操作了100次的DOM） 2.等100次循环执行完了，操作DOM修改一下页面的结果 （只操作了1次DOM） nextTick就是用来知道什么时候DOM更新完成的。 1.active的值发现了变化
2022-01-05 19:06:40
259
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人