注册-前端部分

前提:后端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 register=async()=>{// registerData是一个响应式对象,如果要获取值,需要.valuelet 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 ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules"><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-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>

api文件夹下的user.js:

// 导入request.js请求工具
import request from '@/utils/request.js'
//提供调用注册接口的函数
export const userRegisterService=(registerData)=>{// 借助于URLsearchParams完成传递const params=new 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:url'import { 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替换为空字符串}}}
})

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/754344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CUDA学习笔记07:shared memory Code

参考视频 宝藏up主&#xff01;CUDA编程模型系列七(利用shared memory优化矩阵转置)_哔哩哔哩_bilibili 代码 #define BLOCK_SIZE 32 #define M 3000 #define N 1000__managed__ int matrix[N][M]; __managed__ int gpu_matrix[M][N]; __managed__ int cpu_matrix[M][N];__g…

阻抗控制理解

阻抗控制不是控制机器人位置或力&#xff0c;而是旨在塑造两者之间的动态关系 [4] , [5]&#xff0c;从而隐式控制与人类或环境交换的能量并防止不安全的相互作用。这允许安全地处理任务的所有部分&#xff0c;包括自由运动、运动学约束运动和动态约束运动&#xff0c;就像人机…

代码随想录算法训练营第二十五天|39. 组合总和、40.组合总和II、131.分割回文串

文档讲解&#xff1a;39. 组合总和、40.组合总和II、131.分割回文串 题目链接&#xff1a;39. 组合总和、40.组合总和II、131.分割回文串 216.组合总和III class Solution {List<List<Integer>> res new ArrayList<>();List<Integer> path new Arra…

CentOS的安装

一、打开VMware的WorkStation的软件界面。点击创建新的虚拟机。 二、我们选择自定义&#xff0c;下一步。 三、这个界面不用动&#xff0c;直接进入下一步。 四、点击稍后安装操作系统&#xff0c;下一步。 五、选择Linux操作系统&#xff0c;版本为CentOS 7 64位。 六、虚拟机…

web集群(haproxy负载均衡+keepalived高可用)

web集群(haproxy负载均衡keepalived高可用) 主机名主机IP地址lvs1haproxykeepalived192.168.88.38proxyhaproxykeepalived192.168.88.66web1nginx192.168.88.10web2nginx192.168.88.20 配置lvs1&#xff0c;proxy 安装haproxy [rootlvs1 ~]# yum -y install haproxy [rootl…

Day69:WEB攻防-Java安全JWT攻防Swagger自动化算法签名密匙Druid泄漏

目录 Java安全-Druid监控-未授权访问&信息泄漏 黑盒发现 白盒发现 攻击点 Java安全-Swagger接口-导入&联动批量测试 黑盒发现 白盒发现 自动化发包测试 自动化漏洞测试 Java安全-JWT令牌-空算法&未签名&密匙提取 识别 JWT 方式一&#xff1a;人工识…

前端 -- 基础 表单标签 -- 表单域

表单域 # 表单域是一个包含 表单元素 的区域 在 HTML 标签中&#xff0c; <form> 标签 用于定义表单域&#xff0c; 以实现用户信息的收集和传递 简单通俗讲&#xff0c; 就是 <form> 会把它范围内的表单元素信息提交给后台&#xff08;服务器) 对于上面讲…

24计算机考研调剂 | 【官方】桂林理工大学(11自命题、22自命题)

桂林理工大学信息工程与科学学院招收调剂 考研调剂补充信息 一、招收专业 计算机科学与技术&#xff08;学硕&#xff09;、软件工程&#xff08;学硕&#xff09;、计算机技术&#xff08;专硕&#xff09;、人工智能&#xff08;专硕&#xff09;、软件工程&#xff08;专…

php版本的AI电话机器人系统有哪些优势

PHP版本的AI电话机器人系统具有以下优势&#xff1a; 提升客户体验&#xff1a;AI电话机器人能够为客户提供724小时的服务&#xff0c;无论何时客户有疑问或需要帮助&#xff0c;都可以得到及时响应1。 提高工作效率和客户满意度&#xff1a;AI电话机器人系统具有智能回答问题…

