Nodejs Study Notes (iii)--a picture to understand Nodejs building station

Preface: a line, vertical put, if do not advance to deep, then rotate 90 °, at least also a wide range of figures.

Popular explanation above the nonsense: have not learned to climb, learn to go?!

Following the "Nodejs study Note (ii)--eclipse run Debugging Nodejs", the Code writing environment from sublime to eclipse, feel more comfortable. So I followed Scott's teacher to learn the course of the Nodejs station (recommended everyone to see), embarked on the path of not climbing first go.

As a white in white, the main record today on how to use Nodejs to build a small website, as well as their own understanding of the operation logic of this Nodejs station, and the need to install a number of modules in the process encountered problems, but also to take this opportunity to comb the next train of thought.

1. Create a project

1.1 In view of the previous two efforts, it is now possible to create a node project in Eclipse. So the first thing to do is create a node project, which is created as follows, basically empty.

1.2 The next thing to do is to package the project into an express-like project and install the dependent modules

Go to the project's parent directory and execute the Express imooc_1 command:

Then go to the project directory and execute the npm install command

1.3 now refresh the project imooc_1 in Eclipse to see the newly generated files and the new project structure

where app.js is the portal file , the views directory is a view file ,routes responsible for routing , public is a number of CSS and other files ,node_modules below is installed and to install the module storage location ,Package.json is the project module dependent files .

　　2. Code writing

　 In order not to foggy the whole project, here's the file (note: The code here mainly refers to the code of teacher Scott and one of the brothers git, thanking ^_^)

The file directory structure of the project is as follows

　　App.js

var express = require ("Express")//here is mainly a reference to the necessary modules, of course, these modules are required to use "NPM Install module name" Installation of var Bodyparser = require (' Body-parser ') var port = Process.env.PORT | | 3000var app = Express () app.set (' views ', './views/pages ')//defines some path and the engine used App.set (' View engine ', ' Jade ') app.use ( Bodyparser.urlencoded ({extended:true}))//app.use (Require (' Body-parser '). urlencoded ({extended:true}))//App.use ( Express.static (Path.join (__dirname, ' bower_components ')) App.use (express.static (__dirname + '/views ')); App.use ('/ Bower_components ', express.static (__dirname + '/bower_components '); App.listen (port); Console.log (' Imooc started on Port ' + port),//index page here and below are the routes and assignments, where the fields such as title,        Poster, etc. will be used in the corresponding jade such as Index.jade, in fact, the value here is passed to the corresponding jade to render the page app.get ('/', function (req, res) {res.render (' index ', { Title: ' Imooc Home ', movies: [{title: ' Avengers 2 ', _id:1, poster: ' Http://img31.mtime        . Cn/mg/2015/03/27/120537.13212993_270x405x4.jpg '}, {title: "Avengers 2",    _id:2, Poster: ' Http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg '}, {         Title: "Avengers League 2", _id:3, Poster: ' Http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg ' }, {title: "Avengers 2", _id:4, Poster: ' http://img31.mtime.cn/mg/2015/03/27/120537 .13212993_270x405x4.jpg '}, {title: "Avengers 2", _id:5, Poster: ' Http://img31.mtime     . Cn/mg/2015/03/27/120537.13212993_270x405x4.jpg '}]})//detail pageapp.get ('/movie/:id ', function (req, res) {             Res.render (' detail ', {title: ' Imooc details ', Movie: {doctor: ' Joss Whedon ', Country: ' America ', Title: ' Avengers 2 ', Year: ' $ ', poster: ' http://img31.mtime.cn/mg/2015/03/27/120537.13212            993_270x405x4.jpg ', language: ' English ', Flash: ' http://v.youku.com/v_show/id_XODc4NDY0MjA4.html ', Summary: ' The film tells when the Iron Man triesWhen the figure starts a dormant peacekeeping plan, something goes wrong. As a result, when the planet faces an emergency of life and death, powerful superheroes come forward to take on the task of saving the world, and they will prevent the dreaded AI robot from creating a terror plan. })//admin pageapp.get ('/admin/movie ', function (req, res) {res.render (' admin ', {title: ' Imooc            Background entry page ', Movie: {doctor: ', Country: ', title: ', Year: ', Poster: ', language: ', Flash: ', Summary: '}}})//list Pageapp.get ('/  Admin/list ', function (req, res) {res.render (' list ', {title: ' Imooc list page ', movies: [{doctor: ' Joss Whedon ', Country: ' America ', title: ' Avengers 2 ', Year: ', poster: ' Http://img31. Mtime.cn/mg/2015/03/27/120537.13212993_270x405x4.jpg ', language: ' English ', Flash: ' Http://v.youku.com/v_ Show/id_xodc4ndy0mja4.html ', Summary: ' The film tells of a mistake when Iron Man tried to start a dormant peacekeeping plan. As a result, when the planet faces an emergency of life and death, powerful superheroes come forward to take on the task of saving the world, and they will prevent the dreaded AI robot from creating a terror plan. ‘ }] })})

　　

