VUE笔记（七）项目登录

1、安装elementui

• 在终端执行

vue add element

• 注册组件

如果要使用哪个组件，大家需要在plugins/element.js中注册该组件

import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)

• 在页面组件中使用

<el-button type="primary">按钮</el-button>

• 注册常用的elementui组件

为了方便期间，建议大家将如下配置文件内容复制到plugins/element.js文件中

import Vue from 'vue';
import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Spinner,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,Link,Divider,Image,Calendar,Backtop,PageHeader,CascaderPanel,Loading,MessageBox,Message,Notification
} from 'element-ui';
​
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
​
Vue.use(Loading.directive);
​
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

2、登录的静态页面

• 在App.vue中配置路由出口

<router-view></router-view>

• 在views文件夹下创建Login.vue文件

<template><div class="container"><div class="login-container"><div class="login-box"><div class="avatar-box"><img src="https://www.woniuxy.com/static/woniuopen/img/Frame%20265.png" class="avatar"></div><div class="login_form"><el-form :model="user" :rules="loginFormRules"><el-form-item prop="username"><el-input prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item prop="password"><el-input show-password prefix-icon="el-icon-s-cooperation" v-model="user.password"></el-input></el-form-item><el-form-item><el-button type="primary" class="loginbtn" @click="login">登录</el-button></el-form-item></el-form></div></div></div></div>
</template>
<style>.container{width: 100vw;height: 100vh;background:linear-gradient(to bottom,#000,#5A57DA);}.login-container{height: 100%;background-image: url('@/assets/xkbg.png');background-repeat:repeat-x;background-position: center bottom;}.login-box{position:absolute;width: 400px;height: 280px;background-color:rgba(255, 255, 255, .5);top:50%;left: 50%;transform: translate(-50%,-50%);border-radius: 15px;}.avatar-box{position:absolute;width: 100px;height: 100px;border: 1px solid #ccc;border-radius: 50%;left: 50%;transform: translate(-50%,-50%);padding: 10px;background-color:orange;}.avatar{width: 100px;height: 100px;border:1px solid #ccc;border-radius: 50%;}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}.loginbtn {width: 100%;}
</style>

• 在router/index.js文件中配置路由

const routes=[{path:'/login',component:()=>import('@/views/Login.vue')}
]

3、完成表单校验功能

<template><div class="container"><div class="login-container"><div class="login-box"><div class="avatar-box"><img src="https://www.woniuxy.com/static/woniuopen/img/Frame%20265.png" class="avatar"></div><div class="login_form"><el-form :model="user" :rules="loginFormRules"><el-form-item prop="username"><el-input prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item prop="password"><el-input show-password prefix-icon="el-icon-s-cooperation" v-model="user.password"></el-input></el-form-item><el-form-item><el-button type="primary" class="loginbtn" @click="login">登录</el-button></el-form-item></el-form></div></div></div></div>
</template>
<script>
export default {data(){return{user:{username:'',password:''},loginFormRules:{username:[{ required: true, message: '用户名不能为空', trigger: 'blur' }],password:[{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 3, max: 15, message: '长度在 3 到 12 个字符', trigger: 'blur' }] }}}
}
</script>

要完成校验功能，要具体以下几点

• <el-form>添加:rules="loginFormRules"

• 将 form-Item 的 prop 属性设置为需校验的字段名

4、完成登录功能

<script>
export default {data(){return{user:{username:'',password:''}}},methods:{async login(){console.log(this.user);let {code,message,token}=await this.$api.users.login(this.user)if(code){this.$message.success(message)}else{this.$message.error('登录失败')}//保存token到localStoragelocalStorage.setItem('token',token)this.$router.replace('/home')}}
}
</script>