devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于Vue和Element UI实现前后端分离和交互_vue-element-admin 前后端交互

作者：Cpp五条 | 2024-02-19 01:17:11

赞

踩

vue-element-admin 前后端交互

目录

前言

一、Element UI简介

1.Element UI是什么

2.Element UI的特点

二、项目搭建

1.创建一个SPA项目

2.安装 Element-UI

3.导入组件

4.创建登陆注册界面

登录组件---Login.vue

注册组件---Register.vue

定义组件与路由的对应关系

效果演示： 

三、前后端数据交互

1.安装axios

2.导入api模块，添加axios的全局配置

3.修改main.js配置vue-axios

4.数据表数据

5.编写后端登录注册controller层

6.使用封装后的axios发送请求

7.测试

四、CORS跨域

1.什么是CORS？

2.为什么会出现CORS问题？

3.特点

4.如何解决CORS问题？

5.跨域问题处理

前言

        当今的Web开发趋势中，前后端分离已经成为一种流行的架构模式。它将前端和后端的开发分离开来，使得前端和后端可以独立进行开发和部署。Vue.js作为一种流行的前端框架，结合Element UI这个优秀的UI组件库，可以帮助我们更好地实现前后端分离和交互。

一、Element UI简介

1.Element UI是什么

        Element UI是一套基于Vue.js的开源UI组件库。它提供了丰富的可复用的UI组件，包括按钮、表单、弹窗、菜单等，可以帮助开发者快速构建现代化的Web应用程序界面。Element UI具有简洁美观的设计风格，易于使用和定制。它还提供了丰富的文档和示例，方便开发者学习和使用。无论是初学者还是有经验的开发者，都可以通过Element UI来提高开发效率，创建出优秀的用户界面。

2.Element UI的特点

1. 响应式布局：Element UI的组件可以根据不同的屏幕尺寸自动调整布局，适应不同的设备。

2. 高度可定制：开发者可以根据自己的需求对组件进行定制，包括样式、功能和交互等方面。

3. 丰富的文档和示例：Element UI提供了详细的文档和示例，方便开发者学习和使用。

4. 国际化支持：Element UI支持多种语言，可以轻松实现国际化的Web应用程序。

二、项目搭建

1.创建一个SPA项目

可观看下面这篇博文

​​​​​​Vue安装并使用Vue-CLI构建SPA项目并实现路由icon-default.png?t=N7T8https://blog.csdn.net/weixin_74268571/article/details/133137962?spm=1001.2014.3001.5502

创建好之后运行项目

在SAP项目的根目录输入cmd后在cmd窗口输入npm run dev
 

2.安装 Element-UI

在安装前需先关停我们的项目，在cmd窗口中ctrl+c,ctrl+c就可以了

 接下来就可以通过命令去下载Element UI

  1. cd my-spa                                 #进入新建项目的根目录
  2. npm install element-ui -S                 #安装 Element UI模块

需进入该SPA项目根目录安装Element UI模块

下载后就可以看到该依赖了 

注：

在Vue中，使用命令行工具（如npm或yarn）下载依赖时，可以使用不同的选项来指定依赖的安装方式：

  • -g：全局安装。使用该选项下载的依赖将被安装在全局环境中，可以在任何项目中使用。通常用于安装一些全局的工具或命令行工具，比如Vue CLI。

总结起来，-g用于全局安装工具或命令行工具，-s用于保存项目运行所必需的依赖，-d用于保存开发过程中需要的依赖。

3.导入组件

在main.js中导入Element UI对应组件并将Element UI挂载在Vue中

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. // 新添加1
  5. import ElementUI from 'element-ui'
  6. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
  7. import 'element-ui/lib/theme-chalk/index.css'
  8. import App from './App'
  9. import router from './router'
  10.  
  11.  
  12. // 新添加3
  13. Vue.use(ElementUI)
  14. Vue.config.productionTip = false
  15.  
  16. /* eslint-disable no-new */
  17. new Vue({
  18.   el: '#app',
  19.   router,
  20.   components: { App },
  21.   template: '<App/>'
  22. })

