对接登录注册接口

components/account/login.vue

@@ -1,13 +1,14 @@
 <template>
-  <el-form ref="form" :model="form" label-width="80px">
+  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-    <el-form-item :label="$t('account.form.user')">
+    <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-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>
@@ -21,11 +22,49 @@
         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:{
+    methods: {
-      onLogin:Function
+      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>

components/account/register.vue

@@ -1,16 +1,17 @@
 <template>
-  <el-form ref="form" :model="form" label-width="80px">
+  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-    <el-form-item :label="$t('account.form.user')">
+    <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:{
+    methods:{
-      onRegister:Function
+      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>

nuxt.config.js

@@ -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": "",

pages/account/index.vue

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

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