使用ElementUI完成登入注册的跨域请求，结合vue-cli搭建的SPA项目，减少冗余代码提升开发效率

目录

一、跨域的概述

( 1 )  讲述

( 2 )  特点

如何跨域: 

二、ElementUI

( 1 )  导入

( 2 )  搭建

( 3 )  页面

三、数据交互

( 1 )  安装相关模块

安装模块

 引用模块

( 2 )  axios的get请求

( 3 )  axios的post请求

四、注册功能

带来的收获

---

一、跨域的概述

( 1 )  讲述

跨域（Cross-Origin）是指在浏览器环境下，当前网页的域名、协议或端口与请求资源的域名、协议或端口不一致，导致浏览器限制了这种跨域请求的访问。

跨域请求受到浏览器的同源策略（Same-Origin Policy）的限制。同源策略是浏览器的一种安全机制，用于保护用户的隐私和数据安全。同源策略要求，如果两个URL的协议、域名和端口都相同，则这两个URL同源，可以进行跨域通信。否则，就是跨域请求，浏览器会阻止这种跨域请求的访问。

跨域请求的限制主要体现在以下几个方面：

• 1.Cookie、LocalStorage和IndexDB的限制：跨域请求默认不携带Cookie、LocalStorage和IndexDB等存储数据的信息。这是因为这些信息可能包含用户的敏感信息，如果跨域请求可以携带这些信息，就会造成安全风险。如果需要在跨域请求中携带这些信息，可以通过设置相应的响应头部（Access-Control-Allow-Credentials）和请求头部（withCredentials）来实现。

• 2. XMLHttpRequest和Fetch API的限制：XMLHttpRequest和Fetch API是浏览器提供的用于发送HTTP请求的接口，它们遵循同源策略，不允许跨域请求。如果需要进行跨域请求，可以使用CORS（Cross-Origin Resource Sharing）来解决。

CORS是一种基于HTTP头部的跨域解决方案。服务器在响应中添加Access-Control-Allow-Origin头部，指定允许跨域访问的域名，浏览器在发送跨域请求时，会先发送一个OPTIONS请求进行预检，如果服务器返回的响应头部中包含Access-Control-Allow-Origin，就允许跨域访问。

