前後端分離實踐(三)—— 使用Express+Nodejs搭建前端服務層

前後端分離實踐系列文章總目錄

目錄

一、搭建Nodejs開發環境

1、什麼是npm?

2、下載安裝npm

3、查看node和npm版本號

4、什麼是cnpm?

5、安裝淘寶的cnpm

6、添加cnpm的環境變量

二、搭建Express開發環境

1、什麼是Express?

2、安裝express應用程序生成器

3、創建一個名爲fbsep-node的express應用

4、進入到fbsep-node目錄安裝依賴

5、啓動應用

6、瀏覽器訪問3000端口號

三、添加Api路由模擬返回接口數據

1、在routes目錄下添加一個api.js內容如下

2、在app.js文件中添加api的路由

3、重啓應用訪問

 四、源碼地址


一、搭建Nodejs開發環境

如果本機已經有nodejs環境的可以直接跳過看第二部分內容

1、什麼是npm?

    即Node Package Manager(節點包管理器),節點包的提供者,如jQuery、Vue使用npm publish將節點包提交到遠程代碼倉庫,當有人要使用代碼倉庫中的節點時,就使用npm install將該節點的節點包下載到本地,下載的代碼會出現在node_modules目錄中。

2、下載安裝npm

下載地址:https://nodejs.org/en/download/

如下圖所示,選擇對應的操作系統安裝包

打開安裝包全部選擇next即可,將nodejs安裝到相應的工作目錄中

3、查看node和npm版本號

在cmd命令窗口下輸入以下命令查看對應版本號

4、什麼是cnpm?

    因爲npm安裝插件是從國外服務器下載,受網絡影響大,可能出現異常,所以cnpm是一個完整npmjs.org 鏡像。

5、安裝淘寶的cnpm

在cmd命令窗口下執行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

6、添加cnpm的環境變量

首先通過npm config get prefix 命令查看你的全局下載目錄(使用npm config set prefix “xxx” 命令即可自定義全局下載目錄)

然後將此目錄添加到你的Path環境變量中

然後再重新打開cmd命令窗口,輸入cnpm –v即可查看到cnpm版本號

後面在使用時,我們可以將所有的npm命令替換成cnpm

二、搭建Express開發環境

1、什麼是Express?

Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架(集成web服務器 + mvc),它幫助你創建各種 Web 應用(相當於原生js與jQuery的關係),其實不用框架,使用node自己弄一個web服務器和mvc框架也可以,但是有優秀的express,封裝了很多常用功能,推薦使用。

2、安裝express應用程序生成器

任意目錄下使用命令全局安裝:cnpm install express-generator –g

3、創建一個名爲fbsep-node的express應用

工作目錄下使用命令:express fbsep-node --view=pug

--view=pug :是指express應用的視圖引擎使用pug

4、進入到fbsep-node目錄安裝依賴

應用根目錄下使用命令:cnpm install

5、啓動應用

應用根目錄下使用命令:set DEBUG=fbsep-node:* & cnpm start

set DEBUG:是指啓用debug模塊來啓動fbsep-node應用,如果不想啓用debug模塊請使用cnpm run start 命令啓動應用

6、瀏覽器訪問3000端口號

訪問地址:http://localhost:3000/

看到如下內容代表fbsep-node應用啓動成功!

更多關於Express的內容可以參考官網:http://www.expressjs.com.cn/

三、添加Api路由模擬返回接口數據

1、在routes目錄下添加一個api.js內容如下

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

router.get("/", function(req, res, next) {
    var data={
        code:9999,
        msg:"OK",
        data:"Hello Node Server"
    };
    res.json(data);
});

module.exports = router;

2、在app.js文件中添加api的路由

首先,在var usersRouter = require('./routes/users');下面添加一行內容:var apiRouter = require('./routes/api'); 它的意思是引用api.js

然後,在app.use('/users', usersRouter);下面添加一行內容:app.use('/api', apiRouter); 它的意思是使用/api作爲根路徑

3、重啓應用訪問

訪問地址爲:http://localhost:3000/api
看到如下所示內容代表訪問成功:

 四、源碼地址

https://github.com/Alexshi5/demo-fbsep/tree/master/fbsep-node

 

參考鏈接:

1、搭建一個VUE+Express前後端分離的開發環境

2、express搭建

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章