- 백엔드
파일명 models/item.js
// npm i mongoode --save
var mongoose = require('mongoose');
// npm i --save mongoose-sequence
const AutoIncrement = require('mongoose-sequence')(mongoose);
var Schema = mongoose.Schema;
// 번호 물품코드(100-001-111, 100-002-111), 물품명, 가격, 수량, 등록일
var itemSchema = new Schema({
_id : Number,
code1 : { type : String, default : '' },
code2 : { type : String, default : '' },
code3 : { type : String, default : '' },
name : { type : String, default : '' },
price : { type : Number, default : 0 },
quantity : { type : Number, default : 0 },
regdate : { type : Date , default : Date.now}
});
// 시퀀스 사용 설정
itemSchema.plugin(AutoIncrement, {id:'SEQ_ITEM8_ID', inc_field:'_id'} )
module.exports = mongoose.model('item8', itemSchema);파일명 routes/item.js
var express = require('express');
var router = express.Router();
// model, import
var Item = require('../models/item');
// 물품등록
// 127.0.0.1:3000/item/insert
// {"code1":"101","code2":"011","code3":"001","name":"asd","price":10,"quantity":10}
router.post('/insert', async function(req, res, next) {
try {
var item = new Item();
item.code1 = req.body.code1;
item.code2 = req.body.code2;
item.code3 = req.body.code3;
item.name = req.body.name;
item.price = Number(req.body.price);
item.quantity = Number(req.body.quantity);
const result = await item.save();
console.log("result =========>> ");
console.log(result);
if(result._id !== null){
return res.send({status:200});
}
return res.send({status:0});
} catch (e) {
console.error(e);
res.send({status: -1});
}
});
// 물품 목록
// 127.0.0.1:3000/item/select
router.get('/select', async function(req, res, next){
try {
const query = {};
const result = await Item.find(query).sort({"_id":-1});
res.send({status: 200, result:result});
} catch (e) {
console.error(e);
res.send({status: -1});
}
});
// 대분류별 등록물품 개수
// 127.0.0.1:3000/item/groupcode1
router.get('/groupcode1', async function(req, res, next){
try {
const result = await Item.aggregate([
{ $project:{ code1:1, price:1, quantity:1 } },
{
$group : {
_id : '$code1', // 그룹기준
count : {$sum :1},
pricetotal : {$sum:'$price'},
quantitytotal:{$sum:'$quantity'}
}
}
]).sort({"_id": 1});
res.send({status: 200, result:result});
} catch (e) {
console.error(e);
res.send({status: -1});
}
});
// 중분류
// 127.0.0.1:3000/item/groupcode2?code=011
router.get('/groupcode2', async function(req, res, next){
try {
const code2 = req.query.code;
const result = await Item.aggregate([
{ $match : { code2 : code2} },
{ $project:{ code2:1, price:1, quantity:1 } },
{
$group : {
_id : '$code2', // 그룹기준
count : {$sum :1},
pricetotal : {$sum:'$price'},
quantitytotal:{$sum:'$quantity'}
}
}
]);
res.send({status: 200, result:result});
} catch (e) {
console.error(e);
res.send({status: -1});
}
});
// 소분류
// 127.0.0.1:3000/item/groupcode3?code=001
router.get('/groupcode3', async function(req, res, next){
try {
const code3 = req.query.code;
const result = await Item.aggregate([
{ $match : { code3 : code3 } },
{ $project : { code3 : 1, price : 1, quantity : 1 } },
{
$group : {
_id : '$code3', // 그룹기준
count : {$sum :1},
pricetotal : {$sum:'$price'},
quantitytotal:{$sum:'$quantity'}
}
}
]);
res.send({status: 200, result:result});
} catch (e) {
console.error(e);
res.send({status: -1});
}
});
module.exports = router;
파일명 app.js
등록
var itemRouter = require('./routes/item');
app.use('/item', itemRouter);- 프론트
파일명 vue.config.js
파일에 등록
'/item' : { //rest
target:'http://localhost:3000',
changeOrigin :true,
logLevel : 'debug'
},파일명 components/ItemView.vue
<template>
<div>
<h3>Item</h3>
<div>
코드 : <input type="text" v-model="state.code" placeholder="000-000-000"><br />
이름 : <input type="text" v-model="state.name" placeholder=""><br />
가격 : <input type="text" v-model="state.price" placeholder="숫자만"><br />
수량 : <input type="text" v-model="state.quantity" placeholder="숫자만"><br />
<button @click="handleInsert">등록하기</button>
</div>
<hr/>
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>대분류</th>
<th>중분류</th>
<th>소분류</th>
<th>이름</th>
<th>가격</th>
<th>수량</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in state.items" :key="tmp">
<td>{{tmp._id}}</td>
<td>{{tmp.code1}}</td>
<td>{{tmp.code2}}</td>
<td>{{tmp.code3}}</td>
<td>{{tmp.name}}</td>
<td>{{tmp.price}}</td>
<td>{{tmp.quantity}}</td>
<td>{{tmp.regdate}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
import { reactive, onMounted, getCurrentInstance } from 'vue';
export default {
setup () {
// main.js에 등록했던 변수 가져오기
const app = getCurrentInstance();
const socket = app.appContext.config.globalProperties.$socket;
console.log(socket);
const state = reactive({
code : '',
name : '',
price : '',
quantity : '',
});
// 물품목록 받아오기
const handleData = async() =>{
const url = `/item/select`;
const headers = {"Content-Type":"application/json"};
const response = await axios.get(url, {headers});
console.log(response.data);
if(response.data.status === 200){
state.items = response.data.result;
}
}
const handleInsert = async() => {
// 현재 state.code => 000-000-000
const tmp = state.code.split("-")
console.log(tmp); // tmp[0], tmp[1], tmp[2]
const url = `/item/insert`;
const headers = {"Content-Type":"application/json"};
const body ={
code1 : tmp[0],
code2 : tmp[1],
code3 : tmp[2],
name : state.name,
price : state.price,
quantity : state.quantity
}
const response = await axios.post(url, body, {headers});
console.log(response.data);
if(response.data.status === 200){
alert('물품 등록이 완료 되었습니다.');
// 이 위치에서 등록했음을 통지
socket.emit('publish',{ data : { userid : 'aaa', username : 'insert' } } );
handleData(); // 목록을 가져와서 state.items에 추가
}
}
onMounted(() => {
handleData();
});
return { state, handleInsert }
}
}
</script>
<style lang="scss" scoped>
</style>
당신을 한 줄로 소개해보세요