Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[18.219.132.200] |
|
Сообщ.
#1
,
|
|
|
Халло это снова я!
Ща буду учиться писать небольшие приложения на Backbone. Немного поучил матчасть и теперь чую в себе увереность что могу ченить нафигачить. Итак пишем первый проект под название Simple Blog. Ждите скоро все будет! |
Сообщ.
#2
,
|
|
|
Да дай ты ему умереть спокойно. Ты бы ещё prototypejs вспомнил.
|
Сообщ.
#3
,
|
|
|
Цитата Serafim @ Да дай ты ему умереть спокойно. Ты бы ещё prototypejs вспомнил. может кому понадобится, ну для практики хорошо |
Сообщ.
#4
,
|
|
|
Итак набил первый вариант веб-приложения.
Немного поясню что будет делать наше веб-приложение: 1) Отображать список постов 2) Добавлять новые посты 3) Отображать комменты 4) Добавлять новые комменты. ВСЕ! Для начала этого хватит! Какие технологии тут используется, так называемый full stack javascript, ну т.е. программим тока на жаваскрипт! Круто да? 1) BackboneJS - это библиотека, реализующая MV* архитектуру на клиенте. 2) Node - Javascript платформа, реализованая на движке V8 Google Chrome, для запуска нашего серверного приложения. 3) Express - фреймворк для облегчения программирования под Node. 4) Bourne - простая без серверная NoSQL база данных. 5) EJS - простой серверный шаблонизатор, хотя в данном варианте приложения он почти не юзается, а юзается клиентский шаблонизатор Underscore. Сам Backbone юзает Underscore + jQuery поэтому в коде они также юзаются. Underscore для клиентской шаблонозации, а jQuery для манипуляций с DOM. Спросите а нафига тогда EJS тут! Ну я его юзал для передачи страницы с данными на клиент Прикреплённый файлsimple_blog.zip (2,65 Кбайт, скачиваний: 115) Качайте, смотрите и задавайте вопросы, ну или критику код сервера приложения server.js const express = require('express'); const Bourne = require('Bourne'); const path = require('path'); const logger = require('morgan'); var app = express(); var posts = new Bourne('posts.json'); var comments = new Bourne('comments.json'); app.use(logger('dev')); app.use(express.json()); app.use(express.static('public')); app.get('/posts', function (req, res) { posts.find(function (err, results) { res.json(results); }); }); app.post('/posts', function (req, res) { posts.insert(req.body, function (err, result) { res.json(result); }); }); app.get('/', function (req, res) { posts.find(function (err, results) { res.render('index.ejs', { posts: JSON.stringify(results) }); }); }); app.listen(3000); Код клиентской части (для просты все в одном файле app.js) // Post model var Post = Backbone.Model.extend({ defaults: { title: '', content: '', pubDate: new Date() } }); // Post collection var Posts = Backbone.Collection.extend({ model: Post, url: '/posts' }); // template settings _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g }; // New post view var NewPostView = Backbone.View.extend({ tagName: 'form', initialize({ posts }) { this.posts = posts; this.tmpl = _.template($('#newPostView').html()); }, render() { this.$el.html(this.tmpl()); return this; }, events: { 'click button': 'createPost' }, createPost() { this.posts.create({ title: $('#title').val(), content: $('#content').val(), pubDate: new Date() }); this.el.reset(); return false; } }); // Post list view var PostListView = Backbone.View.extend({ initialize({ $main }) { this.$main = $main; this.listTmpl = _.template($('#postListView').html()); this.itemTmpl = _.template($('#postListItemView').html()); }, render() { this.$el.html(this.listTmpl()); var $ul = this.$el.find('ul'); this.collection.forEach(post => { var itemHtml = this.itemTmpl(post.toJSON()); $ul.append(itemHtml); }); return this; }, events: { 'click #newPost': 'newPost', 'click #viewPost': 'viewPost' }, newPost() { var np = new NewPostView({ posts: this.collection }); this.$main.html(np.render().el); return false; }, viewPost() { console.log('viewPost'); // TODO: return false; } } }); Код index.ejs (для оформления юзал bootstrap, а библы брал с CDN): <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>BackboneJS In Action</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js" charset="utf-8"></script> </head> <body class="container"> <h1>Simple Blog</h1> <div id="main"></div> <!-- view templates --> <template id="postListView"> <ul></ul> <hr> <div class=""> <a href="/posts/new" id="newPost">New post</a> </div> </template> <template id="postListItemView"> <li><a href="/posts/{{ id }}" id="viewPost">{{ title }}</a></li> </template> <template id="newPostView"> <div class="form-group"> <label for="title">Title</label> <input class="form-control col-sm-8" type="text" id="title" placeholder="post title here"> </div> <div class="form-group"> <label for="content">Text</label> <textarea class="form-control col-sm-8" id="content"></textarea> </div> <div class="form-group"> <button class="btn btn-primary">Post</button> </div> <hr> <div class=""> <a href="/">All Posts</a> </div> </template> <!-- app code --> <script src="/app.js" charset="utf-8"></script> <script> var posts = new Posts(<%- posts %>); var plv = new PostListView({ collection: posts, $main: $('#main') }); $('#main').html(plv.render().el); </script> </body> </html> Файл конфигурации package.json: { "name": "simple-blog", "version": "1.0.0", "description": "", "main": "server.js", "dependencies": { "express": "^4.16.2", "bourne": "^0.4.0", "ejs": "^2.5.7" }, "devDependencies": { "nodemon": "^1.15.1" }, "scripts": { "test": "nodemon server" }, "author": "", "license": "ISC" } Чтобы все заработало надо установить Node.js, открыть консоль и перейти в папку simple-blog, набрать npm install. Затем откройте броузер и введите localhost:3000. Но перед этим в консоли запустите сам сервер приложения командой npm test |
Сообщ.
#5
,
|
|
|
Залил на GitHub теперь как белый человек
https://github.com/Cfon/simple-blog |
Сообщ.
#6
,
|
|
|
О, даже с ридми, ну ты прям растёшь
|
Сообщ.
#7
,
|
|
|
Цитата Serafim @ О, даже с ридми, ну ты прям растёшь Стараемся Добавлено Обнаружил косяки в app.js: var NewPostView = Backbone.View.extend({ tagName: 'form', initialize({ posts }) { this.posts = posts; this.tmpl = _.template($('#newPostView').html()); //<-- тут }, ... следует переписать на var NewPostView = Backbone.View.extend({ tagName: 'form', tmpl: _.template($('#newPostView').html()), //<-- переносим сюда initialize({ posts }) { this.posts = posts; }, ... кто не в теме Backbone поясню предыдущий код создавал свойство tmpl на каждом экземпляре объекта, в исправленой версии tmpl создается в прототипе, т.е один раз, что естестно экономично по памяти ПС. Добавил обработку viewPost см на GitHub. Код получился довольно путаным, но я это исправлю в следущей ревизии используя Backbone.Router это своего рода контролер в архитектуре MVC Backbone. |
Сообщ.
#8
,
|
|
|
Сообщ.
#9
,
|
|
|
Предыдущий пример многому научил, но там есть косяки, какие? Сами найдите
Следующий пример будет называться Simple Borisgram Почему Borisgram? Просто у меня есть кот его зовут Борис |
Сообщ.
#10
,
|
|
|
Начну с описания программы Borisgram, значит что она будет делать, по большому счету тоже самое что и предыдущий
1) отображать фото 2) загружать фото 3) комментировать фото потом он будет расширен до возможости работать с множеством аккаунтов, пока же это будет для одного юзверя. В данном примере я буду юзать тоже что и в предыдущем примере, ну а что вы хотели надо оттачивать приемы 1) Backbone (MVC) 2) Underscore (client template engine) 3) Bootstrap 4 (UI) 4) Node-Express (app server) 5) EJS (server template engine) 5) Bourne (DB) Ждите я уже начал писать код, и выложу его сюда как обычно и GitHub. Со мной вы станете супер-пупер жавапрограммером! |
Сообщ.
#11
,
|
|
|
Написал загрузку файлов на сервер
https://github.com/Cfon/borisgram Следующий шаг отображение загруженных фото. |
Сообщ.
#12
,
|
|
|
Добавил просмотр фото, следующий шаг организовать многопользовательский режим, т.е. добавить аутентификацию.
|
Сообщ.
#13
,
|
|
|
Новая версия simple-blog-v2 где юзается Backbone, ES6 и webpack! Все как у белых людей
Прикреплённый файлsimple_blog_v2.zip (7,04 Кбайт, скачиваний: 113) ПС. Borisgram я не забросил, уже давно закончил просто не выкладывал |