Express入門捷徑

首先安裝一下

npm install express --save     (項目根目錄下面執行哦)

###官網API我的感受理解起來太繁瑣:html

http://www.expressjs.com.cn/4x/api.html

###掌握用法核心纔是最重要的:
首先初始化下文件:node

express -e   回車

圖片描述

Express 會自動幫你生成一些文件
再執行模塊安裝express

npm i   回車     (安裝完成的時候會自動生成node-modules文件)

執行 
       npm run start      回車
或者   node ./bin/www     回車

##址欄輸入localhost:3000 回車 出現下面的內容就表明你express啓動成功!
圖片描述npm

那麼接下來咱們作一個簡單的小路由跳轉

1.首先去views目錄下建立一個login.ejs模板文件,寫入api

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <h1>我是登陸頁面</h1>
    </body>
    </html>

2.再建立一個register.ejs模板文件,寫入app

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <h1>    
        只有先觸發了app.js裏面的users路由
        再觸發/register路由,執行register裏面的函數 
        res.render()渲染事後
        才能看見我註冊頁面哦(localhost:300/users/login同理)
        註冊頁面
        </h1>
    </body>
    </html>

3.找到routes下面的users.js,把內容替換一下函數

var express = require('express');
       /*調出路由裏面的Router方法*/
   var router = express.Router();
       /* 當路由僅僅是"localhost:3000/users"的時候    執行'/'路由的方法*/
       /* ######若是不明白什麼是路由二級跳轉   看app.js文件#####*/
   router.get('/', function(req, res, next) {
     res.send('respond with a resource');
   });
       /* 當路由僅僅是"localhost:3000/users/login"的時候    執行'/login'路由的方法*/
   router.get('/login', function(req, res, next) {
      /* res.render("默認根目錄是views目錄")*/
      /* 讀取views目錄下面的login.ejs文件*/
      /*一般ejs後綴能夠省略不寫*/
     res.render("./login");
      /* res.send('str')*/
      /*  在當前頁面寫入str內容*/
      /*  不進行頁面跳轉*/
      /* res.send('登陸頁面·1')*/
   });
    /* 當路由僅僅是"localhost:3000/users/regiest"的時候    執行'/regiest'路由的方法*/
   router.get('/register', function(req, res, next) {
     res.render("./register");
      /* res.send('註冊頁面~1')*/
   });
    /*導出模塊router*/
   module.exports = router;

app.js簡單解析ui

圖片描述

4.其實路由之間的跳轉都是通過app.js這個中間鍵進行的,廢話很少說,開始執行spa

node ./bin/www 回車
地址欄輸入localhost:3000/users  回車
地址欄輸入localhost:3000/users/login  回車
地址欄輸入localhost:3000/users/register  回車
若是二級路由看懂了 Express  基本就入門了

圖片描述

後期會跟新參數傳遞。數據請求,mongod等一系列操做!

相關文章
相關標籤/搜索