7天毕设速成9小程序接口封装及对接

1.接口封装

1.1.请求接口封装

新建文件夹request,新建index.js,封装接口

接口调用对应此系列，springboot后端搭建笔记https://blog.csdn.net/PoofeeDong/article/details/140695913

代码如下：

const commoneUrl = "http://locahost:9999";//对应前面接口

//get请求封装
function getRequest(url, data) {
  var promise = new Promise((resolve, reject) => {
    var postData = data;
    uni.request({
      url:"api"+ url,
      data: postData,
      method: "GET",
      dataType: 'json',
      header: {
        'content-type': 'application/json',
        token: uni.getStorageSync('token') || ''
      },
      success: function(res) {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          resolve(res.data)
        }
      },
      error: function(e) {
        reject('网络出错');
      }
    });
  });
  return promise;
}
//post请求封装
function postRequest(url, data) {
  var promise = new Promise((resolve, reject) => {
    var postData = data;
    uni.request({
      url:"api"+ url,
      data: postData,
      method: 'POST',
      header: {
        'content-type': 'application/json',
        token: uni.getStorageSync('token') || ''
      },
      success: function(res) {
        if (res.code === 200 && res.code == 0) {
          resolve(res.data);
        } else {
          resolve(res.data)
        }
      },
      error: function(e) {
        reject('网络出错');
      }
    })
  });
  return promise;
}
module.exports = {
  postRequest,
  getRequest
}

1.2.登录注册接口封装

新建api.js

代码如下

// 导入上面封装的请求
const request = require('./index.js') 

// 登录
var userLogin = function(data){
  return request.postRequest('/api/bishe/sysuser/login',data);   
}

// 注册
var userRegist = function(data){
  return request.postRequest('/api/bishe/sysuser/save',data);   
}

// 导出所有的请求方法
module.exports = {
  userLogin,
  userRegist
}

在这里浏览器访问遇到了跨域

更改manifest.json文件配置

// h5 解决跨域问题
	"h5": {
	    "devServer": {
	        "port": 8080,
	        "proxy": {
	            "/api": {
	                "target": "http://localhost:9999",
	                "changeOrigin": true,
	                "pathRewrite": {
	                    "^/api": ""
	                }
	            }
	        }
	    }
	}

2.登录接口对接

完整源码

