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. Java If ... Else

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  2. go_http

    httpSvr // HandleFunc registers the handler function for the given pattern // in the DefaultServeMux ...

  3. 印度第一颗CPU横空出世!阵势庞大

    我们忙着推进国产芯片的同时,隔壁的印度也没闲着.作为印度顶级高校的印度理工学院(IIT)之马德拉斯校区已经发布了其首颗处理器“Shakti”(代表女性力量的印度神话人物)的SDK软件开发包,并承诺会很 ...

  4. 三十一、SAP中的循环和判断图标和表格的混用

    一.代码如下 二.显示结果如下

  5. StackExchange.Redis.DLL 操作redis加强版

    直接引用StackExchange.Redis.dll这一个dll来操作redis App.config配置 <?xml version="1.0" encoding=&qu ...

  6. ubuntu12.04 eclipse安装PyDev

    在ubuntu软件中心安装的eclipse版本为3.7,install new software时,搜索出来的PyDev版本较高(5.6...): 高版本的PyDev要求较高版本的eclipse.详情 ...

  7. Compare/ContrastEssay你真的会写了吗?

    Compare/Contrast Essay也是留学生们常遇到的一种作业类型,但是很多留学生不知道怎么写.本文HotEssay为大家整理了Compare/Contrast Essay写作方法,希望对大 ...

  8. Bulma CSS - 开始

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 有数种方法可以 ...

  9. 第一篇web框架

    第一篇web框架 http协议 web应用和web框架 主 文 http协议 HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维 ...

  10. 51NOD1050 循环数组最大字段和

    N个整数组成的循环序列a11,a22,a33,…,ann,求该序列如aii+ai+1i+1+…+ajj的连续的子段和的最大值(循环序列是指n个数围成一个圈,因此需要考虑an−1n−1,ann,a11, ...