使用 Node.js Express 開發服務端

原文鏈接:https://www.jianshu.com/p/db4df1938eca

1. 安裝Node.js環境,可以官網直接下載或者指令下載
2. 安裝Express

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

3. 創建express項目,初始化

3.1 cmd終端打開指令,依次輸入如下指令,根據自己實際需要創建對應的文件夾

e:
md node_workspace     //在這裏md是創建新的文件並命名作爲項目的工作空間
cd node_workspace     //進去剛剛創建的文件夾
express node_express      //此處node_express爲項目名稱,可自定義

3.2 等待安裝,cmd終端會有兩個提示 ,如下:

$cd node_express && npm install //此處是提醒我們可以進入項目根目錄,執行npm install 安裝依賴模塊
$npm start  //此處是提醒我們可以進入項目根目錄,如何啓動服務器

3.3 cmd終端執行如下指令:

cd node_express
npm install

3.4 安裝成功以後,可以在目錄下查看(步驟3.1完成以後就會有如下目錄結構只是沒有node_modules依賴的模塊)

目錄

注:小百科
1.bin:是用來啓動應用(服務器)
2.node_modules:是依賴的模塊
3.public:是存放靜態資源的
4.routes:路由(可以問問度娘,瞭解得更加具體)主要是確定應用程序如何響應對特定端點的客戶機發起的請求,包含一個URI(標識、定位任何資源的字符串)和一個特定的HTTP請求方法(如:post、axios等)
5.views:模板文件所在的目錄,可以自定義封裝一些組件
6.app.js:該程序是main.js文件以及服務器的啓動入口

4. 服務器的啓動

4.1 啓動服務器

npm start

4.2 啓動成功以後,終端會輸出node ./bin/www 如下圖:

4.3 而後在瀏覽器訪問:http://127.0.0.1:3000

注:如果無法訪問這個路徑,可以嘗試 http://localhost:3000/

瀏覽器顯示結果如下:

瀏覽器結果

5. 基本使用

5.1 主要代碼的介紹
5.1.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;

5.1.2 index.js是服務器調用的接口

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

/* GET home page. */
// 定義一個 get 請求 path 爲根目錄
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

5.2模擬用戶信息接口DEMO
5.2.1在router文件下創建user.js
user.js

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

module.exports = User;

users.js

var User = require('./user');
// 獲取url參數 依賴於url模塊 使用前需要使用
var URL = require('url');
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource in users');
});

router.get('/getUserInfo', function(req, res, next) {

  var user = new User();
  var params = URL.parse(req.url, true).query;

  if(params.id == '1') {
    user.name = "Mr.light";
    user.age = "1";
    user.city = "深圳市";
  } else {
    user.name = "Ms.lee";
    user.age = "2";
    user.city = "廣東市";
  }
  var response = {status:1,data:user};
  res.send(JSON.stringify(response))
});

module.exports = router;

目錄結構如下:

目錄結構

5.2.2 重啓服務器
crtl+c先關閉服務器

npm start

5.2.3 調用方式-響應數據
http://127.0.0.1:3000/users/getUserInfo?id=2

運行結果

 

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