<template>
	<view class="container">
		<view class="logo">
			<view>
				<image class="logoitem" src="../../static/images/logo.jpg"
				 mode=""></image>
			</view>
			<view class="logo-text">欢迎登录XXX系统</view>
			
		</view>
		<view class="login_item">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change">
			</u-tabs>
			<view class="login margin-b80" v-if="!current">
				<view class="input vs-row vs-align-center margin-b40">
					<image class="input-icon margin-r20" src="../../static/images/用户.png"
					 mode=""></image>
					<input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
					 placeholder-class="input-placeholder"  v-model="login.username"/>
				</view>
				<view class="input vs-row vs-align-center margin-b40">
					<image class="input-icon margin-r20" src="../../static/images/password.png"
					 mode=""></image>
					<input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码"
					 placeholder-class="input-placeholder"  v-model="login.password"/>
				</view>
				<view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b40" @click="tologin()">
					<text class="color-white font-34">立即登录</text>
				</view>
			</view>
			
			<view class="register margin-b80" v-if="current">
				<view class="input vs-row vs-align-center margin-b40">
					<image class="input-icon margin-r20" src="../../static/images/用户.png"
					 mode=""></image>
					<input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
					 placeholder-class="input-placeholder" />
				</view>
				<view class="input vs-row vs-align-center margin-b40">
					<image class="input-icon margin-r20" src="../../static/images/password.png"
					 mode=""></image>
					<input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码"
					 placeholder-class="input-placeholder" />
				</view>
				<view class="input vs-row vs-align-center margin-b40">
					<image class="input-icon margin-r20" src="../../static/images/password.png"
					 mode=""></image>
					<input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请再次输入您的登录密码"
					 placeholder-class="input-placeholder" />
				</view>
				<view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b80">
					<text class="color-white font-34">立即注册</text>
				</view>
				
			</view>
			
			<!-- <view class="vs-row vs-align-center vs-space-center margin-b100">
				<text class="color-base font-28">忘记密码？</text>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	import {userLogin} from '@/request/api.js'
	import {userRegist} from '@/request/api.js'
	export default {
		data() {
			return {
				list: [{
					name: '登录'
				}, {
					name: '注册'
				}],
				current: 0,
				login:{
					username:'',
					password:""
				},
				regist:{
					username:'',
					password:"",
					repassword:''
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			tologin(){
				userLogin(this.login).then(res=>{
					if(res.code==200){
						uni.setStorageSync('token', res.data.username);
						uni.switchTab({
						  url: '../index/index' // 跳转到对应路径的页面
						});
					}
				  console.log('用户信息',res);
				 
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#5064eb;
	}
	.container{padding: 300rpx 30rpx 0 30rpx;}
	.login_item{
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		position: relative;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.login,
	.register {
		padding: 0 60rpx;
	}
	
	.logoitem{
		border-radius: 50%;
		width: 100px;
		height: 100px;
	}
	
	.logo{
		margin-top: -110px;
		margin-bottom: 100px;
		height: 230px;
		text-align: center;
	}
	
	.logo-text{
		color: #ffffff;
		font-size: 19px;
		margin-top: 10px;
	}
	
</style>

3.效果展示

4.附录：uniapp页面跳转方式

1. uni.navigateTo:

用法：uni.navigateTo({ url: '目标页面路径' })

描述：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

示例：uni.navigateTo({ url: '/pages/detail/detail' })

2. uni.redirectTo:

用法：uni.redirectTo({ url: '目标页面路径' })

描述：关闭当前页面，跳转到应用内的某个页面。不可返回到原页面。

示例：uni.redirectTo({ url: '/pages/login/login' })

3. uni.reLaunch:

用法：uni.reLaunch({ url: '目标页面路径' })

描述：关闭所有页面，打开应用内的某个页面。适用于一些非常重要的页面，如应用启动页。

示例：uni.reLaunch({ url: '/pages/index/index' })

4. uni.switchTab:

用法：uni.switchTab({ url: '目标页面路径' })

描述：跳转到应用内的某个tabBar页面，关闭其他所有非tabBar页面。

示例：uni.switchTab({ url: '/pages/home/home' })

5. uni.navigateBack:

• 用法：uni.navigateBack({ delta: 1 })

• 描述：返回上一级页面。参数delta表示返回的层数，默认为1。

• 示例：uni.navigateBack({ delta: 2 })

6.获取跳转页面的参数

navigateTo、redirectTo、reLaunch 的参数传递

• 描述：通过 query 参数传递数据到目标页面。

• 代码示例：

• <template>
    <view>
      <button @click="passData">传递数据到新页面</button>
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      passData() {
        uni.navigateTo({
          url: '/pages/newPage/newPage?param1=value1&param2=value2'
        });
      }
    }
  }
  </script>
  

  获取跳转页面的参数

• 描述：在目标页面的 onLoad 钩子函数中通过 options 获取跳转时传递的参数。

• 代码示例：

• <template>
    <view>
      <text>参数1：{{ param1 }}</text>
      <text>参数2：{{ param2 }}</text>
    </view>
  </template>
  
  <script>
  export default {
    onLoad(options) {
      // 获取跳转时传递的参数
      this.param1 = options.param1 || '';
      this.param2 = options.param2 || '';
    },
    data() {
      return {
        param1: '',
        param2: ''
      };
    }
  }
  </script>
  

  7.其他跳转

1. uni.navigateToMiniProgram：

uni.navigateToMiniProgram 用于跳转到其他小程序。

uni.navigateToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});

2. uni.redirectToMiniProgram：

uni.redirectToMiniProgram 用于关闭当前小程序，跳转到其他小程序。

uni.redirectToMiniProgram({
  appId: 'targetAppId',
  path: 'targetPath',
  extraData: {
    key: 'value'
  },
  success: function () {
    console.log('跳转成功');
  }
});

3. uni.navigateToNative：

uni.navigateToNative 用于跳转到原生页面。

uni.navigateToNative({
  pageName: 'targetPage',
  params: {
    key: 'value'
  }
});