Skip to content

Commit e9ae954

Browse files
baimingxuanbaimingxuan
committed
添加用户头像组件
1 parent b75b892 commit e9ae954

File tree

8 files changed

+278
-191
lines changed

8 files changed

+278
-191
lines changed

‎.env.development

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
ENV = 'development'
2-
3-
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
4-
VUE_APP_BASE_API = '42.194.194.178:3000'
5-
# 如果接口是 http 形式， wss 需要改为 ws
6-
VUE_APP_WS_API = 'localhost:3000'
7-
8-
# 是否启用 babel-plugin-dynamic-import-node插件
9-
VUE_CLI_BABEL_TRANSPILE_MODULES = true
1+
ENV = 'development'
2+
3+
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
4+
VUE_APP_BASE_API = '42.194.194.178:3000'
5+
# 如果接口是 http 形式， wss 需要改为 ws
6+
VUE_APP_WS_API = '42.194.194.178:3000'
7+
8+
# 是否启用 babel-plugin-dynamic-import-node插件
9+
VUE_CLI_BABEL_TRANSPILE_MODULES = true

‎src/assets/img/avatar.png

1.82 KB
Loading

‎src/components/UserAvatar/index.vue

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<el-dropdown class="user-avatar-wrapper" @command="handleCommand">
3+
<div class="avatar-box">
4+
<el-avatar size="small" :src="avatarSrc" />
5+
<i class="el-icon-caret-bottom" />
6+
</div>
7+
<el-dropdown-menu slot="dropdown">
8+
<el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
9+
<el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
10+
</el-dropdown-menu>
11+
</el-dropdown>
12+
</template>
13+
14+
<script>
15+
import Avatar from '../../assets/img/avatar.png'
16+
17+
export default {
18+
name: 'UserAvatar',
19+
data() {
20+
return {
21+
avatarSrc: Avatar
22+
}
23+
},
24+
methods: {
25+
handleCommand(command) {
26+
if (command === 'loginOut') {
27+
this.loginOut()
28+
}
29+
},
30+
loginOut() {
31+
this.$confirm('确定注销并退出系统吗？', '提示', {
32+
confirmButtonText: '确定',
33+
cancelButtonText: '取消',
34+
type: 'warning'
35+
}).then(() => {
36+
})
37+
}
38+
}
39+
}
40+
</script>
41+
42+
<style lang="less">
43+
.user-avatar-wrapper {
44+
float: left;
45+
width: 48px;
46+
padding: 3px 0 3px 20px;
47+
margin-left: 20px;
48+
border-left: solid 1px #ddd;
49+
cursor: pointer;
50+
.avatar-box {
51+
outline: none;
52+
}
53+
.el-avatar--small {
54+
display: inline-block;
55+
vertical-align: middle;
56+
width: 32px;
57+
height: 32px;
58+
line-height: 32px;
59+
}
60+
i {
61+
display: inline-block;
62+
vertical-align: middle;
63+
margin-left: 2px;
64+
}
65+
}
66+
</style>

‎src/layout/components/HeaderBar/index.vue

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
1-
<template>
2-
<div class="header-bar clear-fix">
3-
<FoldSideMenu />
4-
<BreadCrumbs />
5-
<div class="header-right clear-fix">
6-
<FullScreen />
7-
<LangSelect />
8-
<GitHubLink />
9-
</div>
10-
</div>
11-
</template>
12-
13-
<script>
14-
import FoldSideMenu from '../../../components/FoldSideMenu'
15-
import BreadCrumbs from '../../../components/BreadCrumbs'
16-
import FullScreen from '../../../components/FullScreen'
17-
import LangSelect from '../../../components/LangSelect'
18-
import GitHubLink from '../../../components/GitHubLink'
19-
20-
export default {
21-
components: {
22-
FoldSideMenu,
23-
BreadCrumbs,
24-
FullScreen,
25-
LangSelect,
26-
GitHubLink
27-
}
28-
}
29-
</script>
30-
31-
<style lang="less">
32-
.header-bar {
33-
height: 32px;
34-
padding: 16px 20px;
35-
.header-right {
36-
float: right;
37-
width: 130px;
38-
}
39-
}
40-
</style>
1+
<template>
2+
<div class="header-bar clear-fix">
3+
<FoldSideMenu />
4+
<BreadCrumbs />
5+
<div class="header-right clear-fix">
6+
<FullScreen />
7+
<LangSelect />
8+
<GitHubLink />
9+
<UserAvatar />
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import FoldSideMenu from '../../../components/FoldSideMenu'
16+
import BreadCrumbs from '../../../components/BreadCrumbs'
17+
import FullScreen from '../../../components/FullScreen'
18+
import LangSelect from '../../../components/LangSelect'
19+
import GitHubLink from '../../../components/GitHubLink'
20+
import UserAvatar from '../../../components/UserAvatar'
21+
22+
export default {
23+
components: {
24+
FoldSideMenu,
25+
BreadCrumbs,
26+
FullScreen,
27+
LangSelect,
28+
GitHubLink,
29+
UserAvatar
30+
}
31+
}
32+
</script>
33+
34+
<style lang="less">
35+
.header-bar {
36+
height: 32px;
37+
padding: 16px 20px;
38+
.header-right {
39+
float: right;
40+
width: 200px;
41+
}
42+
}
43+
</style>

