springMVC
许多Web应用都是从数据存储检索数据并将其显示给用户。在用户更改数据之后,系统再将更新内容存储到数据存储中。因为关键的信息流发生在数据存储和用户界面之间,所以很多应用将数据和用户界面这两部分绑在一起,以减少编码量并提高应用程序性能。但是,这种看起来自然而然的方法有一些大问题。一是,用户界面的更改往往比数据存储系统的更改频繁得多。二是,这种耦合往往会并其他业务逻辑。那么如何让 Web 应用程序的用户界面功能实现模块化,以便可以轻松地单独修改各个部分呢?面向对象的设计模式是经验的总结,MVC架构可以很好地解决上述问题。
例如下面的例子:
SpringMVC在一个系统中列表的应用。
首先是model模型层:
public List<Need> getAll(){ String hql = "from Need"; return getSession().createQuery(hql).list(); } public List<Need> get(String u_name,String n_name){ String hql = "from Need n where n.n_id != '' "; System.out.println(u_name); if(u_name!=null&&!u_name.equals("")){ hql +=" and n.user.u_name ='"+u_name +"'"; } System.out.println(n_name); if(n_name!=null&&!n_name.equals("")){ hql +=" and n.n_name ='"+ n_name+"'"; } System.out.println(hql); return getSession().createQuery(hql).list(); }
Control控制层:
当JSP页面提交了用户需求,交给控制器去处理,控制器需要从模型中找到对应的数据,并返回到JSP页面。实现MVC思想中:接受用户的输入,解释用户的行为,并提供模型数据至视图。消除模型与视图依赖关系
public void list(){ List<Need> list = needService.get(u_name,n_name); writeJson(list); } public String getJsonString(Object o){ ObjectMapper om = new ObjectMapper(); StringWriter sw = new StringWriter(); try { JsonGenerator jg = new JsonFactory().createJsonGenerator(sw); om.writeValue(jg, o); jg.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return sw.toString(); } public void writeJson(Object o){ String json = getJsonString(o); try { ServletActionContext.getResponse().setCharacterEncoding("UTF-8"); ServletActionContext.getResponse().getWriter().write(json); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }
View视图层:
1 function loadData(pars) { 2 $('#date').datagrid({ 3 //url: '../listDate/listdata2.jsp', 4 url: '../need-list', 5 //width: 1000, 6 //height: 400, 7 width: ($(window).width()*0.90), 8 height:($(window).height()*0.99)-100, 9 //fit:true, 10 fitColumns: true, //列自适应 11 nowrap: false, 12 idField: 'n_id',//主键列的列名 13 loadMsg: '正在加载信息...', 14 pagination: true,//是否有分页 15 //singleSelect: false,//是否单行选择 16 pageSize: 10,//每页多少条数据 17 pageNumber: 1,//默认的页 18 pageList: [10, 20, 30], 19 queryParams: pars,//往后台传递参数 20 columns: [[ 21 { field: 'n_id', title: '',checkbox: true }, 22 { field: 'n_name', title: '需求名称', align: 'center', width: 100 }, 23 { 24 field: 'user', 25 title: '机构名称', 26 align: 'center', 27 width: 100, 28 formatter:function(value,row,index){ 29 return row.user.u_name; 30 } 31 32 }, 33 { field: 'n_timeMin', title: '需求有效时间最小', align: 'center', width: 100 }, 34 { field: 'n_timeMax', title: '需求有效时间最大', align: 'center', width: 100 }, 35 { field: 'n_introduce', title: '需求简介', align: 'center', width: 100 }, 36 { field: 'n_problem', title: '关键问题', align: 'center', width: 100 }, 37 { field: 'n_key', title: '关键字', align: 'center', width: 100 }, 38 {
field: 'bm',
title: '归属部门',
align: 'center',
width: 100,
formatter:function(value,row,index){
return row.bm.bm_name;
}
}, 47 48 { 49 field: 'operation', title: '操作', align: 'center', width: 100, 50 formatter: function (value, row, index) { 51 var str = ""; 52 str += '<a href="../check/checkUser.jsp?ID=' + row.Nno + '&&CompanyID=' + row.CompanyID+ '" class="easyui-linkbutton c1" style="width:70px">查看</a>'; 53 //str += '<a href="check.jsp" class="easyui-linkbutton c1" style="width:50px">修改</a>'; 54 //str += '<a href="check.jsp?ID=(\'' + Id + '\');" class="easyui-linkbutton c5" tyle="width:50px">隐藏</a>'; 55 return str; 56 } 57 } 58 ]], 59 });