Proyek ini akhirnya akan segera berakhir, jadi saya tidak akan melakukan fungsi pendaftaran. Artikel lain tentang fungsi pendaftaran telah memperkenalkan verifikasi formulir pendaftaran secara rinci. Anda dapat secara langsung menambahkan fungsi ke proyek ini dan memodifikasi lompatan yang relevan, jadi saya tidak akan melakukannya lagi. Selain itu, saat ini, proyek ini hanya memiliki lapisan aksi dan lapisan layanan. Saya belum mengekstraksi lapisan DAO. Setelah menyelesaikan laporan ini, saya mengekstraksi lapisan DAO dan kemudian merangkum seluruh proyek. Anda dapat mengunggah kode sumber. Anda dipersilakan untuk mengunduhnya saat itu ~
Bagian ini terutama menciptakan fungsi terakhir: Gunakan jschart sebagai alat untuk menampilkan laporan penjualan produk. JSCHART adalah alat yang sangat berguna untuk membuat laporan. Alasan mengapa mudah digunakan adalah karena contoh resminya dilakukan dengan sangat baik. Anda dapat secara langsung menghasilkan kode yang sesuai setelah beroperasi di antarmuka grafis. Kami memodifikasinya dan kemudian memasukkannya ke dalam logika proyek kami sendiri.
1. Pengantar alat jschart
JSCHART adalah alat pembuatan laporan yang sangat baik. Kode yang dihasilkan adalah JS, jadi ini adalah alat yang baik untuk menggunakan halaman JSP front-end. Anda dapat melihat situs web resmi JSCHART, klik edit online setelah membukanya, dan kemudian pilih laporan dan klik untuk masuk. Anda dapat mengedit jenis dan format grafik yang kami inginkan secara online, sebagai berikut :! [jschart] (http://img.blog.csdn.net/20160526130623846) Turunkan dan Anda dapat mengatur jenis yang kami inginkan: ! [jschart] (http://img.blog.csdn.net/20160526130958645) Bagaimanapun, Anda dapat mengklik tombol yang menghasilkan kode JS di atas, dan kemudian salin kode yang sesuai ke JSP kami. Berikut adalah kode JS yang saya hasilkan (cukup mencegat bagian yang berguna):
<Div id = "chart_container"> memuat grafik ... </div> <script type = "text/javascript"> var mychart = new jschart ('chart_container', bar '', ''); mychart.setDataArray (['#44a622', '#a7b629', '#cad857', '#e4db7b', '#ecde49', '#ec9649', '#d97431', '#d955331']); 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 ('laporan penjualan mal'); mychart.settitlefontsize (10); mychart.settitlecolor ('#607985'); mychart.setaxisvaluescolor ('#607985'); mychart.setaxisNamex ('nama produk', false); mychart.setaxisnamey ('penjualan', true); mychart.setGridopacity (0,8); mychart.setaxispaddingleft (50); mychart.setaxispaddingbottom (40); mychart.set3d (true); mychart.draw (); </script> Dengan cara ini, kami memiliki kode JS untuk menghasilkan bagan. Mari kita analisis seluruh proses: Pertama, halaman JSP front-end mengirimkan permintaan AJAX, dan kemudian back-end mengambil data yang sesuai dari database. Kami hanya perlu mengambil data di sini produk mana yang telah dijual dan jumlah yang dijual yang sesuai, yang berarti kami harus mengambil dari tabel item baris. Selain itu, front-end harus melewati parameter untuk memberi tahu back-end berapa banyak bagian data yang harus didapat. Setelah latar belakang diambil, data dikirim ke latar depan dalam format JSON, dan latar depan menjalankan kode JS di atas (tentu saja, modifikasi yang sesuai diperlukan) untuk menampilkan data dalam bentuk laporan. Ok, menurut proses ini, lakukan backend terlebih dahulu.
2. Lengkapi logika kueri latar belakang
Pertama, fungsi kueri selesai di lapisan layanan. Selama kueri ini, dua item ditanya: produk dan jumlah penjualan produk. Lihatlah kode:
//sorderService interface public interface SorderService extends BaseService<Sorder> { //Save irrelevant code... //Query the sales volume of hot products public List<Object> querySale(int number);}//sorderServiceImpl implementation class @Service("sorderService")@SuppressWarnings("unchecked")public class SorderServiceImpl extends BASESERVICEIMPL <Sherder> mengimplementasikan sorderService {// simpan kode yang tidak relevan ... @Override Daftar publik <POMPERTIF> QUERYSALE (Nomor int) {// Dua item yang ditemukan tanpa pengaruh adalah string hql = "SELECT S.NAME, SUM (S.Number) dari SORDER S GABUNG S.Product Group oleh S.Product.id"; return getSession (). Createqueery (HQL) // .setFirStresult (0) // .setMaxResults (angka) // .list (); }} Lalu kami menyelesaikan bagian aksi:
@Controller@scope ("ProtoType") Public Class Sorderaction memperluas basa <sherder> {public string addSorder () {// Simpan kode yang tidak relevan ... // mengembalikan produk populer dan penjualan public string public querySale () {List <Object> jsonList = SoorderService.QuerySale (model.getNumber ()); // Letakkan daftar kueri di bagian atas tumpukan nilai, mengapa melakukan ini? Lihat penjelasan di bawah ActionContext.getContext (). GetValueStack (). Push (JSONList); mengembalikan "JSONLIST"; }} Ada objek `list` dalam basa, tetapi kami tidak dapat menggunakan objek ini, karena di sini jsonList adalah objek` list`, bukan objek `daftar` dalam basa, jadi kita perlu mendefinisikan objek` daftar` dalam tindakan ini dan mengimplementasikan metode GET, dan kemudian mengonfigurasi root dalam file struts.xml, tetapi ini sedikit merepotkan. Berikut adalah metode yang lebih sederhana. Jika Anda tidak dapat menemukan root yang dikonfigurasi saat Struts2, Anda akan mengambil data dari bagian atas tumpukan nilai untuk mengonversi JSON. Jadi kami hanya melempar daftar json yang kami miliki sekarang ke bagian atas tumpukan nilai, dan kemudian menulis hasilnya di file konfigurasi. Jadi struts.xml adalah sebagai berikut :! [Struts.xml] (http://img.blog.csdn.net/20160526133359517)
3. Lengkapi halaman JSP front-end
Logika di latar belakang telah ditulis, dan sekarang kita perlu menyelesaikan logika lompatan di meja depan dan logika setelah menerima data JSON yang dikirimkan dari latar belakang. Halaman Sale.jsp adalah sebagai berikut:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <pead> <%@ termasuk file = "/head. src = "$ {shop} /js/jQuery-1.11.1.js"> </script> <script type = "text/javascript" src = "$ {shop} /js/jscharts.js"> </script> <script = "Text/JavaScript"> $ (function () {) {() $ ("$ ("#). ['#44A622', '#a7b629', '#cad857', '#e4db7b', '#ecde49', '#ecc049', '#ec9649', 'D97431', 'D95531', 'E4DB7B'], 'D95531', 'D97431 $ .post ($ ("#sale"). val (), {number: $ ("#number"). val ()}, function (data) {var mychart = new jschart ('chart_container', $ ("#type"). val (), ''); mychart.setDataArray (data); mychart.colorize (colorarr.slice (0, data.length)); // Pilih beberapa untuk menampilkan mychart.setsize (100*$ ("#number"). Val (), 400); mychart.setbarborderwidth (1); mychart.settitlecolor ('#607985'); mychart.setaxisvaluescolor ('#607985'); mychart.setaxisNamex ('nama produk', false); mychart.setaxisnamey ('penjualan', true); mychart.setGridopacity (0,8); mychart.setaxispaddingleft (50); mychart.setaxispaddingbottom (40); mychart.set3d (true); mychart.draw (); }, "json"); }); }); }); </script></head><body style="margin:10px;"> Please select the report type: <select id="sale"> <option value="sorder_querySale.action">Annual Sales Report</option> </select> Number of queries: <select id="number"> <option value="5">5</option> <option value="7">7</option> <option value="10">10</option> </Silih> Jenis: <pilih id = "type"> <option value = "bar"> Tipe kolom </pection> <Opsi value = "line"> Jenis baris </tiption> <option value = "pie"> tipe berbentuk pai </tiption> </pilih> <input type = "Tombol" ID = "Kirim" value = "Query"> </Div ID = "Chart. Terutama ada beberapa kotak pilihan yang dapat ditampilkan sesuai dengan pilihan pengguna. Ada empat parameter di $ .post ();. Yang pertama adalah menentukan tindakan yang diterima. Saya menulisnya di tag seleksi dan diperoleh secara langsung dengan memposisikan elemen DOM. Parameter kedua adalah parameter yang akan ditransmisikan. Ini nomor yang akan ditampilkan. Parameter ketiga adalah fungsi yang akan dieksekusi setelah menerima data latar belakang JSON. Parameter keempat adalah menentukan tipe data yang diterima. Ini tipe JSON.
Mari kita lihat fungsi yang dieksekusi setelah menerima data latar belakang. Ini terutama kode JS yang secara otomatis dihasilkan sebelumnya. Ini terutama perlu menghasilkan laporan, tetapi sedikit modifikasi telah dibuat, seperti jenis ikon telah diubah ke jenis yang dipilih oleh pengguna, dan jumlah item yang ditampilkan juga telah diubah. Namun, ini adalah beberapa perubahan kecil, dan tidak ada masalah besar. Mari kita lihat efek tampilan dari berbagai jenis ikon:
Efeknya cukup bagus, jadi jika Anda memiliki teman yang perlu membuat laporan, disarankan untuk menggunakan alat jschart ini, yang sangat berguna ~ Saya pada dasarnya telah menulis begitu banyak di seluruh proyek ~ Saya akan membuat ringkasan nanti dan mengunggah kode sumber, dan itu akan hampir berakhir.
Alamat asli: http://blog.csdn.net/eson_15/article/details/51506334
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.