4.创建登陆注册界面

  • 登录组件---Login.vue

  1. <template>
  2. 	<div class="login-wrap">
  3. 		<el-form class="login-container">
  4. 			<h1 class="title">用户登录</h1>
  5. 			<el-form-item label="">
  6. 				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
  7. 			</el-form-item>
  8. 			<el-form-item label="">
  9. 				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
  10. 			</el-form-item>
  11. 			<el-form-item>
  12. 				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
  13. 			</el-form-item>
  14. 			<el-row style="text-align: center;margin-top:-10px">
  15. 				<el-link type="primary">忘记密码</el-link>
  16. 				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
  17. 			</el-row>
  18. 		</el-form>
  19. 	</div>
  20. </template>
  21. <script>
  22. export default {
  23.   name: 'Login',
  24.   data () {
  25.     return {
  26.       username : '',
  27.       password:''
  28.     }
  29.   },
  30.   methods:{
  31.     gotoRegister(){
  32.       //跳转
  33.       this.$router.push('/Register');
  34.     }
  35.   }
  36. }
  37. </script>
  38.  
  39. <style scoped>
  40. 	.login-wrap {
  41. 		box-sizing: border-box;
  42. 		width: 100%;
  43. 		height: 100%;
  44. 		padding-top: 10%;
  45. 		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02NC4yNzc1NTgyLDMzLjE3MDQ5NjMgTDExOS4xODU4MzYsMTYuNTY1NDkxNSIgaWQ9IlBhdGgtMTIiIHN0cm9rZT0iI0NGREFFNiIgc3Ryb2tlLXdpZHRoPSIxLjczOTEzMDQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDIuMTQzMTcwOCwyNi41MDAyNjgxIEw3LjcxMTkwMTYyLDE0LjU2NDA3MDIiIGlkPSJQYXRoLTE2IiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMC43MDI2Nzg5NjQiIG9wYWNpdHk9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLjQwNTM1Nzg5OTg3MzE1MywyLjEwODAzNjk1MzQ2OTk4MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSIgb3BhY2l0eT0iMC40NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcyLjAwMDAwMCwgMTMxLjAwMDAwMCkiIGZpbGw9IiNFNkExQTYiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yLUNvcHktMiIgY3g9IjcuMDE5NjA3ODQiIGN5PSI3LjE0NjM0MTQ2IiByeD0iNi40NzA1ODgyNCIgcnk9IjYuNDc1NjA5NzYiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuNTQ5MDE5NjA4LDEzLjYyMTk1MTIgQzQuMTIyNjI2ODEsMTMuNjIxOTUxMiA3LjAxOTYwNzg0LDEwLjcyMjcyMiA3LjAxOTYwNzg0LDcuMTQ2MzQxNDYgQzcuMDE5NjA3ODQsMy41Njk5NjA5NSA0LjEyMjYyNjgxLDAuNjcwNzMxNzA3IDAuNTQ5MDE5NjA4LDAuNjcwNzMxNzA3IEwwLjU0OTAxOTYwOCwxMy42MjE5NTEyIFoiIGlkPSJPdmFsLTItQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjc4NDMxNCwgNy4xNDYzNDEpIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuNzg0MzE0LCAtNy4xNDYzNDEpICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQuNTk2Nzc0LCAyMy4xMTExMTEpIiBmaWxsPSIjQkFDQUQ5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtNyIgb3BhY2l0eT0iMC40NSIgY3g9IjkuMTg1MzQ3MTgiIGN5PSI4Ljg4ODg4ODg5IiByeD0iOC40NzQ1NzYyNyIgcnk9IjguNTU2MTQ5NzMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBDMTMuODY1NzI2NCwxNy40NDUwMzg2IDE3LjY1OTkyMzUsMTMuNjE0MzE5OSAxNy42NTk5MjM1LDguODg4ODg4ODkgQzE3LjY1OTkyMzUsNC4xNjM0NTc4NyAxMy44NjU3MjY0LDAuMzMyNzM5MTU2IDkuMTg1MzQ3MTgsMC4zMzI3MzkxNTYgTDkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBaIiBpZD0iT3ZhbC03Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktMiIgZmlsbC1vcGFjaXR5PSIwLjYiIGZpbGw9IiNEMURFRUQiIGN4PSI4Ljc1IiBjeT0iMzMuMjUiIHI9IjguNzUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTQiIGZpbGwtb3BhY2l0eT0iMC42IiBmaWxsPSIjRDFERUVEIiBjeD0iMjQzLjgzMzMzMyIgY3k9IjMwLjMzMzMzMzMiIHI9IjUuODMzMzMzMzMiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTUiIGZpbGw9IiNFMEI0QjciIGN4PSIxNzUuNTgzMzMzIiBjeT0iMjMyLjc1IiByPSI1LjI1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  46. 		/* background-color: #112346; */
  47. 		background-repeat: no-repeat;
  48. 		background-position: center right;
  49. 		background-size: 100%;
  50. 	}
  51.  
  52. 	.login-container {
  53. 		border-radius: 10px;
  54. 		margin: 0px auto;
  55. 		width: 350px;
  56. 		padding: 30px 35px 15px 35px;
  57. 		background: #fff;
  58. 		border: 1px solid #eaeaea;
  59. 		text-align: left;
  60. 		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  61. 	}
  62.  
  63. 	.title {
  64. 		margin: 0px auto 40px auto;
  65. 		text-align: center;
  66. 		color: #505458;
  67. 	}
  68. </style>

  • 注册组件---Register.vue

  1. <template>
  2. 	<div class="login-wrap">
  3. 		<el-form class="login-container">
  4. 			<h1 class="title">用户注册</h1>
  5. 			<el-form-item label="">
  6. 				<el-input type="text" v-model="username" placeholder="账号" autocomplete="off"></el-input>
  7. 			</el-form-item>
  8. 			<el-form-item label="">
  9. 				<el-input type="password" v-model="password" placeholder="密码" autocomplete="off"></el-input>
  10. 			</el-form-item>
  11. 			<el-form-item>
  12. 				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
  13. 			</el-form-item>
  14. 			<el-row style="text-align: center;margin-top:-10px">
  15. 				<el-link type="primary">忘记密码</el-link>
  16. 				<el-link type="primary" @click="gotoLogin()">用户登录</el-link>
  17. 			</el-row>
  18. 		</el-form>
  19. 	</div>
  20. </template>
  21. <script>
  22. export default {
  23.   name: 'Register',
  24.   data () {
  25.     return {
  26.       username : '',
  27.       password:''
  28.     }
  29.   },
  30.   methods:{
  31.     gotoLogin(){
  32.       //跳转
  33.       this.$router.push('/');
  34.     }
  35.   }
  36. }
  37. </script>
  38.  
  39. <style scoped>
  40. 	.login-wrap {
  41. 		box-sizing: border-box;
  42. 		width: 100%;
  43. 		height: 100%;
  44. 		padding-top: 10%;
  45. 		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02NC4yNzc1NTgyLDMzLjE3MDQ5NjMgTDExOS4xODU4MzYsMTYuNTY1NDkxNSIgaWQ9IlBhdGgtMTIiIHN0cm9rZT0iI0NGREFFNiIgc3Ryb2tlLXdpZHRoPSIxLjczOTEzMDQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDIuMTQzMTcwOCwyNi41MDAyNjgxIEw3LjcxMTkwMTYyLDE0LjU2NDA3MDIiIGlkPSJQYXRoLTE2IiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMC43MDI2Nzg5NjQiIG9wYWNpdHk9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLjQwNTM1Nzg5OTg3MzE1MywyLjEwODAzNjk1MzQ2OTk4MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSIgb3BhY2l0eT0iMC40NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcyLjAwMDAwMCwgMTMxLjAwMDAwMCkiIGZpbGw9IiNFNkExQTYiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yLUNvcHktMiIgY3g9IjcuMDE5NjA3ODQiIGN5PSI3LjE0NjM0MTQ2IiByeD0iNi40NzA1ODgyNCIgcnk9IjYuNDc1NjA5NzYiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuNTQ5MDE5NjA4LDEzLjYyMTk1MTIgQzQuMTIyNjI2ODEsMTMuNjIxOTUxMiA3LjAxOTYwNzg0LDEwLjcyMjcyMiA3LjAxOTYwNzg0LDcuMTQ2MzQxNDYgQzcuMDE5NjA3ODQsMy41Njk5NjA5NSA0LjEyMjYyNjgxLDAuNjcwNzMxNzA3IDAuNTQ5MDE5NjA4LDAuNjcwNzMxNzA3IEwwLjU0OTAxOTYwOCwxMy42MjE5NTEyIFoiIGlkPSJPdmFsLTItQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjc4NDMxNCwgNy4xNDYzNDEpIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuNzg0MzE0LCAtNy4xNDYzNDEpICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQuNTk2Nzc0LCAyMy4xMTExMTEpIiBmaWxsPSIjQkFDQUQ5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtNyIgb3BhY2l0eT0iMC40NSIgY3g9IjkuMTg1MzQ3MTgiIGN5PSI4Ljg4ODg4ODg5IiByeD0iOC40NzQ1NzYyNyIgcnk9IjguNTU2MTQ5NzMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBDMTMuODY1NzI2NCwxNy40NDUwMzg2IDE3LjY1OTkyMzUsMTMuNjE0MzE5OSAxNy42NTk5MjM1LDguODg4ODg4ODkgQzE3LjY1OTkyMzUsNC4xNjM0NTc4NyAxMy44NjU3MjY0LDAuMzMyNzM5MTU2IDkuMTg1MzQ3MTgsMC4zMzI3MzkxNTYgTDkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBaIiBpZD0iT3ZhbC03Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktMiIgZmlsbC1vcGFjaXR5PSIwLjYiIGZpbGw9IiNEMURFRUQiIGN4PSI4Ljc1IiBjeT0iMzMuMjUiIHI9IjguNzUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTQiIGZpbGwtb3BhY2l0eT0iMC42IiBmaWxsPSIjRDFERUVEIiBjeD0iMjQzLjgzMzMzMyIgY3k9IjMwLjMzMzMzMzMiIHI9IjUuODMzMzMzMzMiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTUiIGZpbGw9IiNFMEI0QjciIGN4PSIxNzUuNTgzMzMzIiBjeT0iMjMyLjc1IiByPSI1LjI1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  46. 		/* background-color: #112346; */
  47. 		background-repeat: no-repeat;
  48. 		background-position: center right;
  49. 		background-size: 100%;
  50. 	}
  51.  
  52. 	.login-container {
  53. 		border-radius: 10px;
  54. 		margin: 0px auto;
  55. 		width: 350px;
  56. 		padding: 30px 35px 15px 35px;
  57. 		background: #fff;
  58. 		border: 1px solid #eaeaea;
  59. 		text-align: left;
  60. 		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  61. 	}
  62.  
  63. 	.title {
  64. 		margin: 0px auto 40px auto;
  65. 		text-align: center;
  66. 		color: #505458;
  67. 	}
  68. </style>

  • 定义组件与路由的对应关系

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Login from '@/views/Login'
  5. import Register from '@/views/Register'
  6.  
  7. Vue.use(Router)
  8.  
  9. export default new Router({
  10.   routes: [
  11.     {
  12.     path: '/',
  13.     name: 'Login',
  14.     component: Login
  15.     },
  16.     {
  17.     path: '/Register',
  18.     name: 'Register',
  19.     component: Register
  20.     }
  21.     ]
  22. })

效果演示： 

三、前后端数据交互

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

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

"qs"通常指的是"query string"，即查询字符串。查询字符串是URL中的一部分，用于传递参数给服务器。在Vue中，我们可以使用"qs"库来处理和解析查询字符串和传参问题。

"qs"库是一个用于序列化和解析URL查询字符串的JavaScript库。它提供了一组方法，可以将JavaScript对象转换为查询字符串，或将查询字符串解析为JavaScript对象。通过使用"qs"库，我们可以方便地处理URL中的查询参数，例如在发送HTTP请求时将参数序列化为查询字符串，或在接收到查询字符串时将其解析为JavaScript对象进行处理。通过使 用"qs"库，我们可以更方便地处理Vue应用程序中的查询字符串，提高开发效率。

安装指令

npm i qs -S

Vue Axios是一个基于Promise的HTTP客户端，用于在Vue.js应用程序中发送HTTP请求。它是基于Axios库的封装，提供了一种简洁、灵活和强大的方式来处理HTTP请求和响应。

使用Vue Axios，你可以轻松地发送GET、POST、PUT、DELETE等不同类型的请求，并处理服务器返回的数据。它还支持拦截器，可以在请求发送前或响应返回后对请求进行拦截和处理。此外，Vue Axios还提供了取消请求、设置请求头、处理错误等功能，使得与后端API进行交互变得更加方便和可靠。 通过Vue Axios，还可以在Vue.js应用程序中轻松地集成和管理HTTP请求，从而更好地处理数据交互和与后端API进行通信。