Layout.jade

Doctypehtmlhead   //This is the head of the page, and there are some head files to use such as Bootstrap and jquery, such as Meta (charset= "Utf-8") title #{title}include. Includes/headbody   //This is the body of the page, which has the header part and body content of the subject, and needs to access the include in the corresponding jade file./includes/headerblock Content

　　

Index.jade

Extend. /layoutblock Content.container.roweach item in Movies.col-md-2.thumbnaila (href= "/movie/#{item._id}") img (src= "#{ Item.poster} ", alt=" #{item.title} "). Captionh3 #{item.title}p:a.btn.btn-primary (href="/movie/#{item._id} ", role=" Button ") Watch the trailer

　　

Admin.jade

Extend. /layoutblock content.container.rowform.form-horizontal (method= "POST", action= "/admin/movie/new"). Form-grouplabel.col-sm-2.control-label (for= "InputTitle") movie name. Col-sm-10input#inputtitle.col-sm-10.form-control ( Type= "text", name= "Movie[title]"). Form-grouplabel.col-sm-2.control-label (for= "Inputdirector") director. col-sm-10input# Inputdirector.col-sm-10.form-control (type= "text", name= "Movie[director]"). Form-grouplabel.col-sm-2.control-label (for= "Inputcountry") country. col-sm-10input# Inputcountry.col-sm-10.form-control (type= "text", name= "Movie[country]"). Form-grouplabel.col-sm-2.control-label ( For= "InputLanguage") language. Col-sm-10input#inputlanguage.col-sm-10.form-control (type= "text", name= "Movie[language]") . Form-grouplabel.col-sm-2.control-label (for= "Inputyear") release year. Col-sm-10input#inputyear.col-sm-10.form-control ( Type= "text", name= "Movie[year]"). Introduction to Form-grouplabel.col-sm-2.control-label (for= "Inputsummary"). col-sm-10input# Inputsummary.col-sm-10.form-control (type= "text", name= "movie[summary]")

　　

Detail.jade

Extend. /layoutblock content.container.row.col-md-7//-embed (src= "#{movie.flash}", allowfullscreen= "true", quality= "high", Width= "720", "height=" align= "Middle", type= "Application/x-shockwave-flash") Video (src= "#{movie.flash}", Autoplay= "true" width= "720", height= "+"). Col-md-5dl.dl-horizontaldt movie name Dd=movie.titledt director Dd=movie.doctordt National DD =movie.countrydt language Dd=movie.languagedt Release year Dd=movie.yeardt introduction dd=movie.summary

　　

　List.jade

Extend. /layoutblock Content.container.rowtable.table.table-hover.table-borderedtheadtrth movie name th director th National th release time//-th entry time th View th update th delete tbodyeach item in MOVIESTR (class= "item-id-#{item._id}") TD #{item.title}td #{item.doctor}td #{item.country} TD #{item.year}//-td #{moment (ITEM.META.CREATEDAT). Format (' mm/dd/yyyy ')}td:a (target= "_blank", href= "... /MOVIE/#{ITEM._ID} ") View td:a (target=" _blank ", href=". /ADMIN/UPDATE/#{ITEM._ID} ") modify TD Button.btn.btn-danger.del (type=" button ", data-id=" #{item._id ") Delete

　　

　Head.jade

Link (href= "/bower_components/bootstrap/dist/css/bootstrap.min.css", rel= "stylesheet") script (src= "/bower_ Components/jquery/dist/jquery.min.js ") script (src="/bower_components/bootstrap/dist/js/bootstrap.min.js ")

　　

Header.jade

. container.row.page-headerh1= Titlesmall Heavy science fiction fan

Although a lot of documents, but smoothed out, the logic is still relatively clear, the following to enter Http://localhost:3000/in the browser to access index.html as an example , through a picture of the path Nodejs internal mechanisms for building stations and page access

Other pages of access, such as list, detail principle similar to this, here is not to repeat.

　　See the point of praise, did not see clear please leave a message, wow ~ ~ ha ~ ha ~ ~

　　3. The pits encountered

　　3.1 Bootstrap Installation

When installing the bootstrap module, it is not smooth. There are things on the Internet that say you want to set up Git's environment variables, but there are also those that have to be tapped in Git bash, but neither of these methods solves my problem.

Finally upgrade the next bower, and then install Bootstrap, success!

　　3.2 also a pit is the indentation in the Jade grammar, improper indentation causes the application to not start, of course, the main self is completely unfamiliar with jade, so eat a lot of losses.

　4. Effect display

Finally, the following pages are attached to the website:

Home

Background entry page

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　List page

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Details page

The above records an inspirational story of how to build a simple website application with Nodejs and how the pits have been found and how pits.

If you feel that reading this article is helpful to you, please click " recommend " button, your "recommendation" will be my biggest writing motivation! If you want to keep an eye on my article, please scan the QR code, follow Jackiezheng's public number, I will push my article to you and share with you the high-quality articles I have read every day.

Nodejs Study Notes (iii)--a picture to understand Nodejs building station