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】【反射】反射实现判断发生了修改操作,判断两个对象是否发生属性值的变更,判断两个List集合内对象的属性值是否发生变更

    java的反射实现: 判断发生了修改操作,判断两个对象是否发生属性值的变更,判断两个List集合内对象的属性值是否发生变更 今日份代码: package com.sxd.streamTest; imp ...

  2. 11.swoole学习笔记--进程信号触发器

    <?php //触发函数--异步执行 swoole_process::signal(SIGALRM,function(){ ; echo "$i \n"; $i++; ){ ...

  3. Django——优美的Path()函数

    path( )作用:解析URL地址 path( ) 标准语法: (<>为必须的参数,[]为可选参数) path(<route>, <view>, [name=Non ...

  4. 4. Retrieving a mapper(检索映射器)

    Retrieving a mapper(检索映射器) 4.1. The Mappers factory(映射工厂) 可以通过 org.mapstruct.factory.Mappers 类检索映射器实 ...

  5. Spring Boot Hello World (restful接口)例子

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  6. Bean XML 配置(4)- 自动装配

    Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...

  7. hdu 1075 What Are You Talking About 火星文翻译成英文

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  8. Inheritance and the prototype chain 继承和 原型 链

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Inherita ...

  9. StarUML 3.0.2安装激活

    文章参考:https://blog.csdn.net/sam_shan/article/details/80585240 1.下载StarUML:http://staruml.io/,一直下一步安装. ...

  10. 修改虚拟机ip

    在命令行里输入:more  /etc/sysconfig/network-scripts/ifcfg-eth0 (注意more后要空一格,还有eth0,最后是数字零).  然后再输入:ifconfig ...