SPA项目开发之登录注册

最新推荐文章于 2022-10-08 22:53:40 发布

爕藝響

最新推荐文章于 2022-10-08 22:53:40 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/what_to/article/details/99060266

版权

本文介绍了在Vue项目中如何引入和配置Element-UI框架，包括使用vue-cli创建项目、安装element-ui和在main.js中添加必要代码。接着详细讲解了axios在前后端交互中的应用，包括GET、POST请求，处理跨域问题以及qs库的使用。此外，还提到了vue-axios插件的安装和配置，以及在Vue组件中调用axios的方法。最后列出了前端和后端的相关文件，如Action.js、Http.js、Login.vue、Reg.vue、CORS配置等。

摘要由CSDN通过智能技术生成

登录注册的大体流程

1. vue怎么引入和配置使用element-ui框架
1.1 使用vue-cli脚手架工具创建一个vue项目
vue init webpack pro01

1.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

1.4 测试
修改HelloWorld.vue添加elementUI组件查看效果
package.json
在这里插入图片描述
2.后台代码与前台代码交互(axios/qs/vue-axios)
2.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

2.2GET提交

   axios.get('/user', {//注意数据是保存到json对象的params属性
        params: {
          ID: 12345
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

2.3.POST提交

      axios.post('/user', {//注意数据是直接保存到json对象
        firstName: 'Fred',
        lastName: 'Flintstone'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

注1：axios跨域问题
会一直报错：
“http://127.0.0.1:8848’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header”
因为使用了前后端分离开发，跨域访问了，解决方案：需要配置tomcat允许跨域访问，

   tomcat跨域配置方法很多，但最简单的方式是自己写一个过滤器CorsFilter实现，添加一个响应头
           Access-Control-Allow-Origin即可
           httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名
           httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80"); 

           Access-Control-Allow-Origin:*                           #则允许所有域名的脚本访问该资源。
           Access-Control-Allow-Origin:https://www.fujieace.com    #允许特定的域名访问 

      注2：axios.get提交没有问题，axios.post提交后台接收不到数据
           因为POST提交的参数的格式是Request Payload，这样后台取不到数据的(详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”)，
           解决方案：使用qs.js库，将{a:'b',c:'d'}转换成'a=b&c=d'

      注3：为简化axios使用，还可以使用axios全局配置及拦截器，详情见资料“api/http.js”
           axios.defaults.baseURL = 'https://api.example.com';
           //axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头，添加认证令牌
           axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

注4：为方便开发，建议对请求地址进行封装，详情见资料“api/action.js”

注5：^_~~~~为进一步简化开发，将action.js的URL地址封装到axios.urls属性上

2.4 qs
qs.js它是一个url参数转化的js库。用法就两个：
var obj = qs.parse(‘a=b&c=d’); //将URL解析成对象的形式：{a:‘b’,c:‘d’}
var str = qs.stringify(obj); //将对象序列化成URL的形式，以&进行拼接：a=b&c=d’

2.5 vue-axios
vue-axios是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios

2.6 axios/qs/vue-axios安装及使用步骤
1.安装（在命令提示符）
npm install axios -S
npm install qs -S
npm install vue-axios -S

2.7.修改main.js文件
#import axios from ‘axios’
#import qs from ‘qs’
import axios from ‘@/api/http’ #vue项目对axios的全局配置
import VueAxios from ‘vue-axios’
Vue.use(VueAxios,axios)

2.8.之后就可以直接在Vue组件文件的methods里使用了
this.axios.get(url,{params:{id:1,name:‘zs’}}).then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
});

前端

在这里插入图片描述
Action.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/Txyx_SSH', //服务器
	'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];
	}
}

Http.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/xyx_SSH', //服务器
	'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];
	}
}

<template>
	<div class="login-wrap">
		<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm login-container">
			<h3 style="text-align: center;">用户登录</h3>
			<el-form-item label="用户名">
				<el-input v-model="ruleForm.uname"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="ruleForm.pwd"></el-input>
			</el-form-item>
			<el-form-item>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purble-dark">
							<el-button style="width: 100%;" type="primary" @click="doLogin">提交</el-button>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="14">
						<div class="grid-content bg-purble-dark">
							<el-link type="success" @click='toReg'>用户注册</el-link>
						</div>
					</el-col>
					<el-col :span="10">
						<div class="grid-content bg-purble-dark">
							<el-link type="warning">忘记密码？</el-link>
						</div>
					</el-col>
				</el-row>

			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	import axios from 'axios'
	import qs from 'qs'

	export default {
    
		data() {
    
			return {
    
				ruleForm: {
    
					uname: '',
					pwd: ''
				}
			};
		},
		methods: {
    
			toReg() {
    
				this.$router.push({
    
					/* 直接跳路由 */
					path: '/Reg'
				});
			},
			doLogin() {
    
				let url = this.axios.urls.SYSTEM_USER_DOLOGIN;

				// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
				console.log(url)
				axios.get(url, {
    
					params: this.ruleForm
				}).then((response) => {
    
					console.log(response);
					if (response.data.code == 1) {
    
						this.$message({
    
							showClose: true,
							message: response.data.msg,
							type: 'success'
						});
					} else {
    
						this.$message({
    
							showClose: true,
							message: response.data.msg,
							type: 'error'
						});
					}
				}).catch((response) => {
    
					console.log(response);
				});

				// 				axios.post(url, qs.stringify(this.ruleForm)).then((response)=>{
    
				// 					console.log(response);
				// 					if (response.data.code == 1) {
    
				// 						this.$message({
    
				// 							showClose: true,
				// 							message: response.data.msg,
				// 							type: 'success'
				// 						});
				// 					} else {
    
				// 						this.$message({
    
				// 							showClose: true,
				// 							message: response.data.msg,
				// 							type: 'error'
				// 						});
				// 					}
				// 				}).catch(function(error) {
    
				// 					console.log(error);
				// 				});
			}
		}
	}
</script>

<style scoped>
	.login-wrap {
    
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url(data:image/svg+xml;
		base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgo