首頁 > web前端 > js教程 > Nodejs視圖與模型的開發

Nodejs視圖與模型的開發

php中世界最好的语言
發布: 2018-03-16 14:19:07
原創
1968 人瀏覽過

這次帶給大家Nodejs視圖與模型的開發,Nodejs視圖與模型的開發的注意事項有哪些,下面就是實戰案例,一起來看一下。

導航

前端佈局使用bootstrap,從官網下載後置於public資料夾下。打開layout.jade 先做一個導航.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

doctype html

html

  head

    meta(name='viewport', content='width=device-width, initial-scale=1.0')

    title= title

    link(rel='stylesheet', href='/bootstrap/css/bootstrap.css')

    link(rel='stylesheet', href='/stylesheets/style.css')

  body

    nav.navbar.navbar-default.navbar-fixed-top.navbar-inverse

     .container

      .navbar-header

        a.navbar-brand(href='/') ReadingClub

      .collapse.navbar-collapse

       ul.nav.navbar-nav.pull-right

         li

          a(href='/') 首页

         li

          a(href='/Books') 读物

         li

          a(href='/About') 关于

         li

          a(href='/Register') 注册

         li

          a(href='/Login') 登录

     #bodycontent.container        block content

   footer.container

       .row

          .col-xs-12

            small © stoneniqiu 2016

    script(src='/javascripts/jquery-1.11.1.min.js')

    script(src='/bootstrap/js/bootstrap.min.js')

登入後複製

block content 上文有介紹,可以理解成一個佔位符。因為現在還用不慣stylus,就直接寫css了,這樣vs還有智慧提示。

style.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

