Node.jsとJavaScriptの学習(12日目)
#12日目2021.07.04
[Express]
query stringを使用しないpretty url(意味url)を使用してルーティング機能を実装する方法について説明します.
app.get('/page/:pageId', function(request, response) {
response.send(request.params);
});main.js運転結果
parameterをスキップしたコードの結果を表示できます.
これはhttp://localhost:3000/page/HTML道。で確認された結果です.
リクエストはquery stringとして受信したfilteredIDです.params.pageIdで受信します.同様に、query string方式で格納されたfileListはurl path方式に変換される.
main.jsの一部
app.get('/page/:pageId', function(request, response) {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}main.js運転結果
query stringではなくurl pathで変更されたので、元の実行結果と同じです.
ページ生成の実装
ページ生成機能をExpressバージョンに変換する方法を見てみましょう.
ルーティングを作成します.create processルーティングはpost方式で実現される.
ページ変更の実装
update routeはgetであり、update process routeはpost方式で実現される.
ページ削除の実装
deleteプロセスルーティングを実現します.リダイレクトを使用して実装します.
response.writeHead(302, {Location:
/ });response.end(); 応答.redirect('/');に変更します.var express = require('express')
var fs = require('fs');
var template = require('./lib/template.js');
var path = require('path');
var sanitizeHtml = require('sanitize-html');
var qs = require('querystring');
var app = express()
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = template.list(filelist);
var html = template.HTML(title, list,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`
);
response.send(html);
});
});
app.get('/page/:pageId', function(request, response) {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var sanitizedTitle = sanitizeHtml(title);
var sanitizedDescription = sanitizeHtml(description, {
allowedTags:['h1']
});
var list = template.list(filelist);
var html = template.HTML(sanitizedTitle, list,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
` <a href="/create">create</a>
<a href="/update/${sanitizedTitle}">update</a>
<form action="/delete_process" method="post">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>`
);
response.send(html);
});
});
});
app.get('/create', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'WEB - create';
var list = template.list(filelist);
var html = template.HTML(title, list, `
<form action="/create_process" method="post">
<p><input type="text" name="title" placeholder="title"></p>
<p>
<textarea name="description" placeholder="description"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`, '');
response.send(html);
});
});
app.post('/create_process', function(request, response){
var body = '';
request.on('data', function(data){
body = body + data;
});
request.on('end', function(){
var post = qs.parse(body);
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
})
});
});
app.get('/update/:pageId', function(request, response) {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var list = template.list(filelist);
var html = template.HTML(title, list,
`
<form action="/update_process" method="post">
<input type="hidden" name="id" value="${title}">
<p><input type="text" name="title" placeholder="title" value="${title}"></p>
<p>
<textarea name="description" placeholder="description">${description}</textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
);
response.send(html);
});
});
});
app.post('/update_process', function(request, response){
var body = '';
request.on('data', function(data){
body = body + data;
});
request.on('end', function(){
var post = qs.parse(body);
var id = post.id;
var title = post.title;
var description = post.description;
fs.rename(`data/${id}`, `data/${title}`, function(error){
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.redirect(`/?id=${title}`);
})
});
});
});
app.post('/delete_process', function(request, response){
var body = '';
request.on('data', function(data){
body = body + data;
});
request.on('end', function(){
var post = qs.parse(body);
var id = post.id;
var filteredId = path.parse(id).base;
fs.unlink(`data/${filteredId}`, function(error){
response.redirect('/');
})
});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
});main.js運転結果
実行結果は同じです.
Reference
この問題について(Node.jsとJavaScriptの学習(12日目)), 我々は、より多くの情報をここで見つけました https://velog.io/@bonita0131/Node.js와-JavaScript-공부12일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol