css中的node.js
You may think this is not important, but it is!. As a beginner in node.js, most coding exercises are always server sided.
您可能認為這并不重要，但確實如此！ 作為node.js的初學者，大多數編碼練習始終都是服務器端的。
You may also think that styling your little node.js app or web page may always require template engines or external CSS/JavaScript files.
您可能還認為，為小小的node.js應用程序或網頁設置樣式可能始終需要模板引擎或外部CSS / JavaScript文件。
Let me show you a method in which you can style your node.js web page or app without necessarily using a template engine or an external file.
讓我向您展示一種無需使用模板引擎或外部文件即可對node.js網頁或應用程序進行樣式設置的方法。
Take Note! You should have Node js installed on your computer.
做記錄！ 您應該在計算機上安裝Node js。
With Node js already up and running, let's get started.
Node Node js已經啟動并運行，讓我們開始吧。
Let's build a kind of login web page with CSS styling which alerts welcome when loaded.
讓我們用CSS樣式構建一種登錄網頁，該網頁在加載時會發出歡迎消息。
Open a text editor and type the following code and save it with the file name app.js:
打開文本編輯器，輸入以下代碼，并將其保存為文件名app.js：
// include all required modules
var http = require ('http');
var express = require ('express');
var fs = require ('fs');
// server details
var app = express ();
var server = app.listen (1337, function ()
{
console.log ('server started at ::: port 1337');
} );
app.get ('/', function (req,res) {
// html response
var html = '' ;
html += "<body>" ;
html += "<script>"; // javascript
html += "alert ('welcome');";
html += "</script>";
html += "<style>" ; // css style
html += "input[type=submit]" ;
html += "{background-color: #4CAF50;}" ;
html += "body{font-family: 'Comic Sans MS', cursive, sans-serif}"
html += "div {border-radius: 5px;background-color: #f2f2f2; padding: 40px;}";
html += "input[type=submit] {font-family: Comic Sans MS; width: 20%;background-color: green;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}";
html += "input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: none;border-radius: 0px;box-sizing: border-box;border-bottom: 2px solid green;color: black;}";
html += "h6 {font-size: 14px;color: #c8c8c8;}";
html += "</style>" ;
html += "<body bgcolor = lightgrey>";
html += "<center>";
html += "<div>"
html += "<fieldset>";
html += " <legend>LOGIN!!</legend>";
html += "<label for='link'>FIRST NAME</label>";
html += "<input type='text' name='link' placeholder='first name' required size='40' autofocus></br></br>" ;
html += "</br>"
html += "</br>"
html += "<label for='file'>LAST NAME:</label>";
html += "<input type= 'text' name='file' placeholder='last name!' required size='20'></br></br>" ;
html += "</fieldset>";
html += "<input type='submit' value='LOGIN!'>";
html += " ";
html += "</form>" ;
html += "<center>";
html += "<h6><center>SENIOR Dev. </code>Godwill Tetah || [email?protected]</code>copyright 2019 go237.com || All rights reserved. </h6>";
html += "</center>";
html += "</body>" ; // closed body
res. send ( html) ;
});
The file should be saved in your default node.js project directory.
該文件應保存在默認的node.js項目目錄中。
Run the code by initiating the file at the command prompt like a regular node js file, and then open the port in a browser.
通過在命令提示符處啟動文件(如常規節點js文件)來運行代碼，然后在瀏覽器中打開端口。
Take some time now and study the syntax properly. You’ll notice that I used html+= frequently.
現在花一些時間，正確學習語法。 您會注意到我經常使用html + = 。
So you can play around with it to get your desired style.
因此，您可以試用它以獲得所需的樣式。
This styling method is useful for small projects...
這種樣式化方法對于小型項目很有用。
Output Image:
輸出圖像：
Thanks for coding with me. Your comments are most welcome.
感謝您與我一起編碼。 非常歡迎您發表評論。
翻譯自: https://www.includehelp.com/node-js/using-basic-html-css-and-javascript-in-node-app.aspx
css中的node.js
 轉)
