首页
文章分类
逆向网安
中英演讲
杂类教程
学习笔记
前端开发
汇编
数据库
.NET
服务器
Python
Java
PHP
Git
算法
生活记录
读书笔记
作品发布
人体健康
网上邻居
留言板
欣赏小姐姐
关于我
Search
登录
1
超星学习通小助手【观看视频+测验+考试】-10/18已停止维护
5,451 阅读
2
Js解密学习通视频秒过请求
2,357 阅读
3
学习强国部署查看docker容器输出和编写脚本清理输出
2,141 阅读
4
利用AList搭建家庭个人影音库
1,357 阅读
5
学习通学号登录简析
928 阅读
Search
标签搜索
csharp
Laravel
前端
JavaScript
PHP
抓包
Java
Fiddler
Vue
selenium
爬虫
winform
TypeScript
docker
Python
Web逆向
算法
安卓逆向
jadx-gui
ubuntu
Hygge
累计撰写
57
篇文章
累计收到
377
条评论
首页
栏目
逆向网安
中英演讲
杂类教程
学习笔记
前端开发
汇编
数据库
.NET
服务器
Python
Java
PHP
Git
算法
生活记录
读书笔记
作品发布
人体健康
页面
网上邻居
留言板
欣赏小姐姐
关于我
用户登录
搜索到
3
篇与
的结果
2022-12-02
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
2022年12月02日
171 阅读
2 评论
1 点赞
2022-05-23
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
2022年05月23日
198 阅读
2 评论
0 点赞
2022-05-16
学习通签到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/
2022年05月16日
639 阅读
0 评论
0 点赞