一个完整的项目基本分为三个部分：前端、后台和数据库。依照软件工程的理论知识，应该依次按照以下几个步骤：需求分析、概要设计、详细设计、编码、测试等。由于缺乏相关知识的储备，导致这个Demo系列的文章层次不是很清楚，索性这一章将所有的过程（前后端以及数据库）做一个介绍，下一章写完总结就OK了吧。
（1）前端部分
涉及到的技术：html、css、bootstrap、jquery、jquery UI
登录/注册界面使用的是bootstrap响应式布局，即支持不同尺寸的客户端，以此提高用户的体验。在这之前我以为聊天室比较适合做成SPA（单页应用），想采取backbone，但是结合毕设的主题是基于Node.js，如果采用backbone，路由功能就有两种选择，backbone和Node.js都有着丰富的路由API，由于之前没有用Node.js做过相关项目，所以就放弃了backbone。Demo通过改变css中display的属性来控制div的显示与隐藏。
页面：
1 <div> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-sm-5 col-md-5"> 5 <div > 6 <form > 7 <h2 class="form-signin-heading">Sign in</h2> 8 <input > 9 <input > 10 <button >in</button> 11 </form> 12 <p ></p> 13 </div> 14 </div> 15 <div class="col-sm-2 col-md-2"> 16 <div class="text-center"><br><br> 17 <h1>Or</h1> 18 </div> 19 </div> 20 <div class="col-sm-5 col-md-5"> 21 <div > 22 <form > 23 <h2 class="form-signin-heading">Sign up</h2> 24 <input /> 25 <input /> 26 <button >Sign up</button> 27 </form> 28 <p ></p> 29 </div> 30 </div> 31 </div> 32 </div> 33 <div > 34 <div > 35 <div > 36 <img class="headImg" /> 37 <span ></span> 38 </div> 39 <hr style="margin:0;"> 40 <div > 41 <div> 42 <span ></span> 43 <br> 44 <em></em> 45 </div> 46 <hr> 47 <ul> 48 <li ></i> Setting</li> 49 <li ></i> Switch</li> 50 <li ></i> Layout</li> 51 </ul> 52 </div> 53 <ul > 54 <li><i class="glyphicon glyphicon-eye-close"></i><em> Update Password</em></li> 55 <li><i class="glyphicon glyphicon-tags"></i><em> Personal Sign</em></li> 56 <li><i class="glyphicon glyphicon-user"></i><em> Head Portrait </em></li> 57 </ul> 58 <div > 59 <input type="password" placeholder="Old Password" maxlength="6" /> 60 <input type="password" placeholder="New Password" maxlength="6" /> 61 <p></p> 62 </div> 63 <div > 64 <input type="text" placeholder="write something will well" maxlength="16" /> 65 <p></p> 66 </div> 67 <div > 68 <p>*Double click the picture to select</p> 69 <div > 70 <ul> 71 </ul> 72 </div> 73 </div> 74 <div > 75 <ul > 76 <li>Square</li> 77 <li>Choose Room</li> 78 <ul > 79 <li><img src="/img/firsthead.jpg" alt="" /><span>The Legend of Qin</span></li> 80 <li><img src="/img/secondhead.jpg" alt=""><span>Naruto</span></li> 81 </ul> 82 </ul> 83 84 <div> 85 </div> 86 </div> 87 </div> 88 <div > 89 <div ><strong>Square</strong></div> 90 <div > 91 <ul ></ul> 92 </div> 93 <div > 94 <div> 95 <span class="emotion" title="插入表情"><i class="glyphicon glyphicon-picture"></i></span> 96 <span ></i></span> 97 <span ></i></span> 98 </div> 99 <form > 100 <textarea > 101 </textarea> 102 <button ></i></button> 103 </form> 104 </div> 105 </div> 106 <div > 107 </div> 108 <div > 109 <span >Members Information</span> 110 <div > 111 <div> 112 <i></i> 113 <span>All Members</span> 114 <span ></span> 115 </div> 116 <ul ></ul> 117 <ul ></ul> 118 </div> 119 <div > 120 <div> 121 <i></i> 122 <span>Room Members</span> 123 <span ></span> 124 </div> 125 <ul> 126 </ul> 127 </div> 128 </div> 129 <div > 130 <span ></i> MsgHistory</span> 131 <ul></ul> 132 <span ></i></span> 133 </div> 134 </div> 135 </div> 136 </div> 137 <script src="/socket.io/socket.io.js"></script> 138 <script src="/js/jquery.js"></script> 139 <script src="/js/jquery-ui.min.js"></script> 140 <script src="/js/app.js"></script> 141 <script src="/js/jquery.qqFace.js"></script>