安装指令

npm i vue-axios -S

2.导入api模块，添加axios的全局配置

将api模块导入到SPA项目的src目录下，其中api模块包含了action.js（针对后台请求接口的封装定义）和http.js（针对axios的全局配置）两个文件。

action.js

  1. /**
  2.  * 对后台请求的地址的封装，URL格式如下：
  3.  * 模块名_实体名_操作
  4.  */
  5. export default {
  6. 	'SERVER': 'http://localhost:8080/ssm/', //服务器url
  7. 	'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆
  8. 	'SYSTEM_USER_DOREG': 'user/userRegister', //注册
  9. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
  10. 		return this.SERVER + this[k];
  11. 	}
  12. }

http.js

  1. /**
  2.  * vue项目对axios的全局配置
  3.  */
  4. import axios from 'axios'
  5. import qs from 'qs'
  6.  
  7. //引入action模块，并添加至axios的类属性urls上
  8. import action from '@/api/action'
  9. axios.urls = action
  10.  
  11. // axios默认配置
  12. axios.defaults.timeout = 10000; // 超时时间
  13. // axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
  14. axios.defaults.baseURL = action.SERVER;
  15.  
  16. //整理数据
  17. // 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
  18. axios.defaults.transformRequest = function(data) {
  19. 	data = qs.stringify(data);
  20. 	return data;
  21. };
  22.  
  23.  
  24. // 请求拦截器
  25. axios.interceptors.request.use(function(config) {
  26. 	return config;
  27. }, function(error) {
  28. 	return Promise.reject(error);
  29. });
  30.  
  31. // 响应拦截器
  32. axios.interceptors.response.use(function(response) {
  33. 	return response;
  34. }, function(error) {
  35. 	return Promise.reject(error);
  36. });
  37.  
  38. export default axios;

