//tips
//smart contract
きちんとmarks.jsについて記載を完了。参考にしていた本の内容は網羅できた。
const express = require('express');
const router = express.Router();
const db = require('../models/index');
const { Op } = require('sequelize');
const MarkdownIt = require('markdown-it');
const markdown = new MarkdownIt();
const pnum = 10;
// ログインチェックの関数
function check(req,res) {
if (req.session.login == null) {
req.session.back = '/md';
res.redirect('/users/login');
return true;
} else {
return false;
}
}
// トップページへのアクセス
///mdアドレスにアクセスした際の処理
router.get('/', (req, res, next)=> {
if (check(req,res)){ return };
db.Markdata.findAll({
where:{userId: req.session.login.id},
limit:pnum,
order: [
['createdAt', 'DESC']
]
}).then(mds=> {
var data = {
title: 'Markdown Search',
login: req.session.login,
message: '※最近の投稿データ',
form: {find:''},
content:mds
};
res.render('md/index', data);
});
});
// 検索フォームの送信処理
router.post('/', (req, res, next)=> {
//検索フォームから送信された場合の処理
//フォームの値を使ってmarkdataモデルを検索し、テンプレートに渡す
if (check(req,res)){ return };
db.Markdata.findAll({
where:{
userId:req.session.login.id,
content: {[Op.like]:'%'+req.body.find+'%'},//検索フォームに入力したテキストが含まれるもの
},
order: [
['createdAt', 'DESC']
]
}).then(mds=> {
var data = {
title: 'Markdown Search',
login: req.session.login,
message:'※"' + req.body.find +
'" で検索された最近の投稿データ',
form:req.body,
content:mds
};
res.render('md/index', data);
});
});
// 新規作成ページの表示
router.get('/add', (req, res, next) => {
if (check(req,res)){ return };
res.render('md/add', { title: 'Markdown/Add' });
});
// 新規作成フォームの送信処理
router.post('/add', (req, res, next) => {
if (check(req,res)){ return };
db.sequelize.sync()
//送信データの追加
.then(() => db.Markdata.create({
userId: req.session.login.id,
title: req.body.title,
content: req.body.content,
})
.then(model => {
res.redirect('/md');
})
);
});
// '/mark'へアクセスした際のリダイレクト
router.get('/mark', (req, res, next) => {
res.redirect('/md');
return;
});
// 指定IDのMarkdata表示
router.get('/mark/:id', (req, res, next) => {
if (check(req,res)){ return };
db.Markdata.findOne({
where: {
id: req.params.id,
userId: req.session.login.id
},
})
.then((model) => {
makepage(req, res, model, true);
});
});
// Markdataの更新処理
//markdataの書き換え送信
router.post('/mark/:id', (req, res, next) => {
if (check(req,res)){ return };
db.Markdata.findByPk(req.params.id)
.then(md=> {
md.content = req.body.source;
md.save().then((model) => {
makepage(req, res, model, false);
});
})
});
// 指定IDのMarkdataの表示ページ作成
function makepage(req, res, model, flg) {
var footer;
if (flg){
var d1 = new Date(model.createdAt);
var dstr1 = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate();
var d2 = new Date(model.updatedAt);
var dstr2 = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate();
footer = '(created: ' + dstr1 + ', updated: ' + dstr2 + ')';
} else {
footer = '(Updating date and time information...)'
}
var data = {
title: 'Markdown' ,
id: req.params.id,
head: model.title,
footer:footer,
content: markdown.render(model.content),
source: model.content
};
res.render('md/mark', data);
}
module.exports = router;
ここからシンプルなejsとjsにて自身のデモページを作成していく。
Express generatorでdemo用のパッケージを作成していく。
express --view=ejs ex-gen-curationapp
npm install
Githubに作成したフォルダはpushしておこうと思ったらエラー。
個人アクセストークンを作成する必要が出てきたよう。下記でやり方確認。
https://zenn.dev/yuri0427/articles/9587ae6a578ee9
cd ディレクトリ//アップロードしたいフォルダへ移動
git init//ローカルリポジトリ作成
git add .//対象フォルダ内のすべてのフォルダ/ファイルをステージング
git commit -m “first commit “//ステージングしたファイルを保存（” ”内はメモ書き）
git remote add origin url名//リモートリポジトリとの関連付け
git push origin master//アップロード
この後にgithubのuser名と生成したアクセストークン入力によりアップロード可能。
Enumerating objects: 6820, done.
Counting objects: 100% (6820/6820), done.
Delta compression using up to 8 threads
Compressing objects: 100% (5208/5208), done.
Writing objects: 100% (6820/6820), 10.67 MiB | 156.00 KiB/s, done.
Total 6820 (delta 1282), reused 6820 (delta 1282), pack-reused 0
しばらく反映を待ってみる。
git push origin master:master
https://ameblo.jp/yukozutakeshizu/entry-12531672570.html
https://nyakanishi.work/what_to_do_when_git_push_doesnt_work_on_the_remote/
Node.jsサイト必要要件。
環境：node.js,express,express-generator,ejs,bootstrap
サーバー:sqlite3,DB browser for sqlite
サーバとの連結：sequelize
ページ構成。
TOPヘッダー：サイト名
サイドメニュー：image アップロード枠、API表示枠
メインメニュー：
アドレス表示…formからのアップロード
following: follower数のカウントおよび表示:データベース表示
SNS image画像枠:snsリンク
左メインブロック：SNSapi表示
右サブブロック1：twitterのタイムライン表示
右サブブロック2：サブimageアップロード枠
右サブブロック3：コメント表示枠など
画像の表示方法を見ながら模索。
https://codezine.jp/article/detail/8350
https://teratail.com/questions/111141
こちらにてexpressの画像表示はexpress.static ミドルウェア関数を使わなければならないことが発覚。
http://expressjs.com/ja/starter/static-files.html
https://stackoverflow.com/questions/17755147/displaying-an-image-with-ejs-in-node-js-express
こちらをapp.jsに追加。
//imageファイルへのアクセス
app.use(express.static('images'));
また、imgをアップロードする際にはmulterを使用しなければならないことがわかったので、multerを使用するケースでの方法を模索する。
https://reffect.co.jp/node-js/express-js-file-upload
https://github.com/expressjs/multer
早速、npm install multerを実行。
routes ディレクトリ内の index.js を修正して、POST リクエストを受け付けられるに変更。
/imageにアクセスしてフォルダ直下の画像を表示させることは下記のコード追加でできた。
const fs = require('fs');
//画像表示のみ
app.get('/image', (req, res) => {
console.log('image');
fs.readFile('./example.png', (err, data) => {
res.type('png');
res.send(data);
});
});
色々模索して、やっと表示できるようになった。
ただ、imgの大きさが大きすぎるなどの問題あり。
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
//expressオブジェクト
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//アプリに必要な処理の組み込み
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//アクセスのためのapp.use
app.use('/', indexRouter);
app.use('/users', usersRouter);
//画像用
app.use(express.static(path.join(__dirname, 'public')))
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
ーーーーー
var express = require('express');
var router = express.Router();
// 追加 1
var multer = require('multer');
var storage = multer.diskStorage({
// ファイルの保存先を指定
destination: function (req, file, cb) {
cb(null, './public/images/')
},
// ファイル名を指定(オリジナルのファイル名を指定)
filename: function (req, file, cb) {
cb(null, 'image.jpg')
}
})
var upload = multer({ storage: storage })
//
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
//res.render('image');
});
router.post('/',upload.single('file'),function(req,res){
//image.ejsを返す
res.render('image'); //***← ここを修正 ***//
});
module.exports = router;
ーーーー
index.ejsとimage.ejsは分けて作成。
写真を縮小して表示する方法を確認する必要があるのだが、いろいろなサイトを見回ってejsテンプレートで作成されたページを確認しても、写真ベタばりの、どれも微妙な感じ。
React.jsに踏み込むかJohnに相談。これは永遠の学習の輪廻に囚われている。幸いなことはDapps制作の際に少しreactも触ったこと。
あっさりreactでいいのではないかという反応が返ってきた。前回ejsとreactどっちがいいか確認したがしょうがない。reactに路線変更。どのフレームワークを選ぶのかにも事前調査が必要なことが認識できた。
