1. 程式人生 > >前端開發如何通過nodejs建立web伺服器

前端開發如何通過nodejs建立web伺服器

今天剛學的如何應用nodejs建立web伺服器,對學習資料進行整理歸納下,希望大神們給指點下!

專案整體分類

首頁佈局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/static/js/jquery-1.11.3.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

router下config.js檔案配置

const url_util = require("url");
const fs = require("fs-extra");
const path = require("path");
const mime = require("mime");
const router = {
    get(path,cb){
        this.routes.push({
            path,
            method : "get",
            handler : cb
        })
    },
    handler: function (req, res) {
        //改裝res使其擁有render方法來渲染整個頁面
        this.refitRes(res);
        let url_info = url_util.parse(req.url);
        let pathname = url_info.pathname;
        //判斷是否為資源請求,是的話讀取對應的檔案,然後響應
        if(pathname.startsWith("/static/")){
            this.responseStatic(pathname,res);
        }
        this.routes.forEach(route => {
            if (route.path == pathname) {
                route.handler(req, res);
            }
        })
    },
    responseStatic(pathname,res){//找到對應的檔案
        fs.readFile(path.join(__dirname,".." + pathname),(err,content)=>{
            if(err) throw err
            res.writeHead(200,{"Content-type" : mime.getType(pathname)})
            res.end(content)
        })
    },
    refitRes(res){
        res.render = function (html) {
            //找到HTML檔案並響應
            fs.readFile(path.join(__dirname, `../static/${html}.html`), (err, content)=> {
                if (err) throw err;
                res.writeHead(200,{"Content-type" : "text/html;charset=utf8"});
                res.end(content);
            })
        }
    }
}
module.exports = router
router下index.js配置
const router = require("./config")
router.get("/",(req,res) =>{
    res.render("index")
})
module.exports = router.handler.bind(router);
config下index.js配置
const config = {
    dev : {
        port : 3000
    },
    pro : {
        port : 80,
        hostname : "www.xxxx.com"
    }
}
module.exports = config;
建立一個nodejs伺服器(server.js)
const  http = require("http");
const config = require("./config");
const router = require("./router");
const mode = 'dev';
const server = http.createServer(router);
server.listen(config[mode].port,config[mode].hostname,() =>{
    console.log(`server is listening...`);
});


相關推薦

前端開發如何通過nodejs建立web伺服器

今天剛學的如何應用nodejs建立web伺服器,對學習資料進行整理歸納下,希望大神們給指點下! 專案整體分類 首頁佈局 <!DOCTYPE html> <html> <head lang="en"> <meta char

如何使用nodejs建立Web伺服器

使用 Node 建立 Web 伺服器 什麼是 Web 伺服器? Web伺服器一般指網站伺服器,是指駐留於因特網上某種型別計算機的程式,Web伺服器的基本功能就是提供Web資訊瀏覽服務。它只需支援HTTP協議、HTML文件格式及URL,與客戶端的網路瀏覽器配合。 大

Node 建立 Web 伺服器

以下是演示一個最基本的 HTTP 伺服器架構(使用 8080 埠),建立 server.js 檔案,程式碼如下所示: 例項: var http = require('http'); var fs = require('fs'); var url = require('url');

利用nodeJs 建立本地伺服器環境-加手機訪問本地專案

本地啟個伺服器,方便呼叫帶資料的測試 1首先去nodeJs官網下載最新版nodeJs     https://nodejs.org/en/ 2安裝成功後win+r開啟cmd 輸入node -help 或者node -v檢視是否安裝成功  3裝好後輸入 npm

nodejs搭建web伺服器初級

    1.1簡介   Node.js是基於Chrome JavaScript執行時建立的一個平臺,實際上它是對Google Chrome V8引擎進行了封裝,它主要用於建立快速的、可擴充套件的網路應用。 也就是說,瀏覽器的Javascript是瀏覽器js程式碼解析,而Node.js則是伺服器端JS的程式

【swoole快速入門3】建立Web伺服器

