没有后端也能快速开发H5应用，Vue + OkayApi最佳CP开发！

前文回顾

前面，我们已经有了需求原型，也开发了一个在线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、测试一下，搞定！