Vue3+Ts封装Axios及Vue的Proxy配置 一、开箱即用的axios封装：Vue3+ts作者：诸葛小愚链接：https://juejin.cn/post/7107047280133275678来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。新建index.ts文件：需要定义请求返回的数据格式，这个可以和服务端约定好数据格式需要定义axios的配置信息，用于在创建axios实例时传入请求拦截器，前端所有的接口请求都会先达到请求拦截器，我们可以在此添加请求头信息响应拦截器，服务端返回的数据会先达到响应拦截器，我们可以处理服务端的响应信息。如果是报错，就处理常见的报错；如果是成功，就返回数据封装常用的get、put、post、delete接口方法封装axiosimport axios, {AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse} from 'axios' import {ElMessage} from 'element-plus' // 数据返回的接口 // 定义请求响应参数，不含data interface Result { code: number; msg: string } // 请求响应参数，包含data interface ResultData<T = any> extends Result { data?: T; } const URL: string = '' enum RequestEnums { TIMEOUT = 20000, OVERDUE = 600, // 登录失效 FAIL = 999, // 请求失败 SUCCESS = 200, // 请求成功 } const config = { // 默认地址 baseURL: URL as string, // 设置超时时间 timeout: RequestEnums.TIMEOUT as number, // 跨域时候允许携带凭证 withCredentials: true } class RequestHttp { // 定义成员变量并指定类型 service: AxiosInstance; public constructor(config: AxiosRequestConfig) {   // 实例化axios   this.service = axios.create(config);   /**     * 请求拦截器     * 客户端发送请求 -> [请求拦截器] -> 服务器     * token校验(JWT) : 接受服务器返回的token,存储到vuex/pinia/本地储存当中     */   this.service.interceptors.request.use(     (config: AxiosRequestConfig) => {       const token = localStorage.getItem('token') || '';       return {         ...config,         headers: {           'x-access-token': token, // 请求头中携带token信息         }       }     },     (error: AxiosError) => {       // 请求报错       Promise.reject(error)     }   )   /**     * 响应拦截器     * 服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息     */   this.service.interceptors.response.use(     (response: AxiosResponse) => {       const {data, config} = response; // 解构       if (data.code === RequestEnums.OVERDUE) {         // 登录信息失效，应跳转到登录页面，并清空本地的token         localStorage.setItem('token', '');         // router.replace({         //   path: '/login'         // })         return Promise.reject(data);       }       // 全局错误信息拦截（防止下载文件得时候返回数据流，没有code，直接报错）       if (data.code && data.code !== RequestEnums.SUCCESS) {         ElMessage.error(data); // 此处也可以使用组件提示报错信息         return Promise.reject(data)       }       return data;     },     (error: AxiosError) => {       const {response} = error;       if (response) {         this.handleCode(response.status)       }       if (!window.navigator.onLine) {         ElMessage.error('网络连接失败');         // 可以跳转到错误页面，也可以不做操作         // return router.replace({         //   path: '/404'         // });       }     }   ) } handleCode(code: number):void {   switch(code) {     case 401:       ElMessage.error('登录失败，请重新登录');       break;     default:       ElMessage.error('请求失败');       break;   } } // 常用方法封装 get<T>(url: string, params?: object): Promise<ResultData<T>> {   return this.service.get(url, {params}); } post<T>(url: string, params?: object): Promise<ResultData<T>> {   return this.service.post(url, params); } put<T>(url: string, params?: object): Promise<ResultData<T>> {   return this.service.put(url, params); } delete<T>(url: string, params?: object): Promise<ResultData<T>> {   return this.service.delete(url, {params}); } } // 导出一个实例对象 export default new RequestHttp(config);实际使用在使用时，我们需要在API文档中导入index.ts，会自动创建一个axios实例。我们在同目录下，新建一个login.tsimport axios from './' namespace Login { // 用户登录表单 export interface LoginReqForm {   username: string;   password: string; } // 登录成功后返回的token export interface LoginResData {   token: string; } } // 用户登录 export const login = (params: Login.LoginReqForm) => { // 返回的数据格式可以和服务端约定 return axios.post<Login.LoginResData>('/user/login', params); }API接口也定义好了，再来一个页面简单试试：<script setup> import { reactive } from 'vue'; import {login} from '@/api/login.js' const loginForm = reactive({ username: '', password: '' }) const Login = async () => { const data = await login(loginForm) console.log(data); } </script> <template> <input v-model="loginForm.username" /> <input v-model="loginForm.password" type="password" /> <button @click="Login">登录</button> </template>二、Vue通过Proxy访问不同端口的API后台API使用Springboot开发,部署端口为81251.Vue项目根目录创建vue.config.jsmodule.exports = { devServer: { open: true, host: "127.0.0.1", port: 7123, hot: true, proxy: { "/api": { target: "http://localhost:8125", // 代理地址，这里设置的地址会代替axios中设置的baseURL changeOrigin: true, // 是否跨域 ws: false, // 如果要代理 websockets，配置这个参数 pathRewrite: { "^/api": "", }, }, }, }, };2.示例请求apis/index.ts... const URL = "/api"; ...apis/register.ts... // 用户注册 export const register = (params: RegisterReqForm) => { return axios.post<number>("/user/register", params); }; ...pages/login/Login.ts... async handleRegisterSubmit() { const data = await register(this.registerForm); message.success("用户注册成功"); }, ...根据如上代码可得请求地址为:/api/user/register,并没有host代理后的地址为:http://127.0.0.1:8125/user/register这样就实现前端127.0.0.1:7123代理请求访问127.0.0.1:8125引用1.开箱即用的axios封装：Vue3+ts:https://juejin.cn/post/7107047280133275678#heading-22.Proxy error: Could not proxy request... 问题解决:https://blog.csdn.net/ymiandi/article/details/125674056

