Этот проект наконец подходит к концу, поэтому я не буду выполнять функцию регистрации. Другая статья о регистрационной функции подробно ввела проверку регистрационной формы. Вы можете напрямую добавить функцию к этому проекту и изменить соответствующие прыжки, поэтому я больше не буду этого делать. Кроме того, в настоящее время этот проект имеет только уровень действия и уровень обслуживания. Я еще не извлекал слой DAO. После завершения этого отчета я извлек слой DAO, а затем суммировал весь проект. Вы можете загрузить исходный код. Вы можете скачать его в то время ~
Этот раздел в основном создает последнюю функцию: используйте JSChart в качестве инструмента для отображения отчетов о продажах продуктов. JSChart - очень полезный инструмент для составления отчетов. Причина, по которой он прост в использовании, заключается в том, что его официальные примеры очень хорошо сделаны. Вы можете напрямую генерировать соответствующий код после работы в графическом интерфейсе. Мы модифицируем его, а затем вкладываем его в логику нашего собственного проекта.
1. Введение в инструменты JSChart
JSChart-отличный инструмент для создания отчетов. Сгенерированный код-JS, так что это хороший инструмент для использования передних страниц JSP. Вы можете взглянуть на официальный веб -сайт JSChart, нажмите онлайн -редактирование после его открытия, а затем выбрать отчет и нажмите, чтобы ввести. Вы можете редактировать тип и формат диаграммы, который мы хотим в Интернете, следующим образом :! [JSChart] (http://img.blog.csdn.net/20160526130623846) выключить, и вы можете установить тот тип, который мы хотим :! В конце концов, вы можете нажать кнопку, которая генерирует приведенный выше код 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 (colorar.slice (0, data.length)); mychart.setsize (100*$ ("#номер"). val (), 400); mychart.setbarvalues (false); 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 ('sales', true); MyChart.SetGridoPACY (0,8); myChart.setAxispaddingleft (50); MyChart.SetAxispaddingBottom (40); mychart.set3d (true); mychart.draw (); </script> Таким образом, у нас есть код JS для генерации диаграммы. Давайте проанализируем весь процесс: во-первых, на линейной странице JSP Front-End отправляет запрос AJAX, а затем на задний план избирает соответствующие данные из базы данных. Нам нужно только извлечь данные здесь, какие продукты были проданы и соответствующее проданное количество, что означает, что мы должны взять из таблицы позиций. Кроме того, фронт-энд должен пройти параметр, чтобы сообщить о том, сколько кусков данных получить. После того, как фон был извлечен, данные отправляются на передний план в формате JSON, а на переднем плане запускается приведенный выше код JS (конечно, требуются соответствующие модификации) для отображения данных в виде отчета. ОК, согласно этому процессу, сначала сделайте бэкэнд.
2. Заполните логику фонового запроса
Во -первых, функция запроса завершена в сервисном уровне. Во время этого запроса запрашиваются два пункта: продукт и количество продаж продукта. Взгляните на код:
// интерфейс Sorderservice интерфейс общедоступный интерфейс Sorderservice Extens BaseService <Sorder> {// Сохранить нерелевантный код ... // Запросить объем продаж горячих продуктов Общедоступный список <object> QuerySale (int ucre);} // SorderServiceImpl Class @Service ("sorderservice") @SupressWarning BaseServiceImpl <sorder> реализует Sorderservice {// Сохранить нерелевантный код ... @Override public list <object> QuerySale (int number) {// Два элемента, найденных без воздействия, - это String hql = "select s.name, сумма (s.number) от соединения S.product by s.product.id"; return getSession (). CreateQuery (hql) // .setfirstresult (0) // .setMaxResults (номер) // .list (); }} Затем мы завершаем часть действия:
@Controller@Scope ("Prototype") Общедоступный сордезация класса Extens Baseaction <sorder> {public String addsorder () {// Сохранить нерелевантный код ... // Возврат популярных продуктов и их продаж Public String QuerySale () {list> jsonlist = soorderservice.querysale (model.getnumber ()); // Поместите запрос списка в верхней части стека значений, зачем это делать? См. Объяснение ниже ActionContext.getContext (). GetValuestack (). Push (jsonlist); вернуть "jsonlist"; }} В базеации существует объект «List», но мы не можем использовать этот объект, потому что здесь JSONLIST является объектом «List», а не объектом «List» в BaseAction, поэтому нам необходимо определить объект «List» в этом действии и реализовать метод GET, а затем настроить root в файле struts.xml, но это немного неприятно. Вот более простой метод. Если вы не можете найти настроенный root при 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> <ceam> <%@ include = "/public/jess. src = "$ {shop} /js/jquery-1.11.1.js"> </script> <script type = "text/javascript" src = "$ {shop} /js/jscharts.js"> </script> <script type = "text/javascript"> $ (function () (). ['#44A622', '#A7B629', '#CAD857', '#E4DB7B', '#ECDE49', '#ECC049', '#EC9649', '#D97431', '#D95531', '#e4db7b']; $ .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); // Выберите несколько, чтобы отобразить mychart.setsize (100*$ ("#№"). Val (), 400); MyChart.SetTitle ('Mall Sales Report'); mychart.settitlecolor ('#607985'); mychart.setaxisvaluescolor ('#607985'); mychart.setaxisNamex ('имя продукта', false); mychart.setaxisNamey ('sales', true); MyChart.SetGridoPACY (0,8); myChart.setAxispaddingleft (50); MyChart.SetAxispaddingBottom (40); mychart.set3d (true); mychart.draw (); }, "json"); }); }); }); </script> </head> <body style = "margin: 10px;"> Пожалуйста, выберите тип отчета: <select id = "sale"> <option value = "sorder_querysale.action"> Годовой отчет о продажах </option> </selet> Номер запросов: <select id = "№"> <опция value = "5"> 5 </option> <опция> vature vitation = antaue = antuare = antuare = antuare = antuare = antupation = antuare = antuare = antupation> "atain> vature = antupation>" atain> vature = "/antaity>". </select> Type: <select id="type"> <option value="bar">Column type</option> <option value="line">line type</option> <option value="pie">pie-shaped type</option> </select> <input type="button" id="submit" value="query"> <div id="chart_container">Loading Chart...</div></body></html> Есть в основном несколько полевых ящиков, которые могут отображаться в соответствии с выбором пользователя. Есть четыре параметра в $ .post ();. Первый - указать полученное действие. Я написал его в теге выбора, и он получается непосредственно путем позиционирования элемента DOM. Второй параметр - это параметр, который должен быть передан. Вот номер, который будет отображаться. Третий параметр - это функция, которая будет выполнена после получения фоновых данных JSON. Четвертый параметр состоит в том, чтобы указать тип получения данных. Вот тип JSON.
Давайте посмотрим на функции, выполняемые после получения фоновых данных. Это в основном код JS, который был автоматически сгенерирован ранее. В основном он должен генерировать отчеты, но была внесена небольшая модификация, например, тип значка был изменен на тип, выбранное пользователем, и количество отображаемых элементов также было изменено. Тем не менее, это некоторые незначительные изменения, и нет большой проблемы. Давайте посмотрим на эффекты дисплея различных типов икон:
Эффект довольно хороший, поэтому, если у вас есть друзья, которым нужно делать отчеты, рекомендуется использовать этот инструмент JSChart, который очень полезен ~ я в основном написал так много во всем проекте ~ Я сделаю резюме позже и загрузите исходный код, и он будет почти закончился.
Оригинальный адрес: http://blog.csdn.net/eson_15/article/details/51506334
Вышеуказанное - все содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.