鸿蒙登录页面
静态结构代码
@Entry
@Component
struct Index {
@State phone:string=''
@State code:string=''
getNum=()=>{return Math.floor(Math.random()*255)}
getRGB=()=>{return `rgb(${this.getNum()},${this.getNum()},${this.getNum()})`}//返回随机颜色
build() {
Column({space:20}) {
Text('租赁系统')
.width('100%')
.textAlign(TextAlign.Center)
.margin({bottom:30})
.fontSize(40)
TextInput({placeholder:'请输入手机号码',text:$$this.phone}).width('100%')
.backgroundColor(Color.White)
Row({space:10}){
TextInput({placeholder:'请输入验证码',text:$$this.code}).layoutWeight(1)
.backgroundColor(Color.White)
Button('获取验证码')
}.width('100%')
Button('登录')
.width('100%')
}
.width('100%')
.padding(20)
.height('100%')
.justifyContent(FlexAlign.Center)
//背景颜色渐变
.linearGradient({
colors:[[this.getRGB(),0.0],[this.getRGB(),0.4]],
repeating:false,
direction:GradientDirection.Bottom
})
}
}
每次读取背景颜色都不同，读者可根据自己兴趣爱好更改代码
编写后端代码
后端代码使用springboot进行开发
使用navicat编写，实体角色user类
编写pojo实体类
package com.example.crm.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.stereotype.Component;
@Data
@NoArgsConstructor
@AllArgsConstructor
@Component
public class User {
Integer id;
String phone;
String password;
String avator;
String nickname;
String state;
}
编写mapper
package com.example.crm.Mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.crm.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Component;
@Mapper
@Component
public interface UserMapper extends BaseMapper<User> {
}
编写控制器
package com.example.house.controller;
import com.example.house.Mapper.UserMapper;
import com.example.house.pojo.User;
import com.example.house.result.AllReturn;
import com.google.gson.Gson;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController
public class LoginController {
@Autowired
AllReturn allReturn;
@Autowired
Gson gson;
@Autowired
UserMapper userMapper;
@Autowired
User user;
@GetMapping("/login")
public String login(@RequestParam String phone,@RequestParam String code){
Map<String,Object> map=new HashMap<>();
map.put("phone",phone);
if(code!="9999"){
allReturn.setMessage("验证码错误");
allReturn.setCode(400);
allReturn.setData(false);
allReturn.setSuccess(true);
}else{
if(!userMapper.selectByMap(map).isEmpty()){
allReturn.setSuccess(true);
allReturn.setData(true);
allReturn.setMessage("已经注册过");
allReturn.setCode(200);
}else {
user.setPhone(phone);
int res=userMapper.insert(user);
if(res>=0){
allReturn.setSuccess(true);
allReturn.setData(true);
allReturn.setMessage("注册成功");
allReturn.setCode(200);
}else {
allReturn.setSuccess(false);
allReturn.setData(false);
allReturn.setMessage("注册失败");
allReturn.setCode(400);
}
}
}
System.out.println(gson.toJson(allReturn));
return gson.toJson(allReturn);
}
}
鸿蒙编写http请求
新建login文件,编写网络请求
import { http } from '@kit.NetworkKit'
import { base_url } from '../constants'
export interface allResponse<T>{
code:number
success:boolean
data:T
message:string
}
let req=http.createHttp()
export const login= async (phone:string,code:string)=>{
let res=await req.request( `${base_url}/login?phone=${phone}&code=${code}`)
let result=res.result as allResponse<boolean>
if(result.success){
return res//登录成功
}else {
return res//登录失败
}
}
建立基地址
添加网络权限
登录页面按钮绑定登录请求，请求成功则跳转到首页
登录成功
uniapp编写登录模块
网络请求编写
import { base_url } from "../constants"
export const login=async (phone,code)=>{
return new Promise((resolve,reject)=>{
uni.request({
url:base_url+'/login?phone='+phone+'&code='+code,
method:'GET',
success: (res)=>{
console.log(JSON.stringify(res))
resolve(res)
},
fail: (err)=>{
console.log(JSON.stringify(err))
reject(err)
}
})
})
}
登录页面编写,成功则跳转到首页
<template>
<view class="content" style="padding: 20rpx;">
<view style="width: 100vw;text-align: center; font-size: 70rpx;">租赁系统</view>
<view style="width: 100vw;">
<input type="text" placeholder="请输入手机号码" v-model="phone" style="background-color: aliceblue;width: 90vw; padding: 20upx;" />
</view>
<view class="code" style="width: 100vw;">
<input type="text" placeholder="请输入验证码" v-model="code" style="background-color: aliceblue;padding: 20upx; width: 65vw;"/>
<button style="width: 20vw;">获取验证码</button>
</view>
<view style="background-color: black;color: white; text-align: center; width: 90vw;padding: 10rpx;"@click="loginIt">登录</view>
</view>
</template>
<script setup>
import { re } from 'mathjs';
import { login } from '../../common/net/login'
import { ref } from 'vue'
let phone=ref('')
let code=ref('')
async function loginIt(){
console.log('phone:',phone.value,'code:'+code.value)
if(phone.value===''){
uni.showToast({
title:'手机号码为空',
duration:2000
})
}else if(code.value===''){
uni.showToast({
title:'验证码为空',
duration:2000
})
}else{
const res= await login(phone.value,code.value)
// res=JSON.parse(res)
// console.log('res:'+JSON.stringify(res))
uni.showToast({
title:'data',
duration:2000,
data:res
})
// console.log('success:'+res.data.success)
if(res.data.success===true){
uni.showToast({
title:'登录成功',
duration:2000,
})
console.log('login success')
//跳转到首页
uni.navigateTo({
url:'/pages/index/index'
})
}else{
uni.showToast({
title:'登录失败',
duration:2000,
})
console.log('login failed')
}
}
}
</script>
<style lang="less">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: aqua;
row-gap: 40rpx;
.code{
display: flex;
flex-direction: row;
column-gap: 10rpx;
align-items: center;
}
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
