uniapp 初始化项目
const baseUrl = 'http://10.92.1.17:6601/videoapi/';
//const baseUrl = '/videoapi/';
//对于 GET 方法,会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
//对于 POST 方法且 header['content-type'] 为 application/json 的数据,会进行 JSON 序列化。
//对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。
//postJson请求数据存放在requestBody中
const HttpPostJson = (url, data) => {
//登录后将用户的token存放在缓存中
let token = "";
uni.getStorage({
key: 'token',
success: function(ress) {
token = ress.data,
data.token = ress.data
}
});
let opts = {
url: baseUrl + url,
data: data,
method: 'POST',
header: {
"Content-Type": "application/json; charset=UTF-8",
"token": token
},
dataType: 'json'
}
let promise = new Promise(function(resolve, reject) {
uni.request(opts).then(
(res) => {
resolve(res[1].data)
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
//get请求
const HttpGet = (url, data) => {
////登录后将用户的token存放在缓存中
let token = "";
uni.getStorage({
key: 'token',
success: function(ress) {
token = ress.data,
data.token = ress.data
}
});
let opts = {
url: baseUrl + url,
data: data,
method: 'GET',
header: {
"token": token
},
dataType: 'json'
}
let promise = new Promise(function(resolve, reject) {
uni.request(opts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
//表单提交
const HttpPostForm = (url, data) => {
//登录后将用户的token存放在缓存中
let token = "";
uni.getStorage({
key: 'token',
success: function(ress) {
token = ress.data,
data.token = ress.data
}
});
let opts = {
url: baseUrl + url,
data: data,
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
"token": token
},
dataType: 'json'
}
let promise = new Promise(function(resolve, reject) {
uni.request(opts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
//文件上传(单文件上传)
/**
* fileType:文件类型,image/video/audio仅支付宝小程序,且必填。
* fileName:文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
* filePath:要上传文件资源的路径
* formData:HTTP 请求中其他额外的 form data
* files : 需要上传的文件列表。使用 files 时,filePath 和 name 不生效。
*/
const HttpPostFile = (url, formData, fileName, fileType, filePath) => {
//登录后将用户的token存放在缓存中
let token = "";
uni.getStorage({
key: 'token',
success: function(ress) {
token = ress.data,
data.token = ress.data
}
});
let opts = {
url: baseUrl + url,
formData: formData,
filePath: filePath,
fileType: fileType,
name: fileName,
method: 'POST',
header: {
"Content-Type": "multipart/form-data",
"token": token
},
dataType: 'json'
}
let promise = new Promise(function(resolve, reject) {
uni.uploadFile(opts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
/**
* 文件下载GET请求
*/
const HttpDownloadFile = (url) => {
//登录后将用户的token存放在缓存中
let token = "";
uni.getStorage({
key: 'token',
success: function(ress) {
token = ress.data,
data.token = ress.data
}
});
let opts = {
url: baseUrl + url,
method: 'GET',
header: {
"token": token
},
dataType: 'json'
}
let promise = new Promise(function(resolve, reject) {
uni.uploadFile(opts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
export default {
baseUrl,
HttpPostForm,
HttpGet,
HttpPostJson,
HttpPostFile,
HttpDownloadFile
}
<template>
<view class="content">
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
let object = {};
this.http.HttpPostJson('login/findImageCode', object).then(res => {
console.log(res);
//打印请求返回的数据
}, error => {
console.log(error);
})
},
methods: {
}
}
</script>
<style>
@import url("index.css");
</style>
import Vue from 'vue'
import App from './App'
import http from './common/http.js'
Vue.config.productionTip = false
//当前时间
Vue.prototype.now = Date.now || function() {
return new Date().getTime();
};
//请求接口
Vue.prototype.http = http;
//获取缓存中用户的token
Vue.prototype.token = uni.getStorageSync("token");
//获取用户信息
Vue.prototype.userInfo = uni.getStorageSync("userInfo");
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
解决跨域问题
"h5" : {
"devServer" : {
"inline":false,
"port" : 8080,
"host" : "0.0.0.0",
"disableHostCheck" : true,
"proxy" : {
"/videoapi" : {
"target" : "http://10.92.1.17:6601/",
"changeOrigin" : true,
"secure" : false,
"pathRewrite":{"^/dpc":""}
}
}
},
"router" : {
"mode" : "history"
},
"optimization" : {
"treeShaking" : {
"enable" : true
}
}
}
uniapp 初始化项目的更多相关文章
- 使用node初始化项目
初始化项目 在建项目的时候经常会建很多文件夹和文件,今天使用node初始化项目自动生成这些内容. 执行步骤 执行命令 node init 初始化项目生成package.json 设置配置文件 var ...
- vue初始化项目,构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
- Git帮助之初始化项目设置向导
初始化项目设置向导 Git设置: git config --global user.name "Your Name Here" # 设置Git提交时的默认用户名,推荐使用本站用户名 ...
- 一步步建立 Vue + Cesium 初始化项目
一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...
- react native初始化项目
打开命令行窗口,进入我们想要创建项目的父目录,输入命令: npm install -g yarn react-native-cli react-native init 项目名 进入新建的项目目录,执行 ...
- git初始化项目 以及 git常用操作
初始化项目 $ git config --global user.name "Your Name" 配置用户名 $ git config --global user.email ...
- Git 初始化项目、创建合并分支、回滚等常用方法总结
就在刚才查看资料时候, 看见一句话, 写的特别好: 当我的才华撑不起我的梦想的时候, 应该安静下来学习 配上我最喜欢动漫的一个角色: 红莲 1. Git 初始化项目 1). 创建新的知识库 echo ...
- 初探angluar_01 目录结构分析及初始化项目
简单说明:angular是模块化的,因此所有功能功能都属于组件 一.目录结构 e2e 端到端的测试目录 用来做自动测试的 node_modules 安装地依赖存放目录,package.json里安装 ...
- React Native 0.56.1初始化项目运行出现错误(Module `AccessibilityInfo` does not exist in the Haste module map)
当使用react-native init myApp初始化项目时,出现以下错误 出现以上错误的原因是因为0.56.1版本初始化项目就有问题,请见 https://github.com/facebook ...
随机推荐
- Python 实现类似range函数
需求:写一个属于你自己的 frange函数,frange与range类似,一样的参数规则,但是每一项必须要是float类型 实现: 注意点,如何判断stop是否有参数传入,这里使用空字符判断,如fra ...
- 永久免费云服务器搭建国内Moon服务加速ZeroTier
ZeroTier One本身的服务器都在国外访问速度很慢.可以通过搭建国内Moon服务加速解决连接慢的问题. 但是需要有固定外网IP的服务器,可以注册sanfengyun账号申请免费云服务器. 下面是 ...
- C语言-整数类型
C语言-整数类型 整数类型 Reg为寄存器 字长,是说这个寄存器是多少宽的,每个寄存器可以表示32bit数据,也是说CPU与RAM每一次传递的数据也是32bit 计算机内部一切都是二进制 所有的类型, ...
- 三十九、SAP中多语言的处理
一.点击菜单翻译 二.选择目标语言 三.输入需要翻译的内容,并保存 四.我们切换到英语模式登录 五.查看我们的代码 六.输出结果如下,多语言特征就显示了
- 135-PHP final类和方法都是不可被继承或覆盖的
<?php final class final_class{ //定义final修饰的类 } class myclass extends final_class{ //试图继承final修饰的类 ...
- 16 协程和www
1.一个应用程序一般对应一个进程,一个进程一般有一个主线程,还有若干个辅助线程,线程之间是平行运行的,在线程里面可以开启协程,让程序在特定的时间内运行.2协程和线程的区别是:协程避免了无意义的调度,由 ...
- Elasticsearch 过滤
章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...
- Bean XML 配置(3)- 依赖注入配置
Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...
- Android数据库(sqlite)之Room
说在前面: 1.使用Room需要添加的依赖: dependencies { def room_version = "2.2.3" implementation "andr ...
- 大数据高可用集群环境安装与配置(07)——安装HBase高可用集群
1. 下载安装包 登录官网获取HBase安装包下载地址 https://hbase.apache.org/downloads.html 2. 执行命令下载并安装 cd /usr/local/src/ ...