javaweb网站开发模板化设计

朱雀 2022-09-21 13:24 130阅读 0赞

**javaweb网站开发模板化设计**

wang@20160620

**前言**

前一段时间想要开发一个BS架构的应用程序调用我开发的通讯驱动接口来和硬件设备进行通讯测试，以验证我的驱动接口及硬件设备的下端程序通讯是否正常和稳定；并且这个项目系统后期也需要用到手机app；前一阵子有玩了一段手机app开发，从网站上下载一个app的源码，看到它的与后台通讯是通过json在传递数据的；为此我就在思考有没有什么方式可以让网页开发简单化和模块化，后台服务端的通讯可不可以不仅仅运用在PC网页上，也可以适用于手机app上；能不能后台的服务端的通讯数据全部用json来传递，前台网页全部解析json数据，这样一来不就可以PC上能调用，app上也同样可以调用，我想这个方式应该是可以行的通的。

就这样，我沿着这个思路，开始规划和实施我的设想，并按这个思路来开展网站的设计；最近我已经把这个网站搭建出来了，前后台全部用json传数据，并规范了通讯格式，制定前后台的通讯规范，按照规范设计代码；通过规范化的设计可以很容易的扩展模块功能，方便网站建设；

本文主要内容围绕以下三点：定义前后台通讯规范、后台的action通讯代码、前台的jsp代码来展开介绍；

**内容**

一、**定义前后台通讯规范**

在我看来，表格无非都具备有列表、添加、修改、删除、查找等功能，可以把这些通用的功能模块化，定义共同可用的参数，以后添加其它模块就可套用相同的文件格式，只需要修改少量的代码就可以实现相应的功能，通过模板化的设计，可以大大的加快网站的开发；以下是我的通用的接口定义；

1、列表、添加、修改、删除接口定义

