| 这个作业属于哪个课程 | 软件工程-23年春季学期 |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术总结 |
| 这个作业的目标 | 个人技术总结 |
| 其他参考文献 | 构建之法、CSDN社区、uni-app官方文档、uview-plus官方文档 |
在本次团队项目中，我主要担任了前端开发人员，学习使用了uniapp应用框架，通过学习这个框架，学到了很多前端的通用知识。
当客户端需要从服务端获取数据、发送数据、用户身份验证、更新数据、删除数据时，会用到Http请求。
uni.$u.http.middleware(config)
uni.$u.http.request(config)
uni.$u.http.get(url[, config]) //常用
uni.$u.http.upload(url[, config])
uni.$u.http.delete(url[, data[, config]])
uni.$u.http.head(url[, data[, config]])
uni.$u.http.post(url[, data[, config]]) //常用
uni.$u.http.put(url[, data[, config]])
uni.$u.http.connect(url[, data[, config]])
uni.$u.http.options(url[, data[, config]])
uni.$u.http.trace(url[, data[, config]])
可选的配置项如下：
{
baseURL: '',
header: {},
method: 'GET',
dataType: 'json',
// #ifndef MP-ALIPAY
responseType: 'text',
// #endif
// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
custom: {}, // 全局自定义参数默认值
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
timeout: 60000,
// #endif
// #ifdef APP-PLUS
sslVerify: true,
// #endif
// #ifdef H5
// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
withCredentials: false,
// #endif
// #ifdef APP-PLUS
firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
// #endif
// 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
// getTask: (task, options) => {
// 相当于设置了请求超时时间500ms
// setTimeout(() => {
// task.abort()
// }, 500)
// },
// 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置
return statusCode >= 200 && statusCode < 300
}
}
当然，也可以通过uni.$u.http.setConfig()方法进行全局配置，比如配置请求的全局域名baseUrl：
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = `https://www.example.com`; /* 根域名 */
return config
})
注意，get请求与post请求略有不同，get请求所有参数都在方法的第二个参数中，而post请求的第二个参数为请求参数params，而第三个参数才为配置项。
// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
uni.$u.http.get('/user/login',
{params: {userName: 'name', password: '123456'}}).then(res => {
}).catch(err => {
})
上面的是基本用法，具体在项目中我是这样使用的：
// 基本用法，注意：post的第三个参数才为配置项
uni.$u.http.post('/user/login',
{userName: 'name', password: '123456'} ).then(res => {
}).catch(err => {
})
上面的是基本用法，具体在项目中我是这样使用的：
注意到，我在请求成功后的处理，调用了uni.showToast（），并让页面返回上一层，改善用户的交互体验，让用户知道自己干了什么？成功了吗？
使用this.timer来延迟执行函数时，要记得在页面卸载时清除定时器，否则在下一次使用时会出现严重Bug，具体来说：
在实际开发一个App时，用户登录后，通常需要在每一个页面保持用户ID，并在需要的时候获取用户ID，一种可行的办法是使用uniapp的数据缓存来实现。
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
示例：
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
项目中：
uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
示例：
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
项目中：
可以将获取到的this.id拼接到GET请求的服务端接口后。
将图片的URL （如：https://www.example.com/images/pic.jpg?size=medium&format=jpeg） 上传至数据库中存储，在GET请求后，可以正常根据URL渲染出图片，但是用户在实际使用App的时候往往希望选择存储在本地 (例如相册) 的图片作为自己的头像，这时候根本就没有图片的URL，在GET请求后，更不可能渲染出图片。
通过uniapp自带的uni.chooseImage()获取图片的文件路径 >>>使用 pathToBase64（）函数将本地文件路径转换为Base64编码>>>将该Base64编码上传到图床接口中>>>获取返回的URL>>>将该URL存储到数据库中
具体来说，请看代码:
async changeHead() {
var _this = this;
const res = await new Promise((resolve, reject) => {
uni.chooseImage({
count: 1, // 选择图片的数量，这里选择1张
sourceType: ['album'], // 选择图片的来源，这里选择相册
success: resolve,
fail: reject,
});
});
// 从返回结果中获取选中的图片文件路径
const imagePath = res.tempFilePaths[0];
//将文件路径转换为Base64编码
const res1 = pathToBase64(imagePath)
.then(base64 => {
var s = base64.substr(base64.indexOf(',') + 1, base64.length);
//图床的API可以在网上自己找一找，有免费的也有付费的
uni.$u.http.post('图床API', {//根据找到的图床参数说明来传递参数
token: '',
b64_data: s,
}).then(res => {
console.log("图片上传成功");
console.log(res.data.url);
//将返回的URL存储到本地一个字段中，以便后续上传到数据库使用
_this.user.avatarUrl = res.data.url
}).catch(error => {
console.log(error);
console.log("失败")
})
}).catch(error => {
console.error(error)
})
}
uView-Plus提供了便捷的HTTP请求功能，使得在UniApp中进行与服务器的数据交互变得简单。通过uView-Plus的HTTP请求模块，可以轻松地发送GET、POST、PUT、PATCH和DELETE请求，并处理请求的参数、头部、请求体等。它还支持请求和响应拦截器，方便对请求和响应进行处理和修改。此外，uView-Plus的HTTP请求还提供了文件上传和下载的功能，并且可以处理跨域请求。通过学习和掌握uView-Plus的HTTP请求，开发者能够更方便地与服务器进行数据交互，并处理各种常见的网络请求需求。
在使用HTTP请求时，可能还会遇到各种各样的问题，这要求我们要善于发现问题和通过查询资料、文献等解决问题。