當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

css中的node.js_在Node App中使用基本HTML，CSS和JavaScript

發(fā)布時間：2023/12/1 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 css中的node.js_在Node App中使用基本HTML，CSS和JavaScript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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的初學(xué)者，大多數(shù)編碼練習(xí)始終都是服務(wù)器端的。

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應(yīng)用程序或網(wǎng)頁設(shè)置樣式可能始終需要模板引擎或外部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網(wǎng)頁或應(yīng)用程序進行樣式設(shè)置的方法。

Take Note! You should have Node js installed on your computer.

做記錄！您應(yīng)該在計算機上安裝Node js。

With Node js already up and running, let's get started.

Node Node js已經(jīng)啟動并運行，讓我們開始吧。

Let's build a kind of login web page with CSS styling which alerts welcome when loaded.

讓我們用CSS樣式構(gòu)建一種登錄網(wǎng)頁，該網(wǎng)頁在加載時會發(fā)出歡迎消息。

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 responsevar 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.

該文件應(yīng)保存在默認的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.

通過在命令提示符處啟動文件(如常規(guī)節(jié)點js文件)來運行代碼，然后在瀏覽器中打開端口。

Take some time now and study the syntax properly. You’ll notice that I used html+= frequently.

現(xiàn)在花一些時間，正確學(xué)習(xí)語法。您會注意到我經(jīng)常使用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.

感謝您與我一起編碼。非常歡迎您發(fā)表評論。

翻譯自: https://www.includehelp.com/node-js/using-basic-html-css-and-javascript-in-node-app.aspx

css中的node.js

總結(jié)

以上是生活随笔為你收集整理的css中的node.js_在Node App中使用基本HTML，CSS和JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。