Предыдущий отзыв
Ранее у нас уже был прототип требования, и мы разработали онлайн-приложение H5, Portal:[Графический учебник] Мини-дневник H5 — Vue + Amaze UI + jQuery + OkayApi
Для достижения окончательного эффекта посетите:demo.okayapi.com/mininote/
Чтобы загрузить исходный код проекта, перейдите по ссылкеОблако кода.
В этой статье я в основном расскажу об идеях реализации, сосредоточившись на объяснении того, как разрабатывать приложения H5 без бэкэнда.
Подготовить материалы
Технологии, которые необходимо использовать, а также соответствующие ссылки, следующие:
1. Фронтенд-ядро использует прогрессивный JavaScript-фреймворк Vue (официальный сайт: https://cn.vuejs.org/) для рендеринга страниц, обработки событий и т. д.
2. Внутренний интерфейс напрямую использует интерфейс OkayApi Xiaobai (официальный сайт: 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 уже предоставляет базовый пример страницы входа, см.: http://amazeui.org/examples/login.html.
В соответствии с этой страницей в сочетании с приведенным выше шаблоном выставки домашних животных мы можем изменить ее на нашу собственную страницу входа следующим образом:
Возьмите это в качестве примера, кратко расскажите о том, как объединить интерфейс Vue и Xiaobai для взаимодействия между клиентом и сервером.
Напишите HTML-код страницы с помощью пользовательского интерфейса Aamze
Сначала напишите форму и привяжите соответствующие параметры, например:
<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>
Вызов интерфейса Xiaobai OkayApi
Наконец, наступает момент. Следующий шаг — как взаимодействовать и общаться с внутренним интерфейсом.
Несложно заметить, что большинство вызовов интерфейса используют ajax и возвращают их в формате JSON. Интерфейс Xiaobai предоставляет бесплатный, не требующий разработки, непосредственно используемый интерфейс облачных данных, а также предоставляет базовые интерфейсы регистрации и входа в систему, а именно:
Интерфейс регистрации пользователя: 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
}
});
},Обратите внимание, что после завершения регистрации пользователь автоматически входит в систему. Избегайте того, чтобы пользователям приходилось нажимать еще раз. Согласно этой идее, продолжайте выполнять функцию входа в систему. Это очень просто? ^_^
Процесс разработки других страниц аналогичен и пока не будет обсуждаться. Например, домашняя страница журнала:
Управление фоновыми данными Xiaobai
Вы также можете управлять визуальными данными и просматривать их с помощью фона, предоставляемого Xiaobai. Например, управление журналом:
Фоновая ссылка Xiaobai: http://admin.okayapi.com/
демо-счет и пароль: api_demo/123456
резюме
В целом последовательность разработки может быть следующей:
1. Сначала создайте HTML-страницу
2. Используйте VUE для обработки данных и событий
3. Используйте jQuery для инициирования запросов интерфейса ajax
4. В интерфейсе бэкенда используется готовый бесплатный OkayApi
5, протестируй, получи!