Vue.js(Vue-CLI 3) + express + mongoDB markdown対応のtodoアプリ作成 SPA開発(21)
index:
環境
vue.js
Vue-CLI 3
mongodb-4.0.10
express 4.16.1
node.js
npm
参考のコード
画面
・詳細
・一覧
実装など
API
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/srv/index.js
/* todos */ app.get('/api_todos_index', function(req, res) { var collection = db.get('todos'); var items = []; collection.find({},{},function(e,docs){ docs.forEach( function (item) { //toTimeString items.push(item); }); var param = {"docs": items }; res.json(param); }); }); // app.post('/api_todos_new', (req, res) => { console.log(req.body.title ) var obj = req.body; obj.up_date = new Date(); console.log( obj ) var collection = db.get('todos'); collection.insert(obj , function(err, result ) { if (err) throw err; res.json(req.body); db.close(); }); }); app.get('/api_todos_show/:id', function(req, res) { console.log(req.params.id ); var collection = db.get('todos'); collection.find({"_id": new ObjectID(req.params.id)},{},function(e,docs){ //console.log("#doc"); var param = {"docs": docs }; res.json(param); }); }); // //update app.post('/api_todos_update', (req, res) => { console.log(req.body ) // var obj = req.body; var obj = { "title": req.body.title , "content": req.body.content, "complete": req.body.complete, "up_date" : new Date() }; var collection = db.get('todos'); collection.findOneAndUpdate( { _id: new ObjectID( req.body.id ) }, obj, {}, function(err, r){ if (err) throw err; res.json(req.body); db.close(); }); }); // //delete app.get('/api_todos_delete/:id', function(req, res) { console.log(req.params.id ); var collection = db.get('todos'); collection.findOneAndDelete( { _id: new ObjectID( req.params.id ) }, {}, function(err, r){ //console.log("#doc"); // var param = {"docs": docs }; res.json(r); }); });
Vue コンポーネント
new
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/new.vue
index
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/Index.vue
show
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/show.vue
edit
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/edit.vue