vue+elementUI完成注册及登陆

已于 2022-05-05 17:25:48 修改
阅读量1.6k 收藏 11
点赞数 1
文章标签： vue.js elementui javascript
于 2022-05-05 17:02:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67596612/article/details/124587618
版权
本文介绍了如何使用Vue.js结合ElementUI框架完成注册和登录页面的设计，详细讲解了Vue项目中引入和配置ElementUI的方法，以及如何通过axios与后台进行交互，包括GET、POST请求的发送，解决跨域问题，使用qs库处理POST数据格式，最后给出了具体的安装和使用步骤。
摘要由CSDN通过智能技术生成

目录

1. vue怎么引入和配置使用element-ui框架

2. Vue+ElementUI设计登录注册页面

先配置路由

登录

App.vue页面

 Login.vue页面

 效果图：

 注册

 3. 后台交互(axios/qs/vue-axios)

 3.1 什么是axios

 2.GET提交

axios跨域问题

 3.POST提交

这是什么原因呢？

为什么会出现这个问题呢？

 如何解决这个问题呢？

此时大家可能会疑惑，什么是qs?

4 axios/qs/vue-axios安装及使用步骤

  1.安装

  2.修改main.js文件

  3.之后就可以直接在Vue组件文件的methods里使用了  

1. vue怎么引入和配置使用element-ui框架

1.1 使用vue-cli脚手架工具创建一个vue项目

1.2 npm安装elementUI

      cd pro01                                   进入新建项目的根目录
      npm install element-ui -S                 安装element-ui模块

1.3 在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）

1.4 测试

 修改HelloWorld.vue添加elementUI组件查看效果

2. Vue+ElementUI设计登录注册页面

可以去Element官网去挑选自己需要的组件

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

先配置路由

登录

App.vue页面

 Login.vue页面

 Login页面template标签

  Login页面script标签

 Login页面style标签

连接数据库，进行用户查询，实现登录功能：

 

 

