对接登录注册接口

master
pan 4 years ago
parent d1c492986a
commit 9c4e3da4e2
  1. 61
      components/account/login.vue
  2. 66
      components/account/register.vue
  3. 24
      nuxt.config.js
  4. 18
      pages/account/index.vue
  5. 13
      plugins/global.js

@ -1,13 +1,14 @@
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item :label="$t('account.form.user')">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('account.form.user')" prop="user">
<el-input v-model="form.user" :placeholder="$t('input_please',{keyword:$t('account.form.user')})"></el-input>
</el-form-item>
<el-form-item :label="$t('account.form.password')">
<el-input v-model="form.password" type="password" :placeholder="$t('input_please',{keyword:$t('account.form.password')})"></el-input>
<el-form-item :label="$t('account.form.password')" prop="password">
<el-input v-model="form.password" type="password"
:placeholder="$t('input_please',{keyword:$t('account.form.password')})"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onLogin(form.user,form.password)">{{$t('account.login')}}</el-button>
<el-button type="primary" @click="submit">{{$t('account.login')}}</el-button>
</el-form-item>
</el-form>
</template>
@ -16,16 +17,54 @@
export default {
name: 'login',
data(){
data() {
return {
form:{
user:'',
password:''
form: {
user: '',
password: ''
},
//
rules:{
user:[{
required: true,
message: this.$t('input_please', { keyword: this.$t('account.form.user') }),
}],
password:[{
required: true,
message: this.$t('input_please', { keyword: this.$t('account.form.password') })
}]
}
}
},
props:{
onLogin:Function
methods: {
submit() {
this.$refs.form.validate((valid: boolean) => {
if (valid) {
let that = this
this.GLOBAL.postJSON('/v1/api/users/sign_in', {
userName: this.form.user,
password: this.form.password
}, function(res) {
if (res.code === '200') {
that.$message({
message: that.$t('account.form.tip.login_ok').toString(), duration: 1000, onClose: function() {
that.$cookies.set(that.GLOBAL.user_key, that.form.user)
that.$router.push(that.localePath('/document'))
}
})
} else {
that.$message(that.$t('account.form.tip.login_fail'))
}
})
} else {
this.$message.error({
message: this.$t('form_err').toString(),
duration: 2000
})
return false
}
})
}
}
}
</script>

@ -1,16 +1,17 @@
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item :label="$t('account.form.user')">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('account.form.user')" prop="user">
<el-input v-model="form.user" :placeholder="$t('input_please',{keyword:$t('account.form.user')})"></el-input>
</el-form-item>
<el-form-item :label="$t('account.form.password')">
<el-form-item :label="$t('account.form.password')" prop="password">
<el-input v-model="form.password" type="password" :placeholder="$t('input_please',{keyword:$t('account.form.password')})"></el-input>
</el-form-item>
<el-form-item :label="$t('account.form.confirmPwd')">
<el-form-item class="is-required" :label="$t('account.form.confirmPwd')" prop="confirmPwd">
<el-input v-model="form.confirmPwd" type="password" :placeholder="$t('input_confirm',{keyword:$t('account.form.password')})"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onRegister(form.user,form.password)">{{$t('account.register')}}</el-button>
<el-button type="primary" @click="submit">{{$t('account.register')}}</el-button>
<el-button @click="$refs.form.resetFields()">{{$t('reset')}}</el-button>
</el-form-item>
</el-form>
</template>
@ -22,16 +23,67 @@
export default Vue.extend({
name: 'register',
data(){
let that=this
return {
//
form:{
user:'',
password:'',
confirmPwd:''
},
//
rules:{
user:[{
required: true,
message: this.$t('input_please', { keyword: this.$t('account.form.user') }),
}],
password:[{
required: true,
message: this.$t('input_please', { keyword: this.$t('account.form.password') })
}],
confirmPwd:[{
validator:(rule, value, callback) => {
if (value === '') {
callback(new Error(rule.msg.a));
} else if (value !== that.form.password) {
callback(new Error(rule.msg.b));
} else {
callback();
}
},
msg:{
a:this.$t('input_confirm', { keyword: this.$t('account.form.password') }),
b:this.$t('account.form.tip.tow_diff')
}
}]
}
}
},
props:{
onRegister:Function
methods:{
submit(){
this.$refs.form.validate((valid: boolean)=>{
if(valid){
let that=this
this.GLOBAL.postJSON('/v1/api/users/sign_up',{ userName: this.form.user, password: this.form.password },function(res) {
if(res.code==='200'){
that.$message.info(that.$t('account.form.tip.register_ok').toString())
that.$router.push(that.localePath('/'))
}else if(res.code==='1101'){
that.$message.error(that.$t('account.form.tip.user_exit',{name:that.form.user}).toString())
}else{
that.$message.error(that.$t('error_500').toString())
}
})
}else{
this.$message.error({
message:this.$t('form_err').toString(),
duration:2000
})
return false
}
})
}
}
})
</script>

@ -90,9 +90,17 @@ export default {
"form": {
"confirmPwd": "确认密码",
"password": "密码",
"user": "帐号",
"tip": {
"login_fail": "登陆失败,账号或密码错误",
"login_ok": "登录成功",
"register_fail": "注册失败",
"register_ok": "注册成功",
"tow_diff": "两次输入密码不一致!",
"user_exit": "用户{name}已存在",
"valid_account": "帐号密码正确"
},
"user": "帐号"
},
"login": "登录",
"register": "注册"
},
@ -157,6 +165,7 @@ export default {
"en": "英文",
"error_404": "页面不存在",
"error_500": "发生严重异常,请联系管理员",
"form_err": "表单校验失败,请检查表单内容",
"hide_more_query": "隐藏更多查询",
"input_confirm": "请确认{keyword}",
"input_please": "请输入{keyword}",
@ -206,6 +215,7 @@ export default {
}
},
"reading_online": "在线阅读",
"reset": "重置",
"tip": "提示",
"today_recommend": "今日推荐",
"unknown_error": "未知错误",
@ -235,9 +245,17 @@ export default {
"form": {
"confirmPwd": "",
"password": "",
"user": "",
"tip": {
"login_fail": "",
"login_ok": "",
"register_fail": "",
"register_ok": "",
"tow_diff": "",
"user_exit": "",
"valid_account": ""
},
"user": ""
},
"login": "",
"register": ""
},
@ -302,6 +320,7 @@ export default {
"en": "english",
"error_404": "",
"error_500": "",
"form_err": "",
"hide_more_query": "",
"input_confirm": "",
"input_please": "",
@ -351,6 +370,7 @@ export default {
}
},
"reading_online": "",
"reset": "",
"tip": "",
"today_recommend": "",
"unknown_error": "",

@ -8,10 +8,10 @@
<div class="container">
<el-tabs v-model="activeName" type="card">
<el-tab-pane :label="$t('account.login')" name="login">
<login :on-login="onLogin"/>
<login/>
</el-tab-pane>
<el-tab-pane :label="$t('account.register')" name="register">
<register :on-register="onRegister"/>
<register/>
</el-tab-pane>
</el-tabs>
</div>
@ -32,20 +32,6 @@
data() {
return {
activeName: 'login'
};
},
methods: {
onLogin(user:string,password:string){
console.info(user,password)
let that=this
let c:string=this.$t('account.form.valid_account').toString()
this.$message({message:c,duration:1000,onClose:function(){
that.$cookies.set(that.GLOBAL.user_key,user)
that.$router.push(that.localePath('/document'))
}})
},
onRegister(user:string,password:string){
console.info(user,password)
}
}
})

@ -3,6 +3,8 @@ import Vue from 'vue'
Vue.prototype.GLOBAL ={
//用户cookie
user_key:'user',
//服务器地址
server_address:'http://127.0.0.1:8080',
// 检查元素可见
visible_in_container:function(p,e) {
var z = p.getBoundingClientRect();
@ -11,6 +13,17 @@ Vue.prototype.GLOBAL ={
// Check style visiblilty and off-limits
return !(r.top > z.bottom || r.bottom < z.top ||
r.left > z.right || r.right < z.left);
},
postJSON(url,form,success){
fetch(this.server_address + url, {
body:JSON.stringify(form),
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}).then(res=>res.json()).then(res=>success(res)).catch(err=>{
console.error(err)
})
}
}

Loading…
Cancel
Save