Spring MVC框架下 将数据库内容前台页面显示完整版【获取数据库人员参与的事件列表】

1.书写jsp页面包括要显示的内容【people.jsp】

<!--      

      此处包括三个方面内容:

         1.包含 文本输入框 查询按钮  查询结果显示位置 (paging)

         2.包括对按钮(button)的操作

       -->

<div>
   <div class="m-b-md2">
       <form class="form-inline" id="searchForm2"
            name="searchForm2">

              <div class="form-group">

               <div class="padding">
                  <span class="h4">人员最近事件查询:</span> <input class="input-medium" id="author" name="author">
             </div>
            </div>
                     <a href="javascript:void(0)" class="btn btn-info" id="search2">查询</a>
      </form>
  </div>
          <div class="doc-buttons" style="padding: 10px 0">
          <c:forEach items="${res}" var="key">
           <button type="button" id="${fn:split(key.btn,',')[0]}" name="${fn:split(key.btn,',')[1]}" class="${fn:split(key.btn,',')[2]}">${fn:split(key.btn,',')[3]}</button>
        </c:forEach>
          </div>
             <div id="paging2" class="pagclass2"></div>
</div>

2.新建查询操作的实体类 entity 放在entity包中【PeopleForMap.java】

 /**

  *此处包括要访问数据库的表名 和表的主键 对数据库做映射

*/

@TableSeg(tableName = "test", id="id")
        public class PeopleFormMap extends FormMap<String,Object>{
/**
*
*/
                private static final long serialVersionUID = 1L;  

}

3.新建Service层 service层主要包括对增删改查的实现【PeopleService.java】

         public interface PeopleService extends BaseService{

               }

4.新建Service的具体实现【PeopleServiceImpl.java】

         @Service("peopleService")
           public class PeopleServiceImpl extends BaseServiceImpl implements PeopleService{

}

5.新建Controller层 将service注入controller【PeopleController.java】

  此处书写要调用PeopleService执行的具体操作

       @Controller
        @RequestMapping("/people")
       public class PeopleController extends BaseController {
       @Inject
      private PeopleService peopleService;

      @ResponseBody
      @RequestMapping("peoplelist")
         public String peoplelist(String txtSelect) throws Exception {

       return Common.BACKGROUND_PATH+"/system/riskforcast/people";
}

      @ResponseBody
      @RequestMapping("/findPeopleEvents") 
      public PageView findPeopleEvents(){
      Map<String,Object> result = new HashMap<>();
      PeopleFormMap peopleFormMap = getFormMap(PeopleFormMap.class);
     PageView pageView = getPageView(peopleFormMap);
     peopleFormMap.put("paging2",pageView);
     peopleFormMap.put("mapper_id", "PeopleService.findPeopleEvents");    //根据mapper_id执行mapper中id=findPeopleEvents的sql操作
     List<PeopleFormMap> re = peopleService.findByPage(peopleFormMap); //通过peopleService中的findByPage实现数据库查询
     pageView.setRecords(re);
     //result.put("pageView",pageView);
     return pageView;
 }

6.新建mapper表 主要包括对数据库执行的Sql语句【people-mapper】

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
   <mapper namespace="PeopleService">

     
    <select id="findPeopleEvents" resultType="com.lanyuan.entity.PeopleFormMap">
    select * from  test
   where author is not null and author != ''   //查询test表中author字段不为空的所有数据
      <if test="author != null and author != ''">
        and author like '%${author}%'
      </if>
     </select>

</mapper>

7.书写js页面  【people.js】

  <!--  js页面内容1.书写查询方法 并初始化 2.你要调用的sql语句路径  3.你想查询的字段 

    -->

$(document).ready(function() {
  initEventList(); //初始化方法

   function initEventList() {
              grid = lyGrid({
                  pagId : 'paging2',
                    l_column : [
                        {
                                 colkey : "author",
                                 name :"事件传播者",
                       }, {
                                 colkey : "page_title",
                                 name : "文章标题"
                      }, {
                                colkey :"refer_url",
                                name :"转载路径"
                     }, {
                                colkey : "release_date",
                               name : "更新时间"
                    }
                         ],

                 jsonUrl : rootPath + '/people/findPeopleEvents.shtml',
                checkbox : true,
               serNumber : true
           });
            $("#search2").click("click", function() {// 绑定查询按扭
           var searchParams = $("#searchForm2").serializeJSON();// 初始化传参数
           grid.setOptions({
           data : searchParams
           });
           });
    }

 

posted @ 2017-10-02 15:01  小野猪  阅读(2054)  评论(1编辑  收藏  举报