前后端分目录

h5-auth-manager/src/components/page/Login.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="login-wrap">
+        <div class="ms-login">
+            <div class="ms-title">权限系统</div>
+            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
+                <el-form-item prop="username">
+                    <el-input v-model="param.username" placeholder="username">
+                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
+                    </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-input
+                        type="password"
+                        placeholder="password"
+                        v-model="param.password"
+                        @keyup.enter.native="submitForm()"
+                    >
+                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
+                    </el-input>
+                </el-form-item>
+                <div class="login-btn">
+                    <el-button type="primary" @click="submitForm()">登录</el-button>
+                </div>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getLogin } from '../../api/index';
+export default {
+	created() {
+		// if(this.$route.query.type=="token"){
+		// 	this.$message.error('登陆授权码已过期')
+		// 	this.$route.query.type=""
+		// }
+	},
+    data: function() {
+        return {
+            param: {
+                username: '',
+                password: '',
+            },
+            rules: {
+                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+            },
+        };
+    },
+    methods: {
+        submitForm() {
+            this.$refs.login.validate(valid => {
+                if (valid) {
+                  // 调用登录接口
+                  this.getLogins();
+
+                } else {
+                    this.$message.error('请输入账号和密码');
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        async getLogins() {
+            // var formdata = new FormData();
+            // formdata.append('account', this.param.username);
+            // formdata.append('password', this.param.password);
+			var params ={
+				account:this.param.username,
+				password:this.param.password
+			}
+			
+            const data = await getLogin(params);
+            console.log('登录接口返回的数据',data);
+            const code = data.code;
+			
+			if(data.status==="1"){
+			    this.$message.success('登录成功，即将跳转');
+			    localStorage.setItem('ms_username', this.param.username);
+				localStorage.setItem('token', data.data.token);
+				this.$router.push('/');
+			}
+			else{
+                this.$message.error(data.msg);
+            }
+        }
+    },
+};
+</script>
+
+<style scoped>
+.login-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url(../../assets/img/login-bg.jpg);
+    background-size: 100%;
+}
+.ms-title {
+    width: 100%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 1px solid #ddd;
+}
+.ms-login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+}
+.ms-content {
+    padding: 30px 30px;
+}
+.login-btn {
+    text-align: center;
+}
+.login-btn button {
+    width: 100%;
+    height: 36px;
+    margin-bottom: 10px;
+}
+.login-tips {
+    font-size: 12px;
+    line-height: 30px;
+    color: #fff;
+}
+</style>