The information on the Internet is basically express3.x, grammatical and express4.x differences are relatively large, fragmented is not concentrated, for this headache for a long time.
Ancestors planted trees, posterity. Share to everybody, also summarizes to oneself.
First, the SOFTWARE environment
Window10
NPM v3.10.10
node. js v6.10.1
Express v4.15.0
Second, build
Bring up "command Prompt", execute: EXPRESS-E demo//express frame will automatically create the project under the Demo folder.
(Ps:window system called "Command Prompt", Mac system called "Terminal")
Then follow the prompts: CD Dmeo//Enter the new project file
Implementation: NPM Install//system will automatically download dependent packages according to Package.json
Last execution: NPM start//Startup Project
Open Browser, enter address: localhost:3000
Page "Welcome to Express", the project was built successfully.
Third, modify the HTML
Open the "Views" folder in the project folder and see that there are two pages "Error.ejs" and "Index.ejs" in it.
We want to load the HTML file, so do it.
Change "Error.ejs" and "Index.ejs" to "error.html" and "index.html" if you start the project now with an error.
Then open the App.js file, comment a sentence, add two sentences, as follows:
// App.set (' View engine ', ' Ejs '); Note This sentence // plus the following two sentences app.engine ('. html ', require (' Ejs '). __express); App.set (' view engine ', ' HTML ');And then start the project again, "Welcome to Express" reappears.
Iv. installation of Nodemon
In the command Prompt window, CTRL + C stops the project.
Implementation: NPM Install Nodemon
After installation, each time the code to make changes, do not have to stop repeatedly, start the service to see the effect, directly refresh the page.
Light installation Nodemon is not enough, open the App.js file, comment the bottom line of code:
// Module.exports=app; Note This sentence // Add this sentence App.listen (3000);
Start the project now, no longer the "npm start" command, but "Nodemon app.js".
The familiar "Welcome to Express" appeared again.
Five, Login
The preparation is done, and the following begins to add "login".
Open "index.html" file, do not change anything, only add a tag:
<!DOCTYPE HTML><HTML> <Head> <title><%=title%></title> <Linkrel= ' stylesheet 'href= '/stylesheets/style.css '/> </Head> <Body> <H1><%=title%></H1> <P>Welcome to<%=title%></P> <ahref= "/login">Login</a> </Body></HTML>
(PS: The following two sentences, just description, no modification.) ）
var index = require ('./routes/index '); App.use ('/', index);
// App.js These two sentences, that is, all requests are pointed to the index.js, and then by different route response to different requestsOpen the "Routes" folder, which is placed in the router, can be understood as MVC C, there is a "index.js", as follows:
varExpress = require (' Express ');varRouter =Express. Router ();/*GET home page.*/Router.get (‘/‘,function(req, res, next) {Res.render (' Index ', {title: ' Express ' });});//responding to a login requestRouter.route ('/login '). Get (function(req,res) {Res.render (' Login ', {title: ' Login '});}). Post (function(req,res) {//because there is no database yet, here is a dummy data for verifying the loginLet user={username: ' admin ', Password: ' 123 '}; //Request for page form data if(req.body.username==user.username&&req.body.password==User.password) {//REDIRECT to home page returnRes.redirect (' home ')); } Else { //REDIRECT to login page returnRes.redirect (' Login '); }});//Enter the home page after loginRouter.get (' Home ',function(req,res) {//false data to display the user name on the home pageLet user={username: ' admin ', Password: ' 123 '}; //put the user object into the response response returnRes.render (' home ', {title: ' Home '), user:user}) ;//The "logout" feature on the home pageRouter.get ('/logout ',function(res,res) {returnRes.redirect ('/');}); Module.exports= Router;
Under the "Views" folder, create a new "login.html": (Ps:class style, everyone at random.) "Registration" of a tag, you can first add to this, the page click will report 404 wrong, don't hand cheap. ）
<!DOCTYPE HTML><HTML> <Head> <title><%=title%></title> <Linkrel= ' stylesheet 'href= '/stylesheets/style.css '/> </Head> <Body> <H1><%=title%></H1> <formAction=""Method= "POST"> <Divclass= "Fuzq_input_wrap"> <label for="">User name:</label> <inputtype= "text"ID= "username"name= "username"Autofocus=""Required="" /> </Div> <Divclass= "Fuzq_input_wrap"> <label for="">Password:</label> <inputtype= "Password"ID= "Password"name= "Password"Required="" /> </Div> <Divclass= "Fuzq_btn_wrap"> <Buttontype= "Submit">Submit</Button> </Div> <Divclass= "Fuzq_input_wrap"> <ahref= "/register">Don't have an account yet? Go to register!</a> </Div> </form> </Body></HTML>
New "home.html" page:
<!DOCTYPE HTML><HTML> <Head> <title><%=title%></title> <Linkrel= ' stylesheet 'href= '/stylesheets/style.css '/> </Head> <Body> <H1><%=title%></H1> <P>Welcome<%=User.username%>To<%=title%></P> <ahref= "/logout">Cancellation</a> </Body></HTML>
Now, and then refresh the index.html page, the function of login basically done!
Why is "basic" done, because the data is false, and login and home data, is two user objects.
Predict the funeral, and write again next.
node. js + Express 4.x + MongoDB Build login registration (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
