Vue+SpringBoot项目开发：登录页面美化，登录功能实现（三）

news2024/10/2 14:27:27 
写在开始:一个搬砖程序员的随缘记录

上一章写了从零开始Vue+SpringBoot后台管理系统：Vue3+TypeScript项目搭建

Vue+TypeScript的前端项目已经搭建完成了

这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联，实现一个登陆的功能，跳转到首页

现在前端项目的一个结构目录

文章目录

  • 一、引入element-plus
    • 1、登录页面构建
    • 2、登录页面加入校验
  • 二、引入axios
    • 1、下载axios
    • 2、配置axios
    • 3、请求后端数据跨域处理
    • 4、首页
    • 5、实现登录

一、引入element-plus

npm i element-plus

在src/main.js中加入element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

1、登录页面构建

修改登陆页面src/views/Login.vue

<template>
  <el-form ref="form" :model="loginUser" label-width="55px" class="loginForm">
    <h3 class="login_title">登录</h3>
    <el-form-item label="用户名">
      <el-input v-model="loginUser.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="loginUser.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none">登录</el-button>
    </el-form-item>
  </el-form>
</template>


<script lang="ts">
import { reactive } from 'vue'

export default {
  name: 'Login',
  setup() {
    // 表单字段
    const loginUser = reactive({
      username: '',
      password: ''
    })
    return { loginUser }
  },
}
</script>

<style>
.loginForm {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

</style>

运行项目可以看到现在的登录界面算比较美观了
在这里插入图片描述

2、登录页面加入校验

现在给登录页面表单添加简单的校验规则
关键点：

script部分
在这里插入图片描述

template部分
在这里插入图片描述
加入表单校验Login.vue完整代码

<template>
  <el-form ref="form" :model="loginUser" :rules="rules" label-width="55px" class="loginForm">
    <h3 class="login_title">登录</h3>
    <el-form-item label="账号" prop="username">
      <el-input v-model="loginUser.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="loginUser.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none">登录</el-button>
    </el-form-item>
  </el-form>
</template>


<script lang="ts">
import { reactive } from 'vue'

export default {
  name: 'Login',
  setup() {
    // 表单字段
    const loginUser = reactive({
      username: '',
      password: ''
    })

    //登录表单校验
    const rules = reactive({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ]
    })
    return { loginUser, rules }
  },
}
</script>

<style>
.loginForm {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

</style>

登录页面效果
在这里插入图片描述

二、引入axios

1、下载axios

npm i axios

2、配置axios

在src下新建api文件夹，在api文件夹下新建request.ts

import axios,{InternalAxiosRequestConfig,AxiosResponse} from 'axios'
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'

let loading:any;
const startLoading = () =>{
    interface Options{
        lock: boolean;
        text: string;
        background: string;
    }
    const options:Options = {
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
    }
    loading = ElLoading.service(options)
}
const endLoading = ()=>{
    loading.close()
}


// 请求拦截
axios.interceptors.request.use((config:InternalAxiosRequestConfig<any>)=>{
    // 开始Loading
    startLoading()
    return config
})

//请求响应拦截
axios.interceptors.response.use((res:AxiosResponse<any, any>)=>{
    endLoading()
    // 成功直接返回响应数据
    if(res.status === 200){
        return res.data
    }
},error=>{
    endLoading()
    const { response: res } = error
    const msg = typeof res.data === 'string' ? res.data: res.data.error || '请求错误，请稍后重试'
    ElMessage.error(msg)
    // 错误提醒
    return Promise.reject(error)
})

export default axios

在main.ts中引入axios，全局挂载axios
在这里插入图片描述
main.ts完整代码

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-plus
import ElementPlus from 'element-plus'
// 引入element-plus样式
import 'element-plus/dist/index.css'
// 引入axios
import axios from '@/api/request'

const app = createApp(App)
// 全局挂载axios
app.config.globalProperties.$axios = axios
app.use(router)
app.use(ElementPlus)
app.mount('#app')

3、请求后端数据跨域处理

在项目根目录新建 vue.config.js 文件

module.exports = {
    devServer: {
        open: true,
        //前端项目域名
        host: 'localhost',
        //前端项目端口
        port: 8081,
        https: false,
        //配置跨域
        proxy: {
            '/api': {
                //后端项目请求接口地址
                target: 'http://localhost:8082/api/',
                //如果要代理 websockets，配置这个参数
                ws: true,
                //允许跨域
                changOrigin: true,
                pathRewrite: {
                    //请求的时候使用这个api就可以
                    '^/api': ''
                }
            }

        }
    }
}

4、首页

在src/views下新建首页页面Home.vue

<template>
    <div>首页</div>
</template>

<script>
    export default {
        name: 'Index'
    }
</script>

5、实现登录

加入请求登录方法

在页面中点击登录按钮时请求登录方法
在这里插入图片描述

登录方法代码

const login = () => {
      proxy.$axios({
        url: '/api/user/login',
        method: 'post',
        data: loginUser
      }).then((res: any) => {
        if (res.code == 200) {
          proxy.$message({
            message: '登录成功',
            type: 'success'
          })
          router.push('/home')
        } else {
          proxy.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
      console.log('login')
    }

Login.vue整体代码

<template>
  <el-form ref="form" :model="loginUser" :rules="rules" label-width="55px" class="loginForm">
    <h3 class="login_title">登录</h3>
    <el-form-item label="账号" prop="username">
      <el-input v-model="loginUser.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="loginUser.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="login()">登录</el-button>
    </el-form-item>
  </el-form>
</template>


<script lang="ts">
import {reactive, getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'

export default {
  name: 'Login',
  setup() {
    // @ts-ignore
    const {proxy} = getCurrentInstance()
    // 表单字段
    const loginUser = reactive({
      username: '',
      password: ''
    })

    //登录表单校验
    const rules = reactive({
      username: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
        {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
      ],
      password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
      ]
    })

    const router = useRouter()

    const login = () => {
      proxy.$axios({
        url: '/api/user/login',
        method: 'post',
        data: loginUser
      }).then((res: any) => {
        if (res.code == 200) {
          proxy.$message({
            message: '登录成功',
            type: 'success'
          })
          router.push('/home')
        } else {
          proxy.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
      console.log('login')
    }

    return {loginUser, rules, login}
  },
}
</script>

<style>
.loginForm {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 35px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

登录成功然后跳转到首页的功能就实现了

Over

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LVGL学习笔记 28 - 键盘keyboard

LVGL学习笔记 28 - 键盘keyboard

目录 1. 设置关联文本框 2. 设置模式 2.1 LV_KEYBOARD_MODE_TEXT_LOWER 2.2 LV_KEYBOARD_MODE_TEXT_UPPER 2.3 LV_KEYBOARD_MODE_SPECIAL 2.4 LV_KEYBOARD_MODE_NUMBER 2.5 LV_KEYBOARD_MODE_USER_1 ~ LV_KEYBOARD_MODE_USER_4 3. 使能弹窗模式 4. 更改按键布局 5. 事…
阅读更多...
uniapp----分包

uniapp----分包

系列文章目录 uniapp-----封装接口 uniapp-----分包 目录 系列文章目录 uniapp-----封装接口 uniapp-----分包 前言 二、使用步骤 1.创建文件 ​编辑 2.min.js的修改 2.1 subPackages 代码如下&#xff08;示例&#xff09;&#xff1a; 2.2 preloadRule 代码如下&am…
阅读更多...
第一次PR经历

第一次PR经历

第一次PR测试地址&#xff1a;https://github.com/firstcontributions/first-contributions说明文档&#xff1a; https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md
阅读更多...
SAP MM学习笔记17-在库品目评价中的标准原价 S 和移动平均价格 V

SAP MM学习笔记17-在库品目评价中的标准原价 S 和移动平均价格 V

SAP中有2种价格&#xff0c;标准原价 S 和 移动平均价格 V。 1&#xff0c;标准原价 S 2&#xff0c;移动平均价格 V 在MM03 会计1 Tab中&#xff0c;现行评价区域中&#xff0c;有原价管理区分。 比如下面这个物料 100-100&#xff0c; 它的原价管理区分是 S。 它的合计额…
阅读更多...
在Vue中动态引入图片为什么要用require

在Vue中动态引入图片为什么要用require

静态资源和动态资源 静态资源 动态的添加src 动态资源 我们通过网络请求从后端获取的资源 动态的添加src会被当成静态资源 动态的添加src最终会被打包成&#xff1a; 动态的添加图片最会会被编译成一个静态的字符串&#xff0c;然后再浏览器运行中会去项目中查找这个资源…
阅读更多...
ucharts-地图

ucharts-地图

以唐山地图为例&#xff1a; 先去找需要的区域入下图&#xff0c;会得到一堆的经纬度&#xff0c;我把他它放到静态文件里&#xff0c;需要的是它的features <template><view class"charts-box"><qiun-data-charts type"map":opts"o…
阅读更多...
Redis中的数据类型

Redis中的数据类型

Redis中的数据类型 Redis存储的是key-value结构的数据&#xff0c;其中key是字符串类型&#xff0c;value有5种常用的数据类型: 字符串string哈希hash列表list集合set有序集合sorted set
阅读更多...
【24择校指南】温州大学计算机考研考情分析

【24择校指南】温州大学计算机考研考情分析

温州大学(C) 考研难度&#xff08;☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分数人数统计&#xff09;、院校概况、23专业目录、23复试详情、各科目以及各专业考情分析。 正文1349字&#xff0c;预计阅读&#xff1a;3分钟。 2023考情概况 温州…
阅读更多...
Tomcat的一些配置问题(server.xml/catalina.sh)

Tomcat的一些配置问题(server.xml/catalina.sh)

在同一机器中运行多个Tomcat时&#xff0c;如果不修改server.xml的端口参数&#xff0c;会出现端口冲突使得Tomcat异常&#xff1b;Tomcat默认配置中&#xff0c;JAVA_OPTS不会设置太大&#xff0c;一般需要在catalina.sh中增加一行配置来加大该参数值。 目录 1.Server.xml配置…
阅读更多...
监控Kubernetes 控制面组件的关键指标

监控Kubernetes 控制面组件的关键指标

控制面组件的监控&#xff0c;包括 APIServer、Controller-manager&#xff08;简称 CM&#xff09;、Scheduler、etcd 四个组件。 1、APIServer APIServer 的核心职能是 Kubernetes 集群的 API 总入口&#xff0c;Kube-Proxy、Kubelet、Controller-Manager、Scheduler 等都需…
阅读更多...
【Java 回忆录】Java全栈开发笔记文档

【Java 回忆录】Java全栈开发笔记文档

这里能学到什么&#xff1f; 实战代码文档一比一记录实战问题和解决方案涉及前端、后端、服务器、运维、测试各方面通过各方面的文档与代码&#xff0c;封装一套低代码开发平台直接开腾讯会议&#xff0c;实实在线一起分享技术问题核心以 Spring Boot 作为基础框架进行整合后期…
阅读更多...
怎么学习AJAX相关技术？ - 易智编译EaseEditing

怎么学习AJAX相关技术？ - 易智编译EaseEditing

学习AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;相关技术可以让你实现网页的异步数据交互&#xff0c;提升用户体验。以下是一些学习AJAX技术的步骤和资源&#xff1a; HTML、CSS和JavaScript基础&#xff1a; 首先&#xff0c;确保你已经掌握了基本的HTML…
阅读更多...
从源代码编译构建Hive3.1.3

从源代码编译构建Hive3.1.3

从源代码编译构建Hive3.1.3 编译说明编译Hive3.1.3更改Maven配置下载源码修改项目pom.xml修改hive源码修改说明修改standalone-metastore模块修改ql模块修改spark-client模块修改druid-handler模块修改llap-server模块修改llap-tez模块修改llap-common模块 编译打包异常集合异常…
阅读更多...
Rest 优雅的url请求处理风格及注意事项

Rest 优雅的url请求处理风格及注意事项

&#x1f600;前言 本篇博文是关于Rest 风格请求的应用和注意事项&#xff0c;希望能够帮助到您&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您…
阅读更多...
DC-DC拓扑

DC-DC拓扑

任何电子产品都离不开电源的设计&#xff0c;其中DCDC是使用频率最高的。 DCDC共分三种&#xff0c;降压电路&#xff0c;升压电路&#xff0c;升降压电路,常用的是前两种。 BUCK: 此拓扑结构几乎是所有DCDC降压电路的模型 原理分析&#xff1a; 1、开关管导通时&#xff0…
阅读更多...
湘大 XTU OJ 1256 湘潭大学 题解（非常详细）：枚举

湘大 XTU OJ 1256 湘潭大学 题解（非常详细）：枚举

一、链接 1256 湘潭大学 二、题目 题目描述 湘潭大学简称“XTU”&#xff0c;作为即将成为湘大的一份子&#xff0c;怎么不能为湘大添砖加瓦了&#xff1f;现在给你一个字符串&#xff0c;请你计算一下&#xff0c;从中选取字符&#xff0c;最多能组成多少个“XTU”&#x…
阅读更多...
手动实现 Spring 底层机制 实现任务阶段一编写自己 Spring 容器-准备篇【2】

手动实现 Spring 底层机制 实现任务阶段一编写自己 Spring 容器-准备篇【2】

&#x1f600;前言 手动实现 Spring 底层机制的第2篇 实现了任务阶段一编写自己 Spring 容器-准备篇【2】 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的…
阅读更多...
【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 39页论文及python代码

【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 39页论文及python代码

【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 39页论文及python代码 1 题目 B 题 不透明制品最优配色方案设计 日常生活中五彩缤纷的不透明有色制品是由着色剂染色而成。因此&#xff0c;不透明制品的配色对其外观美观度和市场竞争力起着重要作用。…
阅读更多...
小白进行桌面端程序自动化测试

小白进行桌面端程序自动化测试

步骤 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Diagnostics; using System.Drawing; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading.Ta…
阅读更多...
Vue 3.0中的Treeshaking？

Vue 3.0中的Treeshaking？

1.treeshaking是什么&#xff1f; Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术&#xff0c;专业术语叫 Dead code elimination 简单来讲&#xff0c;就是在保持代码运行结果不变的前提下&#xff0c;去除无用的代码 如果把代码打包比作制作蛋糕&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023