【Vue】ElementUI实现登录注册

目录

一.跨域的概述

1.1.概述

1.2.特点

二.ElementUI

2.1. 导入

2.2.搭建

2.3.页面

三.数据交互

3.1.安装相关模块

3.1.1安装模块

3.1.2查看模块

3.1.3.引用模块

3.2. axios的get请求

3.3. axios的post请求

四.注册功能

     好啦今天到这了，希望能帮到你！！！

---

一.跨域的概述

1.1.概述

• 跨域（Cross-Origin）指的是在浏览器上执行的 Web 应用程序试图访问不同域名下的资源或向不同域名的服务器发送请求时所面临的限制。浏览器出于安全考虑实施了同源策略，即只允许网页上的脚本访问同一源的资源，所谓同源指的是协议、域名和端口号完全相同。
• 当浏览器上的 Web 应用程序试图跨域请求资源时，浏览器会阻止这些请求，以防止恶意网站窃取用户的数据。为了解决跨域问题，浏览器提供了一些机制如跨域资源共享（CORS）、JSONP、代理等。
• 跨域资源共享（CORS）是最常用的跨域解决方案之一。通过在服务器端设置响应头部，允许特定的源（域、协议、端口）来访问资源。通过在请求头部中添加 Origin 字段，浏览器可以告知服务器访问来源。服务器在响应中添加 Access-Control-Allow-Origin 头部，明确指定允许的来源，从而解决跨域访问问题。
• JSONP是一种通过

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

  开启命令 :  npm run pev

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

  效果如图 : 

  

  三.数据交互

  3.1.安装相关模块

  3.1.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。

  3.1.2查看模块

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

  

  3.1.3.引用模块

  安装后就在项目中进行引用，添加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'
  / 在main.js文件中引入vue-axios模块
  Vue.use(VueAxios,axios)

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

  3.2. axios的get请求

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

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

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

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

  展现效果 : 

       好啦今天到这了，希望能帮到你！！！