2023-09-04 Vue封装全局公共请求 Vue封装全局公共请求 Vue封装全局公共请求创建一个名为http.js的新文件,文件位置自己定,用于配置全局请求包装:// http.js import axios from 'axios'; // 创建一个 Axios 实例 const axiosInstance = axios.create({ baseURL: 'https://api.example.com', // 您的 API 基础 URL timeout: 10000, // 请求超时时间 }); // 添加请求拦截器 axiosInstance.interceptors.request.use( (config) => { // 在请求发送之前可以在这里进行操作,例如添加通用的请求头 config.headers.common['Authorization'] = 'Bearer YourAccessToken'; return config; }, (error) => { return Promise.reject(error); } ); // 添加响应... 2023-09-04 VUE相关 1,838 阅读 0 评论 2023年09月04日 1,838 阅读 0 评论
2022-05-11 VUE九宫格抽奖页面实现 VUE九宫格抽奖页面实现 VUE模拟九宫格抽奖页面实现直接上代码<template> <div class="gameBox"> <div class="bg1"></div> <div class="bg2" v-show="lampShow"></div> <div class="start" @click="move"> 点击抽奖 <p>({{ number_of_draws }}次)</p> </div> <ul> <li v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index === i}]"> ... 2022-05-11 VUE相关 1,635 阅读 0 评论 2022年05月11日 1,635 阅读 0 评论
2022-05-08 VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) VUE安装 postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax)先安装 postcss,直接 npm install postcss --save-dev安装 postcss-px-to-viewport 这里,使用github上的版本,因为可以指定目录或文件才进行转换// 需要使用include属性: npm i https://github.com/evrone/postcss-px-to-viewport --save-dev // 不需要使用include属性: npm install postcss-px-to-viewport --save-devnpm安装报错情况... npm ERR! error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054 npm ERR! fatal: expected flush after ref listing ...可以尝试用下面的两个设置解决git config --glo... 2022-05-08 VUE相关 3,952 阅读 0 评论 2022年05月08日 3,952 阅读 0 评论
2022-02-18 Vant2.x上传图片并且压缩 Vant2.x上传图片并且压缩 废话不多说直接上代码<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <title>Vant2</title> </he... 2022-02-18 VUE相关 2,013 阅读 0 评论 2022年02月18日 2,013 阅读 0 评论
2021-08-05 VUE使用VUEX的状态管理笔记 VUE使用VUEX的状态管理笔记 安装VUEX运行环境npm下,已经安装好vue,并且安装好vuex;未安装的先安装vuex,在项目根目录,src同级目录执行安装命令:npm install vuex --save新建一个状态管理目录这里在src目录下新建一个文件夹 stores,用来管理状态新建mutations的函数常量,即需要用到的mutations里的每个方法,官方建议使用常量命名这里在stores目录下新建一个mutation-types.js文件// mutations的常量 export const COUNTINC = COUNTINC; //自增的函数名称 export const COUNTDEC = COUNTDEC; //自减的函数名称 export const CARTADD = CARTADD; //购物车增加函数名称新建主要的store管理文件,文件里管理了状态的所有操作在stores目录下新建index.js,文件内容如下,都是测试信息,仅供学习参照import Vue from 'vue'; import Vuex from 'vuex'; //这里... 2021-08-05 VUE相关 1,835 阅读 0 评论 2021年08月05日 1,835 阅读 0 评论
2021-05-22 uniapp H5本地开发支持跨域请求 uniapp H5本地开发支持跨域请求 uniapp H5本地开发支持跨域请求使用uniapp本地开发的时候,在浏览器端调试效果的话,可能需要请求其他域名的接口,普通网络请求访问,可能会提示下面的跨域错误:Access to XMLHttpRequest at 'http://www.dcr163.cn/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.解决的办法也很简单,在uniapp项目根目录找到mainfest.json配置文件,找到H5的配置信息,如果没有H5的配置信息,则自己新增配置信息: "h5": { "title": "朋友圈说说【凡人阁】", "devServer": { ... 2021-05-22 VUE相关 1,796 阅读 0 评论 2021年05月22日 1,796 阅读 0 评论
2021-04-08 Vuex的关系逻辑图 Vuex的关系逻辑图 Vuex的关系逻辑图,直接上图片,看着图片理解更容易 2021-04-08 VUE相关 1,671 阅读 0 评论 2021年04月08日 1,671 阅读 0 评论
2021-03-14 vue列表筛选+排序笔记 vue列表筛选+排序笔记 vue列表筛选+排序笔记<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue列表筛选+排序</title> </head> <body> <div id="app"> <input type="text" v-model="keyword"> <ul> <li v-for="(val,index) in filterLists" :key="index">{{index}}-{{val.id}}-{{val.name}}-{{val.age}}</li> </ul> ... 2021-03-14 VUE相关 1,673 阅读 0 评论 2021年03月14日 1,673 阅读 0 评论
2021-01-31 VUE.js中的页面表单使用演示代码 VUE.js中的页面表单使用演示代码 VUE.js中的页面表单使用演示代码,这个是在 nmp run dev,开发模式下的代码,但是页面使用的元素都类型,可以参照:<template> <div> <form action=""> <table> <tr> <th>标 题</th> <th>内 容</th> &... 2021-01-31 VUE相关 1,551 阅读 0 评论 2021年01月31日 1,551 阅读 0 评论
2020-06-07 H5实现手机摇一摇的功能,js代码 H5实现手机摇一摇的功能,js代码 废话不多说,直接上代码,在script中添加该代码即可测试/** * 手机摇一摇的动作是指手机在一定时间内移动了一定距离,也可以近似的理解为:手机以不低于一定的速度移动。 * 实现方法:监听 devicemotion 事件后,判断设备在 X、Y、Z 三个方向上移动的距离与前一次的距离差,并除以两次事件触发的时间差,即为设备移动的速度。将这个速度与预设的的速度对比,如果大于预先设置的值,则认为设备在发生摇动。这个预先设定的速度可以进行多次测试后,取它们的平均值。 * 具体代码如下(用手机打开页面摇一摇即可看到效果): */ if( window.DeviceMotionEvent ) { window.addEventListener('devicemotion',motionHanlder,false); const SHAKE_SPEED&nbs... 2020-06-07 VUE相关 1,520 阅读 0 评论 2020年06月07日 1,520 阅读 0 评论