送菜网站制作,有做销售产品的网站,房房网,国外校园网站网站建设发展历程前提#xff1a;后端jar环境、Vue3环境、Redis环境
搭建页面#xff08;html标签、css样式#xff09; → 绑定数据与事件#xff08;表单校验#xff09; → 调用后台接口#xff08;接口文档、src/api/xx.js封装、页面函数中调用#xff09; Login.vue文件#xff…前提后端jar环境、Vue3环境、Redis环境
搭建页面html标签、css样式 → 绑定数据与事件表单校验 → 调用后台接口接口文档、src/api/xx.js封装、页面函数中调用 Login.vue文件
script setup
import { User, Lock } from element-plus/icons-vue;
import { ref } from vue;
//控制注册与登录表单的显示 默认false显示登录 true时显示注册
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 rules {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 registerasync(){// registerData是一个响应式对象如果要获取值需要.valuelet resultawait userRegisterService(registerData.value);if(result.code0){alert(result.msg?result.msg:注册成功);}else{alert(注册失败)}
}
/scripttemplate
!-- 登录和注册是同一个页面 --el-row classlogin-pageel-col :span12 classbg/el-colel-col :span6 :offset3 classform
!-- 注册表单 --el-form refform sizelarge autocompleteoff v-ifisRegister :modelregisterData :rulesrulesel-form-itemh1注册/h1/el-form-item!-- 用户名 --el-form-item propusernameel-input :prefix-iconUser placeholder请输入用户名 v-modelregisterData.username/el-input/el-form-item!-- 密码 --el-form-item proppasswordel-input :prefix-iconLock typepassword placeholder请输入密码 v-modelregisterData.password /el-input/el-form-item!-- 确认密码 --el-form-item proprePasswordel-input :prefix-iconLock typepassword placeholder请输入再次密码 v-modelregisterData.rePassword /el-input/el-form-item
!-- 注册按钮 --el-form-itemel-button classbutton typeprimary auto-insert-space clickregister注册/el-button/el-form-itemel-form-item classflexel-link typeinfo :underlinefalse clickisRegister false← 返回/el-link/el-form-item/el-form!-- 登录表单 --!-- 登录按钮 --/el-col/el-row
/templatestyle langscss 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
api文件夹下的user.js
// 导入request.js请求工具
import request from /utils/request.js
//提供调用注册接口的函数
export const userRegisterService(registerData){// 借助于URLsearchParams完成传递const paramsnew URLSearchParams()for(let key in registerData){params.append(key,registerData[key]);}return request.post(/user/register,params);
}
解决跨域问题解决浏览器的同源策略限制向不同源发送Ajax请求会失败 使用配置代理
①utils文件夹下的request.js文件
//定制请求的实例//导入axios npm install axios
import axios from axios;
//定义一个变量,记录公共的前缀 , baseURL
const baseURL /api;
const instance axios.create({baseURL})//添加响应拦截器
instance.interceptors.response.use(result{return result.data;},err{alert(服务异常);return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;//向外暴露
②修改vite.config.js
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import path from node:path// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},server:{proxy:{/api:{//获取路径中包含/api的请求target:http://localhost:9999,//后台服务所在的源changeOrigin:true,//修改源rewrite:(path)path.replace(/^\/api/,)//将/api替换为空字符串}}}
})
