Nodejs+express+mongodb Build a website __js

Source: Internet
Author: User
Tags mongodb

Some time ago to reference Scott's tutorials and related materials, using NODEJS+EXPRESS+MONGODB to build a simple website. The function is relatively simple, mainly is the practice Nodejs also has the study use bower, grunt and so on tools.
Of course, it is necessary to have a certain Nodejs foundation, the individual more like the Ali team's "Seven Days Society Nodejs". In conjunction with the course Web tutorial, I used the Nodejs HTTP module to write a simple crawler. These are the preparations, where the main record of the encounter of those pits, some of the installation process without screenshots, with a text narrative.
1. Install Nodejs.
Installation details for the last blog.
2. Preliminary preparatory work.
Build the project to be clear where the project from the entrance, how to run up, what views, how to jump between the pages. The basic composition of the project is shown in the following illustration.
  
Where App.js is the entry file, the Views directory is the view file, Node_modules below is installed and to install the module storage location.
Express is a minimalist and flexible Web application development framework based on Node.js platform. Jade is an HTML template engine originating from Node.js. I also use Express and Jade for the first time here.

NPM Install Express
NPM Install Jade
NPM Install Bower-g
Bower Install Bootstrap

In turn, the implementation of the installation of Express, Jade, Bower, Bootstrap. Among them, the bootstrap is installed through the bower. Bower is used to manage front-end resources. Please refer to the official documentation for the specific use of Express and Jade.
  Note that I use sublime text3 as the development environment, jade syntax highlighting requires installing Plug-ins. Using package control to search for jade, download the first plugin. Without the use of templates, I usually use the Emmet plug-in, you can quickly write HTML, CSS.
3. Write code.
After the preparation is done, you will actually write the code to run the project.
  
Entry file App.js

var express = require (' Express ');
var bodyparser = require ("Body-parser");
var mongoose = require (' Mongoose '); var Movie = require ('./models/movie ') var User = require ('./models/user ') var port = Process.env.PORT | |
3000;

var app = Express ();
Mongoose.connect (' Mongodb://localhost/movie ')//Set the root directory of the view, module engine app.set (' views ', './views/pages ');
App.set (' View engine ', ' Jade ');
Format the form data App.use (bodyparser.urlencoded ({extended:true}));
App.use (Bodyparser.json ());
The request page comes up with a style file to find App.use (express.static (' public ') in public);
App.locals.moment = require (' moment ');

App.listen (port);
Console.log (' start! ' + port); 
    Index page App.get ('/', function (req, res) {Movie.fetch (function (err, movies) {if (err) {Console.log (err); } res.render (' Index ', {title: ' Home ', Movies:movies})}})//signup app.post ('/user/signup '), function (req,res) {})//detail page app.get ('/movie/:id ', function (req, res) {})//adimin page app.get ('/admin/movie ', function (req, RES) {}) 

Require in the required modules, you can use the appropriate method. The Get, post, and delete methods are executed separately by app.get/app.post/app.delete and corresponding paths. Res.render by getting the HTML render page.
  
Layout.jade

DOCTYPE
HTML
  head   //page head, there are some head files to use such as Bootstrap and jquery. Each page inherits the layout
    meta (charset= "Utf-8 ")
    title #{title}
    include./includes/head
  body   //This is the body of the page, and you need to access the include in the appropriate jade file
    ./includes /header Block
    Content

Index.jade

/* Home */
//-inherit the layout extends of the upper directory.
/layout 
//-declares the main content block content 
  . Container
    . Row each
      item in movies
        . Col-md-2
          . Thumbnail
            A (href= "/movie/#{item._id}")
              img (src= "{item.poster}", alt= "#{item.title}")
          . Caption
            h3 #{item.title}
            p:a.btn.btn-primary (href= "/movie/#{item._id}", role= "button") Watch trailer

The jade of other views is similar to the home page.
If you have not installed Grunt, run node App.js in the project directory and print start 3000. Will successfully run in Port 3000, address bar input localhost:3000 can access the home page. Port can be modified by itself, in addition to changing code, the command line to run the port= port number can be directly modified.
Pay attention to use Jade must pay attention to indent

IMG is self closing and should not have content

For example, I encountered this error, the IMG tag after the tag relative to its indentation, when compiling the thought that it has a child is wrong.
Also note the introduction of the order when the head introduces the file, the following error should be introduced into jquery.

Bootstrap ' s JavaScript requires jQuery

This is the earliest implementation version and is not connected to the database. The update will continue.
Related sources see Https://github.com/amie0119/nodejs-movie has now implemented user registration, login, film display, add, delete, etc., is still in constant revision.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.