2024/03/20（2024春季）
学习时长：3小时
代码量:370行
博客数量：1篇
今天首先是完成了阶段作业中，注册和登录时的输入字符的限制，这样也可以解决很多后续出错的可能。
regis.setOnClickListener(new View.OnClickListener() { @SuppressLint("SetTextI18n") @Override public void onClick(View v) { if(username_v.getText().toString().isEmpty()) { message_v.setText("用户名不能为空"); return; } if (username_v.getText().toString().length()>20) { message_v.setText("用户名长度超过最大限制（20）"); return; } if(name_v.getText().toString().isEmpty()) { message_v.setText("姓名不能为空"); return; } if (name_v.getText().toString().length()>20) { message_v.setText("姓名长度超过最大限制（20）"); return; } if(phone_v.getText().toString().isEmpty()) { message_v.setText("电话号码不能为空"); return; } if(phone_v.getText().toString().length()!=11) { message_v.setText("电话号码格式不正确"); return; } if (user_class_v.getText().toString().length()>20) { message_v.setText("班级长度超过最大限制（20）"); return; } if(user_class_v.getText().toString().isEmpty()) { message_v.setText("班级不能为空"); return; } if (password_v.getText().toString().length()>20) { message_v.setText("密码长度超过最大限制（20）"); return; } if(password_v.getText().toString().isEmpty()) { message_v.setText("密码不能为空"); return; } if(password2_v.getText().toString().isEmpty()) { message_v.setText("确认密码不能为空"); return; } if(!password_v.getText().toString().equals(password2_v.getText().toString())) { message_v.setText("两次密码不一致"); return; } confirm(); } });
之后就是再次尝试vue来连接后端spring boot，
初步学会使用js的api来完成异步获取。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="https://unpkg.com/axios/dist/axios.min.js"> </script> <script> let dept={ name: 'hh部' } axios({ method:'post', url:'http://localhost:8080/depts', data:dept }) .then(result=> { console.log(result.data.data); }) .catch(err=> { console.log("99999999931"); }); </script> </body> </html>
//定制请求的实例
//导入axios npm install axios
import axios from 'axios';
//配置代理路径
const baseURL = '/api';
//定义一个变量,记录公共的前缀 , baseURL
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
result=>{
return result.data;
},
err=>{
alert('服务异常');
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
export default instance;
//导入request.js工具 import request from '@/util/request.js' //提供调用注册接口的函数 export const userRegisterService=(regiseterData)=>{ //借助urlsearchParams完成传递 const params=new URLSearchParams for(let key in regiseterData){ params.append(key,regiseterData[key]); } return request.post('/user/register'+params); }
<script setup> import { User, Lock } from '@element-plus/icons-vue' import { ref } from 'vue' //控制注册与登录表单的显示， 默认显示注册 const isRegister = ref(false) const registerData = ref({ username: '', password: '', rePassword: '' }) const checkRePassword=(rule,value,callback)=>{ if(value==='') { callback(new Error('请再次确认密码')) }else if(value!==registerData.value.password) { callback(new Error('请确保两次输入的密码一样')) }else{ callback } } const regisRules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' //必须输入，返回信息，校验时机 }, { min:5,max:16,message:'注册的用户名应在5~16位',trigger:'blur'} ], password: [ { required: true, message: '请输入密码', trigger: 'blur' //必须输入，返回信息，校验时机 }, { min:5,max:16,message:'注册的密码应在5~16位',trigger:'blur'} ], rePassword: [ { validator:checkRePassword,trigger:'blur' } ] } //调用后台接口完成注册 import {userRegisterService} from '@/api/user.js' const register= async()=>{ let result=await userRegisterService(registerData.value); if(result.code===0){ alert(result.msg?result.msg:'注册成功'); } else{ alert('注册失败'); } } </script> <template> <el-row class="login-page"> <el-col :span="12" class="bg"></el-col> <el-col :span="6" :offset="3" class="form"> <!-- 注册表单 --> <el-form :rules="regisRules" ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData"> <el-form-item> <h1>注册</h1> </el-form-item> <el-form-item prop="username"> <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> </el-form-item> <el-form-item prop="password"> <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> </el-form-item> <el-form-item prop="rePassword"> <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input> </el-form-item> <!-- 注册按钮 --> <el-form-item> <el-button class="button" type="primary" auto-insert-space @click="register"> 注册 </el-button> </el-form-item> <el-form-item class="flex"> <el-link type="info" :underline="false" @click="isRegister = false"> ← 返回 </el-link> </el-form-item> </el-form> <!-- 登录表单 --> <el-form ref="form" size="large" autocomplete="off" v-else v-model="registerData"> <el-form-item> <h1>登录</h1> </el-form-item> <el-form-item> <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> </el-form-item> <el-form-item> <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input> </el-form-item> <el-form-item class="flex"> <div class="flex"> <el-checkbox>记住我</el-checkbox> <el-link type="primary" :underline="false">忘记密码？</el-link> </div> </el-form-item> <!-- 登录按钮 --> <el-form-item> <el-button class="button" type="primary" auto-insert-space>登录</el-button> </el-form-item> <el-form-item class="flex"> <el-link type="info" :underline="false" @click="isRegister = true"> 注册 → </el-link> </el-form-item> </el-form> </el-col> </el-row> </template> <style lang="scss" scoped> /* 样式 */ .login-page { height: 100vh; background-color: #fff; .bg { background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto, url('@/assets/login_bg.jpg') no-repeat center / cover; border-radius: 0 20px 20px 0; } .form { display: flex; flex-direction: column; justify-content: center; user-select: none; .title { margin: 0 auto; } .button { width: 100%; } .flex { width: 100%; display: flex; justify-content: space-between; } } } </style>
