1. 程式人生 > >Ubuntu下用webstorm開發Nodejs(二)

Ubuntu下用webstorm開發Nodejs(二)

一、nodejs+express開發專案

  1. package.json檔案包含了應用程式的基本資訊。其中“dependencies”部分描述了你想安裝模組的名稱和版本。該案例,接受Express 4.16.0版本,你可以在該部分列出你想要的所有依賴。 如果你想安裝其他的依賴模組,類似安裝express一樣,可以在dependencies中定義你的模組名稱和版本,執行npm install即可安裝,一旦找到,即可安裝所列出的所有依賴。
    在這裡插入圖片描述

2.一旦npm安裝依賴包完成,專案根目錄下會出現node_modules的子目錄。專案配置所需的express包都存放於這裡。

說明:還有更簡單的操作方式,直接輸入命令:npm install express,會出現如下畫面直到安裝完成
在這裡插入圖片描述

3.進行GET請求呼叫
app.js是這個專案的入口檔案,通過router轉發GET請求進行

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

var bodyParser = require('body-parser');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// var creaeteaccountRouter = require('./routes/create-accout');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// parse application/json
app.use(bodyParser.json());

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));

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.use('/hello', usersRouter);
// app.use('/createaccout', creaeteaccountRouter);
// 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');
});

app.listen(3333);
console.log('Listening on port 3333');
module.exports = app;

進入router/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;

可以看到通過router.get發起get請求,返回結果如下

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

4.進行POST請求呼叫

進入router/user.js,修改user.js為如下內容

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

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

module.exports = router;

返回結果為

respond with a resource

二、安裝postman除錯工具

2.解壓安裝

sudo tar -xzf 2018Postman-ubuntu-x64-6.2.7.tar.gz

此時,在當前目錄出現一個Postman資料夾。

啟動Postman

./Postman/Postman

3.建立啟動圖示 每次進入Postman目錄很不方便,可以建立一個啟動項。
建立軟連結

  sudo ln -s  /home/c/Downloads/Postman/Postman   /urs/bin/postman    (前面地址為安裝目錄,後面軟連結地址)    

建立啟動項檔案

 sudo vim  /urs/share/applications/postman.desktop    

寫入:

     [Desktop Entry]     
      Encoding=UTF-8    
      Name=Postman    
      Exec=/urs/bin/postman          
      Icon=/home/c/Downloads/Postman/Postman/app/assets/icon.png   
     Terminal=false     
     Type=Application     
     Categories=Development; 

在dash裡就可以搜尋到Postman。

三、除錯GET請求和POST請求
1.啟動nodejs

在ubuntu終端輸入命令

node app.js

終端看到日誌輸出

Listening on port 3333

2.開啟postman
在這裡插入圖片描述