阅读本文约需要5分钟
大家好，我是你们的导师，我每天都会大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次给大家分享了Backbone.js教程，今天继续分享前后端实战演练：Web聊天室-前端开发。
往期教程的目录链接：
教程一：Hello Backbone.js
教程二：Backbone.js的Model实践 教程三：Backbone.js的Collections实践 教程四：Backbone.js中的Router实践 教程五：Backbone.js中的View实践 教程六：实战演练：todos分析(一) 教程七：实战演练：todos分析(二)View的应用 教程八：实战演练：todos分析(三)总结 教程九：后端环境搭建：web.py的使用 教程十：实战演练：扩展todos到Server端 教程十一：前后端实战演练：Web聊天室-功能分析和详细设计 教程十二：前后端实战演练：Web聊天室-服务器端开发在上一章的 服务器端开发 中我们定义了模型，实现了几个实体增删改查得功能，也提供了前端访问数据的接口。但在前端的实现过程中又对接口进行了调整，以更符合前端的使用。在真实的开发中也是如此，定义的接口合不合适只有在开发时才知道。
目前代码并没有进行模块的划分，在单js文件(chat.js)中实现了所有逻辑。下一步会进行通过seajs或者requirejs来进行模块管理。
关于前端样式的设计和开发并不在这个系列的计划中，因此就不多做介绍了，只是基于semantic进行了简单的设计，有兴趣的可以自己去看：wechat项目 。
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.htmlSS首先要分析下，这俩view是用来干嘛的。有人可能会问了，这里不就是一个页面吗？一个view掌控全局不就完了？
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获取到后端的数据。
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/"> <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 right " data=""> <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 right "> <p><%= content %>p> div> div> div>script>这里并没有定义user的模板，因为目前对user只是做了简单的展现，即仅在顶部栏上加了一个用户名，通过: user_name这个Dom节点的id添加数据。
到目前已经介绍了所有的基础数据：从model到collection，到用来显示数据的view，再到定义的页面模板template。每部分的数据都可以单独的从后台获取，并且渲染。好了，材料都准备好了就差什么了？当然是流程。不过还有一个东西得先说一下，这些数据被塞到页面之后到底长成什么样还不知道。因此得先来看下页面结构。
下面先来看看上面的那些数据最终要被填充到页面的什么部位，然后再来说流程的事。
4 页面结构
这里还是从代码上说事，但是最终效果图已经在 wechat 的readme中贴出来了，你可以跳过去看看长相先。
欣赏完外表，来看看内部的骨架，这里只贴主要代码。
顶部的固定栏:
<div class="ui fixed transparent inverted main menu"> <div class="container"> <div class="title item"> <b>We Chatb> 在线聊天系统 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">the5firelable> 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>用来展示话题和消息的内容区域:
<div id="main" class="main container"> <div id="topic_section"> <div id="topic_list" class="ui three column grid"> div> <div id="topic_form" class="ui error form segment"> <div class="two fields"> <div class="field"> <label>新建Topiclabel> <input id="topic_title" placeholder="topic" type="text"> div> div> <div class="ui blue submit_topic button">Adddiv> div> div> <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># h2> <div id="message_list" class="ui 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了。如果不熟悉的也没问题，只要关注于我写了注释的地方就行了，这些地方就是上面我们定义的那些模板被渲染好之后的归宿。
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列表页。
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保存对应浏览器的信息)， 之后根据获取到得用户状态做进一步操作(到登录页面或是到首页)。
这里需要注意的是，这段代码只有在页面加载(刷新或重新访问)的时候才会执行。
好了，到此为止整个项目已经介绍完毕了，不知道你是否看懂，或者这么问，我是否把这个项目讲明白了？
7 总结
这一篇看起篇幅很长，其实都是代码。而这些代码只有当你真正打算做这么个东西的时候才会主动去理解，因为那些走马观花的人会选择性的忽略代码。
最后还是补充一下整个流程，其实整个项目开始做的时候，项目的设计者就应该有一个具体的需求和用户使用的场景。对于这个项目我自己设想的用户使用流程：
用户打开浏览器，看到登录和注册页面——》输入用户名、密码进行登录(注册)操作——》展示主题列表视图，并显示用户名在顶部——》用户创建并进入某一主题(显示消息列表视图)——》用户发送消息，消息保存的同时获取服务器端的消息到当前视图。
另外一定要说的是，项目没有进行太多优化和代码的精简，还有很多改进的地方。在我写代码的这些年中我始终坚信并践行的一件事就是——获取知识最好的方法就是实践。因此如果你想掌握这个Backbone这个工具，最佳的方式是开始一个项目，并持续的做下去。或者参与一个项目，持续改善项目。
今天就分享这么多，关于Backbone.js中的前后端实战演练：Web聊天室-前端开发，你学会了多少？欢迎在留言区评论，对于有价值的留言，我们都会一一回复的。如果觉得文章对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。
【我们直招】我月薪2万招人了！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
