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 初始化项目的更多相关文章

  1. 使用node初始化项目

    初始化项目 在建项目的时候经常会建很多文件夹和文件,今天使用node初始化项目自动生成这些内容. 执行步骤 执行命令 node init 初始化项目生成package.json 设置配置文件 var ...

  2. vue初始化项目,构建vuex的后台管理项目架子

    构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...

  3. Git帮助之初始化项目设置向导

    初始化项目设置向导 Git设置: git config --global user.name "Your Name Here" # 设置Git提交时的默认用户名,推荐使用本站用户名 ...

  4. 一步步建立 Vue + Cesium 初始化项目

    一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...

  5. react native初始化项目

    打开命令行窗口,进入我们想要创建项目的父目录,输入命令: npm install -g yarn react-native-cli react-native init 项目名 进入新建的项目目录,执行 ...

  6. git初始化项目 以及 git常用操作

    初始化项目 $ git config --global user.name "Your Name"  配置用户名 $ git config --global user.email ...

  7. Git 初始化项目、创建合并分支、回滚等常用方法总结

    就在刚才查看资料时候, 看见一句话, 写的特别好: 当我的才华撑不起我的梦想的时候, 应该安静下来学习 配上我最喜欢动漫的一个角色: 红莲 1. Git 初始化项目 1). 创建新的知识库 echo ...

  8. 初探angluar_01 目录结构分析及初始化项目

    简单说明:angular是模块化的,因此所有功能功能都属于组件 一.目录结构 e2e 端到端的测试目录  用来做自动测试的 node_modules 安装地依赖存放目录,package.json里安装 ...

  9. 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 ...

随机推荐

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-asterisk

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. 搭建selenium+Python+eclipse 的开发环境

    下载安装Python,下载“python-2.7.9.msi”后可直接安装 下载安装setuptools,下载setuptools-11.3.1后,用命令提示符转到安装包中setup.py所在的位置, ...

  3. JS - 对话框

    1,<span onclick="return confirmAct();">执行操作</span> 2, function confirmAct(){ i ...

  4. 文本编辑器vim/vi——命令模式

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. vim指令: 指令:vim   (vim是一款 ...

  5. Oracle 查询当前用户下的所有表

    select table_name from user_tables;

  6. 045-利用反射机制,简单的实现PHP插件模式

    <?php //利用反射机制,简单的实现PHP插件模式 # 假设,我们有一款开源产品,所有开发者都必须在我定制的需求之上,进行二次开发, # 而开发完成后的新模块,就是一个不一样的新插件,可以放 ...

  7. Essay写作的五大陷阱如何避免?

    相信ESSAY写作对留学生来说印象非常深刻,由于国外不同的教育模式,老师动不动就是一篇essay.可是在大家都拥有相同的GMAT或者GPA以及雅思分数的情况下.大家如何才能够脱颖而出呢?下面BayDu ...

  8. kafka源码系列之mysql数据增量同步到kafka

    一,架构介绍 生产中由于历史原因web后端,mysql集群,kafka集群(或者其它消息队列)会存在一下三种结构. 1,数据先入mysql集群,再入kafka 数据入mysql集群是不可更改的,如何再 ...

  9. UVA - 10689 Yet another Number Sequence (矩阵快速幂求斐波那契)

    题意:已知f(0) = a,f(1) = b,f(n) = f(n − 1) + f(n − 2), n > 1,求f(n)的后m位数. 分析:n最大为109,矩阵快速幂求解,复杂度log2(1 ...

  10. bzoj 3732Network

    先搞个最小生成树,然后lca(和之前的一个cf题差不多2333, 纯属颓废了..) 顺便思考了一下正确性. 因为所求的是所有路径中最大边的最小值.而kruskal每次往里添加的就是最小边.所以在生成树 ...