动力云客---第二天

登录页面

vue -- controller - service -- manager - mapper ( mysql、redis)

页面使用了element-plus进行页面开发；

1. 1. Element plus

饿了么团队开发并开源的；它非常适合于开发后台系统；

基于Vue2.x （element-ui）  Element - The world's most popular Vue UI framework 

基于Vue3.x （element-plus）  A Vue 3 UI Framework | Element Plus 

我们的项目，需要使用到一些页面的效果（表单、输入框、表格、按钮、布局、图标等等），我们采用的都是element-plus给我们提供的；

1、项目中要安装element-plus：

npm install element-plus --save

npm i element-plus --save

安装后是在这个位置

-g 全局安装，安装到D:\course\tool\node-v20.9.0-win-x64\node_global（这个不要去管）

--save表示安装包信息会写入package.json的dependencies中，在dependencies中，那么项目打包就会依赖到该模块，如果项目打包时不需要依赖该模块，那么就使用--save-dev，它会在devDependencies下，表示项目开发需要依赖该模块，项目打包发布就不需要它；

2、使用element-plus

在main.js中

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

element-plus提供的组件：

1、Basic 基础组件

2、配置组件

3、Form 表单组件

4、Data 数据展示

5、Navigation 导航

6、Feedback 反馈组件

7、Others 其他

编写登录页面

LoginView.vue

左右结构；40% ：60%

LoginView.vue

左边的

<template>
  <el-container>
<!--左侧-->
    <el-aside width="200px">
   <img src="../assets/loginBox.svg">
      <p class="imgTitle">
        欢迎使用动力云客系统
      </p>
    </el-aside>
<!--右侧-->
    <el-main>
      Main
    </el-main>

  </el-container>
</template>

<script>
export default {
  name: "LoginView"
}
</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
  width: 40%;
  text-align: center;
}

.el-main {
  height: calc(100vh);
}
img {
  height: 413px;
}
.imgTitle{
  color: #f9f9f9;
  font-size: 28px;

}


</style>

右边的

 

登录

（1）账号字段：loginAct  （account）登录账号；

（2）密码字段：loginPwd  （password）登录密码；

（3）是否记住我字段：rememberMe

需求：前端非空验证；

1. 在<el-form>里面定义一个:rules="rules"；
2. 在要验证的el-input上的<el-form-item>中定义prop=xx

3、给要验证的字段定义验证规则；