OData + Angular.js + Bootstrap + JavaScript Grid = приложение за 5 минут

в 14:14, , рубрики: angular.js, Bootstrap, javascript, json, kendo ui, odata, rest, rest apiful api, RESTful, Блог компании NitrosData, Веб-разработка, интерфейсы, Программирование

Предположим в некотором проекте появилась необходимость добавить некоторую форму опроса пользователей на веб сайте (детальная форма) и форму для просмотра и редактирования списка пользователей для администратора системы (списковая форма).

Рассмотрим процесс создания этих форм с использованием OData, Angular.js, Bootstrap и JavaScript Grid. Все требования к такому приложению уже реализованы в этих инструментах, и нам практически не требуется ничего писать.


Перечислим основные требования к форме опроса (в скобках указаны инструменты, реализующие данное требование):

  • Поля формы: “First Name”, “Last Name”, “Email”, “Comment”
  • Форма должна сохранять данные в базе данных для последующего просмотра и анализа администратором системы (Angular.js)
  • Форма должна проводить верификацию данных до отправки на сервер (Angular.js)
  • Форма не должна перезагружать страницу при посылке данных на сервер (Angular.js)
  • Форма должна модифицировать свой размер под различную ширину экрана или блока div, в который она будет вставлена на странице сайта (Bootstrap)

Основные требования к форме для работы со списком пользователей:

  • Обеспечивать страничный механизм или виртуальный скроллинг в случае большого количества пользователей
  • Обеспечивать сортировку по любым полям (колонкам грида)
  • Обеспечивать возможность поиска данных
  • Обеспечивать возможность добавления-редактирования-удаления данных

Любой JavaScript грид полностью обеспечивает все эти требования. Например стоит посмотреть на библиотеки Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo.

Основные запросы к серверу:

  • Добавить новую запись
  • Изменить запись
  • Удалить запись
  • Получить общее количество записей, удовлетворяющих некоторому условию
  • Получить выборку из общего набора записей для показа на одной странице
  • Получить весь набор записей
  • Отсортировать записи по одному или нескольким полям
  • Отфильтровать записи по некоторому набору условий
  • Выполнение batch update операций – добавление, изменение и удаление сразу группы записей

Чтобы избежать необходимости реализации обработчиков всех перечисленных запросов, мы возьмем NitrosBase.js, который является готовым OData сервером и полностью обеспечивает автоматическую обработку всех этих запросов.

Форма опроса

image
image
Форму опроса (детальную форму) мы создадим с помощью Bootstrap и Angular.js:

  • Bootstrap существенно облегчает дизайн формы и обеспечивает возможность простого изменения размера, расположения элементов и т.д.
  • Angular.js обеспечивает минимальность кода для верификации данных и посылки их на сервер. Связка Bootstrap + Angular.js позволяет создавать простые формы «на лету».

Мы рекомендуем всегда иметь под рукой несколько готовых шаблонов различных форм. Например:

  • Простая детальная форма с полями различных типов
  • Простая детальная форма с маленьким списком, например, детальная форма данных о человеке со списком контактов
  • И т.д.

Очень хорошо держать шаблоны на каком-нибудь сайте типа JSFiddle, Bootply, CodePen, Plunker и т.д.

Используя простой copy-paste на основе подобного примера формы:

  • Создаем поля формы, меняем их названия.
  • Указываем что поля “First Name”, “Last Name” и “Email” являются обязательными
  • Выставляем URL для сохранения данных с формы – в данном случае 'http://nitrosdata.com/service/sandboxdb/user'.
  • Слегка настраиваем layout формы (в данном случае размещаем комментарий справа от других полей). И это все что нам нужно сделать.

 
 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-example32-production</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link href="http://bootswatch.com/cerulean/bootstrap.min.css" rel="stylesheet" type="text/css">
    <style>.form-control {border-width:2px}</style>
