Record Of March 20th

Today Task

1. Usage Of Charles Proxy—

Charles抓包工具的使用（软件破解，https抓包设置，二级域名）

1. Usage Of UviewUI Components

Uniapp基础页面的组件的编写以及使用；（二手车小程序demo）

1. API Registration On Uniapp

Uniapp（VUE3.0）接口的注册

Charlesproxy

What is Charlesproxy?

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Download

Enter the official web of CharlesProxy.

Crack

https://www.zzzmode.com/mytools/charles/

Installation Of Certificate

Help–>SSL Proxying–>Install Charles Root Certificate

PS: There may be some errors sometimes during installation.Just throw the issues on the Internet then solve it.

Setting Of HTTPS Proxy

Proxy–>SSL Proxying Settings, enter the domains you want to visit and set the port number as 443.

---

Usage Of UviewUI Components

Documentation———uView.

API Registration On Uniapp

1. Define fomate of HTTP

// HTTP请求配置项,报头
export default {
  // 后端地址
  baseUrl: 'https://wx.kxjdc.com',
  // 请求的参数	
  data: {},
  // 设置请求的 header，header 中不能设置 Referer。
  header: {
    'Content-Type': 'application/json'
  },
  // （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT	
  method: 'POST',
  // 收到开发者服务成功返回的回调函数	
  success() {},
  // 接口调用失败的回调函数	
  fail() {},
  // 接口调用结束的回调函数（调用成功、失败都会执行）
  complete() {},
}

1. Import the information of HTTP and build the common functions

// 导入私有配置
import _config from './apiConfig'
import { ignoreNull, convertUrlQuery } from '@/utils/utils'

// 处理错误
function _error (res, error = true) {
	// 未授权
	if (res.code === 401) {
		uni.redirectTo({
      //后端校验不行，返回登录页面
			url: '/pages/auth/login/login'
		})
	} else {
		if (error) {
			uni.showToast({
				icon: 'none',
				title: res.message || '接口异常，请联系管理员'
			})
		}
	}
}

export const https = (options, error = true) => {
	options.url = _config.baseUrl + options.url
	options.data = ignoreNull(options.data)
	_config.header['X-Access-Token'] = uni.getStorageSync('X-Access-Token')

	return new Promise((resolve, reject) => {
		// 拦截请求
		_config.complete = response => {
			// request請求访问成功
			if (options.handle) {
				resolve(response.data)
			} else {
				if (response.statusCode === 200) {
					if (response.data.code === 200 || response.data.code === 10000) {
						resolve(response.data)
					} else {
						_error(response.data, error)
					}
				} else {
					try {
						Promise.reject(response).catch(err => {
							_error(response.data, error)
						})
					} catch (e) {
						uni.hideLoading()
					}
				}
			}
		}
		
		// 开始请求
		uni.request(Object.assign({}, _config, options))
	})
}

export const upload = (options, error = true) => {
	options.url = _config.baseUrl + options.url

	return new Promise((resolve, reject) => {
		// 拦截请求
		options.complete = response => {
			console.log('上传返回：', response)
			// request請求访问成功
			if (response.statusCode === 200) {
				resolve(JSON.parse(response.data))
			} else {
				// 处理catch 请求，不在本页面之外处理，统一在这里处理
				if (options.handle) {
					reject(response)
				} else {
					try {
						Promise.reject(response).catch(err => {
							_error(JSON.parse(response.data), error)
						})
					} catch (e) {
						uni.hideLoading()
					}
				}
			}
		}
		
		// 开始请求
		uni.uploadFile(options)
	})
}

1. Then import https function in appointed customed api to build new HTTP function

import { https } from '@/common/interface'

//写具体路由
//write detailed router
export default {
	homePage: () => {
		return https({
			url: '/api/index/home_res',
			// method: POST ..default method is POST
		})
	},
}

1. Put all customed APIs to a common.js such as index.js together

// 把所有的文件都注册到这个文件里 统一管理
export { default as authApi } from './api/auth'
export { default as booksApi } from './api/books'
export { default as userApi } from './api/user'
export { default as commonApi } from './api/common'
export { default as homeApi } from './api/home'

1. Finally, import in vue file to use the functions

import {
		homeApi
	} from '@/common'


onLoad() {
			this.init;
		},
		methods: {
			init() {
				homeApi.homePage().then(res => {
                   // v-for()
				})

			}
		}