CMD> nodemon --inspect ./bin/www
//조회 : await this.axios.get(url, {headers:headers});
//추가 : await this.axios.post(url, body, {headers:headers});
//수정 : await this.axios.put(url, body, {headers:headers});
//삭제 : await this.axios.delete(url, {headers:headers, data:{}});
// 파일명 : item.js
var express = require('express');
var router = express.Router();
// CMD> npm i mongodb --save
const db = require('mongodb').MongoClient;
// config/db.js 파일의 내용 가져오기
const DBURL = require('../config/db').mongodbURL;
const DBNAME = require('../config/db').mongodbDB;
// CMD> npm i multer --save
const multer = require('multer');
// 특정폴더에 파일을 보관 or 메모리(DB에 저장)
const upload = multer({storage:multer.memoryStorage()});
/
db.sequence.insert([
{_id : 'SEQ_BOARD_NO', seq : 1},
{_id : 'SEQ_BOARDREPLY_NO', seq : 1},
{_id : 'SEQ_ITEM_NO', seq : 10001}
]);
/
// 물품등록 : http://localhost:3000/item/insert
// 이미지1, 물품코드(X), 물품명, 물품내용, 물품가격, 재고수량, 등록일(X)
router.post('/insert', upload.single("file"), async function(req, res, next) {
try {
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("sequence");
const result = await coll.findOneAndUpdate(
{ _id:'SEQ_ITEM_NO' }, { $inc : { seq : 1} }
);
//console.log(result.value.seq);
const obj = {
_id : result.value.seq, // 물품번호(자동부여)
name : req.body.name, //물품명, 물품내용, 가격, 수량
content : req.body.content,
price : req.body.price ,
quantity : req.body.quantity,
filename : req.file.originalname, //파일명
filetype : req.file.mimetype,
filedata : req.file.buffer,
filesize : req.file.size,
regdate : new Date()
};
const coll1 = dbConn.db(DBNAME).collection("item");
const result1 = await coll1.insertOne(obj); //{}
if( result1.insertedId > 0 ){
return res.send({status:200});
}
return res.send({status:0});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 이미지(1개) : http://localhost:3000/item/image?no=2
router.get('/image', async function(req, res, next) {
try {
const no = Number(req.query.no);
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
const result = await coll.findOne(
{ _id : no }, //조건
{ projection : {filedata:1, filetype:1} } //필요한 항목만
);
console.log(result);
res.contentType(result.filetype);// json ->image/jpeg
return res.send(result.filedata.buffer);
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품목록 : http://localhost:3000/item/select?page=1
router.get('/select', async function(req, res, next) {
try {
const page = Number(req.query.page);
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
// 물품코드, 물품명, 가격, 수량, 등록일
const result = await coll.find(
{}, // 조건
{ projection : {_id:1, name:1, price:1, quantity:1, regdate:1} } // 가져올 항목만
)
.sort({_id:-1}) // 1 오름차순, -1 내림차순
.skip((page-1) * 10 ) // 생략할 개수
.limit(10) // 10개 까지만
.toArray();
const total = await coll.countDocuments({});
return res.send({status:200, result:result, total:total});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품1개조회(이미지포함) : http://localhost:3000/item/selectone?code=10001
router.get('/selectone', async function(req, res, next) {
try {
const code = Number(req.query.code);
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
const result = await coll.findOne(
{_id : code}, //조건
{projection : {filename:0, filedata:0, filesize:0, filetype:0 } } //필요한 항목만
);
console.log(result); // 확인
// 이미지 데이터를 전달X,
// 이미지를 볼수있는 URL정보 전달
result['image'] = '/item/image?no=' + code + '&dt=' + new Date().getTime();
return res.send({status:200, result: result});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품삭제 : http://localhost:3000/item/delete?code=10004
router.delete('/delete', async function(req, res, next) {
try {
const code = Number(req.query.code);
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
const result = await coll.deleteOne({_id:code});
if(result.deletedCount === 1){
return res.send({status:200});
}
return res.send({status:0});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품수정 : http://localhost:3000/item/update?code=10004
// query + body
router.put('/update', upload.single("file"),
async function(req, res, next) {
try {
const code = Number(req.query.code);
// 물품명, 물품내용, 물품가격, 재고수량, 이미지
// const 상수 처음만든 값에 +, - 안됨.
// let, var 변수 처음만든값에 +, - 가능함.
let obj = {
name : req.body.name,
content : req.body.content,
price : req.body.price,
quantity : req.body.quantity
};
if(typeof req.file !== 'undefined') {
obj['filename'] = req.file.originalname;
obj.filetype = req.file.mimetype;
obj.filedata = req.file.buffer;
obj.filesize = req.file.size;
}
console.log(code);
console.log(obj);
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
const result = await coll.updateOne(
{ _id : code }, //조건
{ $set : obj } //실제변경할내용
);
console.log(result);
if(result.modifiedCount === 1) {
return res.send({status:200});
}
return res.send({status:0});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품일괄등록 : http://localhost:3000/item/insertbatch
router.post('/insertbatch', upload.array("file"),
async function(req, res, next) {
try {
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("sequence");
const count = req.body.name.length;
let arr = []; //[ {obj},{obj} ]
for(let i=0; i<count; i++){ //0 1
const result = await coll.findOneAndUpdate(
{ _id:'SEQ_ITEM_NO' }, { $inc : { seq : 1} }
);
const obj = {
_id : result.value.seq,
name : req.body.name[i],
content : req.body.content[i],
price : req.body.price[i],
quantity : req.body.quantity[i],
filename : req.files[i].originalname,
filedata : req.files[i].buffer,
filetype : req.files[i].mimetype,
filesize : req.files[i].size,
regdate : new Date()
};
arr.push(obj);
}
const coll1 = dbConn.db(DBNAME).collection("item");
const result1 = await coll1.insertMany(arr); //[{},{}]
console.log(result1);
if(result1.insertedCount === count){
return res.send({status : 200});
}
return res.send({status:0});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품일괄삭제 : http://localhost:3000/item/deletebatch
router.delete('/deletebatch', async function(req, res, next) {
try {
// req.body => {code : [100031, 100032, 10033]}
// req.body.code[0], req.body.code[1]
// { code : 100031 } [ {code : 10031 } ]
// [ {code: 10031}, {code: 10032}, {code: 10033} ]
// req.body[0].code req.body[1].code
console.log(req.body);
let arr = []; //[{},{},{}] [1,2,3]
for(let i=0; i< req.body.length; i++) { // 0 1 2
arr.push( req.body[i].code );
}
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
const result = await coll.deleteMany({
_id : { $in : arr }
});
console.log(result);
// { acknowledged: true, deletedCount: 3 }
if(result.deletedCount === req.body.length){
return res.send({status:200});
}
return res.send({status:0});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
// 물품일괄수정 : http://localhost:3000/item/updatebatch
router.put('/updatebatch', upload.array("file"), async function(req, res, next){
try {
console.log(req.body);
const count = req.body.name.length;
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
let cnt = 0; //변경한 라인의 숫자
for(let i=0; i<count; i++) { // 0 1
// 변경할 내용들
let obj = {
name : req.body.name[i],
content : req.body.content[i],
price : req.body.price[i],
quantity : req.body.quantity[i]
};
// req.files ==> []
if(typeof req.files[i] !== 'undefined'){
obj['filename'] = req.files[i].originalname;
obj['filedata'] = req.files[i].buffer;
obj['filetype'] = req.files[i].mimetype;
obj.filesize = req.files[i].size;
}
const result = await coll.updateOne(
{ _id : Number(req.body.code[i]) },
{ $set : obj }
);
console.log(result);
cnt += result.modifiedCount; // cnt에 누적하기
}
if(cnt === count){
return res.send({status:200});
}
return res.send({status:0});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
} });
// 체크항목 조회하기 : http://localhost:3000/item/selectcheck
// {"chks":[10037,10038,10039]} => req.body.chks[0]
// [{"chks":10037},{"chks":10038},{"chks":10039}] => req.body[0].chk
router.post('/selectcheck', async function(req, res, next) {
try {
const chks = req.body.chks; //[10037, 10038, 10039]
console.log(chks);
const dbConn = await db.connect(DBURL);
const coll = dbConn.db(DBNAME).collection("item");
// { _id : {$eq:10037} } === { _id : 10037} EQ
// { _id : {$ne:10039} } NE
// { _id : {$in:[10037, 100038, 10039]} } IN
// { $or : [{_id:10037}, {_id:100038}] } OR
// { $and : [{_id:10037}, {name:'aaa'}] } AND
// { _id : {$gt:10030} } >
// { _id : {$gte:10030} } >=
// { _id : {$lt:10030} } <
// { _id : {$lte:10030} } <=
const result = await coll.find(
{ _id :{$in: chks } },
{ projection: {filedata:0,filename:0,filetype:0,filesize:0} }
)
.sort({_id : -1}).toArray();
//[{0},{1},{2}] => result[0]['image']
// for(let i=0; i<result.length; i++){
// result[i]['image'] = '/item/image?no='+result[i]._id;
// }
for(let tmp of result){ //[{tmp},{tmp}]
tmp['image'] = '/item/image?no=' + tmp._id;
}
console.log(result); //key가 7개인 object로 변경
return res.send({status:200, result:result});
}
catch(err) {
console.error(err);
return res.send({status:-1, result : err});
}});
module.exports = router;
======================================
CMD> npm run serve
//파일명 : routes/index.js
// node_module로 부터 필요한 라이브러리 import
import { createWebHashHistory, createRouter } from "vue-router";
// 추가하고자 하는 컴포넌트들..
import Home from '@/components/Home.vue';
import Join from '@/components/Join.vue';
import Login from '@/components/Login.vue';
import Logout from '@/components/Logout.vue';
import Mypage from '@/components/Mypage.vue';
import Board from '@/components/Board.vue';
import BoardOne from '@/components/BoardOne.vue';
import BoardWrite from '@/components/BoardWrite.vue';
import Seller from '@/components/Seller.vue';
import ItemInsert from '@/components/ItemInsert.vue';
import ItemInsertBatch from '@/components/ItemInsertBatch.vue';
import ItemContent from '@/components/ItemContent.vue';
import ItemUpdateBatch from '@/components/ItemUpdateBatch.vue';
// URL과 컴포넌트의 연결
const routes = [
{path : '/', redirect:'/home'},
{path : '/home', name:'Home', component:Home},
{path : '/join', name:'Join', component:Join},
{path : '/login', name:'Login', component:Login},
{path : '/logout', name:'Logout', component:Logout},
{path : '/mypage', name:'Mypage', component:Mypage},
{path : '/board', name:'Board', component:Board},
{path : '/boardone', name:'BoardOne', component:BoardOne},
{path : '/boardwrite', name:'BoardWrite', component:BoardWrite},
{path : '/seller', name:'Seller', component:Seller},
{path : '/iteminsert', name:'ItemInsert', component:ItemInsert},
{path : '/iteminsertbatch', name:'ItemInsertBatch', component:ItemInsertBatch},
{path : '/itemcontent', name:'ItemContent', component:ItemContent},
{path : '/itemupdatebatch', name:'ItemUpdateBatch', component:ItemUpdateBatch},
];
// 실제 라우트 적용
const router = createRouter({
history : createWebHashHistory(),
routes,
});
// 프로젝트에서 적용하기 위해
export default router;
//파일명 : Seller.vue
<div>
<el-card shadow="always">
<h4>판매자</h4>
<hr />
{{ items }}
<hr />
<p>물품목록</p>
<router-link to="iteminsert" style="margin-right:5px">
<el-button size="small" type="primary" >물품등록</el-button>
</router-link>
<router-link to="iteminsertbatch" style="margin-right:5px">
<el-button size="small" type="primary">물품일괄등록</el-button>
</router-link>
<el-button size="small" type="primary" @click="handleDeleteBatch">물품일괄삭제</el-button>
<el-button size="small" type="primary" @click="handleUpdateBatch">물품일괄수정</el-button>
<el-table :data="items" size="mini" style="width: 100%;">
<el-table-column label="체크" width="180">
<template #default="scope">
<div>
<el-checkbox v-model="items[scope.$index].chk1" />
</div>
</template>
</el-table-column>
<el-table-column label="코드" width="180">
<template #default="scope">
<div @click="handlePage(scope.row._id)" style="cursor:pointer;">
{{scope.row._id}}
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="물품명" width="180" />
<el-table-column prop="price" label="가격" />
<el-table-column prop="quantity" label="재고수량" />
<el-table-column prop="regdate" label="등록일" />
<el-table-column fixed="right" label="버튼" width="220">
<template #default="scope">
<el-button size="small" type="danger" @click.prevent="deleteRow(scope.$index, scope.row)">
삭제
</el-button>
<el-button size="small" type="primary" @click.prevent="updateRow(scope.$index, scope.row)">
수정
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange"></el-pagination>
</el-card>
<!-- 별도 위치 -->
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
<span>
<img :src="itemOne.image" style="width:100px" />
<input type="file" ref="file" @change="handleImage" />
</span>
<p><input type="text" v-model="itemOne.name" /></p>
<p><textarea v-model="itemOne.content"></textarea></p>
<p><input type="text" v-model="itemOne.price" /></p>
<p><input type="text" v-model="itemOne.quantity" /></p>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleUpdateAction">수정</el-button>
<el-button @click="dialogVisible = false">닫기</el-button>
</span>
</template>
</el-dialog>
</div>// 파일명 : ItemUpdateBatch.vue
<div>
<el-card shadow="always">
<h3>물품일괄수정</h3>
<hr />
{{code}}
<el-button size="small" type="primary" @click="handleUpdateBatchAction">물품일괄수정</el-button>
<el-table :data="items" style="width: 100%;" size="mini" >
<el-table-column label="번호" width="120">
<template #default="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column label="물품명" width="120">
<template #default="scope">
<el-input size="mini" v-model="items[scope.$index].name"></el-input>
</template>
</el-table-column>
<el-table-column label="물품내용">
<template #default="scope">
<el-input size="mini" v-model="items[scope.$index].content"></el-input>
</template>
</el-table-column>
<el-table-column label="가격" width="120">
<template #default="scope">
<el-input size="mini" v-model="items[scope.$index].price"></el-input>
</template>
</el-table-column>
<el-table-column label="수량" width="80">
<template #default="scope">
<el-input size="mini" v-model="items[scope.$index].quantity"></el-input>
</template>
</el-table-column>
<el-table-column label="이미지" width="340">
<template #default="scope">
<img :src="items[scope.$index].image" style="width:50px"/>
<input type="file" @change="handleImage($event, scope.$index)" />
</template>
</el-table-column>
</el-table>
</el-card>
</div>