• ElementUI之登陆+注册-＞饿了吗完成用户登录界面搭建，axios之get请求，axios之post请求，跨域,注册界面

    •  饿了吗完成用户注册登录界面搭建
    • axios之get请求
    • axios之post请求
    • 跨域
    • 注册界面

    1.饿了吗完成用户注册登录界面搭建

    将端口号8080改为8081

    导入依赖，在项目根目录使用命令npm install element-ui -S，添加Element-UI模块

    -g：将依赖下载node_glodal全局依赖

    -d（依赖放在static/[]package.json的devDependencies里）：下载依赖到SPA工程中，不会参与打包

    -s（依赖放在static/[]package.json的dependencies里）：下载依赖到SPA工程中，会参与打包

     

    登录+注册静态页实现：

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

    在main.js中引入element-ui模块，在项目中src目录下找到`main.js`，并在指定位置添加三行代码

    1. //App.vue页面创建views
    3.  
    5.

    检查是否能启动项目

    1. //新建一个src下的view/login，写好登录界面
    3.  
    5.  
    6.  
    1. //src下的App.vue,写好样式
    3.  
    5.  
    7.  
    1. //src/router/index.js
    2. import Vue from 'vue'
    3. import Router from 'vue-router'
    4. import HelloWorld from '@/components/HelloWorld'
    5. import Login from '@/views/Login'
    6. import Register from '@/views/Register'
    7.  
    8. Vue.use(Router)
    9.  
    10. export default new Router({
    11.   routes: [
    12.     {
    13.       path: '/',
    14.       name: 'Login',
    15.       component: Login
    16.     },
    17.     {
    18.       path: '/Register',
    19.       name: 'Register',
    20.       component: Register
    21.     }],
    22.  
    23.     })

    2.axios之get请求

    准备好后台项目，导入sql，查看项目连接数据库密码等信息（项目名：ssm/src/main/resources/jdbc.properties）

    将项目导入idea：file->open->项目路经copy到弹出框->点击项目里的pom.xml->ok

    修改maven服务器等默认路径，C盘改为D盘：点击file->setting->搜索maven->修改右边路径

    检查idea是否可以正常运行

    HbuiderX里安装axios，vue等插件

    写好get请求相关代码，运行

    1. src下的view/login，get请求
    3.  
    5.  
    6.  

    1. //src下的view/login，post请求
    3.  
    5.  
    6.

    优化

    1. //view/Login
    3.  
    5.  
    6.  
    1. //api/action.js
    2. /**
    3.  * 对后台请求的地址的封装，URL格式如下：
    4.  * 模块名_实体名_操作
    5.  */
    6. export default {
    7. 	'SERVER': 'http://localhost:8080/ssm', //服务器
    8. 	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆
    9. 	'SYSTEM_USER_DOREG': '/userAction.action', //注册
    10. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    11. 		return this.SERVER + this[k];
    12. 	}
    13. }
    14. /**
    15.  * 对后台请求的地址的封装，URL格式如下：
    16.  * 模块名_实体名_操作
    17.  */
    18. export default {
    19. 	'SERVER': 'http://localhost:8080/ssm', //服务器
    20. 	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆
    21. 	'SYSTEM_USER_DOREG': '/userAction.action', //注册
    22. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    23. 		return this.SERVER + this[k];
    24. 	}
    25. }
    1. //api/http.js
    2. /**
    3.  * vue项目对axios的全局配置
    4.  */
    5. import axios from 'axios'
    6. import qs from 'qs'
    7.  
    8. //引入action模块，并添加至axios的类属性urls上
    9. import action from '@/api/action'
    10. axios.urls = action
    11.  
    12. // axios默认配置
    13. axios.defaults.timeout = 10000; // 超时时间
    14. // axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
    15. axios.defaults.baseURL = action.SERVER;
    16.  
    17. //整理数据
    18. // 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
    19. axios.defaults.transformRequest = function(data) {
    20. 	data = qs.stringify(data);
    21. 	return data;
    22. };
    23.  
    24.  
    25. // 请求拦截器
    26. axios.interceptors.request.use(function(config) {
    27. 	return config;
    28. }, function(error) {
    29. 	return Promise.reject(error);
    30. });
    31.  
    32. // 响应拦截器
    33. axios.interceptors.response.use(function(response) {
    34. 	return response;
    35. }, function(error) {
    36. 	return Promise.reject(error);
    37. });
    38.  
    39. // // 路由请求拦截
    40. // // http request 拦截器
    41. // axios.interceptors.request.use(
    42. // 	config => {
    43. // 		//config.data = JSON.stringify(config.data);  
    44. // 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    45. // 		//config.headers['Token'] = 'abcxyz';
    46. // 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
    47. // 		// if (cookie.get("token")) {
    48. // 		// 	//用户每次操作，都将cookie设置成2小时
    49. // 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
    50. // 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
    51. // 		// 	config.headers.token = cookie.get("token");
    52. // 		// 	config.headers.name = cookie.get("name");
    53. // 		// }
    54. // 		return config;
    55. // 	},
    56. // 	error => {
    57. // 		return Promise.reject(error.response);
    58. // 	});
    59.  
    60. // // 路由响应拦截
    61. // // http response 拦截器
    62. // axios.interceptors.response.use(
    63. // 	response => {
    64. // 		if (response.data.resultCode == "404") {
    65. // 			console.log("response.data.resultCode是404")
    66. // 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
    67. // 			//      cookie.del("ticket")
    68. // 			//      window.location.href='http://login.com'
    69. // 			return
    70. // 		} else {
    71. // 			return response;
    72. // 		}
    73. // 	},
    74. // 	error => {
    75. // 		return Promise.reject(error.response) // 返回接口返回的错误信息
    76. // 	});
    77.  
    78.  
    79.  
    80. export default axios;
    1. //src/view/main.js
    2. // The Vue build version to load with the `import` command
    3. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    4. import Vue from 'vue'
    5. // 新添加1
    6. import ElementUI from 'element-ui'
    7. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
    8. import 'element-ui/lib/theme-chalk/index.css'
    9.  
    10. import App from './App'
    11. import router from './router'
    12.  
    13. import axios from '@/api/http'
    14. import VueAxios from 'vue-axios'
    15. Vue.use(VueAxios,axios)
    16. Vue.use(ElementUI);
    17. Vue.config.productionTip = false
    18. /* eslint-disable no-new */
    19. new Vue({
    20.   el: '#app',
    21.   router,
    22.   components: { App },
    23.   template: ''
    24. })

    3.跨域

    1. package com.zlj.ssm.util;
    2.  
    3. import java.io.IOException;
    4.  
    5. import javax.servlet.Filter;
    6. import javax.servlet.FilterChain;
    7. import javax.servlet.FilterConfig;
    8. import javax.servlet.ServletException;
    9. import javax.servlet.ServletRequest;
    10. import javax.servlet.ServletResponse;
    11. import javax.servlet.http.HttpServletRequest;
    12. import javax.servlet.http.HttpServletResponse;
    13.  
    14. /**
    15.  * 配置tomcat允许跨域访问
    16.  * 
    17.  * @author Administrator
    18.  *
    19.  */
    20. public class CorsFilter implements Filter {
    21. 	@Override
    22. 	public void init(FilterConfig filterConfig) throws ServletException {
    23. 	}
    24. 	@Override
    25. 	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
    26. 			throws IOException, ServletException {
    27. 		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
    28. 		HttpServletRequest req = (HttpServletRequest) servletRequest;
    29. 		// Access-Control-Allow-Origin就是我们需要设置的域名
    30. 		// Access-Control-Allow-Headers跨域允许包含的头。
    31. 		// Access-Control-Allow-Methods是允许的请求方式
    32. 		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
    33. 		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
    34.  
    35. 		//允许客户端发一个新的请求头jwt
    36. 		httpResponse.setHeader("Access-Control-Allow-Headers","responseType,Origin,X-Requested-With, Content-Type, Accept, jwt");
    37. 		//允许客户端处理一个新的响应头jwt
    38. 		httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
    39. 		
    40. 		//httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    41. 		//httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
    42.  
    43. 		// axios的ajax会发两次请求，第一次提交方式为：option，直接返回即可
    44. 		if ("OPTIONS".equals(req.getMethod())) {
    45. 			return;
    46. 		}
    47. 		filterChain.doFilter(servletRequest, servletResponse);
    48. 	}
    49. 	@Override
    50. 	public void destroy() {
    51.  
    52. 	}
    53. }

     4.注册页面

    前端 

    1. //src/view/Register.vue
    3.  
    5.  
    6.  
    1. //src/router/index.js
    2. import Vue from 'vue'
    3. import Router from 'vue-router'
    4. import HelloWorld from '@/components/HelloWorld'
    5. import Login from '@/views/Login'
    6. import Register from '@/views/Register'
    7.  
    8. Vue.use(Router)
    9.  
    10. export default new Router({
    11.   routes: [{
    12.       path: '/',
    13.       name: 'Login',
    14.       component: Login
    15.     },
    16.     {
    17.       path: '/Register',
    18.       name: 'Register',
    19.       component: Register
    20.     }
    21.   ]
    22.  
    23. })
    1. //src/api/action.js
    2. /**
    3.  * 对后台请求的地址的封装，URL格式如下：
    4.  * 模块名_实体名_操作
    5.  */
    6. export default {
    7. 	'SERVER': 'http://localhost:8080/ssm', //服务器
    8. 	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆
    9. 	'SYSTEM_USER_DOREG': '/user/userRegister', //注册
    10. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    11. 		return this.SERVER + this[k];
    12. 	}
    13. }

    后端

    1. package com.zlj.ssm.service.impl;
    2.  
    3. import com.zlj.ssm.mapper.UserMapper;
    4. import com.zlj.ssm.model.User;
    5. import com.zlj.ssm.service.IUserService;
    6. import com.zlj.ssm.util.PageBean;
    7. import com.zlj.ssm.vo.UserVo;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Service;
    10.  
    11. import java.util.List;
    12. import java.util.Map;
    13.  
    14. @Service
    15. public class UserServiceImpl implements IUserService {
    16.  
    17.     @Autowired
    18.     private UserMapper userMapper;
    19.  
    20.     @Override
    21.     public List> queryUserPager(UserVo userVo, PageBean pageBean) {
    22.         return userMapper.queryUserPager(userVo);
    23.     }
    24.  
    25.     @Override
    26.     public int insertSelective(User record) {
    27.         return userMapper.insertSelective(record);
    28.     }
    29. }
    1. package com.zlj.ssm.controller;
    2.  
    3. import com.zlj.ssm.service.IUserService;
    4. import com.zlj.ssm.util.JsonResponseBody;
    5. import com.zlj.ssm.util.PageBean;
    6. import com.zlj.ssm.vo.UserVo;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.stereotype.Controller;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.ResponseBody;
    11.  
    12. import javax.servlet.http.HttpServletRequest;
    13. import javax.servlet.http.HttpServletResponse;
    14. import java.util.List;
    15. import java.util.Map;
    16. import com.zlj.ssm.jwt.*;
    17.  
    18. @Controller
    19. @RequestMapping("/user")
    20. public class UserController {
    21.  
    22.     @Autowired
    23.     private IUserService userService;
    24.  
    25.     @RequestMapping("/userLogin")
    26.     @ResponseBody
    27.     public JsonResponseBody userLogin(UserVo userVo, HttpServletResponse response) {
    28.         System.out.println(123);
    29.         if (userVo.getUsername().equals("admin") && userVo.getPassword().equals("123")) {
    30.             //私有要求claim
    31. //            Map json=new HashMap();
    32. //            json.put("username", userVo.getUsername());
    33.             //生成JWT，并设置到response响应头中
    34. //            String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);
    35. //            response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
    36.             return new JsonResponseBody<>("用户登陆成功！", true, 0, null);
    37.         } else {
    38.             return new JsonResponseBody<>("用户名或密码错误！", false, 0, null);
    39.         }
    40.     }
    41.  
    42.     @RequestMapping("/queryUserPager")
    43.     @ResponseBody
    44.     public JsonResponseBody>>
    45.     queryUserPager(UserVo userVo, HttpServletRequest request) {
    46.         try {
    47.             PageBean pageBean = new PageBean();
    48.             pageBean.setRequest(request);
    49.             List> users = userService.queryUserPager(userVo, pageBean);
    50.             return new JsonResponseBody<>("OK", true, pageBean.getTotal(), users);
    51.         } catch (Exception e) {
    52.             e.printStackTrace();
    53.             return new JsonResponseBody<>("分页查询用户信息失败！", false, 0, null);
    54.         }
    55.  
    56.     }
    57.     @RequestMapping("/userRegister")
    58.     @ResponseBody
    59.     public JsonResponseBody userRegister(UserVo userVo, HttpServletResponse response) {
    60.         //状态新注册默认为0
    61.         userVo.setStatus("0");
    62.         //因为ID为String类型需要手动设置，当然可以根据自己的需要改为Int类型
    63.         userVo.setId("8");
    64.         int i = userService.insertSelective(userVo);
    65.         if (i > 0) {
    66.             return new JsonResponseBody<>("注册成功", true, 0, null);
    67.         } else {
    68.             return new JsonResponseBody<>("用户注册失败，请重新输入", false, 0, null);
    69.         }
    70.  
    71.     }
    72. }

     

  • 相关阅读:
    集成 push kit 签名配置报6003/收不到华为推送
    C++二分算法：水位上升的泳池中游泳
    Elasticsearch 字段别名 field-alias
    【C++】哈希表的实现
    Qt不规则可移动窗体的实现
    Redisson 实现分布式锁源码浅析
    HANA 常用数据类型详解
    Kotlin学习快速入门（7）——扩展的妙用
    H3C 6520X 配置IRF+BFD
    韩顺平linux（1-11小节）
  • 原文地址：https://blog.csdn.net/weixin_73471776/article/details/133182849