【Vue】ElementUI实现登录注册+axios全局配置+CORS跨域

目录

一、搭建项目

1.1 安装 Element-UI

1.2 导入组件

1.3 创建登录、注册界面

二、后台交互

2.1 引入axios

2.2 添加vue-axios的全局配置

2.2 ssm项目准备 (后端)

2.2.1 准备数据表

2.2.2 导入ssm项目

2.2.3 编写控制器

2.3 前端编写

2.4 登入测试

2.5 注册测试

三、CORS跨域

3.1 跨域请求问题

3.2 跨域问题处理

---

一、搭建项目

1.1 安装 Element-UI

先确保是否安装了vue-cli脚手架工具 !!!

详细操作  --- >  安装并使用vue-cli搭建SPA项目

构建好项目后通过npm安装element-ui

cd 项目根路径                               #进入新建项目的根目录
npm install element-ui -S                  #安装element-ui模块

1.2 导入组件

打开 src目录下的main.js，该文件是项目的入口文件，所以在这里导入，其他组件均可使用，不用再导入。

import Vue from 'vue'

//新添加1
import ElementUI from 'element-ui'
//新增加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'

Vue.use(ElementUI)   //新添加3
Vue.config.productionTip = false

1.3 创建登录、注册界面

我在src目录下新建了一个views专门存放一些界面组件，界面可自己设计，以下是我编写的：

1. 创建用户登录组件Login.vue

创建用户注册组件Register.vue

注1：