【Vue.js】使用Element搭建登入注册界面&axios中GET请求与POST请求&跨域问题

一，ElementUI是什么？

              Element UI 是一个基于 Vue.js 的桌面端组件库，它提供了一套丰富的 UI 组件，用于构建用户界面。Element UI 的目标是提供简洁、易用、美观的组件，同时保持灵活性和可定制性

二，ElementUI的特点与功能(大致五点)

Element UI 的特点和功能包括：

丰富的组件：

           Element UI 提供了大量的常用组件，包括按钮、表单、表格、对话框、菜单等等。这些组件经过精心设计，具有统一的风格和交互体验，在构建用户界面时非常方便。

响应式布局：

        Element UI 的组件可以自动适应不同屏幕尺寸，支持响应式布局，使得应用程序在不同设备上都有良好的显示效果。

简洁易用：

     Element UI 的组件设计简洁，提供了丰富的配置选项，开发者可以通过参数的方式灵活地定制组件的外观和行为。
 

 主题定制：

     Element UI 提供了一套默认的主题样式，但也支持自定义主题。你可以根据项目的需求定制自己的主题样式，以使应用程序更符合项目的整体风格

国际化支持：

   Element UI 内置了多语言支持，可以方便地实现多语言应用程序

二，Element搭建登入注册前期准备

①搭建SPA项目   

没有搭建SPA项目---》》点击进入SPA项目搭建流程

②导入Element依赖

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

注意：要在你的SPA项目工作区间下使用cmd终端命令下载（如下）

下载完毕之后在你的SPA项目下的package.json文件中会看见下载所需要的Element依赖

三，Element实现登入注册界面 

第一步：在src目录下创建views目录（该目录用于存放vue组件）

第二步：在main.js中引入element-ui模块

在项目中src目录下找到main.js，并在指定位置添加三行代码：

注意：要在import App from './App'这行代码前面添加下面三行代码

import Vue from 'vue'

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

Vue.jsx挂载Element代码（也是在main.js文件下添加即可）:

Vue.use(ElementUI)   
Vue.config.productionTip = false

第三步：①创建用户登录组件Login.vue

为了样式更加好看导入App.vue中的样式

App.vue样式：

login.vue与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
	}
	]
})

效果：

四，数据交互

使用SSM项目构建Java后台，模拟提供一个用户登录的action地址，Vue通过请求指定的用户登录接口。

4.1 了解axios与安装

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

题外话：vue.js有著名的全家桶系列：vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。 其中vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，但在vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios

安装语法：

npm i axios -S

默认为post请求

如果数据交互需要get请求要下载有关get请求的的依赖

get语法：

npm i qs -S

注意：要在你的SPA项目工作区间，启动cmd窗口，执行该行代码（如下）

4.2 axios之Post请求

1 在前端导入刚下载好的axios依赖

import axios from 'axios'

前端编写：

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

userController:

package com.zking.ssm.controller;

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

    }
}

在前端项目工作区间下，文件路径输入cmd，打开cmd窗口。

输入命令开启项目 : 

npm run dev

并且在后端启动maven项目，可以进行访问才可

4.3 axios之Get请求

导入依赖

  import qs from 'qs' 

导入api文件(两个)：

action.js:

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

http.js:

/**
 * 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;

需要在mian,js中配置：

main.js:

五，注册功能实现 

①自行创建一个注册页面

②定义接口、接口实现类

接口类：

int insertSelective(User record);

实现接口类：

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

③ Controller层编写：

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

五，跨域问题 

5.1 概念

      跨域问题（Cross-Origin Resource Sharing，CORS）指的是在浏览器端，由于安全策略限制，不同源（域/协议/端口）之间的网页（或者Ajax请求）无法直接进行交互或访问对方的资源。同源策略是浏览器的一种安全机制，用于保护用户信息和防止恶意攻击。

  同源策略要求网页只能与相同源的资源进行交互，源（Origin）由协议、域名和端口号组成。当源不一致时，浏览器会阻止跨域的请求。例如，一个网页在域A中运行，试图通过JavaScript向域B发送AJAX请求，此时就会触发跨域问题

5.2 解决跨域问题

web.xml:

  
  
    corsFilter
    com.zking.ssm.util.CorsFilter2
  
  
    corsFilter
    /*
  

跨域工具类:

CorsFilter2  过滤器

这段代码的作用是配置Tomcat服务器允许来自任何域名的跨域访问，并允许客户端发送包含指定请求头的请求，以及指定允许的请求方法

package com.zking.ssm.controller;
 
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.HttpServletResponse;
 
/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter2 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;
 
		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Headers", "responseType,Origin, X-Requested-With, Content-Type, Accept");
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
 
		//允许客户端处理一个新的响应头jwt
		//httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
		filterChain.doFilter(servletRequest, servletResponse);
	}
 
	@Override
	public void destroy() {
 
	}
}