在上一章的 [服务器端开发](https://github.com/the5fire/backbonejs-learning-note/blob/master/chapters/13-web-chatroom-base-on-backbonejs-3.rst) 中我们定义了模型,实现了几个实体增删改查得功能,也提供了前端访问数据的接口。但在前端的实现过程中又对接口进行了调整,以更符合前端的使用。在真实的开发中也是如此,定义的接口合不合适只有在开发时才知道。 目前代码并没有进行模块的划分,在单js文件(chat.js)中实现了所有逻辑。下一步会进行通过seajs或者requirejs来进行模块管理。 关于前端样式的设计和开发并不在这个系列的计划中,因此就不多做介绍了,只是基于semantic进行了简单的设计,有兴趣的可以自己去看: [wechat项目](https://github.com/the5fire/wechat) 。 ## 14.1 前端文件结构 前端的结构和前面的项目结构一样,只是添加了chat.js和自定义样式的chat.css文件,我们所有的代码都在这个文件中编写。 ~~~ ├── static │   ├── css │   │   ├── body.css │   │   ├── chat.css │   │   └── semantic.min.css │   ├── fonts │   │   ├── basic.icons.svg │   │   ├── basic.icons.woff │   │   ├── icons.svg │   │   └── icons.woff │   ├── img │   │   └── bg.jpg │   └── js │   ├── backbone.js │   ├── chat.js │   ├── jquery.js │   ├── json2.js │   └── underscore.js ├── templates │   └── index.html ~~~ ## 14.2 Model和Collection定义 我们还是先来定义Model的实现,前端的Model应该和后端的Model定义一样,不然数据传递就会有问题。因为在后端已经明确定义了Model有哪些属性,这里的定义就简单多了。当然这也是动态语言的优势——动态的添加属性。 我们要定义三个Model和两个Collection,因为User这个对象在前端只会存在一份,不需要定义集合。来看具体实现: ~~~ var User = Backbone.Model.extend({ urlRoot: '/user', }); var Topic = Backbone.Model.extend({ urlRoot: '/topic', }); var Message = Backbone.Model.extend({ urlRoot: '/message', }); var Topics = Backbone.Collection.extend({ url: '/topic', model: Topic, }); var Messages = Backbone.Collection.extend({ url: '/message', model: Message, }); ~~~ 我们之定义了基本的属性,这些属性保证了我们可以可以直接通过collection或者model获取到后端的数据。 ## 14.3 视图和模板的定义 定义了基本的Model之后,就相当于是有了数据的获取方式,下一步就是如何显示这些数据了。因此就需要用Backbonejs中的view和template来定义我们的具体显示了。 首先来定义view: ~~~ var TopicView = Backbone.View.extend({ tagName: "div class='column'", templ: _.template($('#topic-template').html()), // 渲染列表页模板 render: function() { $(this.el).html(this.templ(this.model.toJSON())); return this; }, }); var MessageView = Backbone.View.extend({ tagName: "div class='comment'", templ: _.template($('#message-template').html()), // 渲染列表页模板 render: function() { $(this.el).html(this.templ(this.model.toJSON())); return this; }, }); var UserView = Backbone.View.extend({ el: "#user_info", username: $('#username'), show: function(username) { this.username.html(username); this.$el.show(); }, }); ~~~ 根据定义的三个Model,定义了把数据渲染到模板的方式,对应的模块是什么样的呢,我们来看下: ~~~ <script type="text/template" id="topic-template"> <a href="#topic/<%= id %>"> <div class="column"> <div class="ui segment"> <h3><%= title %></h3> <p> 创建者:<%= owner_name %> </p> <p> 创建时间:<%= created_time %> </p> </div> </div> </a> </script> <script type="text/template" id="message-template"> <div class="content <% if(is_mine) { %> right <% } %>" data="<%= id %>"> <a class="author"><%= user_name %></a> <br/> <div class="metadata"> <span class="date"><%= created_time %></span> </div> <div class="text" style="min-width:55px"> <div class="ui pointing label large <% if(is_mine) { %> right <% } %>"> <p><%= content %></p> </div> </div> </div> </script> ~~~ 这里并没有定义user的模板,因为目前对user只是做了简单的展现,即仅在顶部栏上加了一个用户名,通过: `user_name`这个Dom节点的id添加数据。 到目前已经介绍了所有的基础数据:从model到collection,到用来显示数据的view,再到定义的页面模板template。每部分的数据都可以单独的从后台获取,并且渲染。好了,材料都准备好了就差什么了?当然是流程。不过还有一个东西得先说一下,这些数据被塞到页面之后到底长成什么样还不知道。因此得先来看下页面结构。 下面先来看看上面的那些数据最终要被填充到页面的什么部位,然后再来说流程的事。 ## 14.4 页面结构 这里还是从代码上说事,但是最终效果图已经在 [wechat](https://github.com/the5fire/wechat) 的readme中贴出来了,你可以跳过去看看长相先。 欣赏完外表,来看看内部的骨架,这里只贴主要代码。 _顶部的固定栏:_ ~~~ <!-- Top Bar --> <div class="ui fixed transparent inverted main menu"> <div class="container"> <div class="title item"> <b>We Chat</b> 在线聊天系统 </div> <div class="right menu"> <div class="title item"> Backbonejs交流群:308466740 </div> </div> <div id="user_info" class="right menu hide"> <div class="title item"> <i class="icon user"></i> <label id="username">the5fire</lable> </div> <a class="popup icon github item" href="/logout" title="退出登录"> 退出登录 </a> </div> </div> </div> ~~~ _登陆注册的代码,纯静态代码:_ ~~~ <div id="wrapper" style="display: block; z-index: 998;"> <div class="container"> <div id="login" class="ui two column relaxed grid"> <div class="column"> <div class="ui fluid form segment"> <h3 class="ui header">登录</h3> <div class="field"> <label>用户名</label> <input id="login_username" placeholder="用户名" type="text"> </div> <div class="field"> <label>密码</label> <input id="login_pwd" type="password"> </div> <div class="ui blue login_submit button">登录</div> </div> </div> <div class="column"> <div class="ui fluid form segment"> <h3 class="ui header">注册</h3> <div class="field"> <label>用户名</label> <input id="reg_username" placeholder="用户名" type="text"> </div> <div class="field"> <label>密码</label> <input id="reg_pwd" type="password"> </div> <div class="field"> <label>重复密码</label> <input id="reg_pwd_repeat" type="password"> </div> <div class="inline field"> <div class="ui checkbox"> <input type="checkbox" id="terms"> <label for="terms">我同意the5fire's WeChat网的服务条款。</label> </div> </div> <div class="ui blue registe_submit button">注册</div> </div> </div> </div> </div> </div> ~~~ 用来展示话题和消息的内容区域: ~~~ <!-- Content --> <div id="main" class="main container"> <!-- Topic List --> <div id="topic_section"> <div id="topic_list" class="ui three column grid"> <!-- 这里放topic列表 --> </div> <div id="topic_form" class="ui error form segment"> <div class="two fields"> <div class="field"> <label>新建Topic</label> <input id="topic_title" placeholder="topic" type="text"> </div> </div> <div class="ui blue submit_topic button">Add</div> </div> </div> <!-- Message --> <div id="message_section" class="ui column grid hide" style="display:none"> <div class="column"> <div class="circular ui button"><a href="#index">返回列表</a></div> <div class="ui piled blue segment"> <h2 class="ui header"> #<i id="message_head"></i># <!-- 用来放topic name --> </h2> <div id="message_list" class="ui comments"> <!-- comments 列表 --> </div> <div class="ui reply form"> <div class="field"> <input type="text" id="comment"/> </div> <div id="submit" data="" class="ui fluid blue labeled submit icon button"> <i class="icon edit"></i> 我也来说一句! </div> </div> </div> </div> </div> </div> ~~~ 页面布局大概介绍了一下,如果你熟悉html,并且也看了我上面链接里给的最终效果, 上面的这些理解上面的这些代码应该很Easy了。如果不熟悉的也没问题,只要关注于我写了注释的地方就行了,这些地方就是上面我们定义的那些模板被渲染好之后的归宿。 ## 14.5 view管理和router管理 上面占了点篇幅介绍了页面的布局,以便对我们数据最终的处理有一个感觉。 有了数据,也有了最后数据的去处,最后当然要说流程了。所谓的流程就是说我要怎么把Model渲染好的模板给塞到对于的页面div节点中,我要怎么来控制不同Model的展示。毕竟是SPA(单页应用), 也只有这一个页面来供数据的展示。因此需要在一个页面上切换的展示不同的视图。 这里我们是通过Backbone的Route和View来做。Route用来做路由分发(也就是URI的匹配,比如:#index匹配到首页)。另外不同于上面用来把Model数据传到Template中的View,这里的View是用来管理其他具体View和Collection的,可以比喻为管家View,就是用来控制这个视图什么时候显示,那个Collection的数据什么时候获取。 但是,需要注意,这个View需要被Route来控制,也就是通过路由控制(根据URI),因此View在具备上述功能的情况下也要提供接口(方法)给Route。 上面介绍了一堆,仿佛说不太清晰,没关系,Talk is cheap, Show you my code。 先来看View管家-AppView, 主要功能就是获取Topic和Message的数据到Collection中,调用Model对应的View把数据填到模板中,然后把最终拼好的数据放到上面介绍的页面对应div中。 ~~~ var AppView = Backbone.View.extend({ el: "#main", topic_list: $("#topic_list"), topic_section: $("#topic_section"), message_section: $("#message_section"), message_list: $("#message_list"), message_head: $("#message_head"), events: { 'click .submit': 'saveMessage', // 发送消息 'click .submit_topic': 'saveTopic', // 新建主题 'keypress #comment': 'saveMessageEvent', // 键盘事件 }, initialize: function() { _.bindAll(this, 'addTopic', 'addMessage'); topics.bind('add', this.addTopic); // 定义消息列表池,每个topic有自己的message collection // 这样保证每个主题下得消息不冲突 this.message_pool = {}; this.message_list_div = document.getElementById('message_list'); }, addTopic: function(topic) { var view = new TopicView({model: topic}); this.topic_list.append(view.render().el); }, addMessage: function(message) { var view = new MessageView({model: message}); this.message_list.append(view.render().el); }, saveMessageEvent: function(evt) { if (evt.keyCode == 13) { this.saveMessage(evt); } }, saveMessage: function(evt) { var comment_box = $('#comment') var content = comment_box.val(); if (content == '') { alert('内容不能为空'); return false; } var topic_id = comment_box.attr('topic_id'); var message = new Message({ content: content, topic_id: topic_id, }); self = this; var messages = this.message_pool[topic_id]; message.save(null, { success: function(model, response, options){ comment_box.val(''); // 重新获取,看服务器端是否有更新 // 比较丑陋的更新机制 messages.fetch({ data: {topic_id: topic_id}, success: function(){ self.message_list.scrollTop(self.message_list_div.scrollHeight); messages.add(response); }, }); }, }); }, saveTopic: function(evt) { var topic_title = $('#topic_title'); if (topic_title.val() == '') { alert('主题不能为空!'); return false } var topic = new Topic({ title: topic_title.val(), }); self = this; topic.save(null, { success: function(model, response, options){ topics.add(response); topic_title.val(''); }, }); }, showTopic: function(){ // 获取所有主题 topics.fetch(); this.topic_section.show(); this.message_section.hide(); this.message_list.html(''); }, initMessage: function(topic_id) { // 初始化消息集合,并放到消息池中 var messages = new Messages; messages.bind('add', this.addMessage); this.message_pool[topic_id] = messages; }, showMessage: function(topic_id) { this.initMessage(topic_id); this.message_section.show(); this.topic_section.hide(); this.showMessageHead(topic_id); $('#comment').attr('topic_id', topic_id); var messages = this.message_pool[topic_id]; messages.fetch({ data: {topic_id: topic_id}, success: function(resp) { self.message_list.scrollTop(self.message_list_div.scrollHeight) } }); }, showMessageHead: function(topic_id) { var topic = new Topic({id: topic_id}); self = this; topic.fetch({ success: function(resp, model, options){ self.message_head.html(model.title); } }); }, }); ~~~ 上面是所有数据视图的展示的逻辑控制部分,虽然代码很多,但没有复杂逻辑,很直观。这里只是Topic和Message的展示。但是这些所有的数据都是需要用户登录之后才能看到的,那么用户登录和注册部分的逻辑在哪呢?在上面的页面布局部分已经展示了登录注册的页面,下面展示下具体逻辑。 登录注册-LoginView: ~~~ var LoginView = Backbone.View.extend({ el: "#login", wrapper: $('#wrapper'), events: { 'keypress #login_pwd': 'loginEvent', 'click .login_submit': 'login', 'keypress #reg_pwd_repeat': 'registeEvent', 'click .registe_submit': 'registe', }, hide: function() { this.wrapper.hide(); }, show: function() { this.wrapper.show(); }, loginEvent: function(evt) { if (evt.keyCode == 13) { this.login(evt); } }, login: function(evt){ var username_input = $('#login_username'); var pwd_input = $('#login_pwd'); var u = new User({ username: username_input.val(), password: pwd_input.val(), }); u.save(null, { url: '/login', success: function(model, resp, options){ g_user = resp; // 跳转到index appRouter.navigate('index', {trigger: true}); } }); }, registeEvent: function(evt) { if (evt.keyCode == 13) { this.registe(evt); } }, registe: function(evt){ var reg_username_input = $('#reg_username'); var reg_pwd_input = $('#reg_pwd'); var reg_pwd_repeat_input = $('#reg_pwd_repeat'); var u = new User({ username: reg_username_input.val(), password: reg_pwd_input.val(), password_repeat: reg_pwd_repeat_input.val(), }); u.save(null, { success: function(model, resp, options){ g_user = resp; // 跳转到index appRouter.navigate('index', {trigger: true}); } }); }, }); ~~~ 这里的View的主要功能是:注册(保存user数据到后台),登录(发送用户请求到后台,成功则跳到首页),事件监听和处理。很基础的功能。 从上面两部分我们知道了如何控制不同Model对应视图的展示,也知道了如何处理用户登录。下面再来看些Route部分是如何把url匹配到对应的方法上的。 路由部分代码-AppRouter: ~~~ var AppRouter = Backbone.Router.extend({ routes: { "login": "login", "index": "index", "topic/:id" : "topic", }, initialize: function(){ // 初始化项目, 显示首页 this.appView = new AppView(); this.loginView = new LoginView(); this.userView = new UserView(); this.indexFlag = false; }, login: function(){ this.loginView.show(); }, index: function(){ if (g_user && g_user.id != undefined) { this.appView.showTopic(); this.userView.show(g_user.username); this.loginView.hide(); this.indexFlag = true; // 标志已经到达主页了 } }, topic: function(topic_id) { if (g_user && g_user.id != undefined) { this.appView.showMessage(topic_id); this.userView.show(g_user.username); this.loginView.hide(); this.indexFlag = true; // 标志已经到达主页了 } }, }); ~~~ 这里设定了三条路由:login,index,topic,分别对应这个登录视图(LoginView), 主题和Message的视图(由AppView管理)。 在不同的路由中的逻辑大致一样,就是根据当前的条件决定是否现实视图。 比如index中的 `if (g_user && g_user.id != undefined) {` 就是判断当前环境中是否有g_user这个对象(这个对象是用来存放已登录用户数据的,后面会介绍),根据这个对象判断是否用户已经登录,进而决定是否现实首页——topic列表页。 ## 14.6 启动 当所有的逻辑都定义好之后,页面加载完毕首先要做的就是启动整个流程,怎么启动呢?按照我们的项目结构:AppRouter管理AppView和LoginView,AppView管理TopicView和MessageView,因此,只需要启动AppRouter即可。 启动代码如下: ~~~ var appRouter = new AppRouter(); var g_user = new User(); g_user.fetch({ success: function(model, resp, options){ g_user = resp; Backbone.history.start({pustState: true}); if(g_user === null || g_user.id === undefined) { // 跳转到登录页面 appRouter.navigate('login', {trigger: true}); } else if (appRouter.indexFlag == false){ // 跳转到首页 appRouter.navigate('index', {trigger: true}); } }, }); // 获取当前用户 ~~~ 就是这一小段代码,程序可以正常运行了。这段代码中的逻辑是:声明一个全局的appRouter和g_user,然后获取当前用户(服务器端会通过session保存对应浏览器的信息), 之后根据获取到得用户状态做进一步操作(到登录页面或是到首页)。 这里需要注意的是,这段代码只有在页面加载(刷新或重新访问)的时候才会执行。 好了,到此为止整个项目已经介绍完毕了,不知道你是否看懂,或者这么问,我是否把这个项目讲明白了? ## 14.7 总结 这一篇看起篇幅很长,其实都是代码。而这些代码只有当你真正打算做这么个东西的时候才会主动去理解,因为那些走马观花的人会选择性的忽略代码。 最后还是补充一下整个流程,其实整个项目开始做的时候,项目的设计者就应该有一个具体的需求和用户使用的场景。对于这个项目我自己设想的用户使用流程: 用户打开浏览器,看到登录和注册页面——》输入用户名、密码进行登录(注册)操作——》展示主题列表视图,并显示用户名在顶部——》用户创建并进入某一主题(显示消息列表视图)——》用户发送消息,消息保存的同时获取服务器端的消息到当前视图。 另外一定要说的是,项目没有进行太多优化和代码的精简,还有很多改进的地方。在我写代码的这些年中我始终坚信并践行的一件事就是——获取知识最好的方法就是实践。因此如果你想掌握这个Backbone这个工具,最佳的方式是开始一个项目,并持续的做下去。或者参与一个项目,持续改善项目。 我在边写边实践中写了 [WeChat](https://github.com/the5fire/wechat) 这个项目,并且已经部署上线,相信会是一个好的开始,因为我没打算把它仅仅作为一个Demo来用。 本文涉及的所有代码均在该项目的basic-version分支可以看到。