이 프로젝트는 마침내 끝나기 때문에 등록 기능을 수행하지 않습니다. 등록 기능에 대한 또 다른 기사에서 등록 양식 검증을 자세히 소개했습니다. 이 프로젝트에 기능을 직접 추가하고 관련 점프를 수정할 수 있으므로 더 이상하지 않습니다. 또한 현재이 프로젝트에는 액션 계층 및 서비스 계층 만 있습니다. 아직 DAO 층을 추출하지 않았습니다. 이 보고서를 작성한 후 DAO 계층을 추출한 다음 전체 프로젝트를 요약했습니다. 소스 코드를 업로드 할 수 있습니다. 그 당시에 다운로드 할 수 있습니다 ~
이 섹션은 주로 마지막 기능을 만듭니다. Jschart를 제품 판매 보고서를 표시하는 도구로 사용합니다. JSCHART는 보고서 제작에 매우 유용한 도구입니다. 사용하기 쉬운 이유는 공식적인 사례가 매우 잘 이루어 졌기 때문입니다. 그래픽 인터페이스에서 작동 한 후에 해당 코드를 직접 생성 할 수 있습니다. 우리는 그것을 수정 한 다음 우리 자신의 프로젝트의 논리에 넣습니다.
1. JSCHART 도구 소개
JSCHART는 훌륭한 보고서 제작 도구입니다. 생성 된 코드는 JS이므로 프론트 엔드 JSP 페이지를 사용하기에 좋은 도구입니다. JSCHART의 공식 웹 사이트를보고 열면 온라인 편집을 클릭 한 다음 보고서를 선택하고 클릭하여 입력 할 수 있습니다. 다음과 같이 온라인으로 원하는 차트 유형과 형식을 편집 할 수 있습니다. 모두 위의 JS 코드를 생성하는 버튼을 클릭 한 다음 해당 코드를 JSP에 복사 할 수 있습니다. 다음은 내가 생성 한 JS 코드입니다 (유용한 부분을 가로 채기 만하면).
<div id = "Chart_container">로드 차트 ... </div> <script type = "text/javaScript"> var mychart = new jschart ( 'chart_container', bar ',' '); mychart.setDataArray ([ '#44a622', '#a7b629', '#cad857', '#e4db7b', '#ecde49', '#ec9649', '#d97431', '#d95531']); mychart.colorize (colorarr.slice (0, data.length)); mychart.setsize (100*$ ( "#number"). val (), 400); mychart.setbarvalues (false); mychart.setbarspacingratio (45); mychart.setbaropacity (1); mychart.setbarborderwidth (1); MyChart.SetTitle ( 'Mall Sales Report'); mychart.settitlefontsize (10); mychart.settitleColor ( '#607985'); mychart.setaxisValuesColor ( '#607985'); mychart.setaxisnamex ( '제품 이름', false); mychart.setaxisnamey ( 'sales', true); mychart.setgridopacity (0.8); mychart.setaxispaddingleft (50); mychart.setaxispaddingbottom (40); mychart.set3d (true); mychart.draw (); </script>
이런 식으로, 우리는 차트를 생성하는 JS 코드가 있습니다. 전체 프로세스를 분석하겠습니다. 먼저 프론트 엔드 JSP 페이지는 AJAX 요청을 보내고 백엔드가 데이터베이스에서 해당 데이터를 가져옵니다. 우리는 여기에서 판매 된 제품과 해당 판매 수량 만 검색하면됩니다. 즉, 라인 항목 테이블에서 가져와야합니다. 또한 프론트 엔드는 매개 변수를 전달하여 백엔드에 얼마나 많은 데이터를 얻을 수 있는지 알려야합니다. 배경을 가져 오면 데이터가 JSON 형식으로 전경으로 전송되며 전경은 위의 JS 코드 (물론 해당 수정이 필요)를 실행하여 데이터를 보고서 형태로 표시합니다. 이 과정에 따르면 먼저 백엔드를 수행하십시오.
2. 배경 쿼리의 논리를 완료하십시오
먼저, 쿼리 함수는 서비스 계층에서 완료됩니다. 이 쿼리 중에 제품의 제품과 제품 판매량이라는 두 가지 항목이 쿼리됩니다. 코드를 살펴보십시오.
// sorderservice 인터페이스 public interface sorderService 확장베이스 서비스 <Sorder> {// 관련없는 코드 저장 ... // 쿼리 쿼리 쿼리 공개 목록 <BEARGERYSALE (int number);} // sorderServiceimpl 구현 클래스 @SupressWarnings ( "suderService" BaseServiceImpl <Sorder> 구현 SORDERSERVICE {// 관련없는 코드 저장 ... @Override public list <bood> QuerySale (int number) {// 영향을받지 않은 두 항목은 string hql = "select s.name, sum (s.number) S.product.id"; return getsession (). createquery (HQL) // .setFirstresult (0) // .setMaxResults (number) // .list (); }} 그런 다음 작업 부분을 완료합니다.
@controller@scope ( "프로토 타입") public class sorderaction은 baseeaction <Sorder> {public string addsorder () {// 관련없는 코드를 저장합니다 ... // 대중 제품 및 판매 공개 문자열 QuerySale () {list <botort> jsonList = soorderService.querySale (model.getNumber ()); // 쿼리 된 목록을 값 스택의 맨 위에 놓으면 왜 이렇게합니까? 아래의 설명을 참조하십시오. "JSONLIST"를 반환합니다. }} Baseection에는 '목록'객체가 있지만이 객체를 사용할 수는 없습니다. 여기서 jsonlist는 Baseection의 '목록'객체가 아닌 '목록'객체 이므로이 작업에서 '목록'객체를 정의하고 Get 메소드를 구현 한 다음 struts.xml 파일에서 루트를 구성해야합니다. 다음은 더 간단한 방법입니다. struts2 일 때 구성된 루트를 찾을 수없는 경우 값 스택 상단에서 데이터를 꺼내 JSON을 변환합니다. 그래서 우리는 지금 우리가 가지고있는 JSONLIST를 값 스택의 상단에 던지고 구성 파일에 결과를 작성합니다. 그래서 struts.xml은 다음과 같습니다.! [struts.xml] (http://img.blog.csdn.net/2016052613359517)
3. 프론트 엔드 JSP 페이지를 완료하십시오
백그라운드의 논리가 작성되었으며 이제는 배경에서 전송 된 JSON 데이터를 수신 한 후 프론트 데스크의 점프 논리와 논리를 완료해야합니다. Sale.jsp 페이지는 다음과 같습니다.
<%@ page language = "java"import = "java.util.*"pageEncoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 Transitional // en"> <html> <head> <%@ include public/head.jspf "%> src = "$ {shop} /js/jquery-1.11.11.1.1.js"> </script> <script type = "text/javascript"src = "$ {shop} /js/jscharts.js"> </script> <script type = "text/javascript"> $ (function () {click "). [ '#44a622', '#a7b629', '#cad857', '#e4db7b', '#ecde49', '#ecc049', '#ec9649', '#d97431', '#d95531', '#e4db7b'; $ .post ($ ( "#sale"). val (), {번호 : $ ( "#number"). val ()}, function (data) {var mychart = new jschart ( 'Chart_container', $ ( "#type"), ''); mychart.setDataArray (data); mychart.colorize mychart.setsize ( "#number"). mychart.settitlefontsize (10); mychart.settitleColor ( '#607985'); mychart.setaxisValuesColor ( '#607985'); mychart.setaxisnamex ( '제품 이름', false); mychart.setaxisnamey ( 'sales', true); mychart.setgridopacity (0.8); mychart.setaxispaddingleft (50); mychart.setaxispaddingbottom (40); mychart.set3d (true); mychart.draw (); }, "JSON"); }); }); }); </script> </head> <body style = "margin : 10px;"> 보고서 유형을 선택하십시오. </select> type : <select id = "type"> <옵션 값 = "bar"> 열 유형 </옵션> <옵션 value = "line"> 옵션 값 </옵션 </옵션 </옵션 </옵션 </옵션 </옵션 </옵션 </옵션> </selep type = "button"id = "value ="query "> 사용자 선택에 따라 표시 할 수있는 여러 선택 상자가 있습니다. $ .post ();에는 네 가지 매개 변수가 있습니다. 첫 번째는 수신 된 조치를 지정하는 것입니다. 선택 태그로 작성했으며 DOM 요소를 배치하여 직접 얻습니다. 두 번째 매개 변수는 전송 될 매개 변수입니다. 표시 할 번호는 다음과 같습니다. 세 번째 매개 변수는 배경 JSON 데이터를 수신 한 후 실행될 기능입니다. 네 번째 매개 변수는 수신 된 데이터 유형을 지정하는 것입니다. JSON 유형은 다음과 같습니다.
배경 데이터를 수신 한 후 실행 된 기능을 살펴 보겠습니다. 이것은 주로 이전에 자동으로 생성 된 JS 코드입니다. 주로 보고서를 생성해야하지만 아이콘 유형이 사용자가 선택한 유형으로 변경되었으며 표시된 항목의 수도 변경되었습니다. 그러나 이것들은 약간의 약간의 변화이며 큰 문제는 없습니다. 다양한 유형의 아이콘의 디스플레이 효과를 살펴 보겠습니다.
효과는 상당히 좋기 때문에 보고서를 작성 해야하는 친구가있는 경우이 jschart 도구를 사용하는 것이 좋습니다. 매우 유용합니다 ~ 전체 프로젝트에서 기본적으로 많은 글을 썼습니다 ~ 나중에 요약하고 소스 코드를 업로드하겠습니다. 거의 끝날 것입니다.
원본 주소 : http://blog.csdn.net/eson_15/article/details/51506334
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.