上篇仅仅谈论到接口数据渲染,这篇主要是使用过程中的demo
web端牵扯到会员,那就需要跳转路由判断是否登录
解决方法:1、路由配置文件router/index.js 跳转路由前判断是否登录2、关于涉及权限页面组件加载函数判断
router.beforeEach((to, from, next) => {
// console.log(to.path);
if (to.path === '/login' || to.path === '/forgetpwd') {
next();
} else {
let tokens = localStorage.getItem('token');
if (tokens == 'null' || tokens == '') {
next('/login');
} else {
next();
}
}
});
export default router;
mounted() {
let that = this
that.islogin();
},
methods:{
islogin(){
//...
},
}
表单验证基于element,密码和验证码比对
<el-form ref="testform" :rules="testrulesyzm" :model="testform">
<el-form-item label="手机号" prop="phonenum">
<el-input value="" v-model="testform.phonenum" placeholder="手机号"></el-input>
</el-form-item>
<el-row>
<el-col :span="15">
<el-form-item prop="pyzm">
<el-input v-model="testform.pyzm" placeholder="短信验证码" style="width: 100%;"></el-input>
</el-form-item>
</el-col>
<el-col :span="2"> </el-col>
<el-col :span="7">
<el-button v-if="isyzm" @click="getyzm()" type="primary" style="width: 100%;">发送验证码</el-button>
<el-button v-else disabled @click="getyzm()" type="primary" style="width: 100%;">发送验证码</el-button>
</el-col>
</el-row>
<el-form-item label="新密码" prop="newpwd">
<el-input type="password" v-model="testform.newpwd" placeholder="请输入新密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="dnewpwd">
<el-input type="password" v-model="testform.dnewpwd" placeholder="请输入确认密码"></el-input>
</el-form-item>
<el-button v-if="issub" @click='setpwd()' type="primary">提交</el-button>
<el-button v-else disabled @click='setpwd()' type="primary">提交</el-button>
<el-button @click="login()" style="float: right;" type="text">登录</el-button>
{{errmsgyzm}}
</el-form>
数据data:
data(){
return {
testform: {
phonenum: '',
yzm: '',
newpwd: '',
dnewpwd: '',
'pyzm': ''
},
testrulesyzm: {
phonenum: [{
required: true,
message: '请输入手机号',
trigger: "blur"
}, ],
pyzm: [{
required: true,
message: '请输入验证码',
trigger: "blur"
}, ],
newpwd: [{
required: true,
message: '请输入新密码',
trigger: "blur"
}, {
min: 8,
max: 16,
message: '请输入8-16位字符',
trigger: 'blur'
},
],
dnewpwd: [{
required: true,
message: '请输入确认密码',
trigger: "blur"
}, ]
},
}
}
这样的触发,激活输入框然后blur,提交表单的时候触发验证:this.$refs[‘testform’].validate((valid)=>{}
methods:{
setpwd() {
this.$refs['testform'].validate((valid) => {
if (valid) {
if (this.testform.newpwd === this.testform.dnewpwd) {
this.dosetpwd();
} else {
// console.log('error submit!!');
this.errmsgyzm = '两次输入密码不一致';
}
} else {
// console.log('error submit!!');
return false;
}
});
},
}
HTML渲染
<div v-html='contents'></div>
element的table多维数组渲染citylist.row.areas
<el-table :data="citylist" :height="tableHeight" style="width: 100%;">
<el-table-column fixed prop="province" label="省" width="80">
</el-table-column>
<el-table-column prop="areas" label="市">
<slot slot-scope="citylist">
<span style="margin:0 5px" v-for="(v,index) in citylist.row.areas" type="primary" :key='index'>
<a @click="selcity(v.id,v.name)" style="color:#0074D9;cursor: pointer;">{{v.name}}</a>
</span>
</slot>
</el-table-column>
</el-table>