- 需要初始化 element-ui qs axios依赖包
- npm i 依赖包名称
配置文件(src/main.js)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.prototype.$domain='http://localhost:8100';
import Axios from 'axios'
import Qs from 'qs'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.prototype.qs=Qs;
Vue.prototype.$axios=Axios;
Vue.config.productionTip = false
let loadingInstance;
Axios.interceptors.request.use(function(config){
loadingInstance=ElementUI.Loading.service({fullscreen:true,text:"正在请求数据"});
return config;
}),function(error){
return Promise.reject(error);
}
Axios.interceptors.response.use(function(response){
loadingInstance.close();//关闭加载中..这个组件
return response;
}),function(error){
return Promise.reject(error);
}
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
登陆组件(src/views/loginTab.vue)
<template>
<div class="registerLayer">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="age">
<el-input v-model.number="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="margin-right: 60px;" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "registerTab",
data() {
var checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
name: ''
},
rules: {
name: [
{ validator: checkName, trigger: 'blur' }
],
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let that=this;
let obj={name:that.ruleForm.name,password:that.ruleForm.pass};
console.log(obj)
console.log("===========")
this.$axios({
url:`/register`,
method:"post"
}).then(()=>{
alert('注册成功!');
}).catch(()=>{
alert('注册失败!');
return;
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.registerLayer {
height: 350px;
padding: 0 10px;
padding-right: 50px;
padding-top: 35px;
margin-top: 30px;
/*border: 1px solid #bfedad;*/
}
.registerLayer > div {
height: 50px;
line-height: 50px;
}
.registerLayer > div > label {
display: inline-block;
width: 30%;
line-height: 40px;
color: dimgray;
font-size: 14px;
}
.registerLayer > div > input {
width: 70%;
height: 40px;
border-width: 0;
border-bottom: 1px solid #5093d2;
}
.registerLayer > div > button {
width: 100%;
height: 40px;
border-width: 0px;
background-color: #5093d2;
color: white;
margin-top: 50px;
border-radius: 3px;
cursor: pointer;
}
</style>
注册组件(src/views/registerTab.vue)
<template>
<div class="registerLayer">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="age">
<el-input v-model.number="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="margin-right: 60px;" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "registerTab",
data() {
var checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
name: ''
},
rules: {
name: [
{ validator: checkName, trigger: 'blur' }
],
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let that=this;
let obj={name:that.ruleForm.name,password:that.ruleForm.pass};
console.log(obj)
console.log("===========")
this.$axios({
url:`/register`,
method:"post"
}).then(()=>{
alert('注册成功!');
}).catch(()=>{
alert('注册失败!');
return;
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.registerLayer {
height: 350px;
padding: 0 10px;
padding-right: 50px;
padding-top: 35px;
margin-top: 30px;
/*border: 1px solid #bfedad;*/
}
.registerLayer > div {
height: 50px;
line-height: 50px;
}
.registerLayer > div > label {
display: inline-block;
width: 30%;
line-height: 40px;
color: dimgray;
font-size: 14px;
}
.registerLayer > div > input {
width: 70%;
height: 40px;
border-width: 0;
border-bottom: 1px solid #5093d2;
}
.registerLayer > div > button {
width: 100%;
height: 40px;
border-width: 0px;
background-color: #5093d2;
color: white;
margin-top: 50px;
border-radius: 3px;
cursor: pointer;
}
</style>
路由(src/App.vue)
<template>
<div id="app" v-if="loginState">
<router-view></router-view>
</div>
<div v-else id="loginTab">
<div class="tab-title">
<div :class="{'active': tab1State}" v-text="tabs[0]" @click="switchTab(tabs[0])"></div>
<div :class="{'active': tab2State}" v-text="tabs[1]" @click="switchTab(tabs[1])"></div>
</div>
<div class="tab-content">
<component :is="tabsContent" :login-state="loginState" @change-login-state="changeLoginState"></component>
</div>
</div>
</template>
<script>
import LoginTab from "@/views/login/loginTab.vue"
import RegisterTab from "@/views/login/registerTab.vue"
export default {
name: "App",
data() {
return {
loginState: false,
tabs: ["login", "register"],
tabsContent: "login-tab",
tab1State: true, //登录页面显示
tab2State: false //注册页面关闭
}
},
components: {
LoginTab,
RegisterTab,
},
methods: {
switchTab(tabName){
let tab=tabName+"-tab";
this.tabsContent=tab;
if(tabName==="login"){
this.tab1State=true;
this.tab2State=false;
}else{
this.tab1State=false; //登录页面关闭
this.tab2State=true;//注册页面显示
}
},
changeLoginState(b){
this.loginState = b;
}
}
}
</script>
<style lang="less">
*{
margin:0;
padding:0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
#loginTab {
width: 400px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
box-shadow: 0 0 10px 2px darkgray;
border-radius: 3px;
}
.tab-title {
width: 100%;
height: 50px;
/*border-bottom: 1px #242424 solid;*/
font-size: 16px;
background-color: rgba(207, 237, 200, 0.71);
}
.tab-title > div {
float: left;
width: 50%;
height: 50px;
text-align: center;
line-height: 50px;
color: #868085;
cursor: pointer;
user-select: none;
text-transform: capitalize;
}
.tab-title>div:first-child{
border-radius: 3px 0 0 0;
}
.tab-title>div:last-child{
border-radius: 0 3px 0 0;
}
.active {
background-color: #5093d2;
color: white!important;
font-size: 16px!important;
text-transform: uppercase!important;
}
</style>