SPA项目开发之登录
运行结果 
发布日期：2022-02-27 17:51:21
浏览次数：41
分类：技术文章
本文共 13228 字，大约阅读时间需要 44 分钟。
vue+elementUI完成注册及登陆
1.vue怎么引入和配置使用element-ui框架
1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro011.2 npm安装elementUI
cd pro01 #进入新建项目的根目录 npm install element-ui -S #安装element-ui模块在指定位置添加三行代码
1.3 在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）
import Vue from ‘vue’import ElementUI from 'element-ui' //新添加1 import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前 import App from './App' import router from './router' Vue.use(ElementUI) //新添加3 Vue.config.productionTip = false
案例：
首先我们创建一个登陆和注册的界面Login.vue
用户登陆
提交 用户注册 忘记密码
然后再路由设置以下
index.jsimport Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Login from '@/Views/Login'import Reg from '@/Views/Reg'Vue.use(Router)export default new Router({ routes: [{ path: '/', name: 'Login', component: Login }, { path: '/Login', name: 'Login', component: Login }, { path: '/Reg', name: 'Reg', component: Reg } ]}) App.vue设置样式
main.js加入非常重要的文件
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import 'element-ui/lib/theme-chalk/index.css'import App from './App'import router from './router'import ElementUI from 'element-ui'import axios from '@/api/http'import VueAxios from 'vue-axios'Vue.use(ElementUI)Vue.use(VueAxios, axios)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ' 我们要再src下配置两个重要的文件实现前台和后台的交互
http.js和action.js 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) { // var jwt = window.vm.$store.getters.getJwt; // config.headers['jwt'] = jwt; return config;}, function(error) { return Promise.reject(error);});// 响应拦截器axios.interceptors.response.use(function(response) { // debugger; // var jwt = response.headers['jwt']; // if(jwt){ // window.vm.$store.commit('setJwt',{jwt:jwt}); // } 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; action.js
/** * 对后台请求的地址的封装，URL格式如下： * 模块名_实体名_操作 */export default { 'SERVER': 'http://localhost:8080/T226_lcf', //服务器 'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆 'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册 'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左侧树形菜单加载 'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表 'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增 'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改 'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除 'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据 'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用 return this.SERVER + this[k]; }} 这里我介绍以下eclipse项目pom.xml所需要的依赖
以及vue.util pom.xml4.0.0 com.zking T226_Slcf war 0.0.1-SNAPSHOT T226_lcf Maven Webapp http://maven.apache.org 5.2.12.Final 5.1.44 5.0.1.RELEASE 2.5.13 1.7.7 2.9.1 3.2.0 4.12 4.0.0 1.2 1.1.2 8.0.47 1.7.6 2.6.0 2.9.3 org.hibernate hibernate-core ${hibernate.version} org.hibernate hibernate-c3p0 ${hibernate.version} org.hibernate hibernate-ehcache ${hibernate.version} mysql mysql-connector-java ${mysql.version} org.springframework spring-context ${spring.version} org.springframework spring-orm ${spring.version} org.springframework spring-web ${spring.version} org.springframework spring-aspects ${spring.version} org.apache.struts struts2-core ${struts.version} org.apache.struts struts2-spring-plugin ${struts.version} org.slf4j slf4j-api ${slf4j.version} org.slf4j jcl-over-slf4j ${slf4j.version} runtime org.apache.logging.log4j log4j-slf4j-impl ${log4j.version} org.apache.logging.log4j log4j-api ${log4j.version} org.apache.logging.log4j log4j-core ${log4j.version} org.apache.logging.log4j log4j-web ${log4j.version} runtime com.lmax disruptor ${disruptor.version} junit junit ${junit.version} test javax.servlet javax.servlet-api ${servlet.version} provided jstl jstl ${jstl.version} taglibs standard ${standard.version} org.apache.tomcat tomcat-jsp-api ${tomcat-jsp.version} org.apache.axis2 axis2 ${axis2.version} pom org.apache.axis2 axis2-transport-http ${axis2.version} org.apache.axis2 axis2-transport-local ${axis2.version} org.apache.axis2 axis2-spring ${axis2.version} org.apache.axis2 axis2-adb ${axis2.version} org.apache.xmlbeans xmlbeans ${xmlbeans.version} com.fasterxml.jackson.core jackson-databind ${jackson.version} com.fasterxml.jackson.core jackson-core ${jackson.version} com.fasterxml.jackson.core jackson-annotations ${jackson.version} io.jsonwebtoken jjwt 0.9.1 com.auth0 java-jwt 3.4.0 T226_lcf org.apache.maven.plugins maven-compiler-plugin 3.7.0 1.8 1.8 UTF-8
配置vue.util所需要的跨域依赖
package com.zking.vue.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; // // // Access-Control-Allow-Origin就是我们需要设置的域名 // // Access-Control-Allow-Headers跨域允许包含的头。 // // Access-Control-Allow-Methods是允许的请求方式 // httpResponse.addHeader("Access-Control-Allow-Origin", "*");// *,任何域名 // httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, // DELETE"); // // httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, // // X-Requested-With, Content-Type, Accept"); // // // 允许请求头Token // httpResponse.setHeader("Access-Control-Allow-Headers", // "Origin,X-Requested-With, Content-Type, Accept, Token"); // HttpServletRequest req = (HttpServletRequest) servletRequest; // System.out.println("Token=" + req.getHeader("Token")); // if("OPTIONS".equals(req.getMethod())) { // return; // } // // // filterChain.doFilter(servletRequest, servletResponse); // } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse resp = (HttpServletResponse) servletResponse; HttpServletRequest req = (HttpServletRequest) servletRequest; // Access-Control-Allow-Origin就是我们需要设置的域名 // Access-Control-Allow-Headers跨域允许包含的头。 // Access-Control-Allow-Methods是允许的请求方式 resp.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名 resp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE"); // resp.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With, // Content-Type, Accept"); // 允许客户端，发一个新的请求头jwt resp.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With, Content-Type, Accept, jwt"); // 允许客户端，处理一个新的响应头jwt resp.setHeader("Access-Control-Expose-Headers", "jwt"); // String sss = resp.getHeader("Access-Control-Expose-Headers"); // System.out.println("sss=" + sss); // 允许请求头Token // httpResponse.setHeader("Access-Control-Allow-Headers","Origin,X-Requested-With, // Content-Type, Accept, Token"); // System.out.println("Token=" + req.getHeader("Token")); if ("OPTIONS".equals(req.getMethod())) {// axios的ajax会发两次请求，第一次提交方式为：option，直接返回即可 return; } filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { }} 运行结果
需要使用doc命令再spa项目的位置下输入npm run dev 然后需要连接数据库 如图 运行结果 转载地址：https://blog.csdn.net/shaobina/article/details/100160906 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
路过，博主的博客真漂亮。。
[***.116.15.85]2024年03月29日 17时31分56秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
Unity中使用ViedoPlayer操作视频文件
2019-04-27
C#中的的输入与输出
2019-04-27
C#中@符号的作用
2019-04-27
C#中$符号的作用
2019-04-27
Mac装windows系统后如何更换触控板设置
2019-04-27
Windows系统下如何设置软件的快捷键
2019-04-27
语言中的溢出
2019-04-27
Unity中实现获取一段时间内移动设备声音的最大音量
2019-04-27
springboot的初始化启动过程
2019-04-27
关于spring bean 生命周期代码详解-产生到消亡
2019-04-27
spring 启动之全过程 源码解析
2019-04-27
Spring AOP 原理
2019-04-27
mysql 分库分表分区 动态扩容 总结
2019-04-27
分布式事务 四种方案
2019-04-27
redis和spring整合
2019-04-27
iis6 和iis7s上整个网站重定向
2019-04-27
iis7 url重写和重定向
2019-04-27
navicat工具来将SQL Server数据迁移到MySQL
2019-04-27
微信公众号从头开发（接入与消息）
2019-04-27
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 307897161 位访客
访问时间: 2024-04-25 21:51:08
访问IP: 18.117.148.105
Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1
手机版