前文回顾
前面，我们已经有了需求原型，也开发了一个在线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等处理
页面引用，也可以看到：
登录页面的开发
准备好上面的必备材料后，就可以开始搭建我们的第一个页面：登录注册页面了。
Amaze UI 已经提供了一个基本的登录页面示例，请见：http://amazeui.org/examples/login.html
根据这个页面，稍微结合上面的 宠物秀 模板，我们就可以改成自己的登录页了，如下：
以这个为示例，简单说一下怎样结合Vue和小白接口来进行客户端与服务端之间的交互。
使用Aamze UI编写页面HTML
先写一个表单，并且绑定相关的参数，例如：
账号:
密码:
然后，对于【登录】和【注册】这两个按钮绑定相关的事件：
登 录快速注册
使用Vue处理事件
模板写好后，就要开始使用强大的Vue了，一般性的写法，补充上面对应的数据和方法：
var app = new Vue({
el: '#app',
data: {
username: '',
password: '',
tips: '亲，请先登录~' },
methods: {
userLogin: function(event){
// 登录 },
userRegister: function(event){
// 注册 }
}
})
登录和注册时，都需要校验表单数据，因此，为方便代码重用，我们加一个内部的函数checkForm()，并让登录和注册时都调用，就变成了：
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;
}
}
})
调用小白接口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、测试一下，搞定！
网友评论