3.修改main.js配置vue-axios

在main.js文件中引入api模块和vue-axios模块

  1. import axios from '@/api/http'                 
  2. import VueAxios from 'vue-axios' 
  3.  
  4. Vue.use(VueAxios,axios)

4.数据表数据

5.编写后端登录注册controller层

  1. package com.ctb.ssm.controller;
  2.  
  3. import com.ctb.ssm.service.IUserService;
  4. import com.ctb.ssm.util.JsonResponseBody;
  5. import com.ctb.ssm.util.PageBean;
  6. import com.ctb.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.ctb.ssm.jwt.*;
  17.  
  18. @Controller
  19. @RequestMapping("/user")
  20. public class UserController {
  21.  
  22.     @Autowired
  23.     private IUserService userService;
  24.  
  25.     /**
  26.      * 登录
  27.      * @param userVo
  28.      * @param response
  29.      * @return
  30.      */
  31.     @RequestMapping("/userLogin")
  32.     @ResponseBody
  33.     public JsonResponseBody<?> userLogin(UserVo userVo, HttpServletResponse response){
  34.         if(userVo.getUsername().equals("admin")&&userVo.getPassword().equals("123")){
  35.             //私有要求claim
  36. //            Map<String,Object> json=new HashMap<String,Object>();
  37. //            json.put("username", userVo.getUsername());
  38.             //生成JWT，并设置到response响应头中
  39. //            String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);
  40. //            response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
  41.             return new JsonResponseBody<>("用户登陆成功！",true,0,null);
  42.         }else{
  43.             return new JsonResponseBody<>("用户名或密码错误！",false,0,null);
  44.         }
  45.     }
  46.  
  47.  
  48.     /**
  49.      * 注册
  50.      * @param userVo
  51.      * @param response
  52.      * @return
  53.      */
  54.     @RequestMapping("/userRegister")
  55.     @ResponseBody
  56.     public JsonResponseBody<?> userRegister(UserVo userVo, HttpServletResponse response){
  57.         userVo.setId("9");
  58.         int i = userService.insertSelective(userVo);
  59.         if(i>0){
  60.             return new JsonResponseBody<>("用户注册成功！",true,0,null);
  61.         }else{
  62.             return new JsonResponseBody<>("用户注册失败！",false,0,null);
  63.         }
  64.     }
  65. }

