1.什麼是Express？

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用，和豐富的 HTTP 工具。

使用 Express 可以快速地搭建一個完整功能的網站。

Express 框架核心特性：

  • 可以設置中間件來響應 HTTP 請求。
  • 定義了路由表用於執行不同的 HTTP 請求動作。
  • 可以通過向模板傳遞參數來動態渲染 HTML 頁面。

2.本教程實現什麼？

  • 使用Express框架搭建一個簡單的服務端實例
  • 在vue項目中利用axios請求搭建的服務端

註：該教程必須在node.js環境下

3.開始搭建

1.安裝Express：

首先全局安裝express框架：

npm install express -g
npm install express-generator -g

2.初始化一個項目：

（1）在任意一個地方建立一個文件夾，這裡我隨意起了一個名稱：

（2）然後執行命令，初始化express應用：

express 項目名稱

（3）然後生成如下目錄：

（4）命令行進入該文件夾：

cd myexpressdemo

（5）安裝依賴：

npm install

（6）項目目錄簡單介紹：

/bin:用來啟動應用（伺服器）

/public: 存放靜態資源目錄

/routes：路由用於確定應用程序如何響應對特定端點的客戶機請求，包含一個 URI（或路徑）和一個特定的 HTTP 請求方法（GET、POST 等）。每個路由可以具有一個或多個處理程序函數，這些函數在路由匹配時執行。

/views: 模板文件所在目錄 文件格式為.jade

目錄app.js程序main文件 這個是伺服器啟動的入口

3.啟動服務

npm start

然後在瀏覽器輸入：localhost:3000/，若出現以下界面則啟動成功：

4.編寫基本代碼

1.app.js裡面主要代碼介紹：

var createError = require(http-errors);
var express = require(express);
var path = require(path);
var cookieParser = require(cookie-parser);
var logger = require(morgan);

//路由信息 （介面地址）開始 存放在./routes目錄下
var indexRouter = require(./routes/index);//home page介面
var usersRouter = require(./routes/users);//用戶介面

var app = express();

// view engine setup（模板）
app.set(views, path.join(__dirname, views));
app.set(view engine, jade);

app.use(logger(dev));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, public)));

app.use(/, indexRouter);//在app中註冊routes該介面
app.use(/users, usersRouter);//在app中註冊users介面

// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
 res.locals.message = err.message;
res.locals.error = req.app.get(env) === development ? err : {};

// render the error page
 res.status(err.status || 500);
res.render(error);
});

module.exports = app;

當我們在瀏覽器中 訪問 http://localhost:3000/ 調用的就是index中的介面

我們打開index.js就可以看到該介面的定義：

var express = require(express);
var router = express.Router();

/* GET home page. */
router.get(/, function(req, res, next) {
res.render(index, { title: Express });
});
module.exports = router;

定義一個路由的基本格式為：

app.METHOD(PATH, HANDLER)

其中：

app 是 express 的實例。

METHOD是 HTTP 請求方法。

PATH 是伺服器上的路徑。

HANDLER 是在路由匹配時執行的函數。

以上的定義代表

在根路由 (/) 上（應用程序的主頁）對 GET 請求進行響應：

2.實現一個獲取用戶信息介面

在routes文件夾下面新建一個user.js文件,並在裡面定義一個User模型：

function User(){
this.name;
this.city;
this.age;
}
module.exports = User;

然後回到users.js文件，在頭部添加：

var URL = require(url);

然後繼續添加其他內容：

var express = require(express);
var router = express.Router();
var URL = require(url);
var User = require(./user)

/* GET users listing. */
router.get(/, function(req, res, next) {
res.send(respond with a resource);
});
router.get(/getUserInfo, function(req,res,next){
var user = new User();
var params = URL.parse(req.url,true).query;//獲取URL參數，使用需要引入require(url);
 if(params.id == 1){
user.name = "ligh";
user.age = "1";
user.city = "北京市";
}else{
user.name = "SPTING";
user.age = "1";
user.city = "杭州市";
}

var response = {status:1,data:user};
res.send(JSON.stringify(response));
})
module.exports = router;

調用方式：

http://localhost:3000/users/getUserInfo?id=1

或者

http://localhost:3000/users/getUserInfo?id=2

到這裡我們就把獲取用戶信息介面完成了，下面我們在vue項目裡面驗證一下：

5.新建一個vue-cli項目

我的項目結構利用腳手架搭建完成之後是這個樣子：

由於我們只是驗證一下，項目裡面的代碼我們就不給予修改了。然後安裝axios，利用axios來發起請求：

npm install axios --save

修改main.js：

然後在app.vue裡面新增一個請求方法：

然後啟動項目：（注意：不要關閉express啟動起來的服務）

npm run dev

這裡報錯了，原因是跨域問題，至於跨域問題可以自行百度。我們需要在express項目裡面的app.js裡面新增如下代碼，解決跨域問題：

//設置允許跨域訪問該服務.
app.all(*, function (req, res, next) {
res.header(Access-Control-Allow-Origin, *);
//Access-Control-Allow-Headers ,可根據瀏覽器的F12查看,把對應的粘貼在這裡就行
 res.header(Access-Control-Allow-Headers, Content-Type);
res.header(Access-Control-Allow-Methods, *);
res.header(Content-Type, application/json;charset=utf-8);
next();
});

最後：需要重啟一下express服務，然後刷新瀏覽器:

這裡看到數據已經成功請求到了，大功告成。

本片文章是由筆者學習的時候參考網上的文章綜合編寫成的，不足之處多多指出。

推薦閱讀：

相關文章