고정 헤더 영역
상세 컨텐츠
본문
package controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import dao.CashDAO;
import vo.CashVO;
@Controller
public class CashController {
CashDAO cash_dao;
public CashController(CashDAO cash_dao) {
System.out.println("Controller 구도오옹ㅇ");
this.cash_dao = cash_dao;
}
@RequestMapping(value= {"/", "/list.do"})
public String list(Model model) {
List<CashVO> list = cash_dao.select();
model.addAttribute("m_list", list);
return "/WEB-INF/views/cash/cash_list.jsp";
}
@RequestMapping("/delete.do")
public String delete(int idx) { // visit_list.jsp에서 idx를 받고
cash_dao.delete(idx);// dao로 idx를 보낸다
return "redirect:list.do";
}
}
package dao;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import vo.CashVO;
public class CashDAO {
SqlSession sqlSession;
public CashDAO (SqlSession sqlSession) {
this.sqlSession = sqlSession;
System.out.println("-- DeptDAO --");
System.out.println("sql : " + this.sqlSession);
}
public void setSqlSession(SqlSession sqlSession) {
this.sqlSession = sqlSession;
}
public List<CashVO> select() {
List<CashVO> list = sqlSession.selectList("cash.cash_list");
return list;
}
// 게시글 삭제
public int delete(int idx) { // controller에서 보낸 idx를 받음
return sqlSession.delete("cash.cash_delete", idx);
}
}
cash.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cash">
<!-- 부서 목록 조회 -->
<select id="cash_list" resultType="vo.CashVO">
select * from cashbook
</select>
<delete id="cash_delete" parameterType="int">
delete from cashbook where idx =#{idx}
</delete>
</mapper>
package vo;
public class CashVO {
private int income, expense, idx;
public int getIdx() {
return idx;
}
public void setIdx(int idx) {
this.idx = idx;
}
private String month;
public int getIncome() {
return income;
}
public void setIncome(int income) {
this.income = income;
}
public int getExpense() {
return expense;
}
public void setExpense(int expense) {
this.expense = expense;
}
public String getMonth() {
return month;
}
public void setMonth(String month) {
this.month = month;
}
}
servlet-context.xml
<resources mapping="/resources/**" location="/resources/" />
<beans:bean id="cash_controller" class="controller.CashController">
<beans:constructor-arg ref="cash_dao" />
</beans:bean>
cash_list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Book</title>
<link rel="shortcut icon" type="image/x-icon" href="SO.png">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="/vs/resources/js/httpRequest.js"></script>
<script type="text/javascript">
/* 삭제버튼 클릭 */
function del() {
location.href='delete.do?idx='+f.idx.value;
}//del()
</script>
</head>
<body>
<div id="app">
가계부 <br>
<table border="1">
<tr>
<th>순서</th>
<th>월</th>
<th>수입</th>
<th>지출</th>
</tr>
<c:forEach var="vo" items="${ m_list }">
<tr>
<td>${vo.idx}</td>
<td>${vo.month}</td>
<td>${vo.income}</td>
<td>${vo.expense}</td>
</tr>
</c:forEach>
</table>
<p class="my-header">총 수입금액: {{income_1}}</p>
<p class="my-header">총 지출금액: {{expense}}</p>
<form action='<c:url value="/testPage/insert_data" />' method="post" id="insert_data">
<p>
소득: <input type="text" v-model.trim="addText_1" placeholder="내용" id="cont_1">
<input type="text" v-model.number="income" v-on:keyup.enter="fixIncome" placeholder="금액">
<button v-on:click="fixIncome">수정</button>
</p>
<p>
지출: <input type="text" v-model.trim="addText" placeholder="내용" id="cont">
<input type="text" v-model.number="addPrice" v-on:keyup.enter="addList" placeholder="금액">
<button v-on:click="addList">추가</button>
</p>
</form>
<hr>
<c:forEach var="vo" items="${ m_list }">
<form>
<!-- DataBase 시작 -->
<li>
<span style="color:#6262DC">수입</span> 금액 : <span style="color:#6262DC">${vo.income}</span>입니다.
<input type="button" value="삭제" onclick="del();">
</li>
<!-- DataBase 끝 -->
<div v-for="(item, index) in myArray_1">
<ul>
<li><span style="color:#6262DC">수입</span> 내용은 {{item.content_1}}이고, 금액은 <span style="color:#6262DC">{{item.price_1}}</span>입니다.
<button v-on:click="removeList_1(index)">삭제</button></li>
</ul>
</div>
<!-- DataBase 시작 -->
<li>
<span style="color:#CF5A5A">지출</span> 금액 : <span style="color:#CF5A5A">${vo.expense}</span>입니다.
<input type="button" value="삭제" onclick="del();">
</li>
<!-- DataBase 끝 -->
<div v-for="(item, index) in myArray">
<ul>
<li><span style="color:#CF5A5A">지출</span> 내용은 {{item.content}}이고, 금액은 <span style="color:#CF5A5A">{{item.price}}</span>입니다.
<button v-on:click="removeList(index)">삭제</button></li>
</ul>
</div>
</form>
</c:forEach>
</div>
<hr>
<div id="barchart_material"></div>
<script>
// 그래프
var orgdata = [
['Year', 'Income', 'Expenses', 'Profit']
];
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(orgdata);
var options = {
chart: {
title: 'My account book',
subtitle: 'income, Expenses, and Profit',
},
bars: 'horizontal', // Required for Material Bar Charts.
width: 700,
height: 200
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
//----------------------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
totalPrice: 0,
addText:'',
addPrice:0,
myArray:[],
myArray_1:[],
chartArray:orgdata,
income: 0,
},
computed:{
expense: function(){
var s = 0;
for(var i=0; i<this.myArray.length; i++){
s += this.myArray[i].price;
}
return s;
},
income_1: function(){
var s = 0;
for(var i=0; i<this.myArray_1.length; i++){
s += this.myArray_1[i].price_1;
}
return s;
},
profit: function(){
return this.income_1 - this.expense;
}
},
// <div v-for="(item, index) in myArray">
// <ul>
// <li>내용은 {{item.content}}이고, 금액은 {{item.price}}입니다.
// <button v-on:click="removeList(index)">삭제</button></li>
// </ul>
// </div>
methods:{
addList: function(){
if(isNaN(this.addPrice)){
alert("숫자를 입력하세요.");
return;
}
this.myArray.push({content:this.addText, price:this.addPrice});
this.addText = '';
this.addPrice = 0;
document.getElementById('cont').focus();
this.chartRefresh();
},
removeList: function(idx){
this.myArray.splice(idx,1); // 소득에서 지출을 뺀 값이 그래프에 나오지 않음 내용은 나옴
},
removeList_1: function(idx){
this.myArray_1.splice(idx,1); // 소득에서 지출을 뺀 값이 그래프에 나오지 않음 내용은 나옴
},
fixIncome: function(){
this.myArray_1.push({content_1:this.addText_1, price_1:this.income});
this.addText_1 = '';
this.income = 0;
document.getElementById('cont_1').focus();
this.chartRefresh(); // 소득의 수정 버튼, income 초기화
},
chartRefresh: function(){
//초기화
this.chartArray.splice(1,1);
//차트 그리기
var ch = ['이번달', this.income_1, this.expense, this.profit];
this.chartArray.push(ch);
drawChart();
document.getElementById('barchart_material').style.display = "block";
}
}
})
</script>
</body>
</html>
'Framework > Spring' 카테고리의 다른 글
| Spring 부서목록 (select 만 있음) (0) | 2022.09.13 |
|---|---|
| Spring visit 방명록 (0) | 2022.09.13 |
| Spring 부서목록 코드 (0) | 2022.09.07 |
| Spring 부서목록 파일 정리 (1) | 2022.09.07 |
| Spring 개념, Sevlet JSP Spring 차이 (1) | 2022.09.07 |