• 3. 脚本访问的限制：在浏览器中，通过

  修改 App.vue 组件的css样式进行登入页面的效果美化，将以下代码覆盖到style标签中

  然后在项目路径下面，输入以下命令开启项目。

  开启命令 :  npm run pev

  开起后访问指定路径在浏览器中进行访问，如 :   http://localhost:8080

  效果如图 : 

  

  三、数据交互

  ( 1 )  安装相关模块

  安装模块

  在我们的maven项目中，需要前后端请求的话，需要在maven项目中安装ajax的模块

  在前端的spa项目中，在本地的根本路径下，Win+R，输入cmd，打开cmd窗口。

  输入以下命令安装所需模块 : 

  npm i axios -S

  npm i qs-S

  操作命令如图 : 

   

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

  冗余代码的模块

  在此，我们前端的代码会有请求路径及引入模块等等的很多冗余代码。

  为解决这一问题，我们只需下载一个vue-axios的引用整合模块。

  在项目中安装之后，对于后期项目的维护有极大的帮助和很大的提升项目开发的效率

  在前端的spa项目中，在本地的根本路径下，Win+R，输入cmd，打开cmd窗口。

  输入以下命令安装所需模块 : 

  npm i vue-axios -S

   

   vue-axios是在axios基础上扩展的模块，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios。

  查看模块

  在前端项目的package.json的文件中看到以下，就说明安装模块已经完成

  

   引用模块

  安装后就在项目中进行引用，添加axios的全局配置，创建一个actio.js

  /**
   * 对后台请求的地址的封装，URL格式如下：
   * 模块名_实体名_操作
   */
  export default {
  	'SERVER': 'http://localhost:8080/ssm', //服务器地址
  	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求
  	'SYSTEM_USER_DOREG': '//user/userRegister', //注册请求
  	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
  		return this.SERVER + this[k];
  	}
  }
  

  action.js（针对后台请求接口的封装定义）和http.js（针对axios的全局配置）两个文件。​​​​​​​

  创建http.js，用于vue项目对axios的全局配置

  /**
   * vue项目对axios的全局配置
   */
  import axios from 'axios'
  import qs from 'qs'
  
  //引入action模块，并添加至axios的类属性urls上
  import action from '@/api/action'
  axios.urls = action
  
  // axios默认配置
  axios.defaults.timeout = 10000; // 超时时间
  // axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
  axios.defaults.baseURL = action.SERVER;
  
  //整理数据
  // 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
  axios.defaults.transformRequest = function(data) {
  	data = qs.stringify(data);
  	return data;
  };
  
  
  // 请求拦截器
  axios.interceptors.request.use(function(config) {
  	return config;
  }, function(error) {
  	return Promise.reject(error);
  });
  
  // 响应拦截器
  axios.interceptors.response.use(function(response) {
  	return response;
  }, function(error) {
  	return Promise.reject(error);
  });
  
  // // 路由请求拦截
  // // http request 拦截器
  // axios.interceptors.request.use(
  // 	config => {
  // 		//config.data = JSON.stringify(config.data);  
  // 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
  // 		//config.headers['Token'] = 'abcxyz';
  // 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
  // 		// if (cookie.get("token")) {
  // 		// 	//用户每次操作，都将cookie设置成2小时
  // 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
  // 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
  // 		// 	config.headers.token = cookie.get("token");
  // 		// 	config.headers.name = cookie.get("name");
  // 		// }
  // 		return config;
  // 	},
  // 	error => {
  // 		return Promise.reject(error.response);
  // 	});
  
  // // 路由响应拦截
  // // http response 拦截器
  // axios.interceptors.response.use(
  // 	response => {
  // 		if (response.data.resultCode == "404") {
  // 			console.log("response.data.resultCode是404")
  // 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
  // 			//      cookie.del("ticket")
  // 			//      window.location.href='http://login.com'
  // 			return
  // 		} else {
  // 			return response;
  // 		}
  // 	},
  // 	error => {
  // 		return Promise.reject(error.response) // 返回接口返回的错误信息
  // 	});
  
  
  
  export default axios;
  

  之后在前端项目中，关联相关的创建及js文件进行应用。

  在前端的项目中main.js文件中引入vue-axios 模块

  // 在main.js文件中引入vue-axios模块
  import axios from '@/api/http'
  import VueAxios from 'vue-axios'
  // 增加VueAxios及axios实例
  Vue.use(VueAxios,axios)

  Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。  

  ( 2 )  axios的get请求

  在我们的登入组件中进行axios的get请求，编写Login.vue的代码

  将script标签的代码修改为以下代码进行get请求

  在我们的后端项目中，有一个视图解析器来处理我们前端发过来的请求进行处理

  代码如下 : 

  package com.CloudJun.ssm.controller;
  
  import com.CloudJun.ssm.service.IUserService;
  import com.CloudJun.ssm.util.JsonResponseBody;
  import com.CloudJun.ssm.util.PageBean;
  import com.CloudJun.ssm.vo.UserVo;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import java.util.HashMap;
  import java.util.List;
  import java.util.Map;
  import com.CloudJun.ssm.jwt.*;
  
  @Controller
  @RequestMapping("/user")
  public class UserController {
  
      @Autowired
      private IUserService userService;
  
      @RequestMapping("/userLogin")
      @ResponseBody
      public JsonResponseBody userLogin(UserVo userVo, HttpServletResponse response){
          if(userVo.getUsername().equals("admin")&&userVo.getPassword().equals("123")){
              //私有要求claim
  //            Map json=new HashMap();
  //            json.put("username", userVo.getUsername());
              //生成JWT，并设置到response响应头中
  //            String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);
  //            response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
              return new JsonResponseBody<>("用户登陆成功！",true,0,null);
          }else{
              return new JsonResponseBody<>("用户名或密码错误！",false,0,null);
          }
      }
  
      @RequestMapping("/queryUserPager")
      @ResponseBody
      public JsonResponseBody>>
              queryUserPager(UserVo userVo, HttpServletRequest request){
          try {
              PageBean pageBean=new PageBean();
              pageBean.setRequest(request);
              List> users = userService.queryUserPager(userVo, pageBean);
              return new JsonResponseBody<>("OK",true,pageBean.getTotal(),users);
          } catch (Exception e) {
              e.printStackTrace();
              return new JsonResponseBody<>("分页查询用户信息失败！",false,0,null);
          }
  
      }
  }
  

  注 : （ 其中的导包需要根据自己的项目包的结构进行导包方可 ）

  在前端项目的根本路径下，Win+R，输入cmd，打开cmd窗口。

  输入命令开启项目 : 

  npm run dev

  并且在后端的maven项目，开启服务器(开启项目)，可以进行访问才可

  之后在指定的请求地址进行访问，显示前端的页面(视图或者说组件)

  展现的效果如图 : 

  

  ( 3 )  axios的post请求

  使用pos请求一并也进行资源的整合

  之前我们把需要的应用模块及组件配置都已经完成，现在我们只需要编写我们的登入组件。

  将名为 : Login.vue 登入组件的所有代码修改为以下代码即可。

  展现的效果已是一样，并且将代码减少提高开发效率。

  效果如图 : 

  

  四、注册功能

  在前端创建组件 Register.vue

  在后端的maven项目中 IUserService 的代码

   int insertSelective(User record);

  在后端的maven项目中 UserServiceImpl 的代码

   @Override
      public int insertSelective(User record) {
          return userMapper.insertSelective(record);
      }
  

  在后端的maven项目中 UserController(控制器) 的代码

      @RequestMapping("/userRegister")
      @ResponseBody
      public JsonResponseBody userRegister(UserVo userVo, HttpServletResponse response){
          //状态新注册默认为0
          userVo.setStatus("0");
          //因为ID为String类型需要手动设置，当然可以根据自己的需要改为Int类型
          userVo.setId("5");
          int i = userService.insertSelective(userVo);
          if(i>0){
              return new JsonResponseBody<>("用户注册完成！快去登入吧！",true,0,null);
          }else{
              return new JsonResponseBody<>("用户注册失败！重新输入。",false,0,null);
          }
      }
  

  展现效果 : 

  带来的收获

  学习跨域及ElementUI的使用和前后端的数据交互可以带来以下收获：

  1. 跨域解决方案：了解跨域问题的产生原因和解决方案，掌握常见的跨域解决方法，例如JSONP、CORS、代理等，能够有效处理前端页面与后端接口之间的跨域请求问题。

  2. ElementUI的使用：ElementUI是一套基于Vue.js的组件库，学习使用ElementUI可以快速搭建美观、易用的前端界面，提高开发效率。掌握ElementUI的基本组件和布局，能够快速构建前端界面，并且能够根据项目需求进行自定义样式和功能。

  3. 前后端数据交互：学习前后端数据交互的方法，包括发送请求、处理响应、处理异常等，能够实现前后端数据的传递和交互。掌握常见的数据格式，例如JSON、XML等，能够处理数据的序列化和反序列化。了解常见的前后端数据交互方式，例如RESTful API、GraphQL等，能够根据项目需求选择合适的数据交互方式。

  4. 提升项目开发能力：掌握跨域解决方案、ElementUI的使用和前后端数据交互，能够更好地完成前端项目的开发工作，提升自己的项目开发能力。能够快速解决跨域问题，提高前端页面的用户体验；能够使用ElementUI构建美观、易用的前端界面，提高项目的用户满意度；能够实现前后端数据的传递和交互，提高项目的功能完整性和稳定性。

  总之，学习跨域及ElementUI的使用和前后端的数据交互，可以帮助我们更好地完成前端项目的开发工作，提升自己的技术能力和项目开发能力。