三.Element完成登录注册
1. 环境配置及前端演示
1.1 安装Element-UI模块
在终端执行以下命令进行下载
npm install element-ui -S
当我们下载完成后可以在目录static/package.json下面的dependencies中找到
1.2 安装axios和qs(发送get请求和post请求)
npm i axios -S
npm i qs -S
1.3 导入依赖
// 新添加1 import ElementUI from 'element-ui' // 新添加2，避免后期打包样式不同，要放在import App from './App';之前 import 'element-ui/lib/theme-chalk/index.css'
将依赖导入项目的目录src/main.js文件中
注： 我们在导入依赖和样式的时候一定要放在import App from './App'之前
将Vue实例与element进行挂载
// 新添加3 Vue.use(ElementUI) Vue.config.productionTip = false
2 页面布局
2.1组件与界面
我们可以在Element官网上找到组件，寻找自己需要的组件，直接复制代码粘贴使用即可
也可以根据上面提供的代码进行自定义修改获取自己的组件
当界面布局好后，我们也需要去配置好自己的路由
在router/index.js中进行配置
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Login', name: 'Login', component: Login }, { path: '/Register', name: 'Register', component: Register }, ] })
当然，我们也需要进行导入视图界面
import Login from '@/view/Login.vue' import Register from '@/view/Register.vue'
3.方法实现功能数据交互
3.1 通过方法进行页面跳转
（1）在组件上定义点击的方法
<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
（2）在js代码的方法中进行定义
export default { name: 'Login', data () { return { msg: 'Welcome to Your Vue.js App' } } ,methods:{ gotoRegister(){ this.$router.push('/Register'); } } }
代码只演示了登录跳转注册，反之同理
演示效果
3.2 axios发送get请求
（1）将后端项目运行
（2）将安装好的axios导入项目
import axios from 'axios'
（3）前端编写方法向后端发送请求
doSubmit(){ let url = "http://localhost:8080/user/userLogin"; let params = { username:this.username, password:this.password }; axios.get(url,{params:params}).then(r=>{ if(r.data.success){ this.$message({ message: '登录成功', type: 'success' }); }else{ this.$message.error('登录失败，账号或密码错误'); } }).catch(e=>{ }) }
注：发送请求之前需要在data值中定义好参数
data () { return { msg: 'Welcome to Your Vue.js App', username:"", password:"" } }
3.2 对后端发送登录请求效果演示
4.导入接口管理模块，将vue实例和配置进行挂载
4.1在api包中配置所有接口地址
在api包中定义action.js，配置接口地址
export default { 'SERVER': 'http://localhost:8080/', //服务器 'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆 'SYSTEM_USER_DOREG': '/userAction.action', //注册 'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用 return this.SERVER + this[k]; } }
4.2 将所有所需要的模块进行统一管理
在api包中定义http.js,将所需模块全部放置统一进行管理全局配置
安装整合依赖
npm i vue-axios -S
将实例与全局配置进行挂载
在main.js中加入以下代码
import axios from '@/api/http' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios)
配置到这里我们可以节省上面之前写过的代码，在定义前端方法向后端发送请求中可以改为以下代码
doSubmit(){ let url = this.axios.urls.SYSTEM_USER_DOLOGIN; let params = { username:this.username, password:this.password }; this.axios.get(url,{params:params}).then(r=>{ if(r.data.success){ this.$message({ message: '登录成功', type: 'success' }); }else{ this.$message.error('登录失败，账号或密码错误'); } }).catch(e=>{ }) }
5.前后端分离实现注册
5.1前端模板
<template> <div class="login-wrap"> <el-form class="login-container"> <h1 class="title">用户注册</h1> <el-form-item label=""> <el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input> </el-form-item> <el-form-item label=""> <el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button> </el-form-item> <el-row style="text-align: center;margin-top:-10px"> <el-link type="primary">忘记密码</el-link> <el-link type="primary" @click="gotoLogin()">用户登录</el-link> </el-row> </el-form> </div> </template>
5.2 接口定义的方法
int Register(User record);
5.3 后端进行实现接口
@Override public int Register(User record) { return userMapper.insertSelective(record); }
5.4 Controller层方法
@RequestMapping("/userRegister") @ResponseBody public JsonResponseBody<?> userRegister(UserVo userVo, HttpServletResponse response){ userVo.setId("10"); int i = userService.Register(userVo); if(i>0){ return new JsonResponseBody<>("用户注册成功！",true,0,null); }else{ return new JsonResponseBody<>("用户注册失败！重新输入",false,0,null); } }
5.5 前端向后端发起请求
export default { name: 'Register', data () { return { msg: 'Welcome to Your Vue.js App', username:"", password:"" } }, methods:{ gotoLogin(){ this.$router.push('/Login'); }, doSubmit(){ let url = this.axios.urls.SYSTEM_USER_DOREG; let params = { username:this.username, password:this.password } this.axios.post(url,params).then(r=>{ console.log(r) if(r.data.success){ this.$message({ message: '注册成功', type: 'success' }); }else{ this.$message.error('注册失败'); } }).catch(e=>{ }) } } }
5.6 效果演示
当注册完成后查看数据库，出现刚刚注册的用户时说明注册成功
