mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
增加登录验证逻辑
This commit is contained in:
parent
d734d943d7
commit
4b8ad9e558
14
src/App.vue
14
src/App.vue
@ -5,20 +5,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import GloablLayout from './components/layout/GloablLayout'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App'
|
||||||
components: {GloablLayout}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#app {
|
#app {
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
/*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
|
||||||
-webkit-font-smoothing: antialiased;
|
/*-webkit-font-smoothing: antialiased;*/
|
||||||
-moz-osx-font-smoothing: grayscale;
|
/*-moz-osx-font-smoothing: grayscale;*/
|
||||||
/*text-align: center;*/
|
/*color: #2c3e50;*/
|
||||||
color: #2c3e50;
|
|
||||||
/*margin-top: 60px;*/
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -9,16 +9,23 @@
|
|||||||
<div class="desc">Vue Antd 是西湖区最具影响力的 Web 设计规范</div>
|
<div class="desc">Vue Antd 是西湖区最具影响力的 Web 设计规范</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<a-form @submit="onSubmit">
|
<a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
|
||||||
<a-tabs size="large" style="text-align: center">
|
<a-tabs size="large" :tabBarStyle="{textAlign: 'center'}">
|
||||||
<a-tab-pane tab="账户密码登录" key="1">
|
<a-tab-pane tab="账户密码登录" key="1">
|
||||||
<a-form-item>
|
<a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
|
||||||
<a-input size="large" placeholder="admin/iczer" >
|
<a-form-item
|
||||||
|
fieldDecoratorId="name"
|
||||||
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
|
||||||
|
>
|
||||||
|
<a-input size="large" placeholder="admin" >
|
||||||
<a-icon slot="prefix" type="user" />
|
<a-icon slot="prefix" type="user" />
|
||||||
</a-input>
|
</a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item
|
||||||
<a-input size="large" placeholder="888888/123456" type="password">
|
fieldDecoratorId="password"
|
||||||
|
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
|
||||||
|
>
|
||||||
|
<a-input size="large" placeholder="888888" type="password">
|
||||||
<a-icon slot="prefix" type="lock" />
|
<a-icon slot="prefix" type="lock" />
|
||||||
</a-input>
|
</a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
@ -48,14 +55,14 @@
|
|||||||
<a style="float: right">忘记密码</a>
|
<a style="float: right">忘记密码</a>
|
||||||
</div>
|
</div>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
|
<a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<div>
|
<div>
|
||||||
其他登录方式
|
其他登录方式
|
||||||
<a-icon class="icon" type="alipay-circle" />
|
<a-icon class="icon" type="alipay-circle" />
|
||||||
<a-icon class="icon" type="taobao-circle" />
|
<a-icon class="icon" type="taobao-circle" />
|
||||||
<a-icon class="icon" type="weibo-circle" />
|
<a-icon class="icon" type="weibo-circle" />
|
||||||
<router-link style="float: right" to="/" >注册账户</router-link>
|
<router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
|
||||||
</div>
|
</div>
|
||||||
</a-form>
|
</a-form>
|
||||||
</div>
|
</div>
|
||||||
@ -75,17 +82,51 @@ import AInputGroup from 'vue-antd-ui/es/input/Group'
|
|||||||
import AButton from 'vue-antd-ui/es/button/button'
|
import AButton from 'vue-antd-ui/es/button/button'
|
||||||
import ACol from 'vue-antd-ui/es/grid/Col'
|
import ACol from 'vue-antd-ui/es/grid/Col'
|
||||||
import ACheckbox from 'vue-antd-ui/es/checkbox/Checkbox'
|
import ACheckbox from 'vue-antd-ui/es/checkbox/Checkbox'
|
||||||
|
import AAlert from 'vue-antd-ui/es/alert/index'
|
||||||
|
|
||||||
const ATabPane = ATabs.TabPane
|
const ATabPane = ATabs.TabPane
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
components: {ACheckbox, ACol, AButton, AInputGroup, AIcon, AInput, AFormItem, GloablFooter, ATabPane, ATabs, AForm},
|
components: {
|
||||||
|
AAlert,
|
||||||
|
ACheckbox,
|
||||||
|
ACol,
|
||||||
|
AButton,
|
||||||
|
AInputGroup,
|
||||||
|
AIcon,
|
||||||
|
AInput,
|
||||||
|
AFormItem,
|
||||||
|
GloablFooter,
|
||||||
|
ATabPane,
|
||||||
|
ATabs,
|
||||||
|
AForm},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
logging: false,
|
||||||
|
error: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onSubmit (e) {
|
onSubmit (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
console.log('submit')
|
this.form.validateFields((err, values) => {
|
||||||
this.$router.push('/')
|
if (!err) {
|
||||||
|
this.logging = true
|
||||||
|
this.$axios.post('/login', {
|
||||||
|
name: this.form.getFieldValue('name'),
|
||||||
|
password: this.form.getFieldValue('password')
|
||||||
|
}).then((res) => {
|
||||||
|
this.logging = false
|
||||||
|
const result = res.data
|
||||||
|
if (result.code >= 0) {
|
||||||
|
this.$router.push('/dashboard/workplace')
|
||||||
|
} else {
|
||||||
|
this.error = result.message
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
import '@/mock/user/current'
|
import '@/mock/user/current'
|
||||||
import '@/mock/project'
|
import '@/mock/project'
|
||||||
|
import '@/mock/user/login'
|
||||||
|
|
||||||
// 设置全局延时
|
// 设置全局延时
|
||||||
Mock.setup({
|
Mock.setup({
|
||||||
|
16
src/mock/user/login.js
Normal file
16
src/mock/user/login.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import Mock from 'mockjs'
|
||||||
|
import '@/mock/extend'
|
||||||
|
|
||||||
|
Mock.mock('/login', 'post', ({body}) => {
|
||||||
|
let result = {}
|
||||||
|
const {name, password} = JSON.parse(body)
|
||||||
|
|
||||||
|
if (name !== 'admin' || password !== '888888') {
|
||||||
|
result.code = -1
|
||||||
|
result.message = '账户名或密码错误(admin/888888)'
|
||||||
|
} else {
|
||||||
|
result.code = 0
|
||||||
|
result.message = '登录成功'
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
})
|
@ -37,6 +37,7 @@ export default new Router({
|
|||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: MenuView,
|
component: MenuView,
|
||||||
|
redirect: '/login',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
invisible: true,
|
invisible: true,
|
||||||
children: [
|
children: [
|
||||||
@ -50,7 +51,6 @@ export default new Router({
|
|||||||
path: '/dashboard/workplace',
|
path: '/dashboard/workplace',
|
||||||
name: '工作台',
|
name: '工作台',
|
||||||
component: WorkPlace,
|
component: WorkPlace,
|
||||||
alias: '/',
|
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user