vite+vue3+ts添加eslint+prettier项目规范 本文采用Yarn作为包管理器,开发环境使用WebStorm,如果使用Vsc可能需要额外安装插件或配置1.初始化项目# yarn yarn create @vitejs/app # or yarn create vite # npm npm init @vitejs/app这个模板是没有使用配置eslint和prettier的，接下来我们依次安装这些依赖。2.集成eslint# 首先安装 eslint yarn add eslint -D # 初始化eslint npx eslint --init然后选择这些选项,可以根据你的项目进行调整最后一步询问是否安装携带的依赖，选择No并Copy下来这些依赖，手动使用Yarn进行安装。yarn add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D到这一步，我们就已经安装了相关的依赖了，并且得到一个已配置好的eslintrc.json文件：{ // set running environment is browser + es2021 + node, // else Eslint will report an error when encountering global objects such as Promises, Windows, etc "env": { "browser": true, "es2021": true, "node": true }, // extends the base eslint config "extends": [ "eslint:recommended", "plugin:vue/essential", "plugin:@typescript-eslint/recommended" ], // support ts latest features "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, // add vue and @typescript-eslint plugins, enhance eslint power "plugins": [ "vue", "@typescript-eslint" ], "rules": { } }然后为package.json增加一个lint命令{ "scripts":{ // lint当前项目中的文件并且开启自动修复 "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix", } }对.eslintrc.json进行如下修改:{ ... "extends": [ "eslint:recommended", -- "plugin:vue/essential", ++ "plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended" ], // 新增，解析vue文件 "parser":"vue-eslint-parser", "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, ... }3.集成Prettieryarn add prettier -D然后在项目根目录创建一个配置文件:.prettierrc.json{ "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": true, "trailingComma": "none", "semi": false }配置项很简单，名字就能知道是干嘛的，根据自己情况进行修改即可更多选项和配置方法参阅官方文档 官方的配置文档 下一步配置一个ignore文件,作用在对整个项目进行格式化时对某些文件进行忽略根目录下创建:.prettierignore/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*然后在package.json中再增加一个命令 "prettier": "prettier --write ."3.解决eslint和prettier的冲突理想状态下，到这一步我们写代码的时候，eslint 和 prettier会相互协作，既美化我们的代码，也修复我们质量不过关的代码。然而现实总是不那么完美，我们会发现某些时候，eslint提示错误，我们修改了以后，屏幕会闪一下然后又恢复到报错状态，自动修复失效了。这是因为eslint 有一部分负责美化代码的规则和 prettier的规则冲突了。解决方案:用 eslint-config-prettier 提供的规则集来覆盖掉eslint冲突的规则，并用eslint-plugin-prettier来使eslint使用prettier的规则来美化代码。yarn add eslint-config-prettier eslint-plugin-prettier -D然后在 .eslintrc.json中extends的最后添加一个配置: "extends": [ "eslint:recommended", "plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" // 新增，必须放在最后面 ],然后我们重启一下IDE，就会发现冲突消失了，我们的自动修复和自动格式化也能相互协作了。文章来源/出处1.实战--为vite-vue3-ts项目添加 eslint + prettier + lint-staged 项目规范： https://juejin.cn/post/7043702363156119565

