Spring Boot 笔记 023 注册页面

这篇具有很好参考价值的文章主要介绍了Spring Boot 笔记 023 注册页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.1 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;

2.1 编写注册接口

Spring Boot 笔记 023 注册页面,Spring Boot,spring boot,笔记,vue.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);
}

3.1 编写页面

3.2 给表单绑定数据

3.3 定义表单校验规则

3.4 调用注册接口

```html
<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 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是一个响应式对象,如果要获取值,需要.value
    let result = await userRegisterService(registerData.value);
    if (result.code === 0) {
        //成功了
        alert(result.msg ? result.msg : '注册成功');
    }else{
        //失败了
        alert('注册失败')
    } 
    //alert(result.msg ? result.msg : '注册成功');
    // ElMessage.success(result.msg ? result.msg : '注册成功')
}

</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-form ref="form" size="large" autocomplete="off" v-else>
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></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>
```

3.1 跨域问题

Spring Boot 笔记 023 注册页面,Spring Boot,spring boot,笔记,vue.js

Spring Boot 笔记 023 注册页面,Spring Boot,spring boot,笔记,vue.js

Spring Boot 笔记 023 注册页面,Spring Boot,spring boot,笔记,vue.js

3.1.1 修改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;

3.1.2 修改vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 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:8080',//后台服务所在的源
          changeOrigin:true,//修改源
          rewrite:(path)=>path.replace(/^\/api/,'')///api替换为''
      }
    }
  }
})

4.1 测试文章来源地址https://www.toymoban.com/news/detail-825336.html

到了这里,关于Spring Boot 笔记 023 注册页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Spring Boot学习】Spring Boot的创建,第一个Spring Boot页面.

    前言: 大家好,我是 良辰丫 ,前面几篇文章,我们系统的学习了Spring框架,今天开始,我们就要学习更高级的SpringBoot框架了,不要着急哦,我们一起畅游SpringBoot框架的世界.💌💌💌 🧑个人主页:良辰针不戳 📖所属专栏:javaEE进阶篇之框架学习 🍎励志语句:生活也许会让我们遍体

    2024年02月08日
    浏览(53)
  • 宿舍管理系统的设计与实现:基于Spring Boot、Java、Vue.js和MySQL的完整解决方案

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月17日
    浏览(51)
  • Spring Boot 中的服务注册是什么,原理,如何使用

    Spring Boot 是一个非常流行的 Java 后端框架,它提供了许多便捷的功能和工具,使得开发者可以更加高效地开发微服务应用。其中,服务注册是 Spring Boot 微服务架构中非常重要的一环。在本文中,我们将深入探讨 Spring Boot 中的服务注册是什么,原理以及如何使用。 服务注册是

    2024年02月12日
    浏览(48)
  • spring boot mybatis plus mapper如何自动注册到spring bean容器

    ##@Import(AutoConfiguredMapperScannerRegistrar.class) ##注册MapperScannerConfigurer ##MapperScannerConfigurer.postProcessBeanDefinitionRegistry方法扫描注册mapper ##找到mapper候选者 ##过滤mapper 类 候选者 ##BeanDefinitionHolder注册到spring 容器

    2024年01月17日
    浏览(47)
  • 在Spring Boot中注册过滤器几种方式

    1. 实现 Filter 接口并使用 @WebFilter 注解:(适用于Servlet API项目) 2. 使用Spring的 FilterRegistrationBean (推荐) 3. 定义为 Spring Bean 并手动配置到 Servlet 容器中 注意:这种方法通常在需要部署为 WAR包 到非嵌入式Servlet容器时采用。而在大多数Spring Boot应用中,建议使用前两种注册过

    2024年01月19日
    浏览(37)
  • spring boot3登录开发-3(2短信验证登录/注册逻辑实现)

      ⛰️个人主页:     蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途 目录 写在前面 上文衔接 内容简介 功能分析 短信验证登录实现 1.创建交互对象 用户短信登录/注册DTO 创建用户登录VO 2.创建自定义业务异常 创建验证码错误异常 创建用户被封禁异

    2024年04月09日
    浏览(43)
  • 自定义错误页面在Spring Boot中的实现

    引言 在SpringBoot中,常用的异常处理有两种:一种是 BasicErrorController ,另一种是 @ControllerAdvice 。 BasicErrorController 用于处理 非Controller 抛出的异常,而 @ControllerAdvice 用于处理 Controller 抛出的异常,对于非Controller抛出的异常它是不会管的。但是,如果是 Controller层 调用Service层

    2024年01月25日
    浏览(42)
  • Spring Boot如何实现分布式系统中的服务发现和注册?

    随着互联网的快速发展,越来越多的企业开始将自己的业务迁移到分布式系统中。在这种情况下,服务发现和注册变得尤为重要。对于分布式系统中的每个服务来说,它需要知道其他服务的位置和状态,这样才能进行通信和协作。Spring Boot提供了一些工具和框架,可以帮助我

    2024年02月07日
    浏览(39)
  • 网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(二)前后端实现用户的登录和注册功能【用户模块】

    1. 用户id 2. 用户名 3. 密码 4. 天梯积分 5. 总场数 6. 获胜场数 和数据库的数据一一对应 1. 连接数据库(application.yml连接数据库) 这个可以直接赋值代码 2. 创建UserMapper的Java接口(interface UserMapper) 创建接口,在UserMapper.xml实现 在model中创建 需要实现@Mapper注释 3. 创建UserMappe

    2024年02月13日
    浏览(49)
  • spring boot + mybatis + websocket + js实战

    项目技术:spring boot + mybatis + websocket + js 需求背景:当添加一个女孩时,页面的socket收到消息,打印最新的所有女生list,这样可以进一步在react/vue前端框架下,实现当A用户新增了某业务数据后,B用户的该业务list页面能自动将最新的业务数据list清单刷新出来,而不是需要点

    2024年01月25日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包