From 9c4e3da4e23bf510eebb0b327ce8f78fd23fff42 Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Fri, 31 Jul 2020 00:49:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E7=99=BB=E5=BD=95=E6=B3=A8?=
=?UTF-8?q?=E5=86=8C=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/account/login.vue | 61 ++++++++++++++++++++++++------
components/account/register.vue | 66 +++++++++++++++++++++++++++++----
nuxt.config.js | 28 ++++++++++++--
pages/account/index.vue | 18 +--------
plugins/global.js | 13 +++++++
5 files changed, 148 insertions(+), 38 deletions(-)
diff --git a/components/account/login.vue b/components/account/login.vue
index d9bfd3c..e5b5484 100644
--- a/components/account/login.vue
+++ b/components/account/login.vue
@@ -1,13 +1,14 @@
-
-
+
+
-
-
+
+
- {{$t('account.login')}}
+ {{$t('account.login')}}
@@ -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
+ }
+ })
+ }
}
}
diff --git a/components/account/register.vue b/components/account/register.vue
index 655fea3..0fb7817 100644
--- a/components/account/register.vue
+++ b/components/account/register.vue
@@ -1,16 +1,17 @@
-
-
+
+
-
+
-
+
- {{$t('account.register')}}
+ {{$t('account.register')}}
+ {{$t('reset')}}
@@ -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
+ }
+ })
+
+ }
}
})
diff --git a/nuxt.config.js b/nuxt.config.js
index b9d1ce3..9dc7228 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -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": "",
diff --git a/pages/account/index.vue b/pages/account/index.vue
index acca9da..6326333 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -8,10 +8,10 @@
-
+
-
+
@@ -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)
}
}
})
diff --git a/plugins/global.js b/plugins/global.js
index 1b051ad..0a605d8 100644
--- a/plugins/global.js
+++ b/plugins/global.js
@@ -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)
+ })
}
}