学习通签到QQ Bot开发及服务器部署(koishi+go-cqhttp) 背景顶岗实习期间学校要求用学习通每日打卡，打卡时候会获取经纬度和所在地名称，经纬度出现偏差就会导致打卡失败。一方面不会每天都在这个范围内，另一方面就是怕某天忘记打卡。所以写个bot每天上QQ看到发条消息就算打卡啦。效果图：1.编写插件在app抓包得到的Cookie很久都不会变，不用担心失效的问题，所以在bot保存配置文件时直接写入死的Cookie即可import {Context} from 'koishi' import axios from 'axios' import qs from 'qs' import * as fs from "fs"; export const name = 'xuexitong' axios.defaults.withCredentials = true function addAccount(userId, username, password, cookies) { // 判断文件是否存在 const filePath = `${__dirname}/accounts.txt` if (!fs.existsSync(filePath)) { fs.writeFileSync(filePath, '') } // 追加写入内容 const data = `${userId}\t${username}\t${password}\t${cookies}\n` fs.appendFileSync(filePath, data) } function readAccount(userId: string) { // 判断文件是否存在 const filePath = `${__dirname}/accounts.txt` if (!fs.existsSync(filePath)) { return null } // 读取文件内容 const data = fs.readFileSync(filePath, 'utf-8') const lines = data.split('\n') for (let i = 0; i < lines.length; i++) { const line = lines[i] const [id, username, password, cookies] = line.split('\t') if (id === userId) { return {username, password, cookies} } } return null } export function apply(ctx: Context) { // write your plugin here ctx.middleware((session, next) => { // 用户号码绑定 if (session.content.indexOf('账户绑定') === 0) { // 将消息按空格分为3份 let arr = session.content.split(' ') // 判断是否有账号密码 if (arr.length !== 3) { return '请输入正确的格式：账户绑定 号码 密码' } let username = arr[1] let password = arr[2] const params = new URLSearchParams() params.append("uname", username) params.append("code", password); params.append("loginType", '1'); params.append("roleSelect", 'true'); // 发送请求 判断是否可用 return axios.post('https://passport2-api.chaoxing.com/v11/loginregister?cx_xxt_passport=json', params) .then(res => { if (res.data.mes.indexOf('验证通过') !== -1) { // 可用 let cookie = res.headers['set-cookie']; let cookieStr = ''; // 循环cookie 截取每一个cookie;前的字符串 for (let i = 0; i < cookie.length; i++) { cookieStr += cookie[i].split(';')[0] + ';'; } addAccount(session.userId, username, password, cookieStr); return '账户绑定成功' } else { return '账户绑定失败,原因：' + res.data.mes } }).catch(err => { return '账户绑定失败,失败原因' + err.message }) } // 学习通签到 if (session.content === '学习通签到') { // 判断是否绑定 let account = readAccount(session.userId) if (!account) { return '请先绑定账号' } // 获取yyyy-MM-dd格式的日期 let date = new Date() let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() let dateStr = `${year}-${month}-${day}` return axios.post('http://xingtai.dgsx.chaoxing.com/mobile/clockin/addclockin2', qs.stringify({ 'pcid': 3680, 'pcmajorid': 2457050, 'address': 'xxxx夏万杰存', 'geolocation': '110.437392,30.479040', 'remark': '', 'workStart': dateStr + ' 08:00:00', 'workEnd': dateStr + ' 18:00:00', 'images': '', 'allowOffset': 2000, 'offset': 13, 'offduty': 0 }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Cookie': account.cookies } }).then(res => { return res.data.msg; }) } return next() } ) }2.托管到服务器上::(呼) 在官网没看到部署教程,就决定照着自己思路来吧2.1 先下载相应的go-cqhttp,并在后台跑起来！go-cqhttp Release: https://github.com/Mrs4s/go-cqhttp/releases 根据上图的命令查询对应linux版本,我对应下载的为 go-cqhttp_linux_amd64.tar.gz 接着解压然后运行go-cqhttp.mkdir go-cqhttp cd go-cqhttp wget https://github.com/Mrs4s/go-cqhttp/releases/download/v1.0.0-rc1/go-cqhttp_linux_amd64.tar.gz tar -zxvf go-cqhttp_linux_amd64.tar.gz # 后台运行 会输出到运行目录下的nohup.out nohup ./go-cqhttp # 直接运行 ./go-cqhttp需要扫码登录,但是扫描出现了安全提示，无法登录..于是先在本地环境登录了一下,复制go-cqhttp目录下的session.token到服务器同目录下，再次启动就正常登录用户啦！2.2 go-cqhttp跑起来后再跑KoishiKoishi携带了web端的控制台,直接搭建一个网站运行它！直接使用宝塔 稍稍配置一下其他的不用动,nginx我也没有配置!直接根据绑定的域名访问,就到达了Koishi控制台3.停止项目3.1 停止go-cqhttp由于运行的时候是通过后台运行的:# 后台运行 会输出到运行目录下的nohup.out nohup ./go-cqhttp停止时先检索后台应用:ps -aux | grep "go-cqhttp"第一组数字:3149356 ,就是go-cqhttp的pid 接着执行kill 3149356即可干掉后台进程！3.2 停止koishi这个好弄,由于Koishi有web的控制台启动的时候是通过宝塔搭建网站的方式启动的,那么需要停止的直接去停止这个网站就行了。参考文档/项目1.API文档|Koishi: https://koishi.js.org/api/ 2.go-cqhttp帮助中心： https://docs.go-cqhttp.org/