目次
1.Node.jsとは
言語、ライブラリ、フレームワークではなく、js ランタイム環境です。nodejs は js コードの解析と実行が可能で、これまではブラウザのみが js コードの解析と実行を行っていましたが、現在は完全にブラウザなしで Js を実行できます。Nodejsの作者はV8エンジンをChromeに移植し、独立したjs実行環境(Nodejs)を開発しました。
Node.js では、DOM や BOM などのブラウザー組み込み API を呼び出すことはできません。
2. Node.js でできること
JavaScript ランタイム環境として、Node.js はいくつかの基本的な機能と API のみを提供しますが、いくつかのフレームワークとサードパーティ ライブラリを組み合わせることで、多くのリッチ アプリケーションを完成させることができます。
Express フレームワーク (http://www.expressjs.com.cn/) に基づいて、Web アプリケーションをすばやく構築できます。
Electron フレームワーク (https://electronjs.org/) に基づいて、クロスプラットフォームのデスクトップ アプリケーションを構築できます。
restify フレームワーク (http://restify.com/) に基づいて、API インターフェイス プロジェクトをすばやく構築できます。
データベースの読み取り、書き込み、操作、フロントエンド開発を支援する便利なコマンド ライン ツールの作成など...
Node.js は何を学習しますか?
Node.js組み込み API モジュール(fs、path、http など) およびサードパーティAPI モジュール(express、mysql など)
3. Node.js 組み込み API
3.1、fs モジュール
fs モジュールは Node.js が提供するファイル操作用の公式モジュールです。ファイル操作に関するユーザーのニーズを満たす一連のメソッドとプロパティを提供します。例えば：
- 指定されたファイルの内容を読み取るために使用されるfs.readFile(path, [options,] callback)メソッド。
パラメータ 1:ファイルのパスを示す必須パラメータ、文字列。
パラメーター 2: オプションのパラメーター。ファイルを読み取るエンコード形式を示します。
パラメータ 3:必須パラメータ ファイルが読み取られた後、コールバック関数を介して読み取り結果が取得されます。コールバック関数 (err、dataStr): 成功、err の値が null に等しい、失敗、err がエラー オブジェクト、および dataStr の値が未定義
- fs.writeFile(file, data, [options,] callback)メソッドは、指定されたファイルにコンテンツを書き込むために使用されます。
パラメータ 1:必須パラメータです。ファイルのストレージ パスを示すファイル パスの文字列を指定する必要があります。
パラメータ 2:必須パラメータで、書き込む内容を示します。
パラメーター 3: ファイル コンテンツを書き込む形式を示すオプションのパラメーターで、既定値は utf8 です。
パラメーター 4:必須パラメーター、ファイルが書き込まれた後のコールバック関数。コールバック関数 (err): 成功すると、err の値は null に等しくなり、失敗すると、err の値はエラー オブジェクトに等しくなります
//导入内置模块
const fs = require('fs')
//读文件
fs.readFile('./path',function(err,dataStr){
if(err) {
return console.log('文件读取失败'+ err.message)
}
console.log(dataStr)
})
//写文件
fs.writeFile('./path','String',function(err){
if(err){
return console.log('文件写入失败！' + err.message)
}
console.log('文件写入成功！')
})3.2、パス パス モジュール
path モジュールは Node.js が公式に提供している、パスを扱うためのモジュールです。ユーザーのパス処理要件を満たす一連のメソッドと属性を提供します。例えば：
- 複数のパス フラグメントを完全なパス文字列に結合するために使用される path.join()メソッド
- path.basename(path [,ext])メソッドは、パス文字列からファイル名を解析するために使用されます
path <string>パス文字列を示す必須パラメーター
ext <string> ファイル拡張子を示すオプションのパラメーター
戻り値: <string> はパスの最後の部分を示します
- path.extname(path) は、パスの拡張部分を取得できます
3.3、http モジュール
http モジュールはサーバーを作成し、Web サービスを外部に提供します。ステップ：
- http モジュールのインポート
- Web サーバー インスタンスを作成する
- リクエスト イベントをサーバー インスタンスにバインドし、クライアントのリクエストをリッスンする
- サーバーを起動
const http =require('http')
const server = http.createServer()
// req 是请求对象，包含了与客户端相关的数据和属性
// res 是响应对象，包含了与服务端相关的数据和属性
server.on(require,(req,res)=>{
// req.url 是客户端请求的 URL 地址,req.method 是客户端请求的 method 类型
const url = req.url
const method = req.method
const str = `Your request url is ${url}, and request method is ${method}`
// 调用 res.setHeader() 方法，设置 Content-Type 响应头，解决中文乱码的问题
res.setHeader('Content-Type', 'text/html; charset=utf-8')
// 调用 res.end() 方法，向客户端响应一些内容
res.end(str)
})
server.listen(80,()=>{
console.log('server running at http://127.0.0.1')
})4. 現地サービス事例
アクセスが必要です: 127.0.0.1 または 127.0.0.1/clock.html は時計です; アクセス: 127.0.0.1/g2048.html は 2048 ゲームです; その他へのアクセスは 404 です
実装原理: http モジュールを使用してフロントエンド クライアントから要求されたアドレスを監視し、アドレスに従ってファイル モジュールを介して対応するファイルを読み取り、クライアントに返します。
ケース構成:
どこ index.js
//导入相应模块
const http = require('http')
const fs = require('fs')
const path =require('path')
const server =http.createServer()
server.on('request',function(req,res){
const url = req.url
console.log(url);
if(url==='/'||url==='/clock.html'){
//当访问 '/' 或 '/clock.html' 时，读取的地址是一样的
const fpath = path.join(__dirname,'./clock.html')
fs.readFile(fpath, 'utf8', (err,dataStr)=>{
if(err) {
//若返回的是中文需要添加响应头，不然会乱码
res.setHeader('Content-Type', 'text/html; charset=utf-8')
return res.end('文件读取错误')
}
res.end(dataStr)
})
}else if(url==='/g2048.html' || url==='/c2048.css'||url==='/j2048.js'){
//当html文件内链了其他文件，如css，js时，浏览器会主动像服务器进行资源的请求
//在浏览器输入 /g2048.html 访问2048 页面时，实际访问了/g2048.html，/c2048.css ，/j2048.js 三个文件
//注意path地址拼接的区别
const fpath = path.join(__dirname,'js2048',url)
fs.readFile(fpath,'utf8',(err,dataStr)=>{
if(err) {
res.setHeader('Content-Type', 'text/html; charset=utf-8')
return res.end('文件读取错误')
}
res.end(dataStr)
})
}else{
//英文不需要添加响应头
res.end('404 Not Found.')
}
})
server.listen(80,function(){
console.log('server listen at http://127.0.0.1');
})時計.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="clock">
<p id="date" class="date"></p>
<p id="time" class="time"></p>
<div id="text">内置模块[fs path http]的使用</div>
</div>
</body>
<script>
const week = ['周日','周一','周二','周三','周四','五','周六'];
// const cd=new Date();
let timeID = setInterval(updateTime,1000)
updateTime();
function updateTime(){
var cd=new Date();
console.log(cd);
document.getElementById('time').innerHTML=zeroPadding(cd.getHours(),2) + ":" +zeroPadding(cd.getMinutes(),2)+':'+zeroPadding(cd.getSeconds(),2);
document.getElementById('date').innerHTML=zeroPadding(cd.getFullYear(),4) + "-" +zeroPadding(cd.getMonth()+1,2)+'-'+zeroPadding(cd.getDate(),2)+' '+week[cd.getDay()];
}
function zeroPadding(num,digit){
let zero='';
for (let i=0;i<digit;i++){
zero+='0'
};
return (zero+num).slice(-digit);
}
</script>
<style>
html,body{
height: 100%;
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background: #0f3854;
background: radial-gradient(ellipse at center,#0a2e38 0%,#000000 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 15px;
padding: 20px 0 0;
}
</style>
</html>JavaScript ゲーム 2048-Javascript ドキュメント リソース-CSDN ダウンロード
フロントエンド Web サイト (エクストラネット) の推奨: https://codepen.io/