前文回顾

前面,我们已经有了需求原型,也开发了一个在线H5应用,传送门: [图文教程] H5迷你日记 - Vue + Amaze UI + jQuery + OkayApi

最终实现效果,请访问:http://demo.okayapi.com/mininote/

项目源代码下载,请前往码云okayapi-demo。

本文,将主要讲一下实现的思路,重点在于说明,在没有后端的情况下,怎样开发H5应用。

准备材料

需要用到的技术,以及相关的链接,如下:

1、前端核心使用Vue渐进式JavaScript 框架(官网:https://cn.vuejs.org/),用于页面渲染,事件处理等
2、后端接口直接使用OkayApi小白接口(官网:http://www.okayapi.com/),用于保存和获取应用的数据
3、另外,重点还使用了Amaze UI(官网:http://amazeui.org/),用于页面布局,H5应用开发等,其中特别重要的是使用了它的一个很漂亮的模板 宠物秀 (http://tpl.amazeui.org/content.html?11)
4、最后,当然还使用到了jQuery(官网:http://jquery.com/),用于发起ajax接口请求,以及cookie等处理

页面引用,也可以看到:

<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        
                }
            });
        },

注意到,注册完成后,自动帮用户登录了。避免用户还要再点多一次。按这样的思路,继续完成登录功能即可。是不是很简单呢?^_^

其他页面的开发过程类似,暂时不展开讲。例如,日志首页:

小白后台数据管理

还可以通过小白提供的后台,进行可视化数据的管理,以及查看。例如,对某个日志的管理:

小白后台链接:http://admin.okayapi.com/

demo帐号和密码:api_demo / 123456

小结

总得来说,开发顺序可以是:

1、先做好HTML页面

2、使用VUE进行数据和事件的处理

3、使用jQuery发起ajax接口请求

4、后端接口使用现成免费的OkayApi

5、测试一下,搞定!