Mean stack development

Development of the mean stack of Nodejs (ii)----view and model

2016-06-02 08:30 by Stoneniqiu, 92 reading, 2 reviews, Favorites, compilation

The previous section did a brief introduction to express, presented the controller, and introduced the routing. This section focuses on views and models, completes several static pages, and deploys to Heroku.

Navigation

The front-end layout uses bootstrap, which is downloaded from the official website and placed under the public folder. Open Layout.jade to do a navigation first.

DOCTYPE htmlhtml  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= '/') home         li a          (href= '/books ') reading         Li          A (href= '/ About ') registered with Li A (          href= '/register ')         to          log in     #bodycontent. Container        Block content   Footer.container       . Row          col-xs-12            small © stoneniqiu    script ( src= '/javascripts/jquery-1.11.1.min.js ')    script (src= '/bootstrap/js/bootstrap.min.js ')

Block content is described above and can be understood as a placeholder. Because now is not used to stylus, directly write CSS, so that vs there are smart hints.

Style.css

View Code

run up and see the navigation bar

If access is registered and logged in, it will be reported 404 if the corresponding page has not been set up before.

This page appears because in the above, there are settings in the App.js

App.use (function (req, res, next) {    var err = new Error (' not Found ');    Err.status = 404;    Next (err);});

Look back. Layout.jade does not have an HTML tag, directly is the element name or the style name starts, this kind of writing and the sublime writes the HTML similar, the attribute writes in the parentheses, the text content separates with the space. The nested relationships of elements are controlled through strict indentation, and the benefit is that the code is less and more hierarchical, but the code is a long one and it is not easy to determine the exact position of the indentation, and no alignment can easily cause accidental nesting. My experience now is to write from left to right, not from the top down. In other words, when writing HTML with jade, write the outermost element first, and then write the child elements in the step. Instead of writing from the top down one, there is the problem of shrinking in the band.

Models and views

Back in Home.js, we built a books model with JavaScript that included title,info,rating,img and tags. Because the database has not yet been used, it is created directly here.

Books

View Code

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

By adding books to Home.js, the model is actually a JSON object, and then we modify the layout of the Books page. Here with the left and right layout, slightly adjusted,

Extends Layoutblock 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

Get results:

Of course, these are still static, the next introduction of the Jade engine. Jade is a high-performance template engine for node.

1. master Page

With Bootstrap's fence layout, it is divided into two parts. Extends layout represents the introduction of the Layout master page, and the block content in layout is replaced by the contents of the block content of the current page. You can also define multiple block

-Layout.jadedoctype htmlhtml  head    block title      title Default title  Body    block content

Reference page:

-Index.jadeextends layoutblock title  title article Titleblock content  H1 My article

Generated HTML:

<!doctype html>
2. Cycle
Each book in books
Represents the loop output model, in the view of ASP. NET MVC, you need to define the model type first. Jade omitted this model and directly acquired the properties of the models. also supports for loop, the front '-' number is not few.
-for (var i = 1; I <= book.rating; i++)         span.glyphicon.glyphicon-star-for (i = book.rating; i < 5; i++)         sp An.glyphicon.glyphicon-star-empty
3. Assigning values
Space assignment, this space can not be less, otherwise Jade will treat Ptext as an element. A string is considered a space behind.
  P  text  output  <p>text<p>
So if it is an output variable, be sure to assign it with ' = '.
  A (href= "/detail/") =book.title
But if it is a string combination input, you should use #{}
IMG (src= ' #{book.img} ')  p  Read #{book.title}  
If you don't want to escape the content! {},-var means definition variable, equivalent to @{} in Razor}
-var riskybusiness = "<em>some of the girls is wearing my mother ' s clothing.</em>";. Quote  P Joel:!{ Riskybusiness}
Output
<div class= "Quote" >  <p>joel: <em>some of the girls is wearing my mother ' s clothing.</em> </p></div>
4. Properties
If the element attribute is added, it will be done in parentheses after the element
A (href= "/detail/") =book.title
Output:
<a href= "/detail/" > Node.js</a>
If multiple attributes are separated by commas, you can also wrap them.
A (class= ' button ', href= ' google.com ') input (  type= ' checkbox '  name= ' agreement '  checked)
You can also add an expression
-var authenticated = Truebody (class=authenticated? ' authed ': ' anon ')
and razor to write an expression in the element is a little ugly.
@{    var ischeck = true;} <input type= "checkbox" @if (Ischeck)                       {                           @Html. Raw ("class= ' selected '")                       }                  />
For more features, see: HTTP://JADE-LANG.COM/REFERENCE/ATTRIBUTES/5. Child view
The sub-view is not very accurate here, we already know to introduce the master page through extends and block, and replace the content by module. The child view is primarily emphasis on reuse and is embedded in other view files. Jade is a partial view defined with mixin (mixed), using ' + ' for example:
Mixin list  ul    li foo    li Bar    li Baz        +list       +list
Output
For example, bring up the part of the star on the page, build a _include folder under the View folder, and create a Rating.jade file:
Mixin outputrating (rating)  -for (var i = 1, I <= rating; i++)    Span.glyphicon.glyphicon-star  -for (i = Rat ing I < 5; i++)    Span.glyphicon.glyphicon-star-empty
This is referenced on the page
Include _includes/rating
Then output at the specified location, mainly with the ' + ' sign.
P    +outputrating (book.rating)
The mixin here is equivalent to a JavaScript function that can pass multiple parameters. More content can be Http://jade-lang.com/jade official website.
In the same vein, Detail.jade and Index.jade were created
Detail.jade
View Code
Index.jade
View Code
At this point, we have created three static pages and are basically familiar with the jade syntax. Of course, jade not only these, later with the project in-depth to continue to explore.
Deployment:
I have now submitted the code to GitHub and then deployed it on Heroku.
Github:https://github.com/stoneniqiu/readingclub interested friends can develop and study together.
Observe please poke: https://stoneniqiu-mean.herokuapp.com/
Heroku provides 300 megabytes of free space, and a rule domain name, how to deploy please move: Three steps to deploy the node app to Heroku
Summary: This section mainly studies the Jade engine, the current data model is the JSON object. Compared to the razor engine of ASP. NET MVC, the element output and sub-view areas are not the same. Jade has a smaller amount of code and is nested with indentation, which is equivalent to @html.partial (). The site is still static, the next section will introduce MongoDB and mongoose, to achieve the operation of the data, so that the page dynamic.
Jade Official Website: http://jade-lang.com/
Jade Open Source: Https://github.com/jadejs/jade
Mean stack development