rt-unipc-utils
v1.0.7
Published
封装rt-uni-admin的pc端常用类
Downloads
5
Readme
rt-unipc-utils
介绍
uniapp针对rt-uni-admin封装常用类(请求、上传图片、上一页,精准数值计算,精准类型判断,空对象判断,根据两点的经纬度计算两点之间直线距离)
安装教程
1. npm i rt-unipc-utils
使用说明
根目录下新建config文件夹,新建config.ts,代码如下:请求接口的统一前缀、图片地址的前缀、请求超时时间、uploadFile的请求头header都在这里配置
get和post默认请求头是
header: {
'content-type': 'application/json',
'Authorization': uni.getStorageSync('token')
};
postForm 请求头为 一般用于post是form表单形式提交
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': uni.getStorageSync('token')
};
class Config {
// 接口地址前缀
baseUrl = '';
// 图片地址前缀
ossUrl = '';
// 请求超时时间
timeout = 10000;
// 默认登录页
loginPage = '/pages/login/login'
// 上传请求头
uploadHeader = {
'content-type': 'application/json',
'Authorization': uni.getStorageSync('token') //自定义请求头
};
constructor() {
if (process.env.NODE_ENV === 'development') {
//开发环境 运行
// this.baseUrl = 'http://127.0.0.1:8080'; //本地地址
} else {
//生产环境 发行
this.baseUrl = 'http://xxx.xxxx.com'; //正式地址
}
}
}
export default new Config();
请求成功是根据服务器的 statuCode===200会返回数据,statusCode === 401无权限会跳转到登录页 res.statusCode >=500 会提示服务器错误
新建文件夹api,api下新建vo文件夹,新建login.ts
//定义Iuser类
export class Iuser {
code:string = "";
mobile:string = ""
}
###文件夹api下新建login.ts文件
import uniHttp from 'rt-unipc-utils/request';
import { Iuser } from './api/vo/login';//这里定义的api下的vo文件里定义的class
class User {
// 登录
login(data: Iuser){
return uniHttp.post('/auth/shop/login',data) //post方法
//return uniHttp.get('/auth/shop/login',data) //get方法
//return uniHttp.postForm('/auth/shop/login',data) //postForm方法
}
}
export const user = new User(); //暴露
###在登录页面login.vue中使用
//引入
import { user } from '../../../api/login';
import { Iuser } from '../../../api/vo/login'; //这里定义的api下的vo文件里定义的class
//vue2写法
<template>
<input type="number" maxlength="11" placeholder="手机号" v-model="info.mobile"/>
<input type="number" maxlength="6" placeholder="验证码" v-model="info.code"/>
</template>
data() {
return {
info:new Iuser()
}
},
methods:{
async login() {
const res = await user.login(this.info)
if(res.ok){
console.log('登录成功',res)
}else{
console.log('登陆失败')
}
}
//vue3写法
<template>
<input type="number" maxlength="11" placeholder="手机号" v-model="info.mobile"/>
<input type="number" maxlength="6" placeholder="验证码" v-model="info.code"/>
</template>
<script setup lang="ts">
const data = reactive({
info:new Iuser()
})
const { info } = toRefs(data)
const getVerificationCode = async()=>{
const res = await user.login(info)
if(res.ok){
console.log('登录成功',res)
}else{
console.log('登陆失败')
}
}
</script>
uniapp上一页,修改上一页的数据或者调用上一页的方法 只支持vue2的写法
import { PrevPage } from 'rt-unipc-utils/prevPage';
let prevPage:any = new PrevPage();
prevPage.list = [] //修改上个页面的数据
prevPage.getList();//调用上个页面的方法
精准计算,为了解决js计算精度丢失的问题,使用之前请 npm i decimal.js;
import { cal } from 'rt-unipc-utils/cal';
let a =0.88;
let b = 0.99;
let result:number //计算结果
result = cal.jia(a,b) //加
result = cal.jian(a,b) //减
result = cal.cheng(a,b) //乘
result = cal.chu(a,b) //除
##. 判断数据类型
import { dataType } from 'rt-unipc-utils/dataType';
dataType.val([]) // 返回"Array"
dataType.val({}) // 返回"Object"
dataType.val('123') // 返回"string"
dataType.val(window) // 返回"Window"
dataType.val(null) // 返回"Null"
dataType.val(undefined) // 返回"undefined"
dataType.val() // 返回"undefined"
dataType.val(function(){}) // 返回"function"
dataType.val(NaN) // 返回"number"
dataType.val(/123/g) //返回"RegExp"
##. 空对象判断
import { emptyObj } from 'rt-unipc-utils/emptyObj';
emptyObj.judge({name:'小明'}) //返回false
emptyObj.judge({}) //返回true
##. 根据两点的经纬度计算两点之间直线距离,实际路程建议直线距离乘以1.4
import { distance } from 'rt-unipc-utils/distance';
distance.val(40.1835390,115.823092,40.4411433,119.882540) //返回距离 (千米/公里)