Backbone.js+Require.js+Bootstrap构建web平台

最新推荐文章于 2024-10-03 22:06:42 发布

weixin_30795127

最新推荐文章于 2024-10-03 22:06:42 发布

阅读量116

点赞数

文章标签：测试 javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xu-wojustme/p/5685197.html

版权

技术主要介绍：

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">登&nbsp;&nbsp;录</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="登&nbsp;&nbsp;录"></div>
26                                     </div>
27                                 </div>
28                             </fieldset>
29                         </form>
30                     </div>
31                 </div>
32             </div>
33         </div>
34     </div>