您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關如何使用Nodejs搭建服務器訪問html、css、JS等靜態資源文件的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
第一步,俗話說的好,工欲善其事,必先利其器。既然要用node+express配置服務器,如果電腦上沒有的話自然要先安裝這兩個大寶貝啦。
1.安裝node。到Node官網下載安裝即可,直接下一步下一步就完成了。
2.npm初始化項目。打開終端,輸入npm init -y即可。注意:如果不輸入-y要自己寫一些配置,寫了-y會默認直接生成一個package.json文件。
3.安裝Express。在終端輸入 npm i S express回車即可
第二步,編寫Express配置文件。新建一個app.js文件(文件名可隨意,但不要使用關鍵字)
var express = require('express'); var path = require('path'); var app = express(); [color=#ff0000]app.use(express.static(path.join(__dirname, 'public')));[/color] app.listen(4444, function() { console.log('App listening at port 8080;'); });
其中最主要的部分是app.use(express.static(path.join(__dirname, 'public')))
,該行代碼是在express添加中間件,設置靜態資源路徑為public,所有的HTML、CSS、JS等文件都放在public下即可
第三步,在public文件夾中添加測試頁面。我這里寫的是一個命名為changeColor.html的頁面。當它顯示在手機上時,手機橫、豎屏變化,body顯示不同的背景顏色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testExpress</title> <style type="text/css"> body{background-color: yellow;} @media screen and (orientation:landscape){ body{background-color: orange;} } </style> </head> <body> </body> </html>
第四步,添加完后,啟動服務。
我這里用的是sublime,按兩個ctrl+r,如果控制臺輸出App listening at port 4444;表示啟動服務成功。打開瀏覽器,在地址欄輸入:http://localhost/4444/changeColor.html
就可以查看測試網頁了。如果把localhost換成本機的IP,替換后的地址就可以放在手機上顯示了。
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持億速云!
感謝各位的閱讀!關于“如何使用Nodejs搭建服務器訪問html、css、JS等靜態資源文件”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。