ataTable.addColumn('number', '날짜');구글 차트를 이용한 데이터 시각화를 하려고 한다.
날자 to 날자를 선택하면
해당 기간에 쓴글을 표로 보여주고 표를 토대로
구글차트를 이용하여 데이터시각화를 보여주려고 한다.
우선 가장 기본이 되는 sql문 부터 보자 .
<select id="admin_findDate" resultType="hashmap">select board_type,count(board_type)as count from job_board where board_regdate
BETWEEN TO_DATE(#{date1}, 'MM-DD-YY') and TO_DATE(#{date2}, 'MM-DD-YY')
GROUPby board_type
</select>
var likeval = ${like};
let board_no = ${Detail.freeboard_no};
let user_no = '${login.user_id}';
if(likeval > 0){
console.log(likeval + "좋아요 누름");
$('.LikeBtn').html("좋아요 취소");
$('.LikeBtn').click(function() {
$.ajax({
type :'post',
url : '<c:url value ="/FreeBoard/likeDown"/>',
contentType: 'application/json',
data : JSON.stringify(
{
"board_no" : board_no,
"user_no" : user_no
}
),
success : function(data) {
alert('취소 성공');
}
})// 아작스 끝
})
}else{
console.log(likeval + "좋아요 안누름")
console.log(user_no);
$('.LikeBtn').click(function() {
$.ajax({
type :'post',
url : '<c:url value ="/FreeBoard/likeUp"/>',
contentType: 'application/json',
data : JSON.stringify(
{
"board_no" : board_no,
"user_no" : user_no
}
),
success : function(data) {
alert('성공염');
}
})// 아작스 끝
})
일단 모든 자바스크립트를 보여주었지만 위에 언급한대로
0이 오면 좋아요 버튼을
1이 오면 좋아요 취소 버튼을 보여주고
그에 따라 동작 하게 하면 된다.
이제 좋아요를 구현해보자
먼저 매퍼 부터 구현하자.
<insert id="likeUp">
insert into vegan_like (like_no ,board_no , user_no, freeboard_like)
values((select * from (select max(like_no)+1from vegan_like) next), #{board_no},#{user_no},1)
</insert>
이렇게 인서트로 좋아요 버튼을 누르면 1을 눌러 좋아요를 카운트 업을 시켜준다.
반대로 취소는
<delete id="likeDown">
deletefrom vegan_like where board_no = #{board_no} and user_no = #{user_no}
</delete>
딜리트 이다.
컨트롤러를 보자
@ResponseBody
@PostMapping("/likeUp")
public voidlikeup(@RequestBody LikeVO vo) {
System.out.println("컨트롤러 연결 성공");
System.out.println(vo.getBoard_no());
System.out.println(vo.getUser_no());
service.likeUp(vo.getBoard_no(), vo.getUser_no());
}
@ResponseBody
@PostMapping("/likeDown")
public voidlikeDown(@RequestBody LikeVO vo) {
System.out.println("좋아요 싫어요!");
service.likeDown(vo.getBoard_no(), vo.getUser_no());
}
좋아요 싫어요 모두 같은 코드가서 딱히 설명한 것이 없다.
이렇게 코드를 짜면 대략 좋아요 기능이 완성 되었을 것이다.
좋아요 버튼을 누르면
이렇게 좋아요 카운트가 올라가고 좋아요 취소버튼으로 바뀐다.
그 후 좋아요 취소 버튼을 누르면
다시 기존대로 변경된다.
댓글 및 조아요 제목에 보이기
이제 메인에 좋아요를 뿌려보자
우선 매퍼를 수정해주자
기존 리스트 매퍼에서
스칼라 서브쿼리를 이용하여 좋아요 및 댓글 수를 카운트 해보자
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select *,
(select count(*) from vegan_comment where bno = v.freeboard_no) as com_cnt,
(select count(*) from vegan_like where board_no = v.freeboard_no) as like_cnt
from Vegan_freeBoard v
<include refid="search" />
order by freeboard_no desc
limit #{pagecnt} , #{countPerPage}
</select>
서브 쿼리로 댓글 개수는 com_cnt
좋아요 개수는 like_cnt로 선언 했다.
그리고 boardVO객체에 위에 cnt들을 추가 해주자
private int freeboard_no;
private String freeboard_title;
private String freeboard_writer;
private String freeboard_content;
private int freeboard_hit;
private int freeboard_like;
private String uploadpath;
private String fileloca;
private String filename;
private String ilerealname; // 파일리얼네임
private Timestamp freeboard_regDate;
private int com_cnt;
private int like_cnt;
<select id="adminUserList2"
resultMap="UserInfo">
select u.*,
(select count(*) from job_board where board_writer = u.user_id) as board_cnt,
(select count(*) from job_comment where com_writer = u.user_id) as comment_cnt
from user_info u
order by u.user_no desc
</select>
<beans:bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 최대 업로드 가능한 바이트 크기(바이트 단위), -1은 제한이 없음을 의미 -->
<beans:property name="maxUploadSize" value="10485760" />
<!-- 업로드 요청을 변환할 때 사용할 문자 인코딩 방식 -->
<beans:property name="defaultEncoding" value="utf-8" />
</beans:bean>
<sql id="search">
<if test="condition == 'freeboard_title'">
WHERE freeboard_title LIKE CONCAT('%',#{keyword},'%')
</if>
<if test="condition == 'freeboard_content'">
WHERE freeboard_content LIKE CONCAT('%',#{keyword},'%')
</if>
<if test="condition == 'freeboard_writer'">
WHERE freeboard_writer LIKE CONCAT('%',#{keyword},'%')
</if>
</sql>
<!-- 토탈 -->
<select id="getTotal" resultType="int">
SELECT COUNT(*)
FROM Vegan_freeBoard
<include refid="search" />
</select>
<select id="getFreeBoard" resultType="com.vegan.recipe.freeBoard.freeboardVO">
select * from Vegan_freeBoard
<include refid="search" />
order by freeboard_no desc
limit #{pageNum} , #{countPerPage}
</select>
토탈을 구해주고 리밋으로 페이지넘과 페이지 수를 전달해준다.
컨트롤러 부분
@GetMapping("/freeList")public String getFree(Model model, PageVO vo){
PageCreate pc = new PageCreate();
pc.setPaging(vo);
pc.setArticleTotalCount(service.getTotal(vo));
System.out.println(pc);
model.addAttribute("freeList", service.getFreeBoard(vo));
model.addAttribute("pc", pc);
return"FreeBoard/freeList";
}
<select id="adminUserList2"
resultMap="UserInfo">
select u.*,
(select count(*) from job_board where board_writer = u.user_id) as board_cnt,
(select count(*) from job_comment where com_writer = u.user_id) as comment_cnt
from user_info u
order by u.user_no desc
</select>
매퍼에서 이렇게 가져올 경우
VO도 수정해 주어야 한다 서브쿼리로 board_cnt와 comment_cnt가 추가 되어