程式程式碼 http_server.php $http = new swoole_http_server("0.0.0.0", 9501); $http->on('request', function ($request, $response) { var

Nodejs搭建web伺服器

使用Nodejs + http 建立web伺服器 1、首先建立一個server.js檔案,建立伺服器,以及對應css和js檔案的引入和判斷 var http=require(‘http’); var fs = require(‘fs’); var url = r

node.js的建立web伺服器

1.首先使用express建立一個專案 使用npm安裝Express開發框架: //命令列輸入命令 注意這是cmd npm install -g express npm install -g express-generator

前端開發,部署頁面到伺服器,並實現頁面“熱部署”

在開發前端專案的時候,我們經常需要,把頁面放到伺服器中的“容器”中。 比如VueJS,在開發VueJS時,我們要把頁面放到“伺服器”中,以便我們對程式的除錯。 經常需要自啟伺服器。這樣非常麻煩,不光繁瑣,而且降低了開發效率。 介於此,我們可以使用browse

Node.js-建立Web伺服器和TCP伺服器

使用http模組建立Web伺服器    Web伺服器的功能: 接受HTTP請求(GET、POST、DELETE、PUT、PATCH)處理HTTP請求(自己處理,或請求別的程式處理)做出響應(返回頁面

springboot在本地開發通過,部署到伺服器上失敗,無法訪問

自己在本地開發以及測試是沒有問題,但是部署到伺服器上之後訪問失敗,先看一下我的簡單配置吧 pom.xml檔案:工程的打包方式為war 將spring-boot-starter-tomcat的範圍設定為provided, spring-boot-starter-tom

vmware環境下在linux中建立web伺服器

① 檢查是否安裝www伺服器對應的rpm軟體    rpm -qa | grep httpd ② 如果沒有安裝軟體,那麼就要重新安裝,rpm軟體一般在第一或者第二張系統盤中 rpm -ivh 軟體名 ③ 如果安裝成功,那麼就對主配置檔案httpd.conf進行配置,主配置

nodejs搭建web伺服器就是這麼簡單!

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。Node.js 的包管理器 npm,是全球最大的開源庫生態系統。(nodejs官網上的介紹),

Java客戶端通過HttpURLConnection連線Web伺服器的Session儲存問題

通過Java客戶端訪問Web時,session資訊的儲存問題。 通過瀏覽器訪問Web,瀏覽器自動管理Http連線的的session資訊,如果通過Java連線,比如HttpURLConnection,就需要程式自己管理session。 我們希望java客戶端能像瀏覽器一樣

Android 通過httpclient請求web伺服器,並解決使用者登入session保持

package com.rainet.tiis.network; import java.util.Iterator; import java.util.List; import java.util.Map; import org.apache.http.HttpRes

web開發---為什麼要安裝web伺服器

做Web開發為什麼要安裝web伺服器(tomcat、weblogic等)? web資源可以是靜態的也可以是動態的。 用靜態的舉例。 存在一個靜態資源 我在web資料夾中有一個index.html檔案 檔案裡面內容如下: web re

nodejs建立TCP伺服器

說明:建立環境centos7 主要步驟 1. 使用net模組建立TCP伺服器 2. 使用telnet連線TCP伺服器 3. 使用net建立TCP客戶端 注意:步驟2和步驟3任選其一即可 正文 1.使用net模組建立TCP伺服器 新建專

Nodejs建立https伺服器(Windows 7)

為了實驗一下WebRTC,搭了個簡單的https伺服器。說說步驟: 生成OpenSSL證書 使用Nodejs的https模組建立伺服器 OpenSSL 證書 我機子Windows 7,安裝了Cygwin,裡面安裝了openssl,我用它來生成htt

Revit開發通過API 建立

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Autodesk.Revit

阿里雲伺服器window server 2012作業系統下部署基於NodeJSweb伺服器,可在外網訪問

前提:你的網站在本地可以啟動,在本地可以訪問說明:本文沒有提到域名,所以需要使用IP地址加埠號進行訪問。操作步驟:1、啟動你的伺服器 例如用express搭建的伺服器用npm start來啟動,如下圖1所示。