body {

 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;

    background: gainsboro;

}a {

  color: #00b7ff;

}.navbar-default {

  background-color: #444;

  border-color: black;

}.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

    color: #ffffff;

    background-color:#222;

}.navbar-default .navbar-nav > li > a{

    color:  #ccc;

}a.navbar-brand{color: #fff !important}

登入後複製

View Code

運行起來,看到導航條

如果存取註冊和登錄,因為之前沒有設定對應的頁面就會報404。

出現這樣的頁面是因為在上文中,在app.js中有過設定

1

2

3

4

app.use(function (req, res, next) {    var err = new Error('Not Found');

    err.status = 404;

    next(err);

});

登入後複製

回頭看layout.jade 沒有一個 html標籤,直接是元素名稱或樣式名稱開始,這種寫法和sublime中寫html相似,屬性寫在括號裡,文字內容用空格隔開。元素的嵌套關係 透過嚴格的縮進來控制,這樣的好處是程式碼量更少,層次更分明,但是程式碼一長,很不容易判斷縮排的準確位置,沒對齊很容易造成意外的嵌套。我現在的經驗是從左往右的寫,而不是從上往下寫。也就是說,用jade寫html的時候,先寫好最外層的元素,然後在逐步寫裡面的子元素。而不是從上往下一個一個的寫,這樣就會出現縮進來帶的困擾。

模型與視圖

 回到home.js,我們用JavaScript建立一個books模型,包含title,info,rating,img和tags。因為還沒有使用資料庫,這裡直接建立。

 books:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

var books = [

{

    id: 0,

    title: "深入浅出Node.js",

    info: "朴灵 / 人民邮电出版社 / 2013-12-1 / CNY 69.00",

    rating: 5,

    img: "https://img3.doubanio.com/mpic/s27269296.jpg",

    tags: ["node""深入浅出"],

    brief: '本书从不同的视角介绍了 Node 内在的特点和结构。由首章Node 介绍为索引,涉及Node 的各个方面,主要内容包含模块机制的揭示、异步I/O 实现原理的展现、异步编程的探讨、内存控制的介绍、二进制数据Buffer 的细节、Node 中的网络编程基础、Node 中的Web 开发、进程间的消息传递、Node 测试以及通过Node 构建产品需要的注意事项。最后的附录介绍了Node 的安装、调试、编码规范和NPM 仓库等事宜。本书适合想深入了解 Node 的人员阅读。'

    ,ISBN: 9787115335500

    },

{

    id: 1,

    title: "程序员修炼之道 : 从小工到专家",

    info: "Andrew Hunt、David Thomas / 马维达 / 电子工业出版社 / 2005-1 / 48.00元",

    rating: 5,

    img: "https://img3.doubanio.com/mpic/s3957863.jpg",

    tags: ["程序人生""软件开发"],

    brief: '《程序员修炼之道》由一系列的独立的部分组成,涵盖的主题从个人责任、职业发展,直到用于使代码保持灵活、并且易于改编和复用的各种架构技术。利用许多富有娱乐性的奇闻轶事、有思想性的例子以及有趣的类比,全面阐释了软件开发的许多不同方面的最佳实践和重大陷阱。无论你是初学者,是有经验的程序员,还是软件项目经理,本书都适合你阅读。'

    ,ISBN: 9787505397194

    },

{

    id: 2,

    title: "Getting MEAN with Mongo, Express, Angular, and Node",

    info: "Simon Holmes / Manning Publications / 2015-11-26 / USD 44.99",

    rating: 4,

    img: "https://img3.doubanio.com/mpic/s27676844.jpg",

    tags: ["node""web开发""编程"],

    brief: 'MEAN栈开发,比较详尽的的应用开发书籍'

    , ISBN: 9781617292033

    }

];

 res.render('books', { title: 'Books', books: books });

jade

模型其实就是一个json对象,接下来我们修改books页面的布局。这里用左右布局,稍加调整

extends layout

block content 

  .row

   .col-md-9.page

     each book in books

       .row.booklist

         .col-md-2

          img(src='#{book.img}')

         .col-md-10

            p

             a(href="/Detail/#{book.id}")=book.title

            p=book.info

            p            - for (var i = 1; i <= book.rating; i++)

                span.glyphicon.glyphicon-star            - for (i = book.rating; i < 5; i++)

                span.glyphicon.glyphicon-star-empty

            p.tags

             each tag in book.tags

              span=tag

   .col-md-3

     .userinfo

       p stoneniqiu

登入後複製

View Code

1

res.render(&#39;books&#39;, { title: &#39;Books&#39;, books: books });

登入後複製

在home.js加入books,模型其實就是一個json對象,接下來我們修改books頁面的版面。這裡用左右佈局,稍加調整,

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

extends layout

block content

  .row

   .col-md-9.page

     each book in books

       .row.booklist

         .col-md-2

          img(src=&#39;#{book.img}&#39;)

         .col-md-10

            p

             a(href="/Detail/#{book.id}")=book.title

            p=book.info

            p

            - for (var i = 1; i <= book.rating; i++)

                span.glyphicon.glyphicon-star

            - for (i = book.rating; i < 5; i++)

                span.glyphicon.glyphicon-star-empty

            p.tags

             each tag in book.tags

              span=tag

   .col-md-3

     .userinfo

       p stoneniqiu

登入後複製

得到效果:

# 當然這些都還是靜態的,接下來介紹下jade引擎。 jade是一個高效能的模板引擎,用於node。

 1.母版頁

 借助bootstrap的柵欄佈局,分成左右兩部分。 extends layout  表示引入layout母版頁,而layout中的block content 就會被目前頁面的block content中的內容取代掉。同樣可以定義多個block

1

2

3

4

5

6

//- layout.jade

doctype html

html

  head    block title

      title Default title

  body    block content

登入後複製

引用頁:

1

2

3

4

5

6

//- index.jade

extends layout

block title

  title Article Title

block content

  h1 My Article

登入後複製

產生的html:

1

2

3

4

5

6

7

<!doctype html><html>

  <head>

    <title>Article Title</title>

  </head>

  <body>

    <h1>My Article</h1>

  </body></html>

登入後複製

2.循環

1

each book in books

登入後複製

表示循環輸出模型,在在Asp.net MVC的視圖中,需要先定義Model的類型。 jade省掉了這個model,直接取得模型的屬性。同樣也支援for迴圈,前面的‘-’號不可少。

1

2

3

for (var i = 1; i <= book.rating; i++)

         span.glyphicon.glyphicon-star- for (i = book.rating; i < 5; i++)

         span.glyphicon.glyphicon-star-empty

登入後複製

3.賦值

  空格賦值,這個空格不能少,不然jade會把ptext當成一個元素。空格後方都認為是字串。

1

p  text  输出  <p>text<p>

登入後複製

所以如果是輸出變量,一定要用‘=’賦值。

1

  a(href="/Detail/")=book.title

登入後複製

 但如果是字串組合輸入,應該用#{}

1

2

 img(src='#{book.img}')

  p  读过#{book.title}

登入後複製

 如果不想轉義內容!{},- var 表示定義變數 ,相當於Razor中的@{}

1

2

3

var riskyBusiness = "<em>Some of the girls are wearing my mother's clothing.</em>";

.quote

  p Joel: !{riskyBusiness}

登入後複製

輸出

1

2

<p class="quote">

  <p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p></p>

登入後複製

4.屬性

 如果是增加元素屬性,則更在元素後面的括號裡完成

#

1

a(href="/Detail/")=book.title

登入後複製

輸出:

1

<a href="/Detail/">深入浅出Node.js</a>

登入後複製

如果是多个属性用逗号隔开,也可以换行

1

2

3

4

5

6

a(class='button', href='google.com'

input(

  type='checkbox'

  name='agreement'

  checked

)

登入後複製

还可以加入表达式

1

2

var authenticated = true

body(class=authenticated ? 'authed' 'anon')

登入後複製

而Razor要在元素里面写表达式就有点丑陋。

1

2

3

4

5

@{    var ischeck = true;

}<input type="checkbox" @if (ischeck)

                       {                           @Html.Raw("class=&#39;selected&#39;")

                       }             

    />

登入後複製

 更多特性请看:http://jade-lang.com/reference/attributes/

5.子视图 

这里用子视图还不太准确,我们已经知道通过extends 和 block 来引入母版页,并按模块取代内容。而子视图主要是强调复用,是嵌入到别的视图文件中。jade是用mixin(混合)定义一个部分视图,用‘+’使用 例如:

1

2

3

4

5

6

7

8

mixin list

  ul

    li foo

    li bar

    li baz

  

       +list

       +list

登入後複製

输出

比如把页面上显示星星的部分提出来,在view文件夹下建一个_include文件夹,并创建一个rating.jade文件:

1

2

3

mixin outputRating(rating)  - for (var i = 1; i <= rating; i++)

    span.glyphicon.glyphicon-star  - for (i = rating; i < 5; i++)

    span.glyphicon.glyphicon-star-empty

登入後複製

这样在页面上引用

1

include _includes/rating

登入後複製

然后在指定位置输出,主要有‘+’号。

1

 p    +outputRating(book.rating)

登入後複製

这里的mixin就相当于是一个JavaScript函数,可以传递多个参数。 更多内容可以移步 http://jade-lang.com/ jade官网。

同理创建了detail.jade 和index.jade

detail.jade

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

extends layout

include _includes/rating

block content

  .row

   .col-md-9.page.bookdetail

     h3=book.title

     .row

      .col-md-2

           img(src='#{book.img}')

      .col-md-10

            p=book.info

            p

             +outputRating(book.rating)

            p.tags

             each tag in book.tags

              span=tag

            p ISBN:#{book.ISBN}

     h3 内容简介

     p.brief=book.brief    

   .col-md-3

     .userinfo

       p stoneniqiu

登入後複製

View Code

index.jade

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

extends layout

block content 

  .row

   .col-md-9.page

     .row.topictype

       a.label.label-info(href='/')  全部

       a(href='/') 读书

       a(href='/') 书评

       a(href='/') 求书

       a(href='/') 求索

     each topic in topics

       .row.topiclist

         img(src='#{topic.img}')

         span.count

            i.coment=topic.commentCount

            i /

            i=topic.visitedCount

         span.label.label-info=topic.type

         a(href='/')=topic.title

         span.pull-right=topic.postTime

         a.pull-right.author(href='/')=topic.author

   .col-md-3

     .userinfo

       p stoneniqiu

登入後複製

View Code

至此,我们创建了三个静态页面,基本熟悉了jade语法。当然jade不止这些,后期随着项目的深入再不断的探索。

部署:

目前我已经将代码提交到github上,然后部署在heroku上。

github:https://github.com/stoneniqiu/ReadingClub 有兴趣的朋友可以一起开发学习。

观摩请戳:https://stoneniqiu-mean.herokuapp.com/ 

heroku提供了三百兆的免费空间,还有个规则的域名,如何部署请移步:三步将Node应用部署到Heroku上

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Nodejs使用Mongoose创建模型及API 

FTP的文件管理

以上是Nodejs視圖與模型的開發的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板