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