【前端开发】Uniapp:uView组件库和封装接口请求

发布于:2024-05-13 ⋅ 阅读:(168) ⋅ 点赞:(0)

【uView组件库导入及使用】

1. 导入uView组件库依赖

  • (无package.json)npm init -y
  • npm install uview-ui@1.8.8
  • 安装成功,自动放到“@/node_modules/uview-ui/”(可自行更换路径)

2. 项目配置使用uView

  • App.vue
<style lang="scss">
	@import "uview-ui/index.scss";
</style>
  • uni.scss
@import './uview-ui/theme.scss';
  • pages.json
{
	"easycom": {
		"^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages":[]
}
  • main.js
// 放置到 import Vue from 'vue'之后,app.$mount()之前
import uView from 'uview-ui'
Vue.use(uView)

【接口封装】

1. 创建 http.request.js 文件(封装全局请求配置)

export const baseURL = '域名';
 
export const request = (options) => {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title:'请求中...'
		})
		uni.request({
			url: baseURL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			header: {
				'token': uni.getStorageSync("token") || ""
			},
			success: (res) => {
				if (res.code == 200) {
					resolve(res.data)
				} else {
					reject(res)
				}
				// 如果不满足上述判断就输出数据
			},
			fail: (err) => {
				console.log(err)
				reject(err)
			},
			complete() {
				uni.hideLoading()
			}
		})
	})
}

2. 创建 http.api.js 文件(封装全局API)

import {
	request
} from '@/common/http.request.js'

// 登录
export const LoginUser = (data) => request({
	url: 'user/login',
	method: 'post',
	data
})

// 获取所有用户
export const getUserList = () => request({
	url: 'user/list',
	method: 'get',
})

3. 页面调用接口

<script>
	import {
		LoginUser,getUserList
	} from '@/common/http.api.js'
	export default {
		data() {
			return {
			}
		}
	}
</script>