流浪のwolf

卷帝

导航

2022年10月20日

如何解决token过期问题 ?

摘要: 首先 token 过期会导致请求不到数据 , 就不能准确渲染页面 ,此时的错误配置项的token是过期的,只要更新了token 拿着原先的配置项重新请求数据即可 ;但是如果更新token的时候请求错误,可能是refresh_token也过期了,直接去登录页面重新登录 ; 具体操作:先封装好一个更新t 阅读全文

posted @ 2022-10-20 22:08 流浪のwolf 阅读(791) 评论(0) 推荐(0) 编辑

黑马头条第七天 -- 头像和评论

该文被密码保护。 阅读全文

posted @ 2022-10-20 21:50 流浪のwolf 阅读(3) 评论(0) 推荐(0) 编辑

黑马头条第六天 - 文章详情页面 - 预览图片 nextTick markdown.css

该文被密码保护。 阅读全文

posted @ 2022-10-20 21:42 流浪のwolf 阅读(8) 评论(0) 推荐(0) 编辑

搜索功能实现 - 搜索历史组件的封装 - 编辑状态和完成状态下不同的操作

摘要: <template> <div class="search-history"> <div class="search-history"> <van-cell title="搜索历史"> <template v-if="isEdit && searchHistories.length"> <!-- v 阅读全文

posted @ 2022-10-20 21:33 流浪のwolf 阅读(18) 评论(0) 推荐(0) 编辑

: 搜索功能实现 - 搜索结果组件的封装 - 上拉加载

摘要: 传值 keywords <template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="(item, index) in list" 阅读全文

posted @ 2022-10-20 20:13 流浪のwolf 阅读(17) 评论(0) 推荐(0) 编辑

搜索功能实现 - 搜索建议组件的封装 - 防抖 - 关键词高亮

摘要: // 父组件传 1 个值 关键词 // 子组件 的 emit自定义的search事件会委托父组件改变 keywords 的值 然后更新 props 的keywords 然会触发 watch 的 handler 函数 然后请求建议数据 <template> <div> <!-- 显示搜索建议 --> 阅读全文

posted @ 2022-10-20 20:11 流浪のwolf 阅读(21) 评论(0) 推荐(0) 编辑

搜索历史和搜索建议、搜索结果的逻辑展示组件

摘要: 搜索逻辑的判断展示思路 * 1. 如果 keywords 是空,就显示搜索历史 * 2. 如果 input 聚焦,并且搜索关键词 keywords 不为空,就显示搜索建议 * 3. 点击搜索按钮或者在input框聚焦状态下按下 enter 触发 input 的时候展示搜索结果 <form actio 阅读全文

posted @ 2022-10-20 20:05 流浪のwolf 阅读(129) 评论(0) 推荐(0) 编辑

什么是 h5项目

摘要: 首先 h5项目不是 html5 的意思,在者 h5 不是微信网页 ; h5 是移动网页的统称 ; 阅读全文

posted @ 2022-10-20 18:45 流浪のwolf 阅读(111) 评论(0) 推荐(0) 编辑

vue.config.js 常用的属性

摘要: // vue.config.js 文件是脚手架的配置文件 const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, lintOn 阅读全文

posted @ 2022-10-20 18:09 流浪のwolf 阅读(40) 评论(0) 推荐(0) 编辑

搭建项目解构层

摘要: 1. vue create 项目名称 整理目录 2. 工具层 utils 封装本地存储 storage.js 存值 取值 删值 封装请求实例 request.js 创建实例 - 配置基准地址 baseURL 请求拦截器 - 统一携带 token 响应拦截器 - 处理 token 过期 未登录 异常错 阅读全文

posted @ 2022-10-20 17:14 流浪のwolf 阅读(9) 评论(0) 推荐(0) 编辑

DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (header, parser) { header = normalizeHeader(header);

摘要: 场景:token过期,然后更新了token 重新发起请求获取数据 ; 代码:使用上一次的错误请求配置报错 return request(error.config) ; 解决 : return request({ ...error.config, headers: {}, }); // 添加响应拦截器 阅读全文

posted @ 2022-10-20 17:06 流浪のwolf 阅读(1088) 评论(0) 推荐(0) 编辑

路由页面跳转优化

摘要: 1. 添加全局前置路由守卫 import store from "@/store"; import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routes = [ { path: "/" 阅读全文

posted @ 2022-10-20 14:23 流浪のwolf 阅读(20) 评论(0) 推荐(0) 编辑

input 的hidden 属性

摘要: hidden 会隐藏input 标签内容显示,不占位置 ; <input type="file" name="" id="" ref="imgFile" @change="changeFile" style="width: 100%" /> 使用了hidden 书框框隐藏了 阅读全文

posted @ 2022-10-20 10:12 流浪のwolf 阅读(537) 评论(0) 推荐(0) 编辑

query和params的区别

摘要: 2者都是编程式路由跳转用来存放传递数据的位置,query使用path引入,数据显示在地址栏上,params使用name引入,传递的数据在页面看不见 ; 阅读全文

posted @ 2022-10-20 07:12 流浪のwolf 阅读(22) 评论(0) 推荐(0) 编辑

怎么理解vue的单向数据流

摘要: 单向数据流是父组件传给子组件的数据,子组件没有权利修改,只能委托父组件修改,然后子组件更新 阅读全文

posted @ 2022-10-20 07:06 流浪のwolf 阅读(22) 评论(0) 推荐(0) 编辑

call apply bind 的区别

摘要: 相同点:动态修改当前函数内部环境对象 this 指向 ; 异同点: 执行方式的不同 call apply 改变后立即执行,是同步代码 bind 是异步代码,改变后不会立即执行,会返回一个函数 ,比如改变定时器内部的this指向 传参不同 call 和 bind 逐个传入 apply 以数组的方式传入 阅读全文

posted @ 2022-10-20 07:02 流浪のwolf 阅读(17) 评论(0) 推荐(0) 编辑

怎么封装axios

摘要: 首先,单独创建一个request的js文件,导入axios 然后,创建 axios 实例 request = axios.create 可以写基本地址,超时时间等; 后面可以添加拦截器,可以在请求拦截器统一添加token,规定返回数据的格式 最后默认导出request实例; 阅读全文

posted @ 2022-10-20 06:46 流浪のwolf 阅读(21) 评论(0) 推荐(0) 编辑