vue+elementUI完成注册及登陆

柚子子@

已于 2022-05-05 17:16:23 修改

阅读量8.9k

点赞数 6

文章标签： vue.js elementui javascript

于 2022-05-05 16:41:28 首次发布

本文链接：https://blog.csdn.net/m0_67476502/article/details/124587674

版权

本文介绍了如何使用Vue.js结合ElementUI框架搭建注册和登录页面，详细阐述了Vue项目中引入和配置ElementUI的步骤，以及如何通过axios进行后台交互。在axios的使用中，讨论了跨域问题的解决方法，并引入qs库处理POST请求的数据格式问题，以确保后台能够正确接收数据。最后展示了简化后的axios和vue-axios配置，以及登录功能的实现方法。

摘要由CSDN通过智能技术生成

1. vue怎么引入和配置使用element-ui框架
1.1 使用vue-cli脚手架工具创建一个vue项目
vue init webpack pro01

1.2 npm安装elementUI
cd pro01 #进入新建项目的根目录
npm install element-ui -S #安装element-ui模块
1.3 在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）

2，创建登录注册页面，更改样式
3. 后台交互(axios/qs/vue-axios)

3.1 axios
axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。

3.2 导入axios

然后重新启动项目（npm run dev）

把axios导入登录页面中

定义请求路径和参数

2.GET提交
      axios.get('/user', {//注意数据是保存到json对象的params属性
        params: {
          ID: 12345
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

3.POST提交
      axios.post('/user', {//注意数据是直接保存到json对象
        firstName: 'Fred',
        lastName: 'Flintstone'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

注1：axios跨域问题，因为使用了前后端分离开发，跨域访问了，解决方案：需要配置tomcat允许跨域访问，
tomcat跨域配置方法很多，但最简单的方式是自己写一个过滤器CorsFilter实现，添加一个响应头