网站等保测评怎么做,银行系统网站模板,10g免费空间申请,企业商务网站建设的基本方法文章目录 项目学习总结项目中的vw适配vw使用 封装axios实例axios常见请求配置axios响应结构axios拦截器配置Vue Router全局前置守卫 项目学习总结
在智慧商城项目中的学习总结。
项目中的vw适配
vw 是一种长度单位#xff0c;代表视口宽度的百分比。1vw 等于视口宽度的1%。… 文章目录 项目学习总结项目中的vw适配vw使用 封装axios实例axios常见请求配置axios响应结构axios拦截器配置Vue Router全局前置守卫 项目学习总结
在智慧商城项目中的学习总结。
项目中的vw适配
vw 是一种长度单位代表视口宽度的百分比。1vw 等于视口宽度的1%。在网页设计和前端开发中vw 单位常用于实现响应式设计和屏幕适配尤其是针对不同尺寸和分辨率的移动设备。
使用vw适配的好处
响应式使用vw可以确保元素的尺寸随浏览器窗口或设备屏幕的大小变化而按比例调整实现良好的响应式布局。简化计算相比于传统的像素单位vw让开发者能够更直观地根据视口比例来设定元素尺寸无需考虑具体像素值。设计师与开发者对齐设计图上的百分比尺寸可以直接转换为vw单位有助于设计与实现的一致性。
vw使用
安装npm i postcss-px-to-viewport1.1.1 -D根据根目录 新建postcss的配置文件postcss.config.jsmodule.exports {plugins: {postcss-px-to-viewport: {viewportWidth: 375,},},
};viewportWidth:设计稿的视口宽度
封装axios实例
当我们在一个项目中需要在axios中做一些自定义配置时最好新建一个实例再在实例上进行配置可以避免对axios进行污染。除此之外如果需要访问多个服务地址而这些服务请求和响应的结构也可能都完全不同那么你可以通过axios.create创建不同的实例来处理。
语法
const instance axios.create({baseURL: https://some-domain.com/api/,timeout: 1000,headers: {X-Custom-Header: foobar}
});axios常见请求配置
一些创建请求时可以用的配置选项。只有url是必需的如果没有指定method请求默认使用GET方法。
{// url 是用于请求的服务器 URLurl: /user,// method 是创建请求时使用的方法method: get, // 默认值// baseURL 将自动加在 url 前面除非 url 是一个绝对 URL。// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URLbaseURL: https://some-domain.com/api/,// transformRequest 允许在向服务器发送前修改请求数据// 它只能用于 PUT, POST 和 PATCH 这几个请求方法// 数组中最后一个函数必须返回一个字符串 一个Buffer实例ArrayBufferFormData或 Stream// 你可以修改请求头。transformRequest: [function (data, headers) {// 对发送的 data 进行任意转换处理return data;}],// transformResponse 在传递给 then/catch 前允许修改响应数据transformResponse: [function (data) {// 对接收的 data 进行任意转换处理return data;}],// 自定义请求头headers: {X-Requested-With: XMLHttpRequest},// params 是与请求一起发送的 URL 参数// 必须是一个简单对象或 URLSearchParams 对象params: {ID: 12345},// data 是作为请求体被发送的数据// 仅适用 PUT, POST, DELETE 和 PATCH 请求方法// 在没有设置 transformRequest 时则必须是以下类型之一:// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 浏览器专属: FormData, File, Blob// - Node 专属: Stream, Bufferdata: {firstName: Fred},// 发送请求体数据的可选语法// 请求方式 post// 只有 value 会被发送key 则不会data: CountryBrasilCityBelo Horizonte,// timeout 指定请求超时的时间单位未毫秒。// 如果请求时间超过 timeout 的值则请求会被中断timeout: 1000, // 默认值是 0 (永不超时)// responseType 表示浏览器将要响应的数据类型// 选项包括: arraybuffer, document, json, text, stream// 浏览器专属blobresponseType: json, // 默认值// maxContentLength 定义了node.js中允许的HTTP响应内容的最大字节数maxContentLength: 2000,// maxBodyLength仅Node定义允许的http请求内容的最大字节数maxBodyLength: 2000,
}axios响应结构
一个请求的响应包含如下信息
{// data 由服务器提供的响应data: {},// status 来自服务器响应的 HTTP 状态码status: 200, // 2xx表示请求正常// statusText 来自服务器响应的 HTTP 状态信息statusText: OK,// headers 是服务器响应头// 所有的 header 名称都是小写而且可以使用方括号语法访问// 例如: response.headers[content-type]headers: {},// config 是 axios 请求的配置信息config: {},// request 是生成此响应的请求// 在node.js中它是最后一个ClientRequest实例 (in redirects)// 在浏览器中则是 XMLHttpRequest 实例request: {}
}axios拦截器配置
axios拦截器可以在请求或响应被 then 或 catch 处理前拦截它们。
添加请求拦截器和响应拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});如果稍后需要移除拦截器
const myInterceptor axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);给自定义的axios实例添加拦截器
const instance axios.create();
instance.interceptors.request.use(function () {/*...*/});Vue Router全局前置守卫
当一个导航触发时全局前置守卫按照创建顺序调用。守卫是异步解析执行此时导航在所有守卫解决完之前一直处于等待中。
应用场景未登录情况下不可访问购物车并跳转至登录页面。
语法
const router createRouter({ ... })router.beforeEach((to, from) {// ...// 返回 false 以取消导航return false
})每个守卫方法接收两个参数
to即将要进入的目标from当前导航正要离开的路由next是否放行当前导航 next(路径)拦截到某个路径页面在任意给定的导航守卫中都没严格调用一次
