113 lines
4.1 KiB
Markdown
113 lines
4.1 KiB
Markdown
## 前言
|
||
最近在为单位做一个简单的手机App，基于Qt技术栈的选择了QtQuick来开发。不得不说QtQucik开发的确舒服，很多东西都不用写就可以只用，UI定义起来也比较自由。但是本人想通过cookie来作为登陆验证时就发现，QtQuick实现起来相当麻烦。（主要是没有文档，资料只找到一篇qyvlik写的。我也不想直接用WebEngine）
|
||
|
||
## 不带cookie
|
||
可以使用XMLHttpRequest，比较坑的是官方竟然没有任何案例，不过Api都是与js的XmlHttpRequest一样的，以下是qyvlik封装的一套分辨操作函数：
|
||
```
|
||
//通过Json对象输出url的query字符串
|
||
function urlQuery(jsonObject) {
|
||
var query = "";
|
||
var i = 0;
|
||
for(var iter in jsonObject) {
|
||
|
||
if(i > 0) {
|
||
query += "&";
|
||
}
|
||
query += iter +"=" + encodeURI(jsonObject[iter]);
|
||
i++;
|
||
}
|
||
// console.log("url query:", query);
|
||
return query;
|
||
}
|
||
//设置头
|
||
function setHeader(xhr, headers) {
|
||
//"Content-Type":"application/x-www-form-urlencoded"
|
||
for(var iter in headers) {
|
||
xhr.setRequestHeader(iter, headers[iter]);
|
||
}
|
||
}
|
||
//这里我修改了一下函数的形参，从使用的角度来看，回调函数一般都会有，但是headers不一定要设置，所以调换了一下位置
|
||
function ajax(method, url, callable,headers,data) {
|
||
headers = headers || {};
|
||
callable = callable || function(xhr) {
|
||
console.log("没有设置callable，使用默认log函数")
|
||
console.log(xhr.status);
|
||
console.log(xhr.responseText);
|
||
}
|
||
var xhr = new XMLHttpRequest;
|
||
xhr.onreadystatechange = function() {
|
||
if(xhr.readyState == xhr.DONE) {
|
||
callable(xhr);
|
||
}
|
||
}
|
||
xhr.open(method, url);
|
||
setHeader(xhr, headers);
|
||
if("GET" === method) {
|
||
xhr.send();
|
||
} else {
|
||
xhr.send(data);
|
||
}
|
||
}
|
||
```
|
||
为了能够重复利用，本人将这些代码都放入一个js文件中，之后使用导入的方式重复利用。（注意：导入的命名控件首字母需要大写）
|
||
```
|
||
import "xmlhttprequest.js" as XmlHttpRequest
|
||
```
|
||
使用：
|
||
```
|
||
var jsonObject={user:"admin",password:Qt.md5("123")};
|
||
|
||
XmlHttpRequest.ajax("GET","http://192.168.3.108:3000/landing"+"?"+XmlHttpRequest.urlQuery(jsonObject),function(xhr){
|
||
console.log(xhr.status);
|
||
console.log(xhr.responseText);
|
||
if(JSON.parse(xhr.responseText).message==="ok") {
|
||
stack.push("qrc:/resource/qml/listview.qml",{stack:stack,uifont:uifont});
|
||
}else{
|
||
message.show("用户名或者密码错误！",2000);
|
||
}
|
||
});
|
||
```
|
||
|
||
## 带cookie
|
||
因为XmlHttpRequest是不能带有cookie的，所以只能通过c++导出QNetworkAccessManager、QNetworkRequest、QNetworkReply，具体的代码可以参考https://github.com/qyvlik/QmlNetwork。qyvlik封装了一套QML对象，我直接拿来用了，很可惜他的使用说明写的不太详细，有一些操作需要直接看他写的微信案例才能搞定。
|
||
```
|
||
NetworkAccessManager { id: manager }
|
||
NetworkResponse { id: response }
|
||
NetworkRequest { id: request }
|
||
Buffer { id: buffer }
|
||
|
||
function initWebWeiXinInfo() {
|
||
var url = "http://192.168.3.108:3000/landing";
|
||
var data = {
|
||
user:"admin",
|
||
password:"123"
|
||
};
|
||
|
||
if(buffer.isOpen()) {
|
||
buffer.close();
|
||
}
|
||
buffer.data = JSON.stringify(data);
|
||
if(!buffer.open(IODevice.ReadOnly)) {
|
||
console.log(buffer.errorString());
|
||
}
|
||
request.clear();
|
||
request.url = url;
|
||
// request.setHeader("Cookie", cookie);
|
||
request.setHeader("Content-Type", "application/json")
|
||
request.ioDevice = buffer;
|
||
|
||
connectSignalOnce(response.finished,function() {
|
||
console.log("data:", buffer.data)
|
||
var headers = response.getAllResponseHeaders();
|
||
for(var iter in headers) {
|
||
console.log(headers[iter]);
|
||
}
|
||
console.log(response.responseContent);
|
||
});
|
||
|
||
manager.post(request, response);
|
||
}
|
||
```
|
||
|
||
## 结语
|
||
感觉qyvlik封装的东西比较多，需求上本人也就用用Get与Post以及cookie，以后有时间会重新封装一个简单版本。 |