Backbone.js+Require.js+Bootstrap构建web平台
技术主要介绍：
- Backbone.js是JavaScript的一种MVC框架，但是它View层和Controller层没能分离清楚，即View层包含了大量控制层的代码；当然，Model层也接管着大量与数据相关的控制层代码。其官方网站为http://backbonejs.org/。
- Require.js是用于JavaScript项目管理模块，它的作用类似于Java项目中包的概念，在前台JavaScript项目中可以按照MVC来管理项目目录，也可以按照功能模块来管理项目目录，提高了项目的可维护性。其官方网站为http://requirejs.org/。
- Bootstrap是Twitter公司开源前端响应式布局框架，它包含大量丰富的组件，用于页面渲染。
项目目录结构：
css用于存放css样式文件，js存放JavaScript文件，img存放图片文件，font存放页面上使用到的字体文件，data是模拟后台传来的json数据，index.html是整个项目的入口。
引入相应的包：
- backbone.js
- jquery.js
- require.js
- text.js
- underscore.js
- zepto.js
- bootstrap.js
编写代码：
1.index.html
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>管理模板</title> 6 <!-- 设置当前页面index被requirejs接管，同时设置main.js为app的主入口 --> 7 <script data-baseurl="./js" data-main="js/main.js" src="js/lib/require.js" id="main"></script> 8 <!-- 引入bootstrap样式文件 --> 9 <link type="text/css" rel="stylesheet" href="css/bootstrap/css/bootstrap.css"></head> 10 <body> 11 <!-- 用于该app渲染的div --> 12 <div id="app-body"></div> 13 </body> 14 </html>
2.main.js
1 (function(win) { 2 //先获得页面中baseUrl数值 3 var baseUrl = document.getElementById('main').getAttribute('data-baseurl'); 4 var config = { 5 baseUrl: baseUrl, 6 paths: { 7 zepto: 'lib/zepto.min', 8 jquery: 'lib/jquery', 9 underscore: 'lib/underscore', 10 backbone: 'lib/backbone', 11 text: 'lib/text', 12 bootstrap: 'lib/bootstrap' 13 }, 14 shim: { 15 'underscore': { 16 exports: '_' 17 }, 18 'jquery': { 19 exports: '$' 20 }, 21 'zepto': { 22 exports: '$' 23 }, 24 'backbone': { 25 deps: ['underscore', 'jquery'], 26 exports: 'Backbone' 27 }, 28 'bootstrap': { 29 deps: ['jquery'], 30 exports: '$' 31 } 32 } 33 }; 34 35 require.config(config); 36 37 /** 38 * [设置全局参数] 39 * @Author WOJUSTME-XRH 40 * @DateTime 2016-07-19T14:07:11+0800 41 * @param {[type]} [description] 42 * @return {[type]} [description] 43 */ 44 require(['backbone', 'bootstrap', 'underscore', 'router'], function() { 45 //开启Backbone的路由控制 46 Backbone.history.start(); 47 }); 48 49 })(window);
3.router.js
1 /** 2 * 设置路由Map表 3 * @Author WOJUSTME-XRH 4 * @DateTime 2016-07-19T14:15:48+0800 5 * @param {Object} [description] 6 * @return {[type]} [description] 7 */ 8 define(['backbone'], function() { 9 10 var routesMap = { 11 'login': 'js/login/loginGlue.js', 12 '': 'js/login/loginGlue.js' 13 }; 14 15 var Router = Backbone.Router.extend({ 16 routes: routesMap 17 }); 18 19 window['appRouter'] = new Router(); 20 //彻底用on route接管路由的逻辑，这里route是路由对应的value 21 appRouter.on('route', function(route, params) { 22 require([route], function(glue) { 23 if (appRouter.currentGlue && appRouter.currentGlue !== glue) { 24 appRouter.currentGlue.onRouteChange && appRouter.currentGlue.onRouteChange(); 25 } 26 appRouter.currentGlue = glue; 27 glue.apply(null, params); 28 }); 29 }); 30 31 return appRouter; 32 });
4.login模块
分别是loginGlue.js、loginModel.js、loginTPL.html、loginView.js
1 /** 2 * login模块的粘合器 3 * @Author WOJUSTME-XRH 4 * @DateTime 2016-07-19T14:17:01+0800 5 * @param {[type]} Model 该粘合器依赖的Model 6 * @param {[type]} View 该粘合器依赖的View 7 * @return {[type]} 返回该粘合器的一个实例loginGlue 8 */ 9 define(['login/loginModel', 'login/loginView'], function(Model, View) { 10 11 var loginGlue = function() { 12 var loginModel = new Model(); 13 //将model注入到view层 14 var loginView = new View({ 15 model: loginModel 16 }); 17 loginView.render(); 18 }; 19 return loginGlue; 20 });
1 /** 2 * login模块的模型层 3 * @Author WOJUSTME-XRH 4 * @DateTime 2016-07-19T14:19:42+0800 5 * @return {[type]} 返回该模块的一个Model实例 6 */ 7 define([], function () { 8 var loginModel = Backbone.Model.extend({ 9 //登录默认的数据 10 defaults: function () { 11 return { 12 loginName: "admin", 13 loginPwd:"123456" 14 }; 15 } 16 }); 17 return loginModel; 18 });
1 <div class="login"> 2 <h2>登录</h2> 3 <div> 4 <div> 5 <input id="loginName" type="text" autofocus value="<%=loginName%>"></div> 6 <div> 7 <input id="loginPwd" type="password" value="<%=loginPwd%>"></div> 8 </div> 9 <div> 10 <button id="loginBtn">登 录</button> 11 </div> 12 </div>
1 /** 2 * login模块的视图控制器 3 * @Author WOJUSTME-XRH 4 * @DateTime 2016-07-19T14:23:23+0800 5 * @param {[type]} tpl 所控制的视图 6 * @return {[type]} 返回该模块的视图控制器实例 7 */ 8 define(['text!login/loginTPL.html'], function(tpl) { 9 10 var loginView = Backbone.View.extend({ 11 el: '#app-body', 12 13 events: { 14 'click button[id=loginBtn]': 'login' 15 }, 16 17 initialize: function() {}, 18 19 render: function() { 20 var loginModel = this.model; 21 this.$el.html(_.template(tpl, { 22 loginName: loginModel.get('loginName'), 23 loginPwd: loginModel.get('loginPwd') 24 })); 25 }, 26 27 //登录按钮点击函数 28 login: function(e) { 29 var loginName = $("#loginName").val(); 30 var loginPwd = $("#loginPwd").val(); 31 //将用户名和密码的元素值注入model 32 var loginModel = this.model; 33 loginModel.set({ 34 loginName: loginName, 35 loginPwd: loginPwd 36 }); 37 38 Backbone.ajax({ 39 //登录的url地址 40 url: '/web-app/data/login.json', 41 data: { 42 loginModel:loginModel.toJSON() 43 }, 44 type: 'POST', 45 success:function(e){ 46 console.log("success"); 47 //设置登录成功后，跳转页面 48 appRouter.navigate("userlist", {trigger: true}); 49 50 }, 51 error:function(){ 52 console.log("fail"); 53 } 54 }); 55 56 } 57 }); 58 59 return loginView; 60 });
5.展示页面
6.利用bootstrap制作登录界面
修改loginTPL.html
1 <div class="container" style="margin-top:100px"> 2 <div class="row"> 3 <div class="col-sm-6 col-md-4 col-md-offset-4"> 4 <div class="panel panel-default"> 5 <div class="panel-heading"> <h3><strong>欢迎登录</strong></h3> 6 </div> 7 <div class="panel-body"> 8 <form role="form" action="#" method="POST"> 9 <fieldset> 10 <div class="row"> 11 <div class="col-sm-12 col-md-10 col-md-offset-1 "> 12 <div class="form-group"> 13 <div class="input-group"> 14 <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> 15 </span> 16 <input class="form-control" id="loginName" placeholder="用户名" name="loginname" type="text" autofocus></div> 17 </div> 18 <div class="form-group"> 19 <div class="input-group"> 20 <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> 21 </span> 22 <input class="form-control" id="loginPwd" placeholder="密码" name="password" type="password" value=""></div> 23 </div> 24 <div class="form-group"> 25 <input type="submit" class="btn btn-lg btn-primary btn-block" id="loginBtn" value="登 录"></div> 26 </div> 27 </div> 28 </fieldset> 29 </form> 30 </div> 31 </div> 32 </div> 33 </div> 34 </div>
7.最终登录界面
8.最终目录结构
总结：
- 首先通过requirejs接管项目。
- 设置路由跳转。
- textjs是加载文件的文本信息。
- 该项目是按照模块分层，并没有按照MVC组件分层。