<table> 
 <tbody> 
 <tr> 
 <td> 方法名 </td> 
 <td> 说明 </td> 
 <td> 后台action </td> 
 <td> 访问页面 </td> 
 <td> 输入参数 </td> 
 <td> 返回 </td> 
 </tr> 
 <tr> 
 <td> list </td> 
 <td> 列表 </td> 
 <td> xxxlist.do </td> 
 <td> xxxlist.jsp </td> 
 <td> 1、关键字段1: key1 2、搜索:searchStr 3、当前页:pageNum &nbsp; </td> 
 <td> 1、Json数据 2、格式： { “status”:”0”, “caption”:”栏目标题”, “total”:”记录数”, “jsonstr”:[{ “字段名1”： ”值1”，“字段2”：“值2”，...},{...},...]} </td> 
 </tr> 
 <tr> 
 <td> add </td> 
 <td> 新增 </td> 
 <td> xxxadd.do </td> 
 <td> xxxadd.jsp </td> 
 <td> 1、关键字段1: key1 2、一笔Json数据格式： { “jsonstr”:[{ “字段名1”：”值1”，“字段2”：“值2”]} </td> 
 <td> 1、json提示信息 2、格式： { “status”:”0”, “message”:”提示信息”｝ </td> 
 </tr> 
 <tr> 
 <td> view </td> 
 <td> 显示一条记录信息 </td> 
 <td> xxxview.do </td> 
 <td> xxxview.jsp </td> 
 <td> 1、关键字段1: key1 2、关键字段2: key2 &nbsp; </td> 
 <td> 2、一笔Json数据格式： { “status”:”0”, “caption”:””, “jsonstr”:[{ “字段名1”：”值1”，“字段2”：“值2”}]} </td> 
 </tr> 
 <tr> 
 <td> edit </td> 
 <td> 编辑 </td> 
 <td> xxxedit.do </td> 
 <td> xxxedit.jsp </td> 
 <td> 1、关键字段1: key1 2、关键字段2: key2 3、一笔Json数据格式： { “jsonstr”:[{ “字段名1”：”值1”，“字段2”：“值2”]} </td> 
 <td> 1、json提示信息 2、格式： { “status”:”0”, “message”:”提示信息”｝ </td> 
 </tr> 
 <tr> 
 <td> delete </td> 
 <td> 删除 </td> 
 <td> xxxdelete.do </td> 
 <td> 提示窗 </td> 
 <td> 1、关键字段1: key1 2、关键字段2: key2 &nbsp; </td> 
 <td> 1、json提示信息 2、格式： { “status”:”0”, “message”:”提示信息”｝ </td> 
 </tr> 
 <tr> 
 <td> deleteall </td> 
 <td> 删除所有 </td> 
 <td> xxxdeleteall.do </td> 
 <td> 提示窗 </td> 
 <td> 1、关键字段1: key1 &nbsp; </td> 
 <td> 1、json提示信息 2、格式： { “status”:”0”, “message”:”提示信息”｝ </td> 
 </tr> 
 <tr> 
 <td> ... </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

参数定义

（1）关键字段：在action类中定义关键字段

（2）数据内容：数据内容定义为json类型

2、前台页面功能说明及相关的后台调用

<table> 
 <tbody> 
 <tr> 
 <td> 菜单模块 </td> 
 <td> 前台页面 </td> 
 <td> 功能 </td> 
 <td> 后台action </td> 
 <td> 备注 </td> 
 </tr> 
 <tr> 
 <td> xxx管理 </td> 
 <td> xxxlist.jsp </td> 
 <td> 信息列表、查询、调用添加页面、调用修改页面、删除 </td> 
 <td> Qylist.do qydelete.do </td> 
 <td> 查询：xx名称 </td> 
 </tr> 
 <tr> 
 <td> xxxadd.jsp </td> 
 <td> 添加数据 </td> 
 <td> qyadd.do </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> xxxupdate.jsp </td> 
 <td> 修改数据 </td> 
 <td> Qyview.do qyupdate.do </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> ... </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 <td> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

可以按这种方式，再继续扩展一些特殊的接口定义；

二、**后台的action通讯代码编写**

主要是根据前后台的通讯规范来定义接口的；主要实现以下几个功能“列表信息、添加、更新、删除、显示等”；并按规范命名和定义json通讯格式；以下为代码参考；

//xxxActiont.java

**public** **class** xxxAction **extends** AbstractAction\{

**private** xxxServiceservice;  //数据接口

**private** PagerServicepagerService;//翻页处理

**private** Pagerpager;

**protected** StringpageNum; //当前页

**protected** StringpagerMethod; //执行的方法  “首页，前一页，后一页，尾页”

**protected** StringtotalRows;  //总记录数

**protected** Stringkey1; //  关键字段1 (  xxid)

**protected** Stringkey2;  //  关键字段2 (xxid)

**protected** StringjsonStr;//json数据  ｛xx名称｝

**protected** StringsearchStr;    //name

**public** xxxAction()

pagerService =  **new** PagerService();//翻页处理

service =  **new** xxxService();//数据接口

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*函数名  :  list

\*功能描述:显示列表信息

\*返回值  :  json

\*参数    :

\*作者    :  wang

\*时间    :  2016\-06\-01

\*修改记录:

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**public** **void** list()**throws** Exception

String jsonStr ="";

List<xxxForm> list;

xxxForm form;

String status="0";

String qyid;

String caption;//显示标题

qyid =  key1;

**int** totalRow=service.getRows(qyid,searchStr);

pager=pagerService.getPager(**this**.getPageNum(),**this**.getPagerMethod(), totalRow);

**this**.setPageNum(String.*valueOf*(pager.getCurrentPage()));

**this**.setTotalRows(String.*valueOf*(totalRow));

caption=service.getCaption(qyid);

list = service.getList(qyid,pager.getPageSize(),pager.getStartRow(),searchStr);

jsonStr="\{\\"status\\":\\""\+status+"\\",";

jsonStr+="\\"caption\\":\\""\+caption+"\\",";

jsonStr+="\\"total\\":\\""\+totalRow+"\\",";

**if**(list.size()>0)

jsonStr+="\\"jsonstr\\":\[";

**for**(**int** i=0;i<list.size();i++)

form=(xxxForm)list.get(i);

jsonStr+="\{\\"id\\":\\""\+form.getId()+"\\",";

jsonStr+="\\"name\\":\\""\+form.getFName()+"\\",";

jsonStr+="\\"lon\\":\\""\+form.getLon()+"\\",";

jsonStr+="\\"lat\\":\\""\+form.getLat()+"\\"\},";

**else**

jsonStr+="\\"jsonstr\\":\[";

jsonStr+="\{\\"id\\":\\"\\",";

jsonStr+="\\"name\\":\\"\\",";

jsonStr+="\\"lon\\":\\"\\",";

jsonStr+="\\"lat\\":\\"\\"\},";

jsonStr = jsonStr.substring(0,jsonStr.length()-1);

jsonStr+="\]\}";

HttpServletResponse response = ServletActionContext.*getResponse*();

response.setContentType("text/html;charset=UTF-8");//设置utf\-8防止显示中文乱码

response.getWriter().write(jsonStr);

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*函数名  :  add

\*功能描述:添加

\*返回值  :  json

\*参数    :

\*作者    :  wang

\*时间    :  2016\-06\-01

\*修改记录:

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**public** **void** add()**throws** Exception

xxxForm form =**new** xxxForm();

String message="";

String retJsonStr;

**int** ret=1;

String qyid;

String name="";

qyid =  key1;

JSONObject jsonObject = JSONObject.*fromObject*(jsonStr);

JSONArray data = jsonObject.getJSONArray("jsonstr");

**if**(data.size()>0)

String s = data.getString(0);

JSONObject data2 = JSONObject.*fromObject*(s);

name = data2.getString("name");

String lon = data2.getString("lon");

String lat = data2.getString("lat");

form.setFName(name);

form.setLat(lat);

form.setLon(lon);

ret =  service.add(form);

HttpServletResponse response = ServletActionContext.*getResponse*();

response.setContentType("text/html;charset=UTF-8");//设置utf\-8防止显示中文乱码

**if**(ret==0)

message = "添加成功!";

**else**

message = "添加失败!";

retJsonStr="\{\\"status\\":\\""\+ret+"\\",";

retJsonStr+="\\"message\\":\\""\+message+"\\"\}";

response.getWriter().write(retJsonStr);

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*函数名  :  update

\*功能描述:修改

\*返回值  :  json

\*参数    :

\*作者    :  wang

\*时间    :  2016\-06\-01

\*修改记录:

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**public** **void** update()**throws** Exception

xxxForm form =**new** xxxForm();

String message="";

String retJsonStr;

**int** ret=1;

String id =key2;

JSONObject jsonObject = JSONObject.*fromObject*(jsonStr);

JSONArray data = jsonObject.getJSONArray("jsonstr");

**if**(data.size()>0)

String s = data.getString(0);

JSONObject data2 = JSONObject.*fromObject*(s);

String name = data2.getString("name");

String lon = data2.getString("lon");

String lat = data2.getString("lat");

form.setId(Integer.*parseInt*(id));

form.setFName(name);

form.setLat(lat);

form.setLon(lon);

ret =  service.update(form);

HttpServletResponse response = ServletActionContext.*getResponse*();

response.setContentType("text/html;charset=UTF-8");//设置utf\-8防止显示中文乱码

**if**(ret==0)

message = "修改成功!";

**else**

message = "修改失败!";

retJsonStr="\{\\"status\\":\\""\+ret+"\\",";

retJsonStr+="\\"message\\":\\""\+message+"\\"\}";

response.getWriter().write(retJsonStr);

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*函数名  :  view

\*功能描述:显示一条记录信息

\*返回值  :  json

\*参数    :

\*作者    :  wang

\*时间    :  2016\-06\-01

\*修改记录:

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**public** **void** view()**throws** Exception

String message="";

String str,retJsonStr;

String id;

**int** ret=1;

id =key2;

str =  service.view(Integer.*parseInt*(id));

**if**(str!="")

retJsonStr="\{\\"status\\":\\"0\\",";

message ="获取数据ok";

retJsonStr+="\\"message\\":\\""\+message+"\\",";

retJsonStr+=str+"\}";

**else**

message ="获取不到数据";

retJsonStr="\{\\"status\\":\\"1\\",";

retJsonStr+="\\"message\\":\\""\+message+"\\"\}";

HttpServletResponse response = ServletActionContext.*getResponse*();

response.setContentType("text/html;charset=UTF-8");//设置utf\-8防止显示中文乱码

response.getWriter().write(retJsonStr);

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\*函数名  :  del

\*功能描述:删除

\*返回值  :  json

\*参数    :

\*作者    :  wang

\*时间    :  2016\-06\-01

\*修改记录:

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**public** **void** delete()**throws** Exception

String id;

String message="";

String retJsonStr;

id =  key2;

**int** ret =service.delete(Integer.*parseInt*(id));

HttpServletResponse response = ServletActionContext.*getResponse*();

response.setContentType("text/html;charset=UTF-8");//设置utf\-8防止显示中文乱码

**if**(ret==0)

message = "删除成功!";

**else**

message = "删除失败!";

retJsonStr="\{\\"status\\":\\""\+ret+"\\",";

retJsonStr+="\\"message\\":\\""\+message+"\\"\}";

response.getWriter().write(retJsonStr);

//-------------------------设置属性值\---------------------------

**public** String getPageNum() \{

**return** pageNum;

**public** **void** setPageNum(String currentPage) \{

**this**.pageNum = currentPage;

**public** String getPagerMethod() \{

**return** pagerMethod;

**public** **void** setPagerMethod(String pagerMethod) \{

**this**.pagerMethod = pagerMethod;

**public** Pager getPager() \{

**return** pager;

**public** **void** setPager(Pager pager) \{

**this**.pager = pager;

**public** String getTotalRows() \{

**return** totalRows;

**public** **void** setTotalRows(String totalRows) \{

**this**.totalRows = totalRows;

**public** String getKey1() \{

**return** key1;

**public** **void** setKey1(String key1) \{

**this**.key1 = key1;

**public** String getKey2() \{

**return** key2;

**public** **void** setKey2(String key2) \{

**this**.key2 = key2;

**public** String getSearchStr() \{

**return** searchStr;

**public** **void** setSearchStr(String val) \{

**this**.searchStr = val;

**public** **void** setJsonStr(String jsonstr) \{

**this**.jsonStr = jsonstr;

**public** String getJsonStr() \{

**return** **this**.jsonStr;

三、**前台的jsp代码编写**

主要编写3个jsp文件：xxxlist.jsp、xxxadd.jsp、xxxupdate.jsp;

1、列表信息（Xxxlist.jsp）（主要功能包含翻页、查询、显示添加、更新界面、删除等功能;

代码如下：

Xxxlist.jsp

<!DOCTYPE html>

<%@ page contentType=*"text/html; charset=UTF-8"* language=*"java"* import=*"java.util.List"* errorPage=*""* %>

<%@ taglib prefix=*"s"* uri=*"/struts-tags"* %>

String path = request.getContextPath();

String key1=request.getParameter("key1");  //pid  区域id

String key2=request.getParameter("key2");  //ctrlid  控制器id

<html>

<head>

</head>

**var** selectedTr=**null**;

//初始化，加载完成后执行

window.onload=**function**()\{

document.getElementById("pageNum").value = "1";

document.getElementById("pagerMethod").value = "first";

search();

\};

//搜索按钮绑定回车事件

document.onkeydown = **function**(event)\{

**if** (event.keyCode == 13) \{

event.cancelBubble = **true**;

event.returnValue = **false**;

search();

//首页

**function** **first**()

document.getElementById("pageNum").value = "1";

document.getElementById("pagerMethod").value = "first";

//调用查询方法

search();

//最后一页

**function** **last**()

**var** pageCount = $("\#pageCount").val();

document.getElementById("pageNum").value = pageCount;

document.getElementById("pagerMethod").value = "last";

//调用查询方法

search();

//下一页

**function** **next**()

//得到当前选中项的页号

**var** id=$("\#pageNum").val();

//计算下一页的页号

**var** page=parseInt(id)+1;

id = $("\#pageCount").val();

**var** pageCount = parseInt(id);

**if**(page>pageCount) page= pageCount;

document.getElementById("pageNum").value = page.toString();

document.getElementById("pagerMethod").value = "next";

//调用查询方法

search();

//上一页

**function** **previous**()

//得到当前选中项的页号

**var** id=$("\#pageNum").val();

//计算上一页的页号

**var** previousPage=parseInt(id)-1;

**if**(previousPage<1) previousPage = 1;

document.getElementById("pageNum").value =previousPage.toString();

document.getElementById("pagerMethod").value = "previous";

//调用查询方法

search();

//重新搜索，模糊查询信息

**function** **research**()

document.getElementById("pageNum").value = "1";

document.getElementById("pagerMethod").value = "first";

//调用查询方法

search();

//搜索，模糊查询信息

**function** **search**()

//得到查询条件

**var** searchString=$("\#searchString").val();

**var** key1=document.getElementById("key1").value;

//得到每页显示条数  后台暂时固定16

**var** pageSize=16;

//得到显示第几页

**var** num=$("\#pageNum").val();

**var** pageNum = parseInt(num);

**var** pagerMethod=$("\#pagerMethod").val();

$.ajax(\{

type: "POST",

async: **false**,

url: "xxxlist.do",

data:\{ "key1":key1,

"searchStr":searchString,

"pageNum":pageNum,

"pagerMethod":pagerMethod

\},

dataType:"json",

error: **function**()\{ alert('数据获取错误');\},

success: **function** (data) \{

**var** pageEntity=data;

**var** obj = pageEntity\["jsonstr"\];

//将除模板行的thead删除，即删除之前的数据重新加载

$("thead").eq(0).nextAll().remove();

//将获取到的数据动态的加载到table中

// alter(obj.length);

**for** (**var** i = 0; i < obj.length; i\++) \{

//获取模板行，复制一行

**var** row = $("\#tem").clone();

//给每一行赋值

row.find("\#id").text(obj\[i\].id); //id号

row.find("\#name").text(obj\[i\].name); //名称

row.find("\#lon").text(obj\[i\].lon);  //经度

row.find("\#lat").text(obj\[i\].lat);  //纬度

//将新行添加到表格中

row.appendTo("\#table");

//当前记录总数

**var** pageNumCount=pageEntity\["total"\];

//提示标题

**var** caption = pageEntity\["caption"\];

//document.getElementById("caption").value = caption;

document.getElementById("caption").innerText= caption;

**var** pageNumCount = parseInt(pageNumCount);

//得到总页数

**var** pageCount;

**if**(pageNumCount/pageSize==0)

pageCount=pageNumCount/pageSize;

**else**

pageCount=Math.ceil(pageNumCount/pageSize);

//  $("\#pageCount").val() = pageCount;

document.getElementById("pageCount").value = pageCount;

//输出"显示第1 至10 项记录，共57 项"

document.getElementById("DataTables\_Table\_0\_info").innerHTML=

"【"\+pageNum\+"/"\+pageCount.toString()+"】  "

\+"   【共"\+pageNumCount.toString()+"笔】";

//如果总记录数小于16条，则不显示分页

**if**((pageNumCount\-2)<0)

document.getElementById("bottomTool").style.display="none";

\}**else**\{

document.getElementById("bottomTool").style.display="";

// pageNum = parseInt(pageNum);

/\*\*给上一步下一步加颜色\*\*/

//判断是否只有一页

**if**(pageCount==1)

//如果只有一页，上一步，下一步都为灰色

$("\#previousPage").css("color","\#AAA");//给上一步加灰色

$("\#nextPage").css("color","\#AAA");//给下一步加灰色

$("\#firstPage").css("color","\#AAA");//给上一步加灰色

$("\#lastPage").css("color","\#AAA");//给下一步加灰色

**else** **if**(pageNum\-1<1)

//如果是首页,则给上一步加灰色，下一步变蓝

$("\#firstPage").css("color","\#AAA");

$("\#previousPage").css("color","\#AAA");//给上一步加灰色

$("\#nextPage").css("color","\#00F");//给下一步加蓝色

$("\#lastPage").css("color","\#00F");

**else** **if**(pageNum==pageCount)

//如果是尾页,则给上一步加蓝色，下一步灰色

$("\#firstPage").css("color","\#00F");

$("\#previousPage").css("color","\#00F");//给上一步标签加蓝色

$("\#nextPage").css("color","\#AAA");//给下一步标签加灰色

$("\#lastPage").css("color","\#AAA");

**else**

//上一步为蓝色，下一步为绿色

$("\#firstPage").css("color","\#00F");

$("\#previousPage").css("color","\#00F");//给上一步加蓝色

$("\#nextPage").css("color","\#00F");//给下一步加蓝色

$("\#lastPage").css("color","\#00F");

\});

**function** **c1**(obj)

**var** td = obj.cells\[0\];

**if**(td.innerText!="id号")

**if**(selectedTr!=**null**) selectedTr.style.backgroundColor='white';

**if**(selectedTr==obj)

selectedTr=**null**;//加上此句，以控制点击变白，再点击反灰

document.getElementById("key2").value ='';

**else**

obj.style.backgroundColor='lightblue'; //把点到的那一行变希望的颜色;

selectedTr=obj;

td = selectedTr.cells\[0\];

document.getElementById("key2").value = td.innerText;

//添加窗口

**function** **addwin**()

**var** pid=document.getElementById("key1").value;

**var** caption=document.getElementById("caption").innerText;

**var** x = window.screen.height;

**var** y = window.screen.width;

**var** h = 350;

**var** w = 450;

**var** model = "title=word,location=no,resizable=no,scrollbars=no,height=" \+ h \+ ",width=" \+ w \+ ",status=no,toolbar=no,menubar=no,location=no,top=" \+ (x\-h)/2 \+ ",left=" \+ (y\-w)/2;

**var** url = "";

url = "<%=path%>/web/xxx/xxxaadd.jsp?key1="+pid+"&caption="+caption;//弹出窗口的页面内容

**var** oOpen = window.open(url,"add",model);

oOpen.focus();

//修改窗口

**function** updatewin()

**var** id=document.getElementById("key2").value;

**if**(id=='')

alert("请选择一笔记录");

**return**;

**var** caption=document.getElementById("caption").innerText;

**var** x = window.screen.height;

**var** y = window.screen.width;

**var** h = 350;

**var** w = 450;

**var** url = "";

url = "<%=path%>/web/xxx/xxxupdate.jsp?key2="+id+"&caption="+caption;//弹出窗口的页面内容

**var** oOpen = window.open(url,"update",model);

oOpen.focus();

**function** ondoubleclick(obj)

**var** td = obj.cells\[0\];

td = obj.cells\[0\];

document.getElementById("key2").value = td.innerText;

updatewin();

//删除一条记录

**function** **deleteone**()

**var** id =  document.getElementById("key2").value ;

**if**(id=='')

alert("请选择一笔记录");

**return**;

**if**(!confirm("确认删除吗"))

**return**;

$.ajax(\{

type: "POST",

async: **false**,

url: "xxxdelete.do",

data:\{ "key2":id

\},

dataType:"json",

error: **function**()\{ alert('数据获取错误');\},

success: **function** (data)

**var** pageEntity=data;

**var** status = pageEntity\["status"\];

**var** message = pageEntity\["message"\];

**if** (message != "")

alert(message);

document.getElementById("key2").value = '';

research();

\});

**function** **Trim**(str,is\_global)

**var** result;

result = str.replace(/(^\\s+)|(\\s+$)/g,"");

**if**(is\_global.toLowerCase()=="g")

result = result.replace(/\\s/g,"");

**return** result;

</script>

<body style=*"padding:10px 30px;"* bgColor=*\#ffffff*>

<div class=*"row"*>

<div >

<div class=*"panel-heading"* style=*"background-color:\#F5F5F5"*>

<label id=*"caption"* style=*"font-size:18px;"*></label>

</div>

<div class=*"control-group info"*>

<div class=*"controls"*>

<span class=*"help-inline"*>请输入名称

<input type=*"text"* id=*"searchString"* maxlength=*"30"*>

<button type=*"button"* class=*"btn btn-info"* onclick="research()" onkeypress="Enter()">搜索</button>

</div>

<div class=*"row"*>

<div class=*"col-md-12"* style=*"margin-top:0px;"*>

<div class=*"panel panel-info"*>

<div class=*"panel-heading"*>xxx信息&nbsp

<button type=*"button"* onclick="addwin()" class=*"btn btn-info"*><i class=*"icon-plus"*>添加</button>

&nbsp

<button type=*"button"* onclick="updatewin()" class=*"btn btn-info"*>编辑</button>

&nbsp

<button type=*"button"* onclick="deleteone()" class=*"btn btn-info"*>删除</button>

</div>

<table id=*"table"* class=*"table table-striped table-bordered table-hover datatable"*>

<thead id=*"tem"*>

<tr class=*"trs"* onclick="c1(**this**);" ondblclick="ondoubleclick(**this**);">

<th id=*"id"*>id号</th>

<th id=*"name"*>设备名称</th>

<th id=*"lon"*>经度</th>

<th id=*"lat"*>纬度</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<div id=*"bottomTool"* class=*"row-fluid"* >

<div class=*"span6"* style=*"width:25%;"* >

<div id=*"DataTables\_Table\_0\_info"* class=*"dataTables\_info"*> </div>

</div>

<div class=*"span6"* style=*"width:80%;"*>

<div class=*"dataTables\_paginate paging\_bootstrap pagination"*>

<a id=*"firstPage"* href=*"\#"* onclick="first()"> 首页</a>

&nbsp

<a id=*"previousPage"* href=*"\#"* onclick="previous()"> ←上一页</a>

&nbsp

<a id=*"nextPage"* href=*"\#"* onclick="next()"> 下一页 → </a>

&nbsp

<a id=*"lastPage"* href=*"\#"* onclick="last()"> 未页</a>

</div>

<input type=*"hidden"* name=*"key1"* value=<%=key1%> id=*"key1"*/>

<input type=*"hidden"* name=*"key2"* id=*"key2"*/>

<input type=*"hidden"* name=*"pageNum"* id=*"pageNum"*/>

<input type=*"hidden"* name=*"pageCount"* id=*"pageCount"*/>

<input type=*"hidden"* name=*"pagerMethod"* id=*"pagerMethod"*/>

</body>

</html>

2、添加界面（xxxadd.jsp)

主要是编辑输入界面，添加功能是调用xxxadd.do 保存添加记录；代码如下：

//xxxadd.jsp

<!DOCTYPE html>

<%@ page contentType=*"text/html; charset=UTF-8"* language=*"java"* import=*"java.util.List"* errorPage=*""* %>

<%@ taglib prefix=*"s"* uri=*"/struts-tags"* %>

String path = request.getContextPath();

String key1=request.getParameter("key1");

String caption =**new** String(request.getParameter("caption").getBytes("iso-8859-1"),"utf-8");

<html>

<head>

</head>

**function** **add**()

**var** pid =  document.getElementById("key1").value ;

**var** name =  document.getElementById("name").value ;

**var** lon =  document.getElementById("lon").value ;

**var** lat =  document.getElementById("lat").value ;

**var** jsonstr="";

jsonstr="\{\\"jsonstr\\":\[\{\\"name\\":\\""\+name\+"\\",";

jsonstr\+="\\"rtsp\\":\\""\+rtsp\+"\\",";

jsonstr\+="\\"lon\\":\\""\+lon\+"\\",";

jsonstr\+="\\"lat\\":\\""\+lat\+"\\"\}\]\}";

$.ajax(\{

type: "POST",

async: **false**,

url: "xxxaadd.do",

data:\{ "key1":pid,

"jsonStr":jsonstr

\},

dataType:"json",

error: **function**()\{ alert('数据获取错误');\},

success: **function** (data)

**var** pageEntity=data;

**var** status = pageEntity\["status"\];

**var** message = pageEntity\["message"\];

**if** (message != "")

**if**(status=="0")

window.opener.location.reload();

self.close();//关闭子页面

**else**

alert(message);

\});

**function** closeReflush()

// window.opener.location.reload();

self.close();//关闭子页面

**function** **isnumberfloat**(obj)\{

**var** tmp = obj.value;

tmp = tmp.replace(/\[^\\d.\]/g, "");

tmp = tmp=='' ? '' : tmp;

obj.value = tmp;

</script>

<body bgColor=*\#ffffff*>

<div id=*"page-wrapper"*>

<div class=*"page-breadcrumbs"*>

<%=caption%> --> 添加

</div>

<div class=*"graphs"*>

<div class=*"xs"*>

<div class=*"tab-content"*>

<div class=*"tab-pane active"* id=*"horizontal-form"*>

<form class=*"form-horizontal"*>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*>设备名称：</label>

<div class=*"controls"*>

<input type=*"text"* id=*"name"* maxlength=*"30"*>

</div>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*>经度：</label>

<div class=*"controls"*>

<input type=*"text"* id=*"lon"* onchange=*"isnumberfloat(this);"* maxlength=*"16"*>

</div>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*>纬度：</label>

<div class=*"controls"*>

<input type=*"text"* id=*"lat"* onchange=*"isnumberfloat(this);"* maxlength=*"16"*>

</div>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*></label>

<div class=*"controls"*>

<button type=*"button"* class=*"btn btn-primary pull-middle"* onclick="add()">保存</button>

&nbsp

<button type=*"button"* class=*"btn btn-blue"* onclick="closeReflush()">返回</button>

</div>

</form>

</div>

<input type=*"hidden"* name=*"key1"* value=<%=key1%> id=*"key1"*/>

</body>

</html>

3、更新界面（xxxupdate.jsp)

主要是编辑输入界面，加载时首先会调用xxxview.do,加载当前记录并显示，更新功能是调用xxxupdate.do 进行保存更新记录；并键字为key2为数据表中的唯一id;编辑的代码界面和添加差不多，具体代码如下：

//xxxupdate.jsp

<!DOCTYPE html>

<%@ page contentType=*"text/html; charset=UTF-8"* language=*"java"* import=*"java.util.List"* errorPage=*""* %>

<%@ taglib prefix=*"s"* uri=*"/struts-tags"* %>

String path = request.getContextPath();

String key2=request.getParameter("key2");

String caption =**new** String(request.getParameter("caption").getBytes("iso-8859-1"),"utf-8");

<html>

<head>

</head>

//初始化，加载完成后执行

window.onload=**function**()

view();

\};

//显示

**function** **view**()

**var** id =  document.getElementById("key2").value ;

$.ajax(\{

type: "POST",

async: **false**,

url: "xxxview.do",

data:\{ "key2":id

\},

dataType:"json",

error: **function**()\{ alert('数据获取错误');\},

success: **function** (data)

**var** pageEntity=data;

**var** status = pageEntity\["status"\];

**var** message = pageEntity\["message"\];

**if**(status=="0")

**var** obj = pageEntity\["jsonstr"\];

**if**(obj.length>0)

document.getElementById("name").value = obj\[0\].name;

document.getElementById("lon").value = obj\[0\].lon;

document.getElementById("lat").value = obj\[0\].lat;

\});

**function** **update**()

**var** id =  document.getElementById("key2").value ;

**var** name =  document.getElementById("name").value ;

**var** lon =  document.getElementById("lon").value ;

**var** lat =  document.getElementById("lat").value ;

**var** jsonstr="";

jsonstr="\{\\"jsonstr\\":\[\{\\"name\\":\\""\+name\+"\\",";

jsonstr\+="\\"lon\\":\\""\+lon\+"\\",";

jsonstr\+="\\"lat\\":\\""\+lat\+"\\"\}\]\}";

$.ajax(\{

type: "POST",

async: **false**,

url: "xxxupdate.do",

data:\{ "key2":id,

"jsonStr":jsonstr

\},

dataType:"json",

error: **function**()\{ alert('数据获取错误');\},

success: **function** (data)

**var** pageEntity=data;

**var** status = pageEntity\["status"\];

**var** message = pageEntity\["message"\];

**if** (message != "")

**if**(status=="0")

window.opener.location.reload();

self.close();//关闭子页面

**else**

alert(message);

\});

**function** **closeReflush**()

self.close();//关闭子页面

**function** **isnumberfloat**(obj)\{

**var** tmp = obj.value;

tmp = tmp.replace(/\[^\\d.\]/g, "");

tmp = tmp=='' ? '' : tmp;

obj.value = tmp;

</script>

<body bgColor=*\#ffffff*>

<div id=*"page-wrapper"*>

<div class=*"page-breadcrumbs"*>

<%=caption%> --> 修改

</div>

<div class=*"graphs"*>

<div class=*"xs"*>

<div class=*"tab-content"*>

<div class=*"tab-pane active"* id=*"horizontal-form"*>

<form class=*"form-horizontal"*>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*>设备名称：</label>

<div class=*"controls"*>

<input type=*"text"* id=*"name"* maxlength=*"30"*>

</div>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*>经度：</label>

<div class=*"controls"*>

<input type=*"text"* id=*"lon"* onchange=*"isnumberfloat(this);"* maxlength=*"16"*>

</div>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*>纬度：</label>

<div class=*"controls"*>

<input type=*"text"* id=*"lat"* onchange=*"isnumberfloat(this);"* maxlength=*"16"*>

</div>

<div class=*"control-group info"*>

<label class=*"control-label"* for=*"inputInfo"*></label>

<div class=*"controls"*>

<button type=*"button"* class=*"btn btn-primary pull-middle"* onclick="update()">保存</button>

&nbsp

<button type=*"button"* class=*"btn btn-blue"* onclick="closeReflush()">返回</button>

</div>

</form>

</div>

<input type=*"hidden"* name=*"key2"* value=<%=key2%> id=*"key2"*/>

</body>

</html>

**四、Struts.xml参考配置**

<?xml version=*"1.0"* encoding=*"UTF-8"* ?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<constant name=*"struts.i18n.encoding"* value=*"UTF-8"*/>

<constant name=*"struts.action.extension"* value=*"do"* />

<package name=*"test"* extends=*"json-default"* namespace=*""*>

<action name=*"xxxlist"* class=*"com.xxx.action.xxxAction"* method=*"list"*>

<result name=*"success1"* type=*"json"*>

</result>

</action>

<action name=*"xxxaadd"* class=*"com.xxx.action.xxxAction"* method=*"add"*>

<result name=*"success1"* type=*"json"*>

</result>

</action>

<action name=*"xxxupdate"* class=*"com.xxx.action.xxxAction"* method=*"update"*>

<result name=*"success1"* type=*"json"*>

</result>

</action>

<action name=*"xxxview"* class=*"com.xxx.action.xxxAction"* method=*"view"*>

<result name=*"success1"* type=*"json"*>

</result>

</action>

<action name=*"xxxdelete"* class=*"com.xxx.action.xxxAction"* method=*"delete"*>

<result name=*"success1"* type=*"json"*>

</result>

</action>

</package>

</struts>

**结尾**

通过实践，本人觉得我的这个思路还是不错的；为此想把这种方法写下来，可以让更多人参考和借鉴；介绍过程中有不足之处请给予指示，或有更好的思路和想法也可以给我留言，这样大家都可以共同学习和进步。

javaweb网站开发模板化设计

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaWeb 开发

相关 IDEA模板化开发，提高开发效率

相关 Javaweb实现电影网站

相关 Javaweb实现电影网站

相关 javaweb网站开发模板化设计

相关 JavaWeb招聘网站系统

相关如何设计通用的网站模板

相关 javaWeb_注释模板

相关 Bootstrap,网站模板,bootstrap模板

相关 16个时髦的扁平化设计+视觉滚差的网站模板