TypeScript + node/express + sequelize CRUDの作成
index:
環境
TypeScript
node.js
npm
sequelize
mysql
参考のコード
手順
・表の作成
https://github.com/kuc-arc-f/ts_sequelize1/blob/master/database/tasks.sql
npm install
・ｔｓｃコンパイル
npm run build
( 開発する場合 、npm run watch )
・express 起動
npm start
実装など
api、データ取得
https://github.com/kuc-arc-f/ts_sequelize1/blob/master/routes/api.ts
router.get('/tasks_index', function(req: Request, res: Response, next: NextFunction ) {
models.Task.findAll({
order: [
['id', 'DESC'],
],
}).then((result:any) => {
var items = result
items.forEach( function (item: any[]) {
// console.log( item);
});
var param = {"result": result};
res.json(param);
});
});
画面ejs
new
https://github.com/kuc-arc-f/ts_sequelize1/blob/master/views/tasks/new.ejs
index
https://github.com/kuc-arc-f/ts_sequelize1/blob/master/views/tasks/index.ejs
show
https://github.com/kuc-arc-f/ts_sequelize1/blob/master/views/tasks/show.ejs
edit
https://github.com/kuc-arc-f/ts_sequelize1/blob/master/views/tasks/edit.ejs
TypeScript + node/express 、chart.jsでグラフ表示
index:
環境
TypeScript
node.js
npm
sqlite3
chart.js
参考のコード
画面
手順
・表の作成
https://github.com/kuc-arc-f/ts_express5_chart/blob/master/doc/mdats.sql
npm install
・ｔｓｃコンパイル
npm run build
( 開発する場合 、npm run watch )
・express 起動
npm start
実装など
api、データ取得
https://github.com/kuc-arc-f/ts_express5_chart/blob/master/routes/api_mdats.ts
/********************************
*
*********************************/
router.get('/index', function(req: Request, res: Response, next: NextFunction ) {
let db = new sqlite3.Database( AppConst.dbfileName )
let items:any[] = [];
let sql = `
SELECT id,hnum, lnum ,date(mdate, '+9 hours') as mdate
FROM mdats order by mdate;
`;
db.serialize(function() {
db.all(sql , function(err: any, rows:any[] ) {
rows.forEach( function (item:any[] ) {
items.push(item );
// console.log(item )
});
var param = {"docs": items };
res.json(param);
});
});
db.close();
});・画面ejs
https://github.com/kuc-arc-f/ts_express5_chart/blob/master/dist/views/mdats/chart.ejs
TypeScript で、CSVデータからsqlite3 dbに保存する。
index:
環境
TypeScript
node.js
npm
sqlite3
参考のコード
データ追加
https://github.com/kuc-arc-f/ts_express4_csv/blob/master/csv_import.ts
insert_db(db:any ,item : Imdat): void{
let sql = `
INSERT INTO mdats (mdate, hnum, lnum, up_date) VALUES
(date('${ item.date }'), ?, ?, CURRENT_TIMESTAMP)
`;
//console.log( sql )
let stmt = db.prepare(sql )
stmt.run(
item.hnum,
item.lnum
)
stmt.finalize()
db.close()
}
TypeScript + node/express + Vue.js, mongoDB版のCRUD作成
index:
概要:
前の TypeScript 関連となり
node.js + express + Vue.js で
mongoDB の構成になります
環境
TypeScript
node.js
npm
express
Vue.js
mongoDB
参考のコード
実装など
api.ts
https://github.com/kuc-arc-f/ts_express3_mongo/blob/master/routes/api.ts
/********************************
*
*********************************/
router.get('/tasks_index', function(req: RequestEx, res: Response, next: NextFunction ) {
let db = req.db;
let collection = db.get('tasks');
let items:any[] = [];
collection.find({},{},function(e:any,docs: any[]){
docs.forEach( function (item) {
//toTimeString
items.push(item);
});
var param = {"docs": items };
res.json(param);
db.close();
});
});
Vue.js
new
https://github.com/kuc-arc-f/ts_express3_mongo/blob/master/dist/views/tasks/new.ejs
index
https://github.com/kuc-arc-f/ts_express3_mongo/blob/master/dist/views/tasks/index.ejs
show
https://github.com/kuc-arc-f/ts_express3_mongo/blob/master/dist/views/tasks/show.ejs
edit
https://github.com/kuc-arc-f/ts_express3_mongo/blob/master/dist/views/tasks/edit.ejs
TypeScript + node/express + Vue.js, sqlite版のCRUD作成
index:
概要:
前の TypeScript 関連となり
node.js + express + Vue.js で
db は、sqliteになります
環境
TypeScript
node.js
npm
express
Vue.js
参考のコード
実装など
・表の作成
https://github.com/kuc-arc-f/ts_express2_sqlite/blob/master/doc/tasks.sql
api の一部
typeScript 対応で、型の追加など
https://github.com/kuc-arc-f/ts_express2_sqlite/blob/master/routes/api.ts
/********************************
*
*********************************/
router.get('/tasks_index', function(req: Request, res: Response, next: NextFunction ) {
let db = new sqlite3.Database( dbfileName )
let items:any[] = [];
db.serialize(function() {
db.all('SELECT id,title, content FROM tasks order by id desc;', function(err: any, rows:any[] ) {
rows.forEach( function (item:any[] ) {
items.push(item );
// console.log(item )
});
var param = {"docs": items };
res.json(param);
});
});
db.close();
});
/********************************
*
*********************************/
router.post('/tasks_new', (req: Request, res: Response, next: NextFunction) => {
let data = req.body
// console.log(data )
var db = new sqlite3.Database( dbfileName )
db.serialize(function() {
var stmt = db.prepare('INSERT INTO tasks (title, content) VALUES (?, ?)')
stmt.run(data.title, data.content )
stmt.finalize()
res.json(data);
});
db.close();
});
Vue.js
new
https://github.com/kuc-arc-f/ts_express2_sqlite/blob/master/dist/views/tasks/new.ejs
index
https://github.com/kuc-arc-f/ts_express2_sqlite/blob/master/dist/views/tasks/index.ejs
show
https://github.com/kuc-arc-f/ts_express2_sqlite/blob/master/dist/views/tasks/show.ejs
edit
https://github.com/kuc-arc-f/ts_express2_sqlite/blob/master/dist/views/tasks/edit.ejs
TypeScript +node/express の設定編
index:
概要:
前の TypeScript 関連となり
node.js + express構成となります
環境
TypeScript
node.js
npm
express
参考の設定
追加の手順
express app npm install npm install typescript npm install @types/node npm install @types/express
app.ts
https://github.com/kuc-arc-f/ts_express1/blob/master/app.ts
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
import {indexRouter} from "./routes/index";
//import {tasksRouter} from "./routes/tasks";
const app = express();
const expressLayouts = require('express-ejs-layouts');
app.use(expressLayouts);
// 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(express.static(path.join(__dirname, 'public')));
const p = new Promise(() => {
});
//
app.use('/', indexRouter );
//app.use('/tasks', tasksRouter );
export {app}
bin/www.ts
https://github.com/kuc-arc-f/ts_express1/blob/master/bin/www.ts
import を、設定します
import {app} from "../app";package.json
https://github.com/kuc-arc-f/ts_express1/blob/master/package.json
ルーティング
routes/ index.ts : router を、export します
import {NextFunction, Request, Response} from "express";
const express = require('express');
//const path = require('path');
const router = express.Router();
/* GET home page. */
router.get('/', function(req: Request, res: Response, next: NextFunction) {
res.render('index', { title: 'Express' });
// res.send('respond with a resource-1122');
});
export {router as indexRouter}
TypeScript, tsconfigでの自動コンパイル #TypeScript #javascript
index:
環境
TypeScript
node.js
npm
コンパイル方法
tsconfig.json
https://github.com/kuc-arc-f/ts_start2/blob/master/tsconfig.json
dist の下に、出力されます
{
"compilerOptions": {
"target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"strict": true, /* Enable all strict type-checking options. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
}
}・tscコマンド
下記プロセスを、起動きておきます。
tsファイルがコンパイルされます。
tsc -W
