发布时间:2023-10-05 08:30
建立登录页面
创建vue项目后安装npm i element-ui -S
一、路由配置
1.在 src\\views 目录下新建 login 目录及此目录下新建文件 index.vue
说明:通过 import Login from ‘./views/login’ 导入组件,当前只指定了组件路径,默认导入的就是指定路径
下的 index.vue 组件
2.在 src\\router.js 中配置路由(把原有的路由配置删除),如下:
import Vue from \"vue\";
import Router from \"vue-router\";
// import Login from \'./views/login/index.vue\'
import Login from \'./views/login\'
Vue.use(Router);
export default new Router({
routes:[
{
path:\'/login\',
name:\'login\',//路由名称
component: Login//组件对象
}
]
});
3.路由渲染出口,在 App.vue 中, 注意样式保持一致
main.js
import Vue from \"vue\";
// 注意引入在 Vue的下面
// ElementUI 组件库
import ElementUI from \'element-ui\';
import \'element-ui/lib/theme-chalk/index.css\';
import App from \"./App.vue\";
import router from \"./router\";
// 使用 ElementUI
Vue.use(ElementUI);
Vue.config.productionTip = process.env.NODE_ENV === \'production\';
console.log(process.env.VUE_APP_SERVICE_URL) // 开发环境 development, 生产环境 production
new Vue({
router,
render: h => h(App)
}).$mount(\"#app\");
二、登录页面
Elemen UI文档::https://element.eleme.cn/#/zh-CN/component/form#dian-xing-biao-dan
1.在 src\\views 目录下的 index.vue 文件中添加登录表单模板
表单输入框,如果没有使用 v-model 绑定值,是不允许输入值的。
学生选寝系统
登录
2.添加样式
注意:
将 login.jpg 图片拷贝到 src\\assets 目录下
模板中添加类名 login-container 、login-form 、login-title 切记放图片
三、表单验证
校验输入的帐号和密码都不允许为空。
通过 rules 属性传入约定的验证规则。并将 el-form-item 的 prop 属性设置为需校验的字段名即可。
1.在 el-form 上添加绑定属性 :rules=“rules” ,帐号和密码的 el-form-item 上使用 prop 指定校验字段名
2.在组件实例的 data 选项中添加 rules 属性,添加后对应 label 左边会有红色
form: {
username:\'\',
password:\'\'
},
rules:{
username: [{ required: true, message: \'账号不能为空\', trigger: \'blur\' }],
password:[{ required: true, message: \'密码不能为空\', trigger: \'blur\' }],
}
3.添加提交表单处理函数, 注意换了函数名是 submitForm
登录
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
// console.log(valid)
if(valid) {
return false;
}
})
}