Vue+SpringBoot项目开发:登录页面美化,登录功能实现(三)

写在开始:一个搬砖程序员的随缘记录

上一章写了从零开始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>)=>{// 开始LoadingstartLoading()return config
})//请求响应拦截
axios.interceptors.response.use((res:AxiosResponse<any, any>)=>{endLoading()// 成功直接返回响应数据if(res.status === 200){return res.data}
},error=>{endLoading()const { response: res } = errorconst 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-ignoreconst {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.rhkb.cn/news/89007.html

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

相关文章

CSS变形与动画(一):transform变形 与 transition过渡动画 详解(用法 + 代码 + 例子 + 效果)

文章目录 变形与动画transform 变形translate 位移scale 缩放rotate 旋转skew 倾斜多种变形设置变形中心点 transition 过渡动画多种属性变化 变形与动画 transform 变形 包括&#xff1a;位移、旋转、缩放、倾斜。 下面的方法都是transform里的&#xff0c;记得加上。 展示效…

Apache Maven:从构建到部署,一站式解决方案

目录 一、Maven介绍 1. Maven是什么&#xff1f; 2.Maven的作用&#xff1f; 二、Maven仓库介绍 2.1 库的分类 三、Maven安装与配置 3.1 Maven安装 3.2 Maven环境配置 3.3 仓库配置 四、Eclipse与Maven配置 五、Maven项目测试 5.1 新建Maven项目步骤及注意事项 5.…

C/C++test两步完成CMake项目静态分析

您可能一直在静态分析中使用CMake。但您是否尝试过将Parasoft C/Ctest与CMake一起使用吗&#xff1f;以下是如何使用C/Ctest在基于CMake的项目中运行静态分析的详细说明。 CMake是用于构建、测试和打包软件的最流行的工具之一。Parasoft C/Ctest通过简化构建管理过程&#xff…

RabbitMQ基础(2)——发布订阅/fanout模式 topic模式 rabbitmq回调确认 延迟队列(死信)设计

目录 引出点对点(simple)Work queues 一对多发布订阅/fanout模式以登陆验证码为例pom文件导包application.yml文件rabbitmq的配置生产者生成验证码&#xff0c;发送给交换机消费者消费验证码 topic模式配置类增加配置生产者发送信息进行发送控制台查看 rabbitmq回调确认配置类验…

Redis_缓存1_缓存类型

14.redis缓存 14.1简介 穿透型缓存&#xff1a; 缓存与后端数据交互在一起&#xff0c;对服务端的调用隐藏细节。如果从缓存中可以读到数据&#xff0c;就直接返回&#xff0c;如果读不到&#xff0c;就到数据库中去读取&#xff0c;从数据库中读到数据&#xff0c;也是先更…

制造执行系统(MES)在新能源领域的应用

制造执行系统&#xff08;MES&#xff09;在新能源领域有许多应用&#xff0c;特别是在管理、监控和优化新能源生产过程方面。新能源包括太阳能、风能、生物质能、地热能等。以下是一些MES在新能源方面的应用领域&#xff1a; 生产计划与调度&#xff1a;MES可以协助规划和调度…

谷粒商城第十一天-品牌管理中关联分类

目录 一、总述 二、前端部分 1. 调整查询调用 2. 关联分类 三、后端部分 四、总结 一、总述 之前是在商品的分类管理中直接使用的若依的逆向代码 有下面的几个问题&#xff1a; 1. 表格上面的参数填写之后&#xff0c;都是按照完全匹配进行搜索&#xff0c;没有模糊匹配…

计算机网络—HTTP

这里写目录标题 HTTP是什么HTTP常见状态码HTTP常见字段GET与POST的区别Get和Post是安全和幂等吗PUT幂等&#xff0c;不安全DELETE幂等&#xff0c;不是安全 HTTP缓存技术HTTP缓存实现技术 HTTP1.0优缺点和性能HTTP1.1优缺点和性能HTTP2优缺点和性能HTTP3优缺点和性能HTTP和HTTP…

vuex学习总结

一、vuex工作原理 工作流程&#xff1a;需求&#xff1a;改变组件count的sun变量的值&#xff0c;先调用dispatch函数传入jia函数和要改变的值给actions&#xff08;这个actions里面必须有jia这个函数&#xff09;&#xff1b;actions收到后调用commit函数将jia方法和值传给mut…

做BI领域的ChatGPT,思迈特升级一站式ABI平台

8月8日&#xff0c;以「指标驱动 智能决策」为主题&#xff0c;2023 Smartbi V11系列新品发布会在广州丽思卡尔顿酒店开幕。 ​ 后疫情时代&#xff0c;BI发展趋势的观察与应对 在发布会上&#xff0c;思迈特CEO吴华夫在开场致辞中表示&#xff0c;当前大环境背景下&#xf…

Stable Diffusion教程(9) - AI视频转动漫

配套抖音视频教程&#xff1a;https://v.douyin.com/UfTcrcJ/ 安装mov2mov插件 打开webui点击扩展->从网址安装输入地址&#xff0c;然后点击安装 https://github.com/Scholar01/sd-webui-mov2mov 最后重启webui 下载模型 从国内liblib AI 模型站下载模型 LiblibAI哩…

已有公司将ChatGPT集成到客服中心以增强用户体验

Ozonetel正在利用ChatGPT来改善客户体验。该公司表示&#xff0c;他们通过使用ChatGPT收集与客户互动过程收集的“语料”能够更有针对性地提高服务效率&#xff0c;提供个性化的用户体验&#xff0c;并实现更高的客户满意度。[1] 通过这套解决方案&#xff0c;客服中心将拥有一…

办理流量卡也是有条件的,这五种情况就不能办理流量卡!

流量卡资费虽然便宜&#xff0c;但也不是谁都可以办得&#xff0c;以下这几种情况是办不了的&#xff01; 看到网上的流量卡资费便宜&#xff0c;也想随手申请一张&#xff0c;别想得太简单了&#xff0c;流量卡也不是那么好办理的&#xff0c;换句话来讲&#xff0c;办理流量…

【量化课程】07_量化回测

文章目录 7.1 pandas计算策略评估指标数据准备净值曲线年化收益率波动率最大回撤Alpha系数和Beta系数夏普比率信息比率 7.2 聚宽平台量化回测实践平台介绍策略实现 7.3 Backtrader平台量化回测实践Backtrader简介Backtrader量化回测框架实践 7.4 BigQuant量化框架实战BigQuant简…

特语云用Linux和MCSM面板搭建 我的世界基岩版插件服 教程

Linux系统 用MCSM和DockerWine 搭建 我的世界 LiteLoaderBDS 服务器 Minecraft Bedrock Edition 也就是我的世界基岩版&#xff0c;这是 Minecraft 的另一个版本。Minecraft 基岩版可以运行在 Win10、Android、iOS、XBox、switch。基岩版不能使用 Java 版的服务器&#xff0c;…

Spring BeanPostProcessor 接口的作用和使用

BeanPostProcessor 接口是 Spring 框架中的一个扩展接口&#xff0c;用于在 Spring 容器实例化、配置和初始化 bean 的过程中提供自定义的扩展点。通过实现这个接口&#xff0c;您可以在 bean 实例创建的不同生命周期阶段插入自己的逻辑&#xff0c;从而实现对 bean 行为的定制…

Springboot-Retrofit HTTP工具框架快速使用

在SpringBoot项目直接使用okhttp、httpClient或者RestTemplate发起HTTP请求&#xff0c;既繁琐又不方便统一管理。 因此&#xff0c;在这里推荐一个适用于SpringBoot项目的轻量级HTTP客户端框架retrofit-spring-boot-starter&#xff0c;使用非常简单方便&#xff0c;同时又提供…

【第二阶段】kotlin的函数类型作为返回类型

fun main() {//调用,返回的是一个匿名类型&#xff0c;所以info就是一个匿名函数val infoshow("",0)//info接受的返回值为匿名类型&#xff0c;此时info就是一个匿名函数println(info("kotlin",20)) }//返回类型为一个匿名函数的返回类型fun show(name:Str…

maven如何建立JavaWeb项目并连接数据库,验证登录

这里是建立建立web项目&#xff1a;Maven如何创建Java web项目&#xff08;纯干货版&#xff09;&#xff01;&#xff01;&#xff01;_明天更新的博客-CSDN博客 我们主要演示如何连接数据库验证登录。 1.在webapp目录下创建我们的登录页面&#xff1a;index.jsp 还需要再…

Stable Diffusion+Temporal-kit 半虚半实应用

1.先下载temporal-kit,重启webui 2.下载好ffmpeg,配置好环境,下载Ebsynth 3.准备好你需要的视频,拖到预处理视频位置 4.填写参数,点解保存设置,然后并点击生成,会生成到目标文件夹的input位置 5.然后拉出input文件夹里面你想切换成处理的帧图片,然后填写prompt查看效…