6.使用封装后的axios发送请求

Login.vue登录提交中发get请求

  1. <template>
  2. 	<div class="login-wrap">
  3. 		<el-form class="login-container">
  4. 			<h1 class="title">用户登录</h1>
  5. 			<el-form-item label="">
  6. 				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
  7. 			</el-form-item>
  8. 			<el-form-item label="">
  9. 				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
  10. 			</el-form-item>
  11. 			<el-form-item>
  12. 				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
  13. 			</el-form-item>
  14. 			<el-row style="text-align: center;margin-top:-10px">
  15. 				<el-link type="primary">忘记密码</el-link>
  16. 				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
  17. 			</el-row>
  18. 		</el-form>
  19. 	</div>
  20. </template>
  21.  
  22. <script>
  23.   import axios from 'axios'
  24.   import qs from 'qs'
  25. export default {
  26.   name: 'Login',
  27.   data () {
  28.     return {
  29.       username: '',
  30.       password: ''
  31.     }
  32.   },
  33.   methods:{
  34.     gotoRegister(){
  35.       this.$router.push('/Register');
  36.     },
  37.     doSubmit(){
  38.       let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
  39.       let params = {
  40.         username: this.username,
  41.         password: this.password
  42.       };
  43.       //get请求
  44.       axios.get(url, {
  45.         params: params
  46.       }).then(r => {
  47.         console.log(r);
  48.         if (r.data.success) {
  49.           this.$message({
  50.             message: r.data.msg,
  51.             type: 'success'
  52.           });
  53.         } else {
  54.           this.$message.error(r.data.msg);
  55.         }
  56.       }).catch(e => {
  57.       });
  58.       //post请求
  59.       // axios.post(url,params).then(r => {
  60.       //   console.log(r);
  61.       //   if (r.data.success) {
  62.       //     this.$message({
  63.       //       message: r.data.msg,
  64.       //       type: 'success'
  65.       //     });
  66.       //   } else {
  67.       //     this.$message.error(r.data.msg);
  68.       //   }
  69.       // }).catch(e => {
  70.       // });
  71.     }
  72.   }
  73. }
  74. </script>
  75.  
  76.  
  77. <style scoped>
  78. 	.login-wrap {
  79. 		box-sizing: border-box;
  80. 		width: 100%;
  81. 		height: 100%;
  82. 		padding-top: 10%;
  83.     background-image: url('../assets/cfpl.png');
  84. 		background-repeat: no-repeat;
  85. 		background-position: center right;
  86. 		background-size: 100%;
  87. 	}
  88. .login-container {
  89. 	border-radius: 10px;
  90. 	margin: 0px auto;
  91. 	width: 350px;
  92. 	padding: 30px 35px 15px 35px;
  93. 	background: #fff;
  94. 	border: 1px solid #eaeaea;
  95. 	text-align: left;
  96. 	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  97. }
  98.  
  99. .title {
  100. 	margin: 0px auto 40px auto;
  101. 	text-align: center;
  102. 	color: #505458;
  103. }
  104. </style>

