Nodejs+Express 搭建 web應用

時間 2019-11-21

標籤 nodejs+express nodejs express 搭建 web 應用欄目 HTML 简体版

原文原文鏈接

簡單的記錄下關於如何使用nodejs+Express 極速搭建一個web應用。javascript

項目所需，要用到nodejs，那就去學咯。簡單的看了下七天學會NodeJS，Node.js 教程。發現其實好簡單的，分分鐘上手，這裏只是簡單記錄，nodejs 對數據庫的操做不作詳細介紹。html

看七天不存在的，呵呵。大概的過了一遍，而後開始幹活。java

首先顯得有nodejs環境吧，nodejs下載地址，安裝完畢後，檢查版本號，看是否成功安裝。node

huangenaideMacBook-Pro:x-wallet huangenai$ node --version
v10.12.0

NPM是隨同NodeJS一塊兒安裝的包管理工具，測試是否安裝成功。jquery

huangenaideMacBook-Pro:x-wallet huangenai$ npm --version
6.4.1

先簡單瞭解下什麼是 Express ➡️ http://Express.comgit

Fast, unopinionated, minimalist web framework for Node.js。github

嗯，又快又簡單，適合我。web

新建一個文件夾nodejsDemo 建立一個 package.json數據庫

npm init

package name: (nodejsDemo) nodejs-demoe
version: (1.0.0)
description: none
entry point: (index.js) server.js
test command:
git repository:
keywords:
author: huangenai
license: (ISC)
About to write to /Users/huangenai/Desktop/test/nodejsDemo/package.json:

{
  "name": "nodejs-demoe",
  "version": "1.0.0",
  "description": "none",
  "main": "server.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "huangenai",
  "license": "ISC"
}

Is this OK? (yes) y

新建文件server.jsexpress

touch server.js

新建app文件夾，並在app文件夾下新建index.html

mkdir app 
cd app 
touch index.html

大體目錄

項目目錄下，安裝express模塊

npm install express

根據狀況安裝所須要的模塊

npm install body-parser --save   //處理 JSON, Raw, Text 和 URL 編碼的數據。

npm install cookie-parser --save  //解析Cookie工具,經過req.cookies取到cookie並轉成對象

npm install multer --save   //用於處理 enctype="multipart/form-data"（設置表單的MIME編碼）的表單數據

安裝 nodemon，使用nodemon來啓動程序，這樣不用每次改了又要從新啓動了。

npm install nodemon

server.js

var express = require('express');

var app = express();
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({
  extended: false
})

app.use(express.static('public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + "/app/index.html");
})


app.get('/test', function (req, res) {
  res.send("test");
})

app.post('/helloworld', urlencodedParser, function (req, res) {
  var data = req.body.data;
  res.send(data);
  res.end();
})

var server = app.listen(8001, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("server start port:" + port)
})

app/index.js

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>helloworld</title>
</head>

<body>
  <h1>index page</h1>
  <button id="helloworld">helloworld</button>

  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#helloworld').on('click', function () {
        $.post("http://localhost:8001/helloworld", {
          data: "hello world！"
        }, function (res) {
          alert(res)
        })
      })
    })
  </script>
</body>

</html>