</head>
<body ng-app="formExample" ng-controller="ExampleController">
    <div class="container">
        <div class="col-md-12">
            <h1>Simple Bootstrap + Angular.js form</h1>
            <br />
        </div>
        <form name="myForm">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="firstname">First Name:</label>
                    <input class="form-control" id="firstname" type="text" 
                          placeholder="Enter first name" ng-model="user.firstname" required autofocus />
                </div>
                <div class="form-group">
                    <label for="lastname">Last Name:</label>
                    <input class="form-control" type="text" id="lastname" 
                          placeholder="Enter last name" ng-model="user.lastname" required />
                </div>
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input class="form-control" type="email" id="email" name="input" 
                          placeholder="Enter email" ng-model="user.email" required>
                </div>
            </div>
            <div class="col-md-8">
                <div class="form-group">
                    <label for="comment">Comment:</label>
                    <textarea rows="9" class="form-control" id="comment" 
                          placeholder="Enter comment" ng-model="user.comment"></textarea>
                </div>
            </div>
            <div class="col-md-12">
                <input class="btn btn-primary" type="submit" 
                          ng-click="insert(myForm.$valid, user)" value="Add new user" />
                <input class="btn btn-info" type="submit" 
                          ng-click="update(myForm.$valid, user)" value="Update" /><br /><br />
            </div>
        </form>
    </div>

    <script>
        angular.module('formExample', [])
            .controller('ExampleController', ['$scope', '$http', function ($scope, $http) {
                $scope.update = function (isvalid, user) {
                    if (!isvalid)
                        return;
                    $http.post('http://nitrosdata.com/service/sandboxdb/user', JSON.stringify(user))
                        .success(function (data, status, headers, config) { $scope.user = data.d.results; });
                };
                $scope.insert = function (isvalid, user) {
                    if (!isvalid)
                        return;
                    user.id = undefined;
                    $scope.update(isvalid, user);
                }
            }]);
    </script>
</body>
</html>

Список пользователей

image

Список пользователей (списковую форму) будем делать на основе примера грид контрола из библиотеки Kendo UI. Практически все программирование сведется к указанию правильных URL для операций модификации данных и к описанию колонок грида.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
    <style>html {font-size: 12px;font-family: Arial, Helvetica, sans-serif;}
        body {margin: 0;}
    </style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example">
        <div id="grid"></div>
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://nitrosdata.com/service/sandboxdb/user",
                            create: { url: "http://nitrosdata.com/service/sandboxdb/user" },
                            update: { url: "http://nitrosdata.com/service/sandboxdb/user" },
                            destroy: { url: function (data) { 
                                return "http://nitrosdata.com/service/sandboxdb/user(" + data.id + ")";
                            } }
                        },
                        pageSize: 20,
                        serverPaging: true,
                        serverFiltering: true,
                        serverSorting: true,
                        schema: { model: { id: "id" } }
                    },
                    filterable: true, editable: true, toolbar: ["create", "save", "cancel"],
                    sortable: true,
                    pageable: true,
                    columns: ["firstname", "lastname", "email", "comment", 
                          { command: "destroy", title: " ", width: 150 }]
                });
            });
        </script>
    </div>
</body>
</html>

Сервер

Для обработки всех необходимых в данном примере запросов нам вообще не потребуется разрабатывать каких-либо кодов. Все запросы к базе данных полностью покрываются стандартом Odata, и NitrosBase.js автоматически их обрабатывает.

Заключение

Существует множество библиотек для упрощения web разработки, например: Angular.js, Bootstrap, Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, NitrosBase.js и т.д. Каждая из них решает свою задачу. Удачный подбор совокупности библиотек под конкретную задачу может существенно сократить время разработки.

Использование готовых шаблонов форм с использованием перечисленных выше библиотек позволяет вести разработку «на лету» используя copy-paste и внося лишь мелкие изменения в код.

Автор: NitrosData

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js