Register.vue注册提交中发post请求

  1. <template>
  2. 	<div class="login-wrap">
  3. 		<el-form class="login-container">
  4. 			<h1 class="title">用户注册</h1>
  5. 			<el-form-item label="">
  6. 				<el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input>
  7. 			</el-form-item>
  8. 			<el-form-item label="">
  9. 				<el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input>
  10. 			</el-form-item>
  11. 			<el-form-item>
  12. 				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
  13. 			</el-form-item>
  14. 			<el-row style="text-align: center;margin-top:-10px">
  15. 				<el-link type="primary">忘记密码</el-link>
  16. 				<el-link type="primary" @click="gotoLogin()">用户登录</el-link>
  17. 			</el-row>
  18. 		</el-form>
  19. 	</div>
  20. </template>
  21.  
  22. <script>
  23. export default {
  24.   name: 'Register',
  25.   data () {
  26.    return {
  27.      username: '',
  28.      password: ''
  29.    }
  30.   },
  31.   methods:{
  32.     gotoLogin(){
  33.       this.$router.push('/');
  34.     },
  35.     doSubmit(){
  36.       let url = this.axios.urls.SYSTEM_USER_DOREG;
  37.       let params = {
  38.         username: this.username,
  39.         password: this.password
  40.       };
  41.  
  42.       this.axios.post(url,params).then(r => {
  43.         console.log(r);
  44.         if (r.data.success) {
  45.           this.$message({
  46.             message: r.data.msg,
  47.             type: 'success'
  48.           });
  49.           //注册完成后自动进入登入界面
  50.           this.$router.push('/');
  51.         } else {
  52.           this.$message.error(r.data.msg);
  53.         }
  54.       }).catch(e => {
  55.           console.log(e);
  56.       });
  57.     }
  58.   }
  59. }
  60. </script>
  61.  
  62. <style scoped>
  63. 	.login-wrap {
  64. 		box-sizing: border-box;
  65. 		width: 100%;
  66. 		height: 100%;
  67. 		padding-top: 10%;
  68.     background-image: url('../assets/cfpl.png');
  69. 		background-repeat: no-repeat;
  70. 		background-position: center right;
  71. 		background-size: 100%;
  72. 	}
  73. .login-container {
  74. 	border-radius: 10px;
  75. 	margin: 0px auto;
  76. 	width: 350px;
  77. 	padding: 30px 35px 15px 35px;
  78. 	background: #fff;
  79. 	border: 1px solid #eaeaea;
  80. 	text-align: left;
  81. 	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  82. }
  83.  
  84. .title {
  85. 	margin: 0px auto 40px auto;
  86. 	text-align: center;
  87. 	color: #505458;
  88. }
  89. </style>

7.测试

在前后端分离后我们需同时运行前后端项目，那么我们的前后端项目所用端口号为避免发生冲突，应修改为不同的，如后端Tomcat运行端口号为8080，那我们的SPA项目端口号应为其它。

我们应该如何修改SPA项目的端口号呢？

在config/index.js中进行修改

注意：

端口号的范围是从0到65535。

0到1023的端口号被称为"知名端口"，用于一些常见的网络服务；

1024到49151的端口号被称为"注册端口"，用于一些已经注册的应用程序；

49152到65535的端口号被称为"动态或私有端口"，用于临时分配给客户端应用程序。

登录效果演示

注册效果演示 

数据库数据展示

四、CORS跨域

1.什么是CORS？

