vue+elementUI完成注册及登陆

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实现，添加一个响应头

 GET提交

 

设置提示框

  注2：axios.get提交没有问题，axios.post提交后台接收不到数据
           因为POST提交的参数的格式是Request Payload，这样后台取不到数据的，解决方案：使用qs.js库，将{a:'b',c:'d'}转换成'a=b&c=d'

 POST提交

 下载qs进行参数转换

导入qs 

将参数进行转换 

 

 拼接式

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

 复制两个请求地址

 2.修改main.js文件

 import axios from '@/api/http'             #vue项目对axios的全局配置      
 mport VueAxios from 'vue-axios' 
 Vue.use(VueAxios,axios)

 login就可以不用引入了

 简化后的POST