Skip to content

Commit 32a983b

Browse files
zerozerozeroCorgizerozerozeroCorgi
committed
登录页面完成
1 parent af04b78 commit 32a983b

File tree

19 files changed

+335
-83
lines changed

19 files changed

+335
-83
lines changed

‎package-lock.json‎

Lines changed: 41 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
},
2525
"dependencies": {
2626
"axios": "^0.17.1",
27+
"element-ui": "^2.0.8",
28+
"normalize.css": "^7.0.0",
2729
"vue": "^2.5.10",
2830
"vue-router": "^3.0.1"
2931
}

‎src/component/App.vue‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
<template>
2-
<div>
2+
<main>
33
<router-view></router-view>
4-
</div>
4+
</main>
55
</template>
66

77
<script>
88
export default {
99
data() {
1010
return {
11-
msg: "测试"
11+
1212
}
1313
}
1414
}
1515
</script>
1616

1717
<style scoped>
18-
div {
19-
font-size: 30px;
20-
font-weight: 600
21-
}
18+
2219
</style>

‎src/component/Home.vue‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/component/admin/Admin.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<el-container>
3+
4+
<!-- 左侧 -->
5+
<el-aside width="200px">
6+
7+
<!-- 左侧导航，公共部分 -->
8+
<app-aside></app-aside>
9+
</el-aside>
10+
11+
<!-- 右侧 -->
12+
<el-container>
13+
14+
<!-- 右侧头部，公共部分 -->
15+
<el-header>Header</el-header>
16+
17+
<!-- 右侧主体，变化部分 -->
18+
<el-main></el-main>
19+
</el-container>
20+
</el-container>
21+
</template>
22+
23+
<script>
24+
import AsideComponent from "./frame/Aside.vue";
25+
export default {
26+
components: {
27+
"app-aside": AsideComponent
28+
}
29+
}
30+
</script>
31+
32+
<style scoped>
33+
34+
</style>

‎src/component/admin/frame/Aside.vue‎

Whitespace-only changes.

‎src/component/admin/frame/Header.vue‎

Whitespace-only changes.

‎src/component/home/Home.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div>
3+
<el-button type="text" @click="open6">点击打开 Message Box</el-button>
4+
<el-button @click="show = !show">Click Me</el-button>
5+
6+
<div style="display: flex; margin-top: 20px; height: 100px;">
7+
<transition name="el-fade-in-linear">
8+
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
9+
</transition>
10+
<transition name="el-fade-in">
11+
<div v-show="show" class="transition-box">.el-fade-in</div>
12+
</transition>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
created() {
20+
21+
},
22+
data: () => ({
23+
show: true
24+
}),
25+
methods: {
26+
open6() {
27+
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
28+
confirmButtonText: '确定',
29+
cancelButtonText: '取消',
30+
type: 'warning',
31+
center: true
32+
}).then(() => {
33+
this.$message({
34+
type: 'success',
35+
message: '删除成功!'
36+
});
37+
}).catch(() => {
38+
this.$message({
39+
type: 'info',
40+
message: '已取消删除'
41+
});
42+
});
43+
}
44+
}
45+
}
46+
</script>
47+
48+
<style scoped>
49+
.transition-box {
50+
margin-bottom: 10px;
51+
width: 200px;
52+
height: 100px;
53+
border-radius: 4px;
54+
font-size: 20px;
55+
background-color: #409EFF;
56+
text-align: center;
57+
color: #fff;
58+
padding: 40px 20px;
59+
box-sizing: border-box;
60+
margin-right: 20px;
61+
}
62+
</style>
63+
64+

‎src/component/login.vue‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/component/login/login.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="login">
3+
<div class="login_content">
4+
<section class="login_content_logo">
5+
<img src="../../img/logo.png" alt="">
6+
</section>
7+
<section class="login_content_form">
8+
9+
<!-- 如果表单要进行校验，重置，则必须设置model属性，关联整个表单数据 -->
10+
<el-form :model="user" :rules="formRules" status-icon ref="ruleForm2" label-width="70px" class="demo-ruleForm">
11+
12+
<!-- 如果要校验输入框，重置，则必须设置prop属性，关联当前的input字段名 -->
13+
<el-form-item label="用户名" prop="uname">
14+
<el-input type="text" v-model="user.uname" auto-complete="off"></el-input>
15+
</el-form-item>
16+
<el-form-item label="密码" prop="upwd">
17+
<el-input type="password" v-model="user.upwd" auto-complete="off"></el-input>
18+
</el-form-item>
19+
<el-form-item>
20+
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
21+
<el-button @click="resetForm('ruleForm2')">重置</el-button>
22+
</el-form-item>
23+
</el-form>
24+
</section>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
data() {
32+
return {
33+
user: {
34+
uname: "",
35+
upwd: ""
36+
},
37+
formRules: {
38+
uname: [
39+
{required: true, message: "请输入用户名", trigger: "blur"},
40+
{pattern: /\w{5,18}/, message: "长度在 5 到 18 个字符, 且只能为&_或字母与数字", trigger: "blur"}
41+
42+
],
43+
upwd: [
44+
{required: true, message: "请输入密码", trigger: "blur"},
45+
{pattern: /.{6,18}/, message: "长度在 6 到 18 个字符", trigger: "blur"}
46+
]
47+
}
48+
};
49+
},
50+
methods: {
51+
submitForm(formName) {
52+
this.$refs[formName].validate((vali) => {
53+
if (vali) {
54+
this.$http.post(this.$api.login, this.user)
55+
.then(res => alert(res.data.message.realname));
56+
} else {
57+
alert("别乱点！！！");
58+
}
59+
});
60+
},
61+
resetForm(formName) {
62+
this.$refs[formName].resetFields();
63+
}
64+
}
65+
}
66+
</script>
67+
68+
<style scoped lang="less">
69+
.login {
70+
height: 100%;
71+
background-color: #267cb7;
72+
&_content {
73+
width: 400px;
74+
position: absolute;
75+
left: 50%;
76+
top: 50%;
77+
transform: translate(-50%, -90%);
78+
&_logo {
79+
text-align: center;
80+
}
81+
&_form {
82+
border: 1px solid hsla(0,0%,100%,.2);
83+
padding: 10px 10px;
84+
border-radius: 5px;
85+
}
86+
}
87+
88+
}
89+
90+
</style>

0 commit comments

Comments
 (0)