1.router-view跳转
APP.vue可以类比主函数理解,里面可以写很多内容,但这是个很局限的做法,只适合学习一些前端知识点时候使用,不适合做项目。于是我们使用 将要写的内容拆分开,理解为拆成诸多函数。在函数里实现相关功能。
于是APP.vue写的很简单,因为他只实现路由功能
<template>
<router-view />
</template>
2.呈现一个登陆界面(纯前端)
LoginVue.vue
<template>
<div id="login">
<h3 align="center"> 一个登陆界面 </h3><br />
<p align="center">
<label>账号:</label><input type="text" v-model="username" /><br>
<label>密码:</label><input type="password" v-model="password" /><br>
</p>
<p align="center"><button @click="check_account">登录</button></p>
<p align="center">
<router-link to="enroll">申请注册</router-link>
</p>
<el-button>I am ElButton</el-button>
</div>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
name: 'App',
components: {
ElButton
},
data() {
return {
username: "",
password: "",
}
},
methods: {
check_account() {
if (this.username == "admin") {
this.$router.push("/hello");
}
},
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
}
</style>
3.代码讲解:
属性名 说明 类型 可选值 默认值
type 类型 string 原生input的type值 text
modelValue/v-model 绑定值 string/number — —
在后续的data()函数中为username,password赋予了默认值为空,用户可在前端输入账号密码,账号密码要进一步传到后端验证。
<label>账号:</label><input type="text" v-model="username" /><br>
<label>密码:</label><input type="password" v-model="password" /><br>
当点击“登录”按钮时进行check_account(),函数判断用户提供的账号,密码是否可以通过
check_account() {
if (this.username == "admin") {
this.$router.push("/hello");
}
},
界面呈现:
因为是纯前端,后端没得数据验证,所以设置username为admin时自动登录成功。
后期check_account()函数要做一些数据验证的修改,目前先这样