ในที่สุดโครงการนี้ก็สิ้นสุดลงดังนั้นฉันจะไม่ทำหน้าที่ลงทะเบียน อีกบทความเกี่ยวกับฟังก์ชั่นการลงทะเบียนได้แนะนำการตรวจสอบแบบฟอร์มการลงทะเบียนโดยละเอียด คุณสามารถเพิ่มฟังก์ชั่นลงในโครงการนี้โดยตรงและแก้ไขการกระโดดที่เกี่ยวข้องดังนั้นฉันจะไม่ทำอีกต่อไป นอกจากนี้ในปัจจุบันโครงการนี้มีเลเยอร์การกระทำและเลเยอร์บริการเท่านั้น ฉันยังไม่ได้สกัดชั้น Dao หลังจากทำรายงานนี้เสร็จแล้วฉันก็ดึงเลเยอร์ DAO แล้วสรุปโครงการทั้งหมด คุณสามารถอัปโหลดซอร์สโค้ด คุณสามารถดาวน์โหลดได้ในเวลานั้น ~
ส่วนนี้ส่วนใหญ่จะสร้างฟังก์ชั่นสุดท้าย: ใช้ JSChart เป็นเครื่องมือในการแสดงรายงานการขายผลิตภัณฑ์ JSChart เป็นเครื่องมือที่มีประโยชน์มากสำหรับการทำรายงาน เหตุผลที่ใช้งานง่ายเป็นเพราะตัวอย่างอย่างเป็นทางการทำได้ดีมาก คุณสามารถสร้างรหัสที่เกี่ยวข้องโดยตรงหลังจากทำงานในอินเตอร์เฟสกราฟิก เราปรับเปลี่ยนแล้ววางไว้ในตรรกะของโครงการของเราเอง
1. บทนำเกี่ยวกับเครื่องมือ JSChart
JSChart เป็นเครื่องมือในการทำรายงานที่ยอดเยี่ยม รหัสที่สร้างขึ้นคือ JS ดังนั้นจึงเป็นเครื่องมือที่ดีสำหรับการใช้หน้า JSP front-end คุณสามารถดูที่เว็บไซต์ทางการของ JSChart คลิกออนไลน์แก้ไขหลังจากเปิดจากนั้นเลือกรายงานและคลิกเพื่อป้อน คุณสามารถแก้ไขประเภทแผนภูมิและรูปแบบที่เราต้องการออนไลน์ดังนี้:! [jschart] (http://img.blog.csdn.net/20160526130623846) ลดลงและคุณสามารถตั้งค่าประเภทที่เราต้องการ: ! [JSChart] (http://img.blog.csdn.net/20160526130958645) หลังจากทั้งหมดคุณสามารถคลิกปุ่มที่สร้างรหัส JS ด้านบนแล้วคัดลอกรหัสที่เกี่ยวข้องไปยัง JSP ของเรา นี่คือรหัส JS ที่ฉันสร้างขึ้น (เพียงแค่สกัดกั้นส่วนที่มีประโยชน์):
<div id = "chart_container"> การโหลดแผนภูมิ ... </div> <script type = "text/javascript"> var mychart = 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 (เท็จ); MyChart.SetBarsPacingRatio (45); MyChart.SetBaropacity (1); MyChart.SetBarBorderWidth (1); MyChart.settitle ('รายงานการขายห้างสรรพสินค้า'); MyChart.settitlefontsize (10); MyChart.SettitleColor ('#607985'); MyChart.SetAxisValuesColor ('#607985'); MyChart.SetAxisNamex ('ชื่อผลิตภัณฑ์', FALSE); MyChart.SetAxisNamey ('การขาย', จริง); MyChart.SetGridOpacity (0.8); MyChart.SetAxispaddingLeft (50); MyChart.SetAxispaddingBottom (40); MyChart.Set3d (จริง); mychart.draw (); </script> ด้วยวิธีนี้เรามีรหัส JS เพื่อสร้างแผนภูมิ มาวิเคราะห์กระบวนการทั้งหมด: ก่อนอื่นหน้า JSP front-end จะส่งคำขอ AJAX จากนั้น Back-End จะดึงข้อมูลที่เกี่ยวข้องจากฐานข้อมูล เราจำเป็นต้องดึงข้อมูลที่นี่ว่าผลิตภัณฑ์ใดที่ขายและปริมาณที่ขายที่สอดคล้องกันซึ่งหมายความว่าเราต้องใช้จากตารางรายการโฆษณา นอกจากนี้ส่วนหน้าจะต้องผ่านพารามิเตอร์เพื่อบอกส่วนหลังจำนวนข้อมูลที่จะได้รับ หลังจากดึงพื้นหลังข้อมูลจะถูกส่งไปยังเบื้องหน้าในรูปแบบ JSON และเบื้องหน้าจะเรียกใช้รหัส JS ข้างต้น (แน่นอนจำเป็นต้องมีการปรับเปลี่ยนที่สอดคล้องกัน) เพื่อแสดงข้อมูลในรูปแบบของรายงาน ตกลงตามกระบวนการนี้ให้ทำแบ็กเอนด์ก่อน
2. กรอกตรรกะของการสืบค้นพื้นหลัง
ขั้นแรกฟังก์ชั่นการสืบค้นจะเสร็จสมบูรณ์ในเลเยอร์บริการ ในระหว่างการสืบค้นนี้มีการสอบถามสองรายการ: ผลิตภัณฑ์และปริมาณการขายของผลิตภัณฑ์ ดูรหัส:
// sorderService อินเตอร์เฟสสาธารณะ sorderService ขยาย baseservice <order> {// บันทึกรหัสที่ไม่เกี่ยวข้อง ... // สอบถามปริมาณการขายของผลิตภัณฑ์ร้อนรายการสาธารณะ <Ojrop> QUERYSALE (หมายเลข int);} // SORDERSERVICICEIMPL baseserviceimpl <order> ใช้ sorderService {// บันทึกรหัสที่ไม่เกี่ยวข้อง ... @Override รายการสาธารณะ <Object> querySale (หมายเลข int) {// สองรายการที่พบโดยไม่มีผลกระทบคือสตริง hql = "เลือก S.Name, ผลรวม (s.number) จาก Sorder S return getSession (). createquery (hql) // .setfirstresult (0) // .setMaxResults (หมายเลข) // .List (); - จากนั้นเราก็เสร็จสิ้นส่วนการดำเนินการ:
@Controller@Scope ("Prototype") Sorderaction คลาสสาธารณะขยาย baseaction <sorder> {Public String addsorder () {// บันทึกรหัสที่ไม่เกี่ยวข้อง ... // ส่งคืนผลิตภัณฑ์ยอดนิยม // ใส่รายการที่คิวรีที่ด้านบนของสแต็กค่าทำไมถึงทำเช่นนี้? ดูคำอธิบายด้านล่าง ActionContext.getContext (). getValuestack (). push (jsonlist); กลับ "jsonlist"; - มีวัตถุ `list ใน baseaction แต่เราไม่สามารถใช้วัตถุนี้ได้เนื่องจากที่นี่ JsonList เป็นวัตถุ` รายการ 'ไม่ใช่วัตถุ `รายการ' ใน baseaction ดังนั้นเราต้องกำหนดวัตถุ` รายการ 'ในการกระทำนี้ นี่คือวิธีที่ง่ายกว่า หากคุณไม่พบรูทที่กำหนดค่าเมื่อ struts2 คุณจะนำข้อมูลออกจากด้านบนของสแต็กค่าเพื่อแปลง JSON ดังนั้นเราจึงโยน jsonlist ที่เรามีตอนนี้ไปที่ด้านบนของสแต็กค่าแล้วเขียนผลลัพธ์ในไฟล์การกำหนดค่า ดังนั้น struts.xml มีดังนี้:! [struts.xml] (http://img.blog.csdn.net/20160526133359517)
3. กรอกหน้า JSP front-end
ตรรกะในพื้นหลังได้ถูกเขียนขึ้นและตอนนี้เราจำเป็นต้องกรอกตรรกะการกระโดดในแผนกต้อนรับและตรรกะหลังจากได้รับข้อมูล JSON ที่ส่งจากพื้นหลัง หน้า sale.jsp มีดังนี้:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> src = "$ {shop} /js/jquery-1.11.1.js"> </script> <script type = "text/javascript" src = "$ {shop} /js/jscharts.js"> </script> ['#44A622', '#A7B629', '#CAD857', '#E4DB7B', '#ECDE49', '#ECC049', '#EC9649', '#D97431', '#D95531' $ .post ($ ("#sale"). val (), {number: $ ("#number"). val ()}, ฟังก์ชั่น (ข้อมูล) {var mychart = ใหม่ jschart ('chart_container', $ ("#type"). val (), '); mychart.colorize (colorarr.slice (0, data.length); mychart.settitle ('รายงานการขายห้างสรรพสินค้า'); MyChart.SettitleColor ('#607985'); MyChart.SetAxisValuesColor ('#607985'); MyChart.SetAxisNamex ('ชื่อผลิตภัณฑ์', FALSE); MyChart.SetAxisNamey ('การขาย', จริง); MyChart.SetGridOpacity (0.8); MyChart.SetAxispaddingLeft (50); MyChart.SetAxispaddingBottom (40); MyChart.Set3d (จริง); mychart.draw (); }, "JSON"); - - - </script> </head> <body style = "margin: 10px;"> โปรดเลือกประเภทรายงาน: <select id = "sale"> <ตัวเลือกค่า = "sorder_querysale.action"> รายงานการขายประจำปี </opotion> </select> จำนวนการสืบค้น: <select id = "number"> <ตัวเลือก </select> ประเภท: <select id = "type"> <ตัวเลือกค่า = "bar"> ประเภทคอลัมน์ </optup> <ตัวเลือกค่า = "บรรทัด"> ประเภทบรรทัด </optup> <ตัวเลือกค่า = "พาย"> ประเภทรูปวงกลม </ตัวเลือก> </เลือก> ส่วนใหญ่มีหลายกล่องการเลือกที่สามารถแสดงตามการเลือกผู้ใช้ มีสี่พารามิเตอร์ใน $ .post (); คนแรกคือการระบุการกระทำที่ได้รับ ฉันเขียนไว้ในแท็กการเลือกและได้รับโดยตรงโดยการวางตำแหน่งองค์ประกอบ DOM พารามิเตอร์ที่สองคือพารามิเตอร์ที่จะส่ง นี่คือหมายเลขที่จะแสดง พารามิเตอร์ที่สามคือฟังก์ชั่นที่จะดำเนินการหลังจากได้รับข้อมูลพื้นหลัง JSON พารามิเตอร์ที่สี่คือการระบุชนิดข้อมูลที่ได้รับ นี่คือประเภท JSON
มาดูฟังก์ชั่นที่ดำเนินการหลังจากได้รับข้อมูลพื้นหลัง นี่คือรหัส JS ที่สร้างขึ้นโดยอัตโนมัติก่อน ส่วนใหญ่จำเป็นต้องสร้างรายงาน แต่มีการปรับเปลี่ยนเล็กน้อยเช่นประเภทของไอคอนถูกเปลี่ยนเป็นประเภทที่ผู้ใช้เลือกและจำนวนรายการที่แสดงก็มีการเปลี่ยนแปลงเช่นกัน อย่างไรก็ตามสิ่งเหล่านี้เป็นการเปลี่ยนแปลงเล็กน้อยและไม่มีปัญหาใหญ่ มาดูเอฟเฟกต์การแสดงผลของไอคอนประเภทต่าง ๆ :
เอฟเฟกต์ค่อนข้างดีดังนั้นหากคุณมีเพื่อนที่ต้องการทำรายงานขอแนะนำให้ใช้เครื่องมือ JSChart นี้ซึ่งมีประโยชน์มาก ~ ฉันได้เขียนโดยทั่วไปในโครงการทั้งหมด ~ ฉันจะสรุปในภายหลังและอัปโหลดซอร์สโค้ดและเกือบจะจบลงแล้ว
ที่อยู่ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51506334
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น