项目描述
上传时间
浏览人数
采用vant框架,
利用cmd在项目文件夹下载vant和相关插件:
npm i vant -S; //安装vant
npm i babel-plugin-import -D; //安装vant插件
安装后在vue项目中main.js引用相关组件:
import {Calendar,Cell,CellGroup} from "vant";
import { Button } from 'vant';
import { Toast } from 'vant';
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Toast);
在vant官网文档中寻找并编辑核心代码:
<template>
<div>
<van-form @submit="onSubmit">
<van-field
v-model="username"
name="用户名"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="password"
type="password"
name="密码"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit">
提交
</van-button>
</div>
</van-form>
</div>
</template>
<script>
export default {
name: "Vant_demo2",
data() {
return {
username: '',
password: '',
};
},
methods: {
onSubmit(values) {
console.log(values.用户名);
console.log(values.密码);
let dataIpt = {"key": "vv9544", "idcard": values.用户名, "password": values.密码};
let dataIptStr = this.$qs.stringify(dataIpt);
let loginURL = "https://www.zhuzuoji.com/sign/testapi/login";
let _this=this;
this.$axios.post(loginURL, dataIptStr).then((res) => {
if (res.status == 200 && res.data.status) {
_this.$toast.success(res.data.msg);
_this.$router.push("/vant1");
} else {
_this.$toast.fail(res.data.msg);
}
}).catch((err) => {
console.log(err)
});
},
},
}
</script>
<style scoped>
</style>
实现功能:
1. 用户正常登录跳转;
2. 未输入账号密码不能登录;
3. 账号密码有误显示相应轻提示.
运行结果样式: