沒有後端也能快速開發H5應用，Vue + OkayApi最佳CP開發！

時間 2019-11-26

標籤沒有後端快速開發 h5 應用 vue okayapi 最佳简体版

原文原文鏈接

前文回顧

前面，咱們已經有了需求原型，也開發了一個在線H5應用，傳送門： [圖文教程] H5迷你日記 - Vue + Amaze UI + jQuery + OkayApi javascript

最終實現效果，請訪問：demo.okayapi.com/mininote/php

項目源代碼下載，請前往碼雲okayapi-demo。html

本文，將主要講一下實現的思路，重點在於說明，在沒有後端的狀況下，怎樣開發H5應用。前端

準備材料

須要用到的技術，以及相關的連接，以下：vue

一、前端核心使用Vue漸進式JavaScript 框架（官網：https://cn.vuejs.org/），用於頁面渲染，事件處理等java

二、後端接口直接使用OkayApi小白接口（官網：http://www.okayapi.com/），用於保存和獲取應用的數據jquery

三、另外，重點還使用了Amaze UI（官網：http://amazeui.org/），用於頁面佈局，H5應用開發等，其中特別重要的是使用了它的一個很漂亮的模板寵物秀（http://tpl.amazeui.org/content.html?11）git

四、最後，固然還使用到了jQuery（官網：http://jquery.com/），用於發起ajax接口請求，以及cookie等處理ajax

頁面引用，也能夠看到：json

<script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/amazeui.min.js"></script>
    <script src="../js/vue.js"></script>複製代碼

登陸頁面的開發

準備好上面的必備材料後，就能夠開始搭建咱們的第一個頁面：登陸註冊頁面了。

Amaze UI 已經提供了一個基本的登陸頁面示例，請見：http://amazeui.org/examples/login.html

根據這個頁面，稍微結合上面的寵物秀模板，咱們就能夠改爲本身的登陸頁了，以下：

以這個爲示例，簡單說一下怎樣結合Vue和小白接口來進行客戶端與服務端之間的交互。

使用Aamze UI編寫頁面HTML

先寫一個表單，而且綁定相關的參數，例如：

<form method="post" class="am-form">
      <label for="username">帳號:</label>
      <input type="text" name="" id="username" value="" placeholder="請輸入登陸帳號，或新註冊的新帳號"  v-model="username">
      <br>
      <label for="password">密碼:</label>
      <input type="password" name="" id="password" value="" placeholder="請輸入6位以上的密碼" v-model="password">
      <br>
    </form>複製代碼

而後，對於【登陸】和【註冊】這兩個按鈕綁定相關的事件：

<div class="am-cf">
          <button v-on:click="userLogin" class="am-btn am-btn-primary am-btn-sm am-fl">登 錄</button>
          <button  v-on:click="userRegister" class="am-btn am-btn-default am-btn-sm am-fr">快速註冊</button>
      </div>複製代碼

使用Vue處理事件

模板寫好後，就要開始使用強大的Vue了，通常性的寫法，補充上面對應的數據和方法：

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            tips: '親，請先登陸~'
        },
        methods: {
            userLogin: function(event) {
                // 登陸
            },
            userRegister: function(event) {
                // 註冊
            }
        }
    })
    </script>複製代碼

登陸和註冊時，都須要校驗表單數據，所以，爲方便代碼重用，咱們加一個內部的函數checkForm()，並讓登陸和註冊時都調用，就變成了：

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            tips: '親，請先登陸~'
        },
        methods: {
            userLogin: function(event) {
                // 登陸
                if (!this.checkForm()) {
                    return;
                }
            },
            userRegister: function(event) {
                // 註冊
                if (!this.checkForm()) {
                    return;
                }
            },
            checkForm: function() {
                if (this.username.length == 0) {
                    this.tips = '請先輸入帳號！';
                    return false;
                }
                if (this.password.length < 6) {
                    this.tips = '請先輸入至少6位密碼！';
                    return false;
                }

                return true;
            }
        }
    })
    </script>複製代碼

調用小白接口OkayApi

最後，重點來了。接下來的環節，就是怎麼與後端接口進行交互和數據通訊。

不難知道，接口調用都是使用ajax居多，而且使用JSON格式返回。小白接口提供了免費、免開發、直接可用的雲端數據接口，而且也提供了基本的用戶註冊和登陸接口，分別是：

用戶註冊接口：http://api.okayapi.com/docs.php?service=App.User.Register&detail=1&type=fold

用戶登陸接口：http://api.okayapi.com/docs.php?service=App.User.Login&detail=1&type=fold

以註冊爲例，核心的實現，不難寫。以下：

userRegister: function(event) {
                if (!this.checkForm()) {
                    return;
                }

                var _self = this

                $.ajax({
                  url: '/okayapi.php',
                  dataType: 'json',
                  data: { s: 'App.User.Register', username: this.username, password: $.md5(this.password) }
                }).done(function (rs) {
                    if (rs.data && rs.data.err_code == 0) {
                        _self.tips = '註冊成功！正在登陸……';

                        // 自動登陸
                        _self.userLogin(event)
                    } else {
                        _self.tips = rs.data.err_msg        
                    }
                });
            },複製代碼

注意到，註冊完成後，自動幫用戶登陸了。避免用戶還要再點多一次。按這樣的思路，繼續完成登陸功能便可。是否是很簡單呢？^_^

其餘頁面的開發過程相似，暫時不展開講。例如，日誌首頁：