在Vue中通过ElementUI构建前端页面【登录，注册】，在IEDA构建后端实现前后端分离

一.ElementUI组件入门

1.对于ElementUI的理解

是一套基于 Vue.js 的开源UI组件库，提供了丰富的可复用组件，可以帮助开发者快速构建美观、易用的前端界面

2.Element UI 的特点和优势

1. 多样化的组件：Element UI 提供了众多常用的基础组件，如按钮、输入框、表格、弹窗等，同时还有更复杂的组件，如日期选择器、下拉选择框、分页器等。这些组件都经过精心设计和开发，具有统一的风格和交互体验。

2. 高度可定制性：Element UI 的组件都支持自定义样式和配置项，可以根据项目需求进行扩展和修改。开发者可以按照自己的设计要求进行样式定制，或者根据业务需求进行功能扩展。

3. 良好的文档和示例：Element UI 提供了详细的官方文档和丰富的示例代码，对组件的使用方法和配置进行了详细说明，开发者可以快速上手并解决问题。

4. 集成友好：Element UI 可以与 Vue.js 紧密集成，使用 Vue 的指令和生命周期钩子来操作和控制组件，使开发流程更加顺畅。

5. 国际化支持：Element UI 支持多种语言，并且提供了多种国际化的解决方案，可以方便地将应用程序适配到不同的语言环境。

6. 活跃的社区和更新频率：Element UI 拥有庞大的用户社区和活跃的开发团队，持续更新和维护组件库，及时修复bug并提供新功能，确保开发者能够得到稳定可靠的支持。

总的来说，Element UI 提供了丰富的组件和良好的开发体验，可以大大提高前端开发效率，特别适合在Vue.js项目中使用。无论是构建企业级应用还是个人项目，Element UI 都能为开发者提供强大的工具和组件来实现各种需求。

3.Element UI 适合的开发场景

1. 后台管理系统：Element UI 提供了丰富的数据展示和操作组件，如表格、表单、弹窗等，可以快速构建功能完善的后台管理系统。开发者可以利用 Element UI 的样式和布局组件来设计直观美观的用户界面，并结合其提供的数据处理功能来管理和展示大量的数据。

2. 企业级应用：对于企业级应用，常常需要构建复杂的业务功能和交互模块。Element UI 提供了一系列强大的组件，如日期选择器、下拉选择框、树形控件等，可以满足各种复杂业务需求。同时，Element UI 的可定制性也使得开发者能够根据企业品牌和风格进行样式定制，使整个应用更具专属性。

3. 响应式设计：Element UI 的组件都经过响应式设计，可以自动适应不同的屏幕尺寸和设备类型。这使得开发者能够轻松地构建适配手机、平板电脑和桌面等不同终端的应用程序，并保证在各种设备上的良好用户体验。

4. 快速原型开发：Element UI 提供了丰富的可复用组件，可以方便地进行快速原型开发。开发者可以利用 Element UI 的组件库快速搭建出具有基本功能和交互的原型页面，快速验证设计和需求，缩短开发周期。

5. 多语言支持：Element UI 提供了国际化的支持，可以轻松适配不同语言环境的应用程序。这对于需要面向全球用户的项目来说非常重要，可以帮助开发者快速实现多语言切换和管理。

综上所述，Element UI 在后台管理系统、企业级应用、响应式设计、快速原型开发等方面具有广泛的应用场景，并且能够满足各种复杂的业务需求。无论是大型项目还是个人项目，Element UI 都能帮助开发者快速构建高质量的前端界面。

 二.通过Element UI构建页面

1.下载Element UI依赖（在项目的根路径）

npm  install

-g         将下载的依赖放入 node_global 中 全局依赖

-d         将下载的依赖到spa工程中，不会参与打包

-s         将下载的依赖到spa工程中，会参与打包 

(三种方法)

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'
​
// 新添加3
Vue.use(ElementUI)   
Vue.config.productionTip = false

重要的事情说三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代码

验证是否添加成功 

3.导入登录界面

登录主信息

导入lement组件 

// 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'

// 新添加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'

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

修改配置信息

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

 页面展示效果

定义接收参数以及跳转界面 

效果图

三.后端做准备

1.解压导入sql数据

 

2.在IDEA中导入包名字为zz

3.修改Maven的配置 ，服务器配置

4.注意配置文件的修改，环境搭建成功的标志

四.前后端交互

1.安装axios(发送get请求)

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

安装成功的标志 

2.vue-axios（用于整合）

Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

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

通过vue-axios实现对axios的轻量封装：

下载安装vue-axios

npm i vue-axios -S

3.登录实现 

在src的目录下导入处理重复资源的包

 设置登录的点击事件

效果展示

 4.注册实现

注册界面

在后端的maven项目中 IUserService 的代码

 int insertSelective(User record);

在后端的maven项目中 UserServiceImpl 的代码

 @Override
    public int insertSelective(User record) {
        return userMapper.insertSelective(record);
    }

在后端的maven项目中 UserController(控制器) 的代码

    @RequestMapping("/userRegister")
    @ResponseBody
    public JsonResponseBody userRegister(UserVo userVo, HttpServletResponse response){
        //状态新注册默认为0
        userVo.setStatus("0");
        //因为ID为String类型需要手动设置，当然可以根据自己的需要改为Int类型
        userVo.setId("5");
        int i = userService.insertSelective(userVo);
        if(i>0){
            return new JsonResponseBody<>("用户注册完成！快去登入吧！",true,0,null);
        }else{
            return new JsonResponseBody<>("用户注册失败！重新输入。",false,0,null);
        }
    }

action.js中的代码

SYSTEM_USER_DOREG': '/user/userRegister

运行效果