重新踏入網頁開發 (1) - Nodejs
重新踏入網頁開發 (2) - ES6
重新踏入網頁開發 (3) - Route
重新踏入網頁開發 (4) - Dependency injection
重新踏入網頁開發 (5) - Blocking & Non-Blocking
重新踏入網頁開發 (6) - Express - 2
重新踏入網頁開發 (6) - Express - 3
重新踏入網頁開發 (6) - Express - 4
重新踏入網頁開發 (6) - Express - 5
重新踏入網頁開發 (6) - Express - 1
重新踏入網頁開發 (7) - React
鑒於 $( document ).ready() 有縮寫，導致初學者如我看不懂，這裡紀錄一下。
基本版本
$( document ).ready() 基本上是等 Document Object Model ( DOM ) 好了後，可以執行 JavaScript code 時啟動。另外常見的 $( window ).on( "load", function() { ... }) 則是等整個文件都處理完畢後 ( 包含 image, iframe...等等 ) 才執行，而非只有 DOM。
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});縮寫版本
老練的開發者會寫 $() 代替 $( document ).ready()，但最好不要。
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});參考資料 :
1.JQuery_Doc
<!-- Some HTML -->
<div id="mydiv"></div>
<!-- Some HTML --> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script type="text/javascript">
class HelloWorld extends React.Component {
render() {
return React.createElement('h1', {}, 'Hello React');
}
}
const domContainer = document.querySelector('#mydiv');
ReactDOM.render(React.createElement(HelloWorld), domContainer);
</script> <div id="mydiv">
<h1>Hello React</h1>
</div> <!DOCTYPE html>
<html>
<!--這兩個 script 讓我們可以在 JavaScripts 寫 React Code -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--這個 script 讓我們可以使用 JSX 和 ES6，即使瀏覽器較舊 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<div id="mydiv_JSX_ver"></div>
<!-- 純 React ( 不用 JSX ) -->
<script type="text/javascript">
class HelloWorld extends React.Component {
render() {
return React.createElement('h1', {}, 'Hello React');
}
}
const domContainer = document.querySelector('#mydiv');
ReactDOM.render(React.createElement(HelloWorld), domContainer);
</script>
<!-- JSX 版本 -->
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello React with JSX!</h1>
}
}
ReactDOM.render(<Hello />, document.querySelector('#mydiv_JSX_ver'))
</script>
</body>
</html> import express from 'express'
import path from 'path';
// 建立 express 這 module
var app = express()
const port = 8888
const __dirname = path.resolve();
// This responds a GET request for the homepage
app.get('/', (req, res) => {
console.log("Got a GET request for the homepage, from");
res.sendFile(__dirname + "/hello.html");
})
var server = app.listen(port, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
}) import express from 'express'
var app = express()
var router = express.Router()
const port = 8888
// Some router level function
function logger (req, res, next) {
console.log('Request URL:', req.url)
console.log('Request Type:', req.method)
next()
}
function welcome (req, res) {
res.send("Welcome to the localhost!\n")
}
function hello (req, res, next) {
res.send("Hello " + req.params.userName + "\n")
next()
}
router.use(logger)
router.get('/', welcome)
router.get('/user/:userName', hello)
// load router，就可獲得兩個 page ( '/' 跟 '/user/:userName' )
// 這裡要注意的是要掛載 router 的 app 要用 app.use() 而不能是 app.Method()
// 若用 app.Method()，'/user/:userName' 就會被 app.Method() 濾掉
// 只剩一個 page
app.use('/', router)
app.listen(port) import express from 'express'
// 建立 express 這 module
var app = express()
const port = 8888
var userName = "Unknown"
function hello(req, res) {
res.send("Hello " + userName + "\n")
res.end()
}
// 中間的匿名 function 就是 Middleware
app.get('/hello/:userName.:userPassword', function (req, res, next){
userName = req.params.userName
console.log(userName)
next()
}, hello)
app.listen(8888)
import express from 'express'
// 建立 express 這 module
var app = express()
const port = 8888
function reqType (req, res, next){
console.log('Request Type:', req.method)
next()
}
function timer (req, res, next){
var date = new Date()
console.log('Time:', date.toString())
if (req.params.userName == "Admin") {
next('route') // 只能在 app.Method() 使用，在 use() 裡就會只是普通的 next()
} else {
next()
}
}
function logger (req, res, next){
console.log
(
'User Date:', '\n',
'User:', req.params.userName, '\n',
'Password:', req.params.userPassword, '\n'
)
res.end()
}
function warning(req, res, next) {
console.log("Warning: Your village is under attack\n")
res.end()
}
// app.use() 在 route 之前，所以會先執行 use 裡的 Middleware function
// 之後在依照 Request Method 去找相對的 app.Method() 做 Reuest Handle
app.use('/hello/:userName.:userPassword', reqType)
// 正常來講，若 Request 是 GET 且 URL 符合的話，會依照順序執行 routing function
// 但 timer 裡有 next('route')，符合條件的話會直接把控制權交給下個 routing function，
// 忽略它本身後面的 Middleware function，這裡就是 logger。
app.get('/hello/:userName.:userPassword', timer, logger)
app.get('/hello/:userName.:userPassword', warning)
app.listen(8888) import express from 'express'
// 建立 express 這 module
var app = express()
const port = 8888
// 回傳 { "userId": xxx, "bookId": xxx }
app.get('/users/:userId/books/:bookId', function (req, res) {
res.send(req.params)
})
// 可以用 "-" 分割，回傳 { "userId": xxx, "authorId": xxx, "bookId": xxx }
app.get('/users/:userId-:authorId-:bookId', function (req, res) {
res.send(req.params)
})
// 可以用 "." 分割，回傳 { "userId": xxx, "authorId": xxx, "bookId": xxx }
app.get('/users/:userId.:authorId.:bookId', function (req, res) {
res.send(req.params)
})
app.get('/users', function (req, res) {
res.send("/users\n")
})
var server = app.listen(port, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
}) $ curl -X GET http://localhost:8888/users/34/books/8989
{"userId":"34","bookId":"8989"}
$ curl -X GET http://localhost:8888/users/34-789-456
{"userId":"34","authorId":"789","bookId":"456"}
$ curl -X GET http://localhost:8888/users/34.123.258
{"userId":"34","authorId":"123","bookId":"258"}
$ curl -X GET http://localhost:8888/users/
/users import express from 'express'
// 建立 express 這 module
var app = express()
const port = 8888
// 可以塞複數個 callback, 只要確保你有傳和呼叫 next()
app.get('/normal', function (req, res, next) {
console.log('Hello from the first callback function!')
next()
}, function (req, res) {
console.log('Hello from the second callback function!')
res.send("Hi, this is the second callback function!\n")
res.end()
})
// array 版
function callbackA(req, res, next) {
console.log('Hello from callbackA function!')
next()
}
function callbackB(req, res, next) {
console.log('Hello from callbackB function!')
next()
}
function callbackC(req, res) {
console.log('Hello from callbackC function!')
res.send("Hi, this is callbackC!\n")
res.end()
}
app.get('/array', [callbackA, callbackB, callbackC])
var server = app.listen(port, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
}) $ curl -X GET http://localhost:8888/normal
Hi, this is the second callback function!
$ curl -X GET http://localhost:8888/array
Hi, this is callbackC! $ node Learning/11.Express\&ES6/Route_handler.js
Example app listening at http://:::8888
Hello from the first callback function!
Hello from the second callback function!
Hello from callbackA function!
Hello from callbackB function!
Hello from callbackC function! npm install express import express from 'express'
// 建立 express 這 module
var app = express()
const port = 8888
// This responds a GET request for the homepage
app.get('/', (req, res) => {
console.log("Got a GET request for the homepage");
res.send('Hello GET!\n')
})
// This responds a POST request for the homepage
app.post('/', function (req, res) {
console.log("Got a POST request for the homepage");
res.send('Hello POST\n');
})
// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
console.log("Got a GET request for /list_user");
res.send('Page Listing\n');
})
var server = app.listen(port, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
}) $ curl -X GET http://localhost:8888/
Hello GET!
$ curl -X POST http://localhost:8888/
Hello POST
$ curl -X GET http://localhost:8888/list_user
Page Listing // This responds a GET request for ab*cd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {
console.log("Got a GET request for /ab*cd");
res.send('Page Pattern Match\n');
})
// This responds a GET request for book1, book2 and book3
app.get('/book[123]', function(req, res) {
console.log("Got a GET request for /ab*cd");
res.send('Page Pattern Match\n');
}) $ curl -X GET http://localhost:8888/ab123cd
Page Pattern Match
$ curl -X GET http://localhost:8888/ab123456cd
Page Pattern Match
$ curl -X GET http://localhost:8888/book1
Page Pattern Match
$ curl -X GET http://localhost:8888/book2
Page Pattern Match
$ curl -X GET http://localhost:8888/book3
Page Pattern Match
$ curl -X GET http://localhost:8888/book4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /book4</pre>
</body>
</html>
# Default 是 GET
curl http://localhost:8888/
# 指定 request (--request 可用 -X 代替)
curl --request GET http://localhost:8888/
curl --request POST http://localhost:8888/ # -o 加檔名, -O 直接將 URL 當檔名 (ex. list_user)
$ curl -o temp http://localhost:8888/list_user
$ curl -O http://localhost:8888/list_user # 會 redirect 到 http://www.google.com
curl -L http://google.com curl --trace-ascii debugdump.txt -L http://google.com function start_requset_handle () {
console.log("Start request.");
// Sleep for 10 seconds
function sleep(milliSeconds) {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + milliSeconds);
}
sleep(10000);
}
function upload_requset_handle () {
console.log("Upload request.");
}
function requset_handler (url) {
var handle = {};
handle['/'] = start_requset_handle;
handle['/start'] = start_requset_handle;
handle['/upload'] = upload_requset_handle;
if (typeof handle[url] === 'function') {
handle[url]();
} else {
console.log("No request handler found for " + url);
}
}
export function route(url) {
requset_handler(url);
} import http from 'http'
import url from 'url'
export function serverStart(route) {
function onRequest(request, response) {
var path_name = url.parse(request.url).pathname;
console.log("Request for " + path_name + " received");
// Routing function
route(path_name);
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World.\n");
response.end();
}
http.createServer(onRequest).listen(8888);
console.log("Server has started...");
} import { exec } from 'child_process';
function start_requset_handle (response) {
console.log("Start request.");
var content = "empty\n";
exec("ls -alh", function (error, stdout, stderr) {
content = stdout;
response.writeHead(200, {"Content-Type": "text/plain"});
response.write(content);
response.end();
});
// 放在外面會讓 server 直接回 empty
// response.writeHead(200, {"Content-Type": "text/plain"});
// response.write(content);
// response.end();
}
function upload_requset_handle (response) {
console.log("Upload request.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Uploading...\n");
response.end();
}
function requset_handler (url, response) {
var handle = {};
handle['/'] = start_requset_handle;
handle['/start'] = start_requset_handle;
handle['/upload'] = upload_requset_handle;
if (typeof handle[url] === 'function') {
handle[url](response);
} else {
console.log("No request handler found for " + url);
}
}
export function route(url, response) {
requset_handler(url, response);
} import http from 'http'
import url from 'url'
export function serverStart(route) {
function onRequest(request, response) {
var path_name = url.parse(request.url).pathname;
console.log("Request for " + path_name + " received");
// Routing function
route(path_name, response);
}
http.createServer(onRequest).listen(8888);
console.log("Server has started...");
} export function regular_route(pathname) {
console.log("Start routing path name \"" + pathname + "\"");
} import http from 'http'
import url from 'url'
import { regular_route } from './route.js';
export function serverStart() {
function onRequest(request, response) {
var path_name = url.parse(request.url).pathname;
console.log("Request for " + path_name + " received");
// my Route function
regular_route(path_name);
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World.\n");
response.end();
}
http.createServer(onRequest).listen(8888);
console.log("Server has started...");
} import {serverStart} from './Server.js'
serverStart(); export function regular_route(pathname) {
console.log("Start routing path name \"" + pathname + "\"");
} import http from 'http'
import url from 'url'
export function serverStart(route) {
function onRequest(request, response) {
var path_name = url.parse(request.url).pathname;
console.log("Request for " + path_name + " received");
// my Route function
route(path_name);
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World.\n");
response.end();
}
http.createServer(onRequest).listen(8888);
console.log("Server has started...");
} import { serverStart } from './Server.js'
import { regular_route } from './route.js';
serverStart(regular_route); import http from 'http'
import url from 'url'
function onRequest(request, response) {
// 會紀錄 request url
var path_name = url.parse(request.url).pathname;
console.log("Request for " + path_name + " received");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World.\n");
response.end();
}
http.createServer(onRequest).listen(8888);
console.log("Server has started..."); $ curl http://localhost:8888/
Hello World.
$ curl http://localhost:8888/students/1
Hello World. $ node Server.js
Server has started...
Request for / received
Request for /students/1 received
npm init
# 應該會有一堆要填的，若沒任何想法可以改下 npm init -y 自動幫你填完 {
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/JunYe1993/React.git"
},
"author": "JunYe1993",
"license": "ISC",
"bugs": {
"url": "https://github.com/JunYe1993/React/issues"
},
"homepage": "https://github.com/JunYe1993/React#readme"
} ...
"type": "module"
} $ node HelloWorld.js
(node:29009) ExperimentalWarning: The ESM module loader is
experimental.
Hello World // 想像這裡有隱藏程式碼
// # var module = new Module(...);
// # var exports = module.exports;
// index.js 在 call "require("./ModuleA");"
// 等於回傳 module.exports
var name = "JunYe";
exports.name = name; // 想像這裡有隱藏程式碼
// # var module = new Module(...);
// # var exports = module.exports;
// index.js 在 call "require("./ModuleB");"
// 等於回傳 module.exports
var name = "Daniel";
exports.name = name; var a = require("./moduleA");
var b = require("./moduleB");
console.log(a.name + " and " + b.name + " both are the best."); $>:node index.js
JunYe and Daniel both are the best. export var _name = "JunYe";
export var _class = "SSS";
export var _number = "3064"; export function intro (name, number) {
console.log("My name is " + name + ", and my number is " + number);
}; // 要在 package.json 加 type: module
// 才能達到 <script src="./function.js" type="module"></script> 的效果
// 這邊不知道為什麼要加 .js 才給過
import { intro } from "./function.js";
import { _name, _number } from "./studentA.js";
intro(_name, _number); $>:node index.js
My name is JunYe, and my number is 3064 console.log("Hello World"); $>node HelloWorld.js
Hello World var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { "Content-Type": "text/plain" });
response.write("Hello World");
response.end();
}).listen(8888); $>node Server.js
SELECT * FROM 成績單 LIMIT 3 // 取成績單前三筆資料
SELECT * FROM 成績單 ORDER BY 分數 DESC LIMIT 3 // 取分數前三名的資料
SELECT * FROM 成績單 ORDER BY 分數 DESC LIMIT 3, 7 // 取第四名到第十名的資料 SELECT * FROM 成績單 LIMIT 100000, 1 // 大 Offset SELECT * FROM 成績單 WHERE id >= (SELECT id FROM 成績單 LIMIT 100000, 1) LIMIT 1
<table id='table'>
<tr>
<td><table class='subtable'>...</table></td>
<td><table class='subtable'>...</table></td>
<td><table class='subtable'>...</table></td>
</tr>
</table>
#table {
XXX
}
.subtable {
YYY
}
$(".myclass").click(function(){
// do something
});$('#mydiv').on('click', '.myclass', function(){
// do something
});$('#mydiv').delegate('.myclass', 'click', function(){
// do something
});mysqldump -u root -p database_name > backup.sqlmysqldump -u root -p --databases db1 db2 > backup.sqlmysqldump -u root -p --all-databases > backup.sqlmysqldump -u root -p database_name table_name > backup.sqlmysqldump -u root -p database_name table1 table2 > backup.sqlmysqldump -u root -p database --ignore-table=database.table1 > database.sqlmysql -u root -p database_name < backup.sqlmysql -u root -p < backup.sql
