1.安装引入element-ui
命令行安装
npm install element-ui -S
引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
Vue.use(ElementUI)
2.编写一个简单的登录功能
1.在components创建一个Login.vue
2.先搭建一个单页面组件的框架,
<template></template> 写html代码，注意template标签内一定要有一个html标签包裹所写的内容，例如下面的例子就用<div id="login">包裹住
<script></script> 编写脚本
<style></style> 样式
用element-ui组件先编写一个基本的页面
<template>
<div id="login">
<el-form :model="loginForm" ref="loginForm" :rules="loginRules">
<h2>Ray商城登录</h2>
<el-form-item>
<el-input name="username" placeholder="请输入用户名/手机号" auto-complete="on"></el-input>
</el-form-item>
<el-form-item>
<el-input name="password" placeholder="请输入密码" auto-complete="on"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {loginReq} from '@/apis/login'
export default {
name: "#login",
data() {
return {
}
},
methods: {
}
};
</script>
<style scoped>
.el-input {
width:300px;
}
</style>
3.我们给form，两个input框绑定数据，给表单控件绑定用v-model
<el-input v-model="loginForm.username" name="username" placeholder="请输入用户名/手机号" auto-complete="on"></el-input>
<el-input v-model="loginForm.password" name="password" placeholder="请输入密码" auto-complete="on"></el-input>
在data方法里面，同样也要创建数据模型
loginForm: {
username: '',
password: '',
}
4.表单验证
element-ui 里面有表单校验的例子
在data() 里面加上这个loginRules，用于表单验证
loginRules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur"
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
}
]
}
与组件的绑定
<el-form :rules="loginRules">
<el-form-item prop="username">
<el-form-item prop="username">
5.请求远程服务器登录
请求服务器要用axios
npm install axios --save
在src目录下创建utils文件夹，然后创建request.js文件
//直接引入
import axios from 'axios'
//因为axios默认发的是json格式数据，我们要做表单提交，需要更改axios配置
// 引入 Qs是为了把json格式，转为formdata 的数据格式
import Qs from 'Qs'
const service = axios.create({
baseURL: 'api',
timeout: 1000,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return Qs.stringify(data);
}],
});
export default service;
创建好request.js的工具类后，建议在src下创建apis文件夹，用于处理服务器请求
在apis下创建login.js，用于定义登录所需的请求服务器接口
import request from '@/utils/request'
export function loginReq(username,password) {
return request.post('/login.json',{
loginName: username,
loginPassword: password
})
}
创建好了之后，可以在Login.vue上调用loginReq接口
//先引入接口
import { loginReq } from '@/apis/Login'
//在methods加上处理方法
methods: {
handleLogin (){
this.$refs.loginForm.validate((valid) => {
if(valid){
loginReq(this.loginForm.username,this.loginForm.password).then((res) => {
console.log(res.data.status);
})
}else{
console.log('用户名或密码错误')
}
})
}
}
//在el-button 加上点击效果
<el-button type="primary" @click="handleLogin">登录</el-button>
6.登录错误处理
可以用element-ui直接弹出消息提示
this.$message.error("用户名或密码错误");
7.跳转
登录成功之后，需要马上跳转到个人首页
this.$router.push({
name: "Home",
params: {
username: this.loginForm.username
}
});
8.处理跨域，在config/index.js中的dev对象加上
proxyTable: {
'/api/**': {
target: 'http://127.0.0.1:6600/',
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '/'
}
},
}
五.项目打包与后端整合
1.项目打包
打开config文件夹下index.js，修改build 对象的属性assetsPublicPath，改为
assetsPublicPath: './',
dev.env.js 和 prod.env.js 分别对应的是开发环境和生产环境的配置, 可以分别在这两个文件夹添加BASE_API 属性，表示请求服务器的前缀，而生产环境下直接设置为'"/"'就可以了，因为打包后是直接放在服务器下的，跟服务器相同域名
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"/"'
}
在终端输入
npm run build
等运行完成如果出现
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
表示编译成功,在根目录的dist文件夹下，则是编译好的文件
2.集成到Spring boot
把dist下面的所有文件，包括static文件夹 和 index.html 直接扔到 spring boot项目中resources的static文件夹中
重启项目，就完成了
