app.vue
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style lang="less"> </style>index.vue
<template> <div class="login-container"> <!--必须用el-form进行包裹--> <div class="login-head"></div> <!--配置表单验证 //必须为表单提供验证对象 2添加prop属性 3通过el-form组件库里面的rules--> <el-form class="login-form" ref="form" :model="user" :rules="formRules"> <el-form-item prop="mobile"> <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input> </el-form-item> <el-form-item prop="code"> <el-input v-model="user.code" placeholder="请输入验证码"></el-input> </el-form-item> <el-form-item> <el-checkbox v-model="checked">我已阅读并同意用户协议和隐私条款</el-checkbox> </el-form-item> <el-form-item> <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button> </el-form-item> </el-form> </div> </template> <script> import request from '@/utils/request' export default { name: 'LoginIndex', components: { }, props: {}, data () { return { user: { mobile: '', // 手机号 code: '' // 验证码 }, loginLoading: false, // 登录的loding状态 checked: false, // 是否同意协议 formRules: { mobile: [{ required: true, message: '手机号不能为空', trigger: 'change' }, { pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' } ], code: [{ required: true, message: '验证码不能为空', trigger: 'change' }, { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' } ] } } }, methods: { onLogin () { // 获取表单数据 const user = this.user // 开启loading this.loginLoading = true // 验证通过 request({ method: 'POST', url: '/mp/v1_0/authorizations', data: user }).then(res => { console.log(res) this.$message({ message: '登录成功', type: 'success' }) this.loginLoading = false }).catch(err => { console.log('登录失败', err) this.$message.error({ message: '手机号或者验证码错误', type: 'warning' }) this.loginLoading = false }) } } } </script> <style scoped lang="less"> .login-container{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: url("./login_bg.jpg") no-repeat; background-size: cover; .login-head{ width: 300px; height: 57px; background:url("./logo_index.png") no-repeat; margin-bottom: 30px; } .login-form{ background-color: #fff; padding: 50px; min-width: 300px; .login-btn{ width: 100%; } } } </style>main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import './styles/index.less' // 加载组件库 import ElementUI from 'element-ui' // 加载样式 import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false // 注册组件库 Vue.use(ElementUI) new Vue({ router, render: h => h(App) }).$mount('#app')index.js
import Vue from 'vue' import VueRouter from 'vue-router' import Login from '@/views/login/index' Vue.use(VueRouter) // 路由配置表 const routes = [{ path: '/login', name: 'login', component: Login }] const router = new VueRouter({ routes }) export default router运行结果
