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¶m2=value2' }); } } } </script>获取跳转页面的参数
-
描述：在目标页面的
onLoad钩子函数中通过options获取跳转时传递的参数。 -
代码示例：
-
<template> <view> <text>参数1：{{ param1 }}</text> <text>参数2：{{ param2 }}</text> </view> </template> <script> export default { onl oad(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'
}
});