最低0.47元/天 解锁文章
易言楠尽@
关注
Vue+elementUI实现登录功能
COS0度
03-22 4964
1、实现表单验证（账户名不能为空，密码符合正则表达式） 2、实现记住账号功能（包括取消记住账号登录的功能）
node之实现登录注册分页小案例(node+vue+elementUI+axios+mysql)
qq_38903404的博客
09-04 997
第一步项目的基本配置 安装node 的express 脚手架 npm install -g express-generator 创建不带视图模板的项目 express demo --no-view // demo 是项目名称 --no-view 代表生成的项目不带视图模板 安装项目的依赖 1.首先 cd到创建的目录 npm run start 启动项目 2.npm install 安装 npm install node-dev -D //项目 热更新的方式 然后在 `pa
vue+elementui 登录注册页面实现
kurcp的博客
11-18 9446
1.实现效果 2. 代码实现 2.1使用elementUI文档中Tabs标签页 2.2在components中新建两个文件 login.vue register.vue login.vue <template> <div class="login"> <div class="login_form"> <p&...
Vue3.0项目实战（二）——大事件管理系统登录注册功能实现
最新发布
weixin_56370772的博客
08-26 999
登录注册页面 [element-plus 表单 & 表单校验]
Vue之ElementUI实现登陆及注册
weixin_74352229的博客
09-25 6516
ElementUI 是一个基于Vue.js的前端 UI 框架。它提供了丰富的可复用组件，使开发者可以快速构建现代化的 Web 应用程序界面。ElementUI 的组件库包括按钮、输入框、表格、弹窗、导航菜单等常用组件，同时还提供了一些高级组件如日期选择器、时间选择器、下拉框等。ElementUI 具有高度的定制性和扩展性，开发者可以根据自己的需求进行定制和拓展。它的简洁美观的设计风格得到了广大开发者的喜爱，广泛应用于各种 Web 项目中。
ElementUI之登陆+注册-＞饿了吗完成用户登录界面搭建，axios之get请求，axios之post请求，跨域,注册界面
weixin_73471776的博客
09-25 3325
准备好后台项目，导入sql，查看项目连接数据库密码等信息（项目名：ssm/src/main/resources/jdbc.properties）在main.js中引入element-ui模块，在项目中src目录下找到`main.js`，并在指定位置添加三行代码。导入依赖，在项目根目录使用命令npm install element-ui -S，添加Element-UI模块。将项目导入idea：file->open->项目路经copy到弹出框->点击项目里的pom.xml->ok。2.axios之get请求。
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
08-01
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
基于Springboot+Vue+ElementUI物流配送管理系统
11-01
采用技术： Springboot + Vue + ElementUI 本系统实现一个物流管理系统。具体功能描述如下： 1.系统其它信息管理：主要是针对系统的其他的信息进行管理，实现了系统的模块化的管理，系统的框架建设等信息的管理，...
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
基于springboot+vue+elementui的办公自动化系统设计，优秀毕业系统，新手必看！
05-08
系统主要功能： 1、统一的信息发布平台：公告栏，公司活动，项目进度，公司周报 2、统一的文件管理平台：收文管理、发文管理。文件查询。档案管理 3、办公自动化： (1)行政办公： + 查看自己的工作任务；...
ElementUI 登录页
06-17
最基础的ElementUI -登录页,适合新手查看，下载后运行npm install npm run dev然后访问http://localhost:8080/#/login就可以看到登录页面
asp登录页面跳转到注册页面_通过Vue ElementUI实现登录页面
weixin_39945816的博客
11-20 707
通过这篇文章，我们可以知道如何通过Vue路由方式实现登录页面的访问。主要知识点包括：Vue组件路由访问一、通过Vue-Cli创建一个项目安装Vue-Cli之后，通过vue ui命令启动项目管理器页面。如果是第一次创建项目会自动进入项目管理器页面，如下：Vue项目管理器页面如果非第一次创建项目，在左上角列表中选择Vue项目管理器，进入上图页面。如下图所示：进入Vue项目管理器路径二、项目结构清理创建...
ElementUI之登陆+注册
2201_75455485的博客
09-25 2571
ElementUI 是一个基于 Vue.js 的开源组件库，用于构建用户界面。它提供了一套丰富的预定义组件，包括按钮、表格、表单、弹窗等，以及一些实用的工具组件。ElementUI 的设计风格简洁美观，易于使用和扩展，使开发者能够快速构建出高质量的用户界面。跨域（Cross-Origin）是指在网络环境中，当一个请求的 URL 的协议、域名、端口号与当前页面的 URL 不一致时，就产生了跨域。通常情况下，浏览器出于安全考虑，限制了跨域请求。
Vue的登录注册页面
weixin_42576467的博客
02-15 496
Vue是一个流行的JavaScript框架，可以用于开发前端应用程序。在Vue中，可以使用组件来构建登录注册页面。 对于登录页面，可以创建一个组件，包含输入用户名和密码的表单，并在表单提交时向服务器发送请求以进行身份验证。如果身份验证成功，可以将用户重定向到应用程序的主页，否则可以向用户显示错误消息。 对于注册页面，可以创建另一个组件，包含输入用户名、密码和其他必需信息的表单。当表单提交时，可以将...
基于vue-注册登录页面
weixin_51029697的博客
03-28 4971
本文应用Vue3+Element-Plus+Ts构建登录注册页面 一、Vue-cli项目搭建 引用其他博主这里就不过多赘述，详情：Vue(二)：Vue3安装_zhouym_的博客-CSDN博客_安装vue3 二、在components下新建InputGroup.vue,LoginForm.vue,RegisterForm.vue。views同样新建404.vue，forgotPassword.vue，LoginRegister.vue。 三、router里面的路由都是根据views下的.
ElementUI之登录+注册
theHider的博客
07-23 2957
和http.js（
Vue+ElementUI快速入门与项目搭建指南
Vue+ElementUI前端开发手册是一份详尽的指南，专为初级和中级前端开发者设计，旨在帮助他们快速上手Vue框架和ElementUI组件库的集成开发。这份文档不仅适用于前端开发人员进行项目搭建和界面设计，同时也可供后端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值