使用ElementUI完成登入注册的跨域请求提高开发效率

                                                艳艳耶✌️：个人主页

                                                个人专栏 ：《Spring与Mybatis集成整合》​​​​​​​

                                                ⛺️ 生活的理想，为了不断更新自己 !
 

目录

​编辑

1、前言

1.1.什么是ELementUI

2、完成登陆注册前端页面

2.1环境搭建

运行项目

使用命令添加Element-UI模块

测试ELementUI

2.2. 登录页面搭建

3、数据交互

3.1.安装相关模块

安装模块

 引用模块

3.2.axios的get请求

 3.3.axios的post请求

3.注册功能

4、跨域的概述

4.1.跨域​​​​​​​是什么

4.2.怎么解决跨域问题 

---

1、前言

1.1.什么是ELementUI

      Element 是一款基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化的 Web 应用程序界面。它提供了丰富多样的可重用组件，并支持自定义主题和样式，使开发者能够快速搭建出具有良好用户体验的界面。

     Element 是一个功能强大的前端 UI 组件库，通过提供丰富的组件和灵活的定制选项，使开发者能够快速构建现代化的 Web 应用程序界面。

2、完成登陆注册前端页面

2.1环境搭建

首先我们准备一个SPA项目

如果不会的话，可以参照我之前写的博客

【Vue】如何搭建SPA项目--详细教程https://blog.csdn.net/2301_76988707/article/details/133146622

运行项目

在SAP项目的根目录输入cmd后在cmd窗口输入npm run dev

 输入最后那个网址结果就出来了。

使用命令添加Element-UI模块

npm install element-ui -S

先把项目终止，再进行下载，中途不可断开。

下载完成后项目里就会看该依赖

测试ELementUI

导入ELement的css与js到main.js中

// 新添加1
import ElementUI from 'element-ui' 
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css' 
// 新添加3
Vue.use(ElementUI)  

 随便找个样式复制到SPA项目中，进行运行查看是否能运行。 

ELementUI官网https://element.eleme.cn/#/zh-CN/component/button

2.2. 登录页面搭建

在项目中的src目录下创建views目录（该目录用于存放vue组件）。

在views目录下创建一个Login.vue组件，登入页面的显示，代码如下:

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

然后在项目路径下面，输入以下命令开启项目，开启命令 :  npm run pev

展示图：

3、数据交互

3.1.安装相关模块

安装模块

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

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

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

npm i axios -S

npm i qs-S

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

查看模块

在前端项目的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 模块。

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

3.2.axios的get请求

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

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

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

package com.sy.ssm.controller;

import com.sy.ssm.service.IUserService;
import com.sy.ssm.util.JsonResponseBody;
import com.sy.ssm.util.PageBean;
import com.sy.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.sy.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);
        }

    }
}

 3.3.axios的post请求

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

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

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

结果：

3.注册功能

在前端创建组件 Register.vue

要在index.js处理路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'


Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: Login
    },
    {
        path: '/Register',
        name: 'Register',
        component: Register
      }
    ]
})

注册的方法：

package com.sy.ssm.util;
 
import com.sy.ssm.model.Region;
import com.sy.ssm.util.PageBean;
import org.springframework.stereotype.Repository;
 
import java.util.List;
 
public interface IRegionService {
 
    List queryRegionPager(Region region, PageBean pageBean);
 
    List queryRegionById(Region region);
}

写一个注册的web层

package com.sy.ssm.controller;

import com.sy.ssm.model.Region;
import com.sy.ssm.service.IRegionService;
import com.sy.ssm.util.JsonResponseBody;
import com.sy.ssm.util.PageBean;
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.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@RestController
@RequestMapping("/region")
public class RegionController {

    @Autowired
    private IRegionService regionService;

    @RequestMapping("/queryRegionPager")
    public JsonResponseBody> queryRegionPager(Region region, HttpServletRequest request){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(request);
            List regions = regionService.queryRegionPager(region, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),regions);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询行政区划信息失败",false,0,null);
        }
    }

    @RequestMapping("/queryRegionById")
    public JsonResponseBody> queryRegionById(Region region){
        try {
            List regions = regionService.queryRegionById(region);
            return new JsonResponseBody<>("OK",true,0,regions);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("初始化行政区划代码失败",false,0,null);
        }
    }
}

结果：

​​​​​​​

4、跨域的概述

4.1.跨域​​​​​​​是什么

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

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

跨域请求的常见场景包括：

域名不同：例如从 www.example.com 发起请求到 api.example.com。
协议不同：例如从 http://example.com 发起请求到 https://example.com。
端口不同：例如从 example.com:3000 发起请求到 example.com:8000。

跨域请求可以引发安全问题，因此浏览器会对这类请求进行限制。为了在跨域情况下实现数据交互，可以使用一些方法，如 JSONP、CORS（跨域资源共享）、代理等来解决跨域问题。

4.2.怎么解决跨域问题 

那为什么前面没有这个问题，因为我在我的Maven项目里已经做了这个处理

CorsFilter.java

package com.sy.ssm.util;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 配置tomcat允许跨域访问
 *
 * @author Administrator
 *
 */
public class CorsFilter implements Filter {
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
		HttpServletRequest req = (HttpServletRequest) servletRequest;
		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");

		//允许客户端发一个新的请求头jwt
		httpResponse.setHeader("Access-Control-Allow-Headers","responseType,Origin,X-Requested-With, Content-Type, Accept, jwt");
		//允许客户端处理一个新的响应头jwt
		httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");

		//httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
		//httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");

		// axios的ajax会发两次请求，第一次提交方式为：option，直接返回即可
		if ("OPTIONS".equals(req.getMethod())) {
			return;
		}
		filterChain.doFilter(servletRequest, servletResponse);
	}
	@Override
	public void destroy() {

	}
}

在web.xml

 
  
    corsFilter
    com.sy.ssm.util.CorsFilter
  
  
    corsFilter
    /*
  

然后就可以了。

                               到这里我的分享就结束了，欢迎到评论区探讨交流！！