CORS是一种浏览器安全机制，用于限制跨域资源的访问。当浏览器发起跨域请求时，会先向目标服务器发送一个预检请求（OPTIONS请求），以确定是否允许跨域访问。如果服务器返回的响应中包含了合适的CORS头部信息，浏览器才会继续发送真正的跨域请求。

2.为什么会出现CORS问题？

  • 前端代码通过AJAX或Fetch API向不同域的服务器发送请求。
  • 前端代码中使用了不同域的资源，比如字体、图片、脚本等。

3.特点

  1. 安全性高：CORS 是一种安全的跨域访问解决方案，通过限制允许跨域访问的源和方法，可以有效地防止恶意攻击。

  2. 灵活性强：CORS 支持不同类型的请求，包括 GET、POST、PUT、DELETE 等，同时也支持不同类型的数据传输格式，比如 JSON、XML 等。

  3. 无需修改客户端代码：CORS 是一种服务器端的解决方案，因此无需修改客户端代码即可实现跨域访问。

  4. 无需额外授权：与 JSONP 不同，CORS 不需要额外授权，只需在服务器端设置响应头即可。

4.如何解决CORS问题？

  • 服务器端设置CORS头部信息：在服务器端的响应中添加合适的CORS头部信息，允许指定的域进行跨域访问。可以通过设置Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头部字段来控制跨域访问的权限。
  1. Access-Control-Allow-Origin: * // 允许所有域名访问
  2. Access-Control-Allow-Methods: GET, POST, PUT, DELETE // 允许的请求方法
  3. Access-Control-Allow-Headers: Content-Type // 允许的请求头
  • 使用代理服务器：通过在同域下设置一个代理服务器，将跨域请求转发到目标服务器，然后将响应返回给前端。这样前端代码就可以绕过CORS限制，实现跨域访问。
  • JSONP：JSONP（JSON with Padding）是一种利用script标签跨域获取数据的方法。它的原理是利用script标签可以跨域加载资源的特性，通过动态创建script标签，向服务器请求JSON数据，从而实现跨域获取数据。需要注意的是，JSONP只支持GET请求。

5.跨域问题处理

        需要配置tomcat允许跨域访问,需编写一个过滤器，添加一个响应头Access-Control-Allow-Origin即可

  1. package com.ctb.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.HttpServletResponse;
  12.  
  13. /**
  14.  * 配置tomcat允许跨域访问
  15.  * 
  16.  * @author Administrator
  17.  *
  18.  */
  19. public class CorsFilter2 implements Filter {
  20.  
  21. 	@Override
  22. 	public void init(FilterConfig filterConfig) throws ServletException {
  23. 	}
  24.  
  25. 	@Override
  26. 	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
  27. 			throws IOException, ServletException {
  28. 		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
  29.  
  30. 		// Access-Control-Allow-Origin就是我们需要设置的域名
  31. 		// Access-Control-Allow-Headers跨域允许包含的头。
  32. 		// Access-Control-Allow-Methods是允许的请求方式
  33. 		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
  34. 		httpResponse.setHeader("Access-Control-Allow-Headers", "responseType,Origin, X-Requested-With, Content-Type, Accept");
  35. 		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
  36.  
  37. 		//允许客户端处理一个新的响应头jwt
  38. 		//httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
  39. 		filterChain.doFilter(servletRequest, servletResponse);
  40. 	}
  41.  
  42. 	@Override
  43. 	public void destroy() {
  44.  
  45. 	}
  46. }

将Tomcat跨域处理配置到web.xml中，对所有请求进行拦截处理

  1. <!--CrosFilter跨域过滤器-->
  2.   <filter>
  3.     <filter-name>corsFilter</filter-name>
  4.     <filter-class>com.ctb.ssm.util.CorsFilter2</filter-class>
  5.   </filter>
  6.   <filter-mapping>
  7.     <filter-name>corsFilter</filter-name>
  8.     <url-pattern>/*</url-pattern>
  9.   </filter-mapping>

它设置了适当的 CORS 响应头，以允许跨域请求，包括允许的来源域、请求头和请求方法，有效的控制跨域访问的权限，解决跨域问题。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/111754
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号