‎src/main.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import Vue from 'vue'
2-
import App from './App'
3-
import router from './router'
4-
import store from './store'
5-
6-
import './router/auth'
7-
8-
import './assets/icon-fonts/iconfont.css'
9-
import './assets/icon-fonts/iconfont'
10-
import 'element-ui/lib/theme-chalk/index.css'
11-
import ElementUI from 'element-ui'
12-
Vue.use(ElementUI, { size: 'small' })
13-
14-
Vue.config.productionTip = false
15-
16-
new Vue({
17-
router,
18-
store,
19-
render: h => h(App)
20-
}).$mount('#app')
1+
import Vue from 'vue'
2+
import App from './App'
3+
import router from './router'
4+
import store from './store'
5+
6+
// import './router/auth'
7+
8+
import './assets/icon-fonts/iconfont.css'
9+
import './assets/icon-fonts/iconfont'
10+
import 'element-ui/lib/theme-chalk/index.css'
11+
import ElementUI from 'element-ui'
12+
Vue.use(ElementUI, { size: 'small' })
13+
14+
Vue.config.productionTip = false
15+
16+
new Vue({
17+
router,
18+
store,
19+
render: h => h(App)
20+
}).$mount('#app')

‎src/views/Login.vue

Lines changed: 91 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,91 @@
1-
<template>
2-
<div class="login-wrapper" :style="'background-image:url('+ Background +')'">
3-
<div class="form-box">
4-
<h3 class="form-title">账号登录</h3>
5-
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login-form">
6-
<el-form-item prop="username">
7-
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号" prefix-icon="el-icon-user" />
8-
</el-form-item>
9-
<el-form-item prop="password">
10-
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" />
11-
</el-form-item>
12-
<el-form-item>
13-
<el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
14-
</el-form-item>
15-
<el-form-item>
16-
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
17-
<span v-if="!loading">登 录</span>
18-
<span v-else>登 录 中...</span>
19-
</el-button>
20-
</el-form-item>
21-
</el-form>
22-
</div>
23-
</div>
24-
</template>
25-
26-
<script>
27-
import { login } from '../api/login'
28-
import Background from '../assets/img/login-background.jpg'
29-
30-
export default {
31-
name: 'Login',
32-
data() {
33-
return {
34-
Background,
35-
loginForm: {
36-
username: 'admin',
37-
password: 'admin123',
38-
rememberMe: true
39-
},
40-
loginRules: {
41-
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
42-
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
43-
},
44-
loading: false
45-
}
46-
},
47-
methods: {
48-
handleLogin() {
49-
this.$refs.loginForm.validate(valid => {
50-
const data = {
51-
username: this.loginForm.username,
52-
password: this.loginForm.password
53-
}
54-
if (valid) {
55-
this.loading = true
56-
login(data).then(res => {
57-
this.loading = false
58-
console.log(res)
59-
})
60-
}
61-
})
62-
}
63-
}
64-
}
65-
</script>
66-
67-
<style lang="less">
68-
.login-wrapper {
69-
display: flex;
70-
justify-content: center;
71-
align-items: center;
72-
width: 100%;
73-
height: 100vh;
74-
background-size: cover;
75-
.form-box {
76-
width: 320px;
77-
padding: 30px 30px 20px;
78-
background: #fff;
79-
border-radius: 4px;
80-
box-shadow: 0 15px 30px 0 rgba(0, 0, 1, .1);
81-
.form-title {
82-
margin: 0 auto 30px;
83-
text-align: center;
84-
color: #707070;
85-
}
86-
}
87-
}
88-
</style>
1+
<template>
2+
<div class="login-wrapper" :style="'background-image:url('+ Background +')'">
3+
<div class="form-box">
4+
<h3 class="form-title">登录Vue-Admin-Design账号</h3>
5+
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login-form">
6+
<el-form-item prop="username">
7+
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号" prefix-icon="el-icon-user" />
8+
</el-form-item>
9+
<el-form-item prop="password">
10+
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" />
11+
</el-form-item>
12+
<el-form-item>
13+
<el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
14+
</el-form-item>
15+
<el-form-item>
16+
<el-button :loading="loading" size="small" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
17+
<span v-if="!loading">登 录</span>
18+
<span v-else>登 录 中...</span>
19+
</el-button>
20+
</el-form-item>
21+
</el-form>
22+
</div>
23+
</div>
24+
</template>
25+
26+
<script>
27+
import { login } from '../api/login'
28+
import Background from '../assets/img/login-background.jpg'
29+
30+
export default {
31+
name: 'Login',
32+
data() {
33+
return {
34+
Background,
35+
loginForm: {
36+
username: 'admin',
37+
password: 'admin123',
38+
rememberMe: true
39+
},
40+
loginRules: {
41+
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
42+
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
43+
},
44+
loading: false
45+
}
46+
},
47+
methods: {
48+
handleLogin() {
49+
this.$refs.loginForm.validate(valid => {
50+
const data = {
51+
username: this.loginForm.username,
52+
password: this.loginForm.password
53+
}
54+
if (valid) {
55+
this.loading = true
56+
login(data).then(res => {
57+
this.loading = false
58+
console.log(res)
59+
}).catch(() => {
60+
this.loading = false
61+
})
62+
}
63+
})
64+
}
65+
}
66+
}
67+
</script>
68+
69+
<style lang="less">
70+
.login-wrapper {
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
width: 100%;
75+
height: 100vh;
76+
background-size: cover;
77+
.form-box {
78+
width: 320px;
79+
padding: 30px 30px 20px;
80+
background: #fff;
81+
border-radius: 4px;
82+
box-shadow: 0 15px 30px 0 rgba(0, 0, 1, .1);
83+
.form-title {
84+
margin: 0 auto 35px;
85+
text-align: center;
86+
color: #707070;
87+
font-size: 18px;
88+
}
89+
}
90+
}
91+
</style>

0 commit comments

Comments
 (0)