【Sass】1px分割线 + 缩进分割线

效果图 1. 亮色模式效果 2. 暗色模式效果 设计思路 配色使用grey色 优点&#xff1a;无论在暗色模式还是亮色模式都可以看清楚分割线 使用after,before 伪元素绘制线条&#xff0c;并压缩线条transform: scaleY(.25) 注意事项 必须确保父级有宽高父级定位必须为position: r…

2、RabbitMQ_安装

RabbitMQ安装文档 RabbitMQ官网下载地址&#xff1a;https://www.rabbitmq.com/download.html 1.安装依赖 在线安装依赖环境&#xff1a; yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c kernel-devel m4 ncurses-devel tk tc x…

2025张宇考研数学基础36讲,视频百度网盘+PDF

一、张宇老师全年高数体系&#xff08;听课用书指南&#xff09; 25张宇全程&#xff1a; docs.qq.com/doc/DTmtOa0Fzc0V3WElI 复制粘贴在浏览器上打开&#xff0c;就可以看到2025张宇的全部的啦&#xff01; 一般来说我们把考研数学划分为3-4个阶段&#xff0c;分别是基础阶…

[Django 0-1] Core.Email 模块

Mail 源码分析 模块文件结构 . ├── __init__.py ├── backends │ ├── __init__.py │ ├── base.py │ ├── console.py │ ├── dummy.py │ ├── filebased.py │ ├── locmem.py │ └── smtp.py ├── message.py └── utils.py模…

CSS详细教程

文章目录 前言一、CSS应用方式1.在标签上2.在head标签的style上3.写在文件中 二、选择器1.ID选择器2.类选择器3.标签选择器4.属性选择器5.后代选择器6.样式覆盖 三、CSS样式1.高度和宽度2.块级标签和行内标签转换3.字体颜色/大小/粗细/样式/对齐/边框4.浮动5.背景色6.内边距7.边…

[数据集][目标检测]番茄成熟度检测数据集VOC+YOLO格式277张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;277 标注数量(xml文件个数)&#xff1a;277 标注数量(txt文件个数)&#xff1a;277 标注类别…

IDEA上的Scala环境搭建

Scala环境搭建 一、搭建Scala开发环境 安装Scala编译器 安装scala-2.12.10.msi 检查scala安装情况 在dos窗口输入scala&#xff0c;检查是否能够进入编译器。进行简单的scala命令计算 在IDEA中进行scala编码 File - Settings - Plugins - MarketPlace中搜索scala插件 安…

总结mac下解决matplotlib中文显示问题的几种方法

一、前言&#xff1a; 使⽤matplotlib画图时&#xff0c;由于matplotlib默认没有中⽂&#xff0c;显⽰中文时会出现空⽩⼩⽅块。 二、方法&#xff1a; 2.1 matplotlib中使用SimHei字体 1&#xff09;进入终端后查看matplotlib的字体路径&#xff1a; $ python >>&g…

Mac玩《幻兽帕鲁》为什么打不开D3DMetal?d3d错误怎么办 d3dxl error

我之前发了一篇讲Mac电脑玩Steam热门新游《幻兽帕鲁》的文章&#xff08;没看过的点这里&#xff09;&#xff0c;后来也看到很多朋友去尝试了&#xff0c;遇到了一些问题&#xff0c;无法进入《幻兽帕鲁》游戏&#xff0c;或者是玩的时候卡顿以及出现黑屏&#xff0c;通过我的…

jQuery+CSS3自动轮播焦点图特效源码

jQueryCSS3自动轮播焦点图特效源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 jQueryCSS3自动轮播焦点图特效源码

mac os 配置两个github账号

1. 清空git全局配置的username和email git config --global --unset user.name git config --global --unset user.emailgit config --list 可以查看是否清空了 2. 定义两个标识符,这两个标识符以后会被用来代替“github.com”来使用。 假设两个账号的邮箱地址分别是a@gmai…