ElementUI之登陆+注册

一.什么是ElementUI

二.ElementUI完成用户注册登录界面搭建

使用命令npm install element-ui -S，添加Element-UI模块

导依赖

建立登录和注册页面

​编辑

配置样式

编写登录页面（Login）

 编写注册页面（reginter）

编写路由页面

三.axios之get请求

下载安装vue-axios

​编辑

四. axios之post请求

下载安装qs库

​编辑

注册

代码

 

跨域

什么是跨域

跨域的特点

建立一个 CorsFilter

跨域的配置 

---

一.什么是ElementUI

ElementUI 是一个基于 Vue.js 的开源组件库，用于构建用户界面。它提供了一套丰富的预定义组件，包括按钮、表格、表单、弹窗等，以及一些实用的工具组件。ElementUI 的设计风格简洁美观，易于使用和扩展，使开发者能够快速构建出高质量的用户界面。

二.ElementUI完成用户注册登录界面搭建

使用命令npm install element-ui -S，添加Element-UI模块

npm install element-ui -S

添加成功 

导依赖

 

建立登录和注册页面

配置样式

App.Vue 

编写登录页面（Login）

 编写注册页面（reginter）

编写路由页面

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
	
	}
		
  ]
})

三.axios之get请求

下载安装vue-axios

qs库用于解决POST请求问题，因为POST提交的参数的格式是Request Payload，这样后台取不到数据的。

npm i vue-axios -S  Get请求

代码如下：

 Login.vue

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

同时我们的后端有一个视图解析器来处理我们前端发过来的请求进行处理 

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);
        }
 
    }
}

测试结果 

 

四. axios之post请求

下载安装qs库

npm i vue-qs -S   post请求

代码如下

测试结果 

 

注册

代码

 

跨域

什么是跨域

跨域（Cross-Origin）是指在网络环境中，当一个请求的 URL 的协议、域名、端口号与当前页面的 URL 不一致时，就产生了跨域。通常情况下，浏览器出于安全考虑，限制了跨域请求。

跨域是一个浏览器的安全策略，旨在防止恶意的网站利用浏览器发起跨站攻击。通过限制跨域请求，浏览器可以确保同源策略的有效性，即确保资源只能与同一源（协议、域名、端口号相同）的文档进行交互。

跨域请求通常是通过 XMLHttpRequest 或 Fetch API 进行的，例如从一个网页向另一个域发送 AJAX 请求。常见的跨域请求场景包括从前端向后端接口请求数据、调用第三方 API 等。

要在前端实现跨域请求，可以使用 CORS（跨源资源共享）机制来进行配置，也可以使用 JSONP（JSON with Padding）等其他技术手段。同时，在后端服务器上也需要进行一些特殊配置来支持跨域请求。

需要注意的是，在开发环境中，由于本地开发服务器（如 webpack-dev-server）通常运行在不同的端口上，会导致跨域问题。在生产环境中，如果前后端代码部署在不同的域名下，同样也会遇到跨域请求的限制。

跨域的特点

跨域有以下几个主要特点：

1. 安全限制：跨域是出于浏览器的安全策略考虑而限制的。浏览器通过同源策略来阻止在不同源之间的资源访问和数据交互，以减少恶意网站对用户和其他网站的攻击风险。

2. 域的定义：同源指的是协议、域名、端口号完全相同。只要其中一个部分不同，就被视为跨域。例如，从 http://example.com 发起的请求向 http://api.example.com 发起的请求就是跨域请求，即使它们都属于 example.com 域名。

3. 跨域请求限制：在默认情况下，跨域请求是被限制的。跨域请求无法读取响应的数据，也无法修改发送请求的头部信息。

4. 跨域解决方法：为了允许跨域请求，可以在后端服务器上进行设置。常见的解决方法包括使用 CORS（跨源资源共享）机制、JSONP（JSON with Padding）技术、代理请求等。这些方法可以通过在响应头部添加特定的响应头信息、使用特定的 JSONP 回调函数、在服务器端建立代理等方式，来实现跨域资源的访问。

需要注意的是，跨域问题只存在于浏览器端，因为浏览器对跨域请求有限制。如果在服务器端进行 API 请求或者在后端代码中进行跨域请求，通常不会受到跨域限制。

建立一个 CorsFilter

package com.zking.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() {

	}
}

跨域的配置