四、uni.request()接口跨域问题解决和接口的封装

uni-app官网提供的方法

uni.request({

method: 'POST',

url: 'api/url',

header:{

'Content-Type':'application/x-www-form-urlencoded'

},

data: params

}).then(res =>{

console.log(res)

}).catch(err =>{

console.log(err)

})

//配置好npm run serve重启就可以了

请求跨域问题

//设置请求头会解决跨域问题

header:{

'Content-Type':'application/x-www-form-urlencoded'

}

接口的封装

在src下创建request目录 创建request.js

const baseUrl = 'http://192.168.1.123:8080'

export default {

/**

* get方法，对应get请求

* @param {String} url [请求的url地址]

* @data {Object} params [请求时携带的参数]

*/

get(url, params) {

return new Promise((resolve, reject) =>{

uni.request({

method: 'GET',

url: baseUrl + url,

header:{

'Content-Type':'application/x-www-form-urlencoded'

},

data: params

}).then(res =>{

// if(res.data.state == 10402){//这个是我项目权限验证

}

在main.js中引入

import request from './request/request'

Vue.prototype.request = request

在vue文件中使用：

var url = "接口路径"；

var obj = "传给后台的参数"；

this.request.post(url, obj).then(response =>{

console.log(response)

}).catch((err) =>{

console.log(err)

})

rs 是一个数据集 但是这时候的数据 还没有与数据库分离

这样做把

比如你的product表里面有name,price两个字段

新建一个java类

public class Product{

private String name

private double price

//封装这两个属性 写相应的set get 方法 我就省略了

}

List<Product>proList = new ArrayList<Product>()

while(rs.next()){

Product pro = new Product()

pro.setName(rs.getString("name"))//根据数据库中的字段名取出值并存入product对象中

pro.setPrice(rs.getDouble("price"))

proList.add(pro) //将从数据库中取出的一条记录存放在list中

}

conn.close()//关闭数据库连接

request.setAttribute("关键字",proList)

//这样就可以在界面中用List取出数据了

---