Backbone.js+Require.js+Bootstrap構建web平臺

時間 2019-11-24

標籤 backbone.js+require.js+bootstrap backbone require bootstrap 構建 web 平臺欄目 JavaScript 简体版

原文原文鏈接

技術主要介紹：css

Backbone.js是JavaScript的一種MVC框架，可是它View層和Controller層沒能分離清楚，即View層包含了大量控制層的代碼；固然，Model層也接管着大量與數據相關的控制層代碼。其官方網站爲http://backbonejs.org/。
Require.js是用於JavaScript項目管理模塊，它的做用相似於Java項目中包的概念，在前臺JavaScript項目中能夠按照MVC來管理項目目錄，也能夠按照功能模塊來管理項目目錄，提升了項目的可維護性。其官方網站爲http://requirejs.org/。
Bootstrap是Twitter公司開源前端響應式佈局框架，它包含大量豐富的組件，用於頁面渲染。

項目目錄結構：html

css用於存放css樣式文件，js存放JavaScript文件，img存放圖片文件，font存放頁面上使用到的字體文件，data是模擬後臺傳來的json數據，index.html是整個項目的入口。前端

引入相應的包：jquery

backbone.js
jquery.js
require.js
text.js
underscore.js
zepto.js
bootstrap.js

編寫代碼：web

1.index.htmlajax

 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.jsjson

 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.jsbootstrap

 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模塊app

分別是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>