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
            }
        }
    }

原文地址:https://www.cnblogs.com/liushuchen/p/11822987.html

时间: 2024-10-19 23:15:37

uniapp 初始化项目的相关文章

swift项目第二天:初始化项目

初始化项目 项目的部署版本 之后项目会运行在哪些系统中 横竖屏的支持 iPhone应用一般只支持横屏 iPhone游戏一般支持竖屏 iPad横竖屏都支持 设置项目的图标和启动图片 项目的图标(美工做好) 项目的启动图片(美工做好) 修改项目的名称 Bundle Display Name 项目的目录结构 项目最外层是UITabbarController 微博包含:主页/消息/发现/我/发表微博 并且控制器都是UITableViewController 1:项目会运行在哪些系统中

利用node、express初始化项目

前端做整站是开发,例如:前端是用了vue创建初始化项目,后端我们不会php.java等,我们只能用node去创建去做后端代码,本文就给大家讲解最基础的从零开始创建一个项目的后端环境. 一般来说前后端代码肯定是分离的,但是也有不分离的情况例如jsp代码,本文讲解前后端分离的情况. 前后端项目分离,这样后端的项目创建就不需要在前端的代码里,相当于是两个独立的工程. 一:首先全局安装Node的express 框架 当然安装过的就不需要在执行这个步骤了. cnpm i -g express-genera

struct结构体指定初始化项目

标准C的标记化结构初始化语法在标准C中(C89)结构标准初始化是用{}来实始化,在C99的版本,采用了采用可读性更强的标记化实始化,这在LINUX内核和驱动很为常见.这是ISOC99的用法CPrimer Plus第五版中相关章节:已知一个结构,定义如下struct book { char title[MAXTITL]; char author[MAXAUTL]; float value;};C99支持结构的指定初始化项目,其语法与数组的指定初始化项目近似.只是,结构的指定初始化项目使用点运算符和

一、【用django2.0来开发】 环境部署和初始化项目

一.[用django2.0来开发] 环境部署和初始化项目 发现网上没有什么比较好的django系列的教程, 所以打算写一整套教程来教会大家如何使用django2.0 整个教程都会围绕一个开发一个项目来完成, 这一篇主要就是讲清楚整个环境以及初始化下项目, 以及一些开发中常见的操作项目地址:https://gitee.com/ccnv07/django_example 项目介绍 大概就是使用python开发一个cms系统, 和大家知道的dede,phpcms有些类似, 可以注册.登录.有会员系统.

使用@vue/cli初始化项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它.附上vue-cli官方文档地址 首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为 node --version 1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行 npm insta

wepy初始化项目

原文链接:https://segmentfault.com/a/1190000015698803 1.初始化wepy项目 安装脚手架 npm install -g wepy-cli wepy init standard my-project 切换至项目目录 初始化项目 npm install 开启实时编译 wepy build --watch 2.小程序生命周期 onLoad: 页面加载 一个页面只会调用一次. 接收页面参数 可以获取wx.navigateTo和wx.redirectTo及<na

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

Git 初始化项目 创建新的Git仓库 echo "# git_project" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/cjunn/git_project.git git push -u origin master 提交记录 git add . 或者 git add test

1 Angular 2 初始化项目配置

AngularJS2是一款JavaScript的开源框架,用于协助单一页面应用程序运行.AngularJS2 是 Angular 1.x 的升级版本,应Web的进化和前端开发的变革还有从Angular 1.x中得到的教训,性能上得到显著的提高,能很好的支持 Web 开发组件.AngularJS2 发布于2016年9月份,它是基于ES6来开发的,用ES2016的超集(TypeScript)编写的,但是Angular 2 也允许开发者用自己喜欢的语言去写代码,如果不喜欢对代码做预编译处理并且想简单构

初始化项目

项目的部署版本 之后项目会运行在哪些系统中 横竖屏的支持 iPhone应用一般只支持横屏 iPhone游戏一般支持竖屏 iPad横竖屏都支持 设置项目的图标和启动图片 项目的图标(美工做好) 项目的启动图片(美工做好) 修改项目的名称 Bundle Display Name 项目的目录结构 项目最外层是UITabbarController 微博包含:主页/消息/发现/我/发表微博 并且控制器都是UITableViewController