手把手用 express 搭建后臺

Render 發布于2019-08-23 13:58 / 3359人閱讀

摘要：文件這個是項目的入口文件，這邊有著項目的一下配置，也在此整合了項目的模塊，其中要注意的就是里面關于路由模塊的配置了。后面要再想加其他路由模塊的時候，就按照上面先引入路由模塊，再用設置好地址，后面就可以用了。

前言想必很多小伙伴開始學 node 的時候想搞個項目出來卻不知道怎么下手吧，這個教程的話就是教大家用 express 框架簡單粗暴搭建一個可以用的后臺出來，然后關于 node 和 express 的其他知識，大家還是需要自己去看看文檔了解一下。

1 環境準備

express 既然是基于 node 的開發框架，首先 node 那些肯定都配好了吧，這個就自己搞去。然后下面就是要搞 express 的東西了。

1、全局安裝 express，方便后面直接導入 express 模塊。

npm install express -g

2、再全局安裝 express 的腳手架工具，裝完我們就可以很舒服的生成一個 express 項目了

npm install express-generator -g

2 項目 2.1 搭建

環境配好后，搭建項目就很舒服啦，直接就是一條指令

express express-demo

接下來就是，安裝依賴，運行項目

npm install
npm run start

然后我們打開瀏覽器查看 3000 端口，看到下面的頁面就說明我們 express 后臺已經跑起來了

2.2 項目結構

生成的項目結構如下圖所示

│  app.js
│  package.json
│
├─.idea
│  │  express-demo.iml
│  │  modules.xml
│  │  vcs.xml
│  │  workspace.xml
│  │
│  └─inspectionProfiles
├─bin
│      www
│
├─public
│  │  index.html
│  │
│  ├─images
│  ├─javascripts
│  └─stylesheets
│          style.css
│
├─routes
│      index.js
│      users.js
│
└─views
        error.jade
        index.jade
        layout.jade

我們一個一個來說明哈。

1、bin 文件夾

里面的話有 www 文件，那個就是項目的啟動腳本文件，監聽端口在里面設置，一般情況不管這個文件。

2、public 文件夾

靜態資源文件夾，放著 css，js，img 那些，然后如果在里面寫個 index.html 的話，我們訪問 3000 端口的時候就會直接訪問 index.html 的那個頁面。所以這邊的話，可以把我們前端開發打包好的代碼。

3、routes 文件夾

這個是重點啦，路由文件夾，里面的文件用于生成路由實例，這個路由實例用來響應前端發過的請求，按照現在前后端分離的思想，我們在這里面寫后臺的那些接口了。我們抓一個文件來看一下

// index.js
// 引入依賴
var express = require("express");
var router = express.Router();

// 處理前端請求
/* GET home page. */
/* 這邊的 router.get 是接收前端的 get 請求
  第一個參數是路由地址，這邊的 "/" 就指根路由，也就是http://localhost:3000 啦
  第二個參數是一個響應接口的回調函數，里面有三個參數，分別是 請求頭request 響應體response，和一個next
*/
router.get("/", function(req, res, next) {
  res.render("index", { title: "Express" });
});
// 導出路由模塊
module.exports = router;

上面這個是系統默認的給的，他的話是根據模板（下面會講）生成了一個頁面渲染回去，但是我們現在前后端都分離啦，一般都是后臺寫接口丟給前端就好啦，所以我們要改成下面這個樣子

router.get("/", function(req, res, next) {
  // 處理好要返回給前端的數據
  let data = {
      name:"xhm",
      age:12 }
  // 用 res.json 方法寫接口
  res.json({
    code:0,
    msg:"ok",
    data:data
  })
});

安裝上面這樣搞，我們重新訪問 3000 端口的時候就會發現這個時候返回就是一個 json 的數據啦（如下圖），這樣就寫了一個簡單的后臺接口，后面的不同業務邏輯的接口，就看你前面怎么去處理那些數據啦。

4、views 文件夾
這個用于存放 jade 模板，這個的話，不懂也比較少會用到，只知道這個可以作為頁面的模板來使用，渲染一下報錯頁面和主頁，其他就沒有用了。

5、app.js 文件
這個是項目的入口文件，這邊有著項目的一下配置，也在此整合了項目的模塊，其中要注意的就是里面關于路由模塊的配置了。看下面代碼

// 引入 routes 文件夾中的路由文件
var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
...
// 設置這些路由的地址
app.use("/", indexRouter);
app.use("/users", usersRouter);

這邊做一點說明吧：

這邊設置路由的地址是相對于項目的，然后在 routes 文件夾里面的地址是相對于這邊的，用上面的代碼來說，假設那個 ./routes/users 文件里面定義了 "/login" 這么一個路由地址，那么由于整個 users 的地址是 "/users"，所以我們在外面要訪問那個 login 的話，該訪問的地址是 http://localhost:3000/users/login。

后面要再想加其他路由模塊的時候，就按照上面先引入路由模塊，再用 app.use 設置好地址，后面就可以用了。

6、package.json 文件

這個就是整個項目的配置文件啦。項目的名字啦，版本號和項目所需的那些依賴全都寫在這里面的啦，但是一般我們是不用管的。

3 數據庫

既然搭建了后臺，數據庫肯定是要連接的，不同的數據庫的話，就安裝不同的插件來使用，如果你使用的是 mongoDB 的話，就推薦使用 mongoose 來操作數據庫，關于 mongoose 的使用可以看我另外一篇教程

4 后記

源代碼的話我放到我的 Github 上面去了,可以去 clone 下來看一下。關于 express 項目的簡單開發就講到這邊啦，但是如果是這么簡單的設置這個項目的目錄結構的話，可擴展性不高，代碼復用也不好，所以我們要看下一篇文章啦--express 項目分層實踐

云服務器 GPU云服務器手把手搭建阿里云服務器手把手教你阿里云服務器搭建商城后臺搭建網站后臺搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99864.html

前端周刊第41期

摘要：注意本文為前端周刊早期整理的舊文重發，不過大部分內容并沒有過時，已經看過的同學可以直接去文末訂閱前端周刊微信公眾號。想和我面對面交流掃下方二維碼添加我為好友。注意：本文為前端周刊早期整理的舊文重發，不過大部分內容并沒有過時，已經看過的同學可以直接去文末訂閱前端周刊微信公眾號。文章教程手把手教你玩轉 Github Pages 24ways.org 有人說 Github 就是工程師的...

ixlei 2019-08-20 14:20 評論0 收藏0
前端周刊第41期

摘要：注意本文為前端周刊早期整理的舊文重發，不過大部分內容并沒有過時，已經看過的同學可以直接去文末訂閱前端周刊微信公眾號。想和我面對面交流掃下方二維碼添加我為好友。注意：本文為前端周刊早期整理的舊文重發，不過大部分內容并沒有過時，已經看過的同學可以直接去文末訂閱前端周刊微信公眾號。文章教程手把手教你玩轉 Github Pages 24ways.org 有人說 Github 就是工程師的...

yanwei 2019-08-30 15:52 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

nemo 2019-08-20 12:34 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

leiyi 2019-08-01 16:00 評論0 收藏0