panqihua
/
cloudnote_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

对接登录注册接口

Browse Source
master
pan 4 years ago
parent d1c492986a
commit 9c4e3da4e2
5 changed files with 148 additions and 38 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 61
      components/account/login.vue
  2. 66
      components/account/register.vue
  3. 28
      nuxt.config.js
  4. 18
      pages/account/index.vue
  5. 13
      plugins/global.js

61
components/account/login.vue
Unescape View File

@ -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>

66
components/account/register.vue
Unescape View File

@ -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>

28
nuxt.config.js
Unescape View File

@ -90,8 +90,16 @@ export default {
"form": {
"confirmPwd": "确认密码",
"password": "密码",
"user": "帐号",
"valid_account": "帐号密码正确"
"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,8 +245,16 @@ export default {
"form": {
"confirmPwd": "",
"password": "",
"user": "",
"valid_account": ""
"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": "",

18
pages/account/index.vue
Unescape View File

@ -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)
}
}
})

13
plugins/global.js
Unescape View File

@ -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)
})
}
}

Write Preview
Loading…
Cancel
Save