rpc接口mock平台

zoukankan html css js c++ java

rpc接口mock平台

转载：http://blog.csdn.net/ronghuanye/article/details/71124320

1、简介

平台采用struts、spring、mybatis框架开发设计，主要用来管理mock接口数据，也可以用来管理接口自动化，并集成一些常用工具。

2、架构设计

web.xml

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


<web-app version="2.4"
xmlns=" http://java.sun.com/xml/ns/j2ee"
xmlns:xsi=" http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=" http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<welcome-file-list>
  <welcome-file>login.jsp</welcome-file>
  </welcome-file-list>

  <context-param>
  <param-name>webAppRootKey</param-name>
  <param-value>webApp.SM1</param-value>
</context-param>

  
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

<dependency>
<artifactId>slf4j-log4j12</artifactId>
<version>1.5.8</version>
</dependency>

<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.13</version>
</dependency>

<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>classpath:log4j.properties</param-value>
</context-param>

<context-param>
<param-name>log4jRefreshInterval</param-name>
<param-value>60000</param-value>
</context-param>

<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>


<filter>
<filter-name>Struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>


<filter-mapping>
<filter-name>Struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>Struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>

</web-app>

view层

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import com.huawei.vmall.test.service.MockService;
import com.huawei.vmall.test.util.BaseAction;
import com.huawei.vmall.test.util.Utils;
import net.sf.json.JSONObject;

public class MockAction extends BaseAction{

private static final long serialVersionUID = 1L;
private Logger logger = Logger.getLogger(MockAction.class);
@Autowired
private MockService mockService;

private int id;
private int status;
private String interfaceName;
private String methodName;
private String paramTypes;
private String paramJson;
private String returnType;
private String returnJson;
private int page;
private int rows;

//web query mock
public void getMock() {
String res = "";

try
{
Map<String, Object> map = new HashMap<String, Object>();
map.put("page", this.getPage());
map.put("rows", this.getRows());
res = mockService.getMock(map);
this.sendMsg(res);
}
catch(Exception e)
{
logger.error(e);
this.sendMsg("{"success":false,"errorMsg":"" + e.toString() + ""}");
}
}

//filter query mock
public void goMock() {
List<Map<String,Object>> res = null;
try
{
//json对象
JSONObject jsonObj = JSONObject.fromObject(Utils.getPostContent(this.getRequest()));
Map<String, Object> map = new HashMap<String, Object>();
map.put("interfaceName", jsonObj.getString("interfaceName"));
map.put("methodName",jsonObj.getString("methodName"));
map.put("paramTypes", jsonObj.getString("paramTypes"));
map.put("paramJson", jsonObj.getString("paramJson"));
map.put("returnType", jsonObj.getString("returnType"));
res = mockService.goMock(map);

if(res.size()>0)
{
this.sendMsg("{"success":true,"message":"+JSONObject.fromObject(res.get(0)).toString()+"}");
} else {
this.sendMsg("{"success":true,"message":""}");
}
}
catch(Exception e)
{
logger.error(e);
this.sendMsg("{"success":false,"errorMsg":"" + e.toString() + ""}");
}
}
//filter add mock
public void addMock() {
try
{
//json对象
JSONObject jsonObj = JSONObject.fromObject(Utils.getPostContent(this.getRequest()));
Map<String, Object> map = new HashMap<String, Object>();
map.put("interfaceName", jsonObj.getString("interfaceName"));
map.put("methodName",jsonObj.getString("methodName"));
map.put("paramTypes", jsonObj.getString("paramTypes"));
map.put("paramJson", jsonObj.getString("paramJson"));
map.put("returnType", jsonObj.getString("returnType"));
map.put("returnJson", jsonObj.getString("returnJson"));
map.put("status", 0);
mockService.addMock(map);
this.sendMsg("{"success":true,"message":"执行成功"}");
}
catch(Exception e)
{
logger.error(e);
this.sendMsg("{"success":false,"errorMsg":"" + e.toString() + ""}");
}
}
//web add Mock
public void newMock() {
try
{
Map<String, Object> map = new HashMap<String, Object>();
map.put("interfaceName", this.getInterfaceName());
map.put("methodName",this.getMethodName());
map.put("paramTypes", this.getParamTypes());
map.put("paramJson", this.getParamJson());
map.put("returnType", this.getReturnType());
map.put("returnJson", this.getReturnJson());
map.put("status", this.getStatus());
mockService.addMock(map);
this.sendMsg("{"success":true,"message":"执行成功"}");
}
catch(Exception e)
{
logger.error(e);
this.sendMsg("{"success":false,"errorMsg":"" + e.toString() + ""}");
}
}
//update mock
public void updateMock() {
try
{
Map<String, Object> map = new HashMap<String, Object>();
map.put("interfaceName", this.getInterfaceName());
map.put("methodName",this.getMethodName());
map.put("paramTypes", this.getParamTypes());
map.put("paramJson", this.getParamJson());
map.put("returnType", this.getReturnType());
map.put("returnJson", this.getReturnJson());
map.put("status", this.getStatus());
map.put("id", this.getId());
mockService.updateMock(map);
this.sendMsg("{"success":true,"message":"执行成功"}");
}
catch(Exception e)
{
logger.error(e);
this.sendMsg("{"success":false,"errorMsg":"" + e.toString() + ""}");
}
}
//delete Mock
public void deleteMock() {
try
{
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", this.getId());
mockService.deleteMock(map);
this.sendMsg("{"success":true,"message":"执行成功"}");
}
catch(Exception e)
{
logger.error(e);
this.sendMsg("{"success":false,"errorMsg":"" + e.toString() + ""}");
}
}

public int getId()
{
return id;
}

public void setId(int id)
{
this.id = id;
}

public int getStatus()
{
return status;
}

public void setStatus(int status)
{
this.status = status;
}

public String getInterfaceName()
{
return interfaceName;
}

public void setInterfaceName(String interfaceName)
{
this.interfaceName = interfaceName;
}

public String getMethodName()
{
return methodName;
}

public void setMethodName(String methodName)
{
this.methodName = methodName;
}

public String getParamTypes()
{
return paramTypes;
}

public void setParamTypes(String paramTypes)
{
this.paramTypes = paramTypes;
}

public String getParamJson()
{
return paramJson;
}

public void setParamJson(String paramJson)
{
this.paramJson = paramJson;
}

public String getReturnType()
{
return returnType;
}

public void setReturnType(String returnType)
{
this.returnType = returnType;
}

public String getReturnJson()
{
return returnJson;
}

public void setReturnJson(String returnJson)
{
this.returnJson = returnJson;
}
public int getPage()
{
return page;
}

public void setPage(int page)
{
this.page = page;
}

public int getRows()
{
return rows;
}

public void setRows(int rows)
{
this.rows = rows;
}
}

service层

import java.util.List;
import java.util.Map;

import com.huawei.vmall.test.util.PaginationResultImpl;
import com.huawei.vmall.test.util.TmasException;

public interface MockService {

String getMock(Map<String, Object> map) throws TmasException;

List<Map<String,Object>> goMock(Map<String, Object> map) throws TmasException;

void addMock(Map<String, Object> map) throws TmasException;

void updateMock(Map<String, Object> map);

void deleteMock(Map<String, Object> map);

}

import java.util.List;
import java.util.Map;

import org.apache.ibatis.session.RowBounds;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.huawei.vmall.test.mapper.MockMapper;
import com.huawei.vmall.test.util.PaginationResultImpl;
import com.huawei.vmall.test.util.TmasException;

import net.sf.json.JSONArray;

@Service("MockService")
public class MockServiceImpl implements MockService {

@Autowired
private MockMapper mockMapper;

public String getMock(Map<String, Object> map) throws TmasException
{
// 总行数
int rowTotal = mockMapper.queryMockCount();
int page = Integer.parseInt(map.get("page").toString());
int rows = Integer.parseInt(map.get("rows").toString());
map.put("offset", (page-1)*rows);
List<Map<String, Object>> list = mockMapper.getMock(map);
return "{"total":""+rowTotal+"","rows":"+JSONArray.fromObject(list).toString()+"}";
}
@Override
public List<Map<String, Object>> goMock(Map<String, Object> map) throws TmasException
{
return mockMapper.goMock(map);
}
@Override
public void addMock(Map<String, Object> map) throws TmasException
{
mockMapper.addMock(map);
}
@Override
public void updateMock(Map<String, Object> map)
{
mockMapper.updateMock(map);
}
@Override
public void deleteMock(Map<String, Object> map)
{
mockMapper.deleteMock(map);
}

}

dao层

import java.util.List;
import java.util.Map;

import org.apache.ibatis.session.RowBounds;

public interface MockMapper {

List<Map<String, Object>> getMock(Map<String, Object> map);

List<Map<String, Object>> goMock(Map<String, Object> map);

void addMock(Map<String, Object> map);

void updateMock(Map<String, Object> map);

void deleteMock(Map<String, Object> map);

int queryMockCount();

}

<?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="com.huawei.vmall.test.mapper.MockMapper">

<select id="queryMockCount" resultType="int">
SELECT count(*) from mock
</select>

<select id="getMock" resultType="Map">
SELECT * from mock order by id LIMIT #{offset},#{rows};
</select>

<select id="goMock" parameterType="Map" resultType="Map">
SELECT status,returnJson from mock where
interfaceName=#{interfaceName} and
methodName=#{methodName} and
paramTypes=#{paramTypes}
</select>

<select id="addMock" parameterType="Map" >
insert into mock(interfaceName,
methodName,
paramTypes,
paramJson,
returnType,
returnJson,
keyword,
status)
VALUES(#{interfaceName},
#{methodName},
#{paramTypes},
#{paramJson},
#{returnType},
#{returnJson},
'',
#{status})
</select>

<select id="updateMock" parameterType="Map">
update mock set
interfaceName=#{interfaceName},
methodName=#{methodName},
paramTypes=#{paramTypes},
paramJson=#{paramJson},
returnType=#{returnType},
status=#{status}
where id = #{id}
</select>

<select id="deleteMock" parameterType="Map">
DELETE FROM mock where id = #{id}
</select>

</mapper>

util类：

import java.io.BufferedReader;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.util.Properties;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.httpclient.params.HttpMethodParams;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.DefaultHttpClient;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
import com.mysql.jdbc.Statement;

@SuppressWarnings("deprecation")
public class Utils {
public static String getConfig(File file,String key){
String value = "";
try {
FileInputStream fis = new FileInputStream(file);
Properties prop = new Properties();
prop.load(fis);
value = prop.getProperty(key);
} catch (Exception e) {
e.printStackTrace();
}
return value;
}

public static Connection getConn(File file){
Connection connection = null;
//File file;
String url;
String username;
String passwd;
try {
//file = new File("config/yslow.config");
url = Utils.getConfig(file, "mysql_url");
username = Utils.getConfig(file, "mysql_username");
passwd = Utils.getConfig(file, "mysql_passwd");
Class.forName("com.mysql.jdbc.Driver");
connection = (Connection)DriverManager.getConnection(url, username, passwd);
} catch (Exception e) {
e.printStackTrace();
}

return connection;
}

public static ResultSet execSQL(String sql, File file){
ResultSet rs = null;
Statement stat = null;
try {
stat = (Statement) Utils.getConn(file).createStatement();
rs = stat.executeQuery(sql);
} catch (Exception e) {
System.out.println("数据库参数配置错误，请检查。。。");
e.printStackTrace();
}
return rs;
}

public static ResultSet execSQL(String sql,String param,File file){
PreparedStatement pStatement = null;
ResultSet rs = null;
try {
pStatement = (PreparedStatement) Utils.getConn(file).prepareStatement(sql);
pStatement.execute(sql);
} catch (Exception e) {
e.printStackTrace();
}

return rs;
}

@SuppressWarnings("finally")
public static String httpPost(String url,String jsonParam){
DefaultHttpClient client = new DefaultHttpClient();
client.getParams().setParameter(HttpMethodParams.USER_AGENT, "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0");
HttpPost post = new HttpPost(url);
HttpResponse response = null;
String respStr = "";
if (jsonParam.length() == 0){
client.close();
return "";
}
try {
StringEntity entity = new StringEntity(jsonParam,"utf-8");
entity.setContentEncoding("UTF-8");
entity.setContentType("application/json");
post.setEntity(entity);
response = client.execute(post);
//获取响应数据
InputStreamReader reader = new InputStreamReader(response.getEntity().getContent(),"UTF-8");
BufferedReader br = new BufferedReader(reader);
String line = null;
StringBuilder sb = new StringBuilder();
while((line = br.readLine())!=null){
sb.append(line);
}
respStr = sb.toString();
} catch (Exception e) {
e.printStackTrace();
}
finally {
client.close();
return respStr;
}
}
/**
* 读取POST请求内容数据.
* HttpServletRequest request
*/
@SuppressWarnings("finally")
public static String getPostContent(HttpServletRequest request) {
BufferedReader br;
String line = null;
StringBuilder sb = null;
String result = "";
try {
InputStreamReader reader = new InputStreamReader(request.getInputStream(),"UTF-8");
br = new BufferedReader(reader);
sb = new StringBuilder();
while((line = br.readLine())!=null){
sb.append(line);
}
result = sb.toString();
}
catch (Exception e)
{
e.printStackTrace();
}
finally {
return result;
}
}
}

静态页面html

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TCEP</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" style="100%;height:600px;">
<div data-options="region:'north'" style="height:50px; background:#557fc3; color:yellow">
<h2 style="text-align:center;vertical-align:middle;height:30px;margin-bottom:5px;margin-top:13px;">性能测试执行平台</h2>
</div>
<div data-options="region:'west',split:true" title="导航栏" style="120px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="接口MOCK" style="padding:10px;">
<a href="mock.html" style="display:block;80px;height:18px;border:1.5px solid #000000;background:#336699;font-size:14px;margin-top:10px;padding: 2px 6px;color:#ffffff;text-decoration:none;"
  target="Iframe" onClick='setNavigationBar("接口MOCK", "MOCK管理")'>MOCK管理</a>
</div>
<div title="接口自动化" style="padding:10px;">

</div>
<div title="常用工具" data-options="selected:true" style="padding:10px">
<a href="jsonFormat.html" style="display:block;80px;height:18px;border:1.5px solid #000000;background:#336699;font-size:14px;margin-top:10px;padding: 2px 6px;color:#ffffff;text-decoration:none;"
  target="Iframe" onClick='setNavigationBar("常用工具", "JSON格式化")'>JSON格式化</a>

</div>
</div>
</div>
<div data-options="region:'center',title:'workspace',iconCls:'icon-ok'">
<iframe id="frame" name="Iframe" frameborder="0" scrolling="no" src="mock.html"
style="100%;height:99%;overflow: hidden; border: 0px solid red;">
</iframe>
</div>
</div>
<script>
  $(document).ready(function(e)
  {
  setNavigationBar("接口MOCK", "MOCK管理");
  });
/**
* 更改导航栏名称
* @param bar1: 上一层的名称
* @param bar2: 当前层的名称
*/
function setNavigationBar(bar1, bar2)
{
  currentFuncName = [];
  currentFuncName.push(bar1);
  var trHtml = bar1;
  if (bar2)
  {
  currentFuncName.push(bar2);
  trHtml += " <b>></b> "+ bar2;
  }
  getByClass("panel-with-icon")[0].innerHTML=trHtml;;
}

/*
*通过classname获取元素
*
*/
function getByClass(sClass){
var aResult=[];
var aEle=document.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
/*将每个className拆分*/
var arr=aEle[i].className.split(/s+/);
for(var j=0;j<arr.length;j++){
/*判断拆分后的数组中有没有满足的class*/
if(arr[j]==sClass){
aResult.push(aEle[i]);
}
}
}
return aResult;
};
</script>
</body>
</html>

mock.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
</head>
<body>

<table id="dg" title="MOCK管理" class="easyui-datagrid" style="100%;height:100%"
url="mock!getMock.action" toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="interfaceName" width="50">接口服务</th>
<th field="methodName" width="50">接口方法</th>
<th field="paramTypes" width="50">参数类型</th>
<th field="paramJson" width="100">参数JSON</th>
<th field="returnType" width="50">返回类型</th>
<th field="returnJson" width="100">返回JSON</th>
<th field="status" width="45">mock开关(0关,1开)</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newMock()">添加mock接口</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editMock()">修改mock接口</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyMock()">删除mock接口</a>
</div>

<div id="dlg" class="easyui-dialog" style="1000px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
<div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">Mock Information</div>
<div style="margin-bottom:10px">
<input name="interfaceName" class="easyui-textbox" required="true" label="接口服务:" style="100%">
</div>
<div style="margin-bottom:10px">
<input name="methodName" class="easyui-textbox" required="true" label="接口方法:" style="100%">
</div>
<div style="margin-bottom:10px">
<input name="paramTypes" class="easyui-textbox" required="true" label="参数类型:" style="100%">
</div>
<div style="margin-bottom:10px">
<input name="paramJson" class="easyui-textbox" required="true" label="参数JSON:" style="100%">
</div>
<div style="margin-bottom:10px">
<input name="returnType" class="easyui-textbox" required="true" label="返回类型:" style="100%">
</div>
<div style="margin-bottom:10px">
<input name="returnJson" class="easyui-textbox" required="true" label="返回JSON:" style="100%">
</div>
<div style="margin-bottom:10px">
<input name="status" class="easyui-textbox" required="true" label="mock开关:" style="20%">
<a >请输入0或者1 (0-关闭mock,1-开启mock)</a>
</div>
</form>
</div>
<div id="dlg-buttons" style="text-align:center"">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveMock()" style="90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="90px">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newMock(){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','New Mock');
$('#fm').form('clear');
url = 'mock!newMock.action';
}
function editMock(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit Mock');
$('#fm').form('load',row);
url = 'mock!updateMock.action?id='+row.id;
}
}
function saveMock(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyMock(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to delete this mock?',function(r){
if (r){
$.post('mock!deleteMock.action',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script>
</body>
</html>

jsonFormat.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div>
<textarea id="json_input" style="font-size: 12px !important;99%;height:100%" rows="32"
spellcheck="false" placeholder="请输入需要格式化的json字符串"></textarea>
</div>
<div class="left" style="float:left">
<button id="validate" >格式化</button>
<button id="compress" > 压缩 </button>
<button id="compress" onclick="javascript:json_input.value='';$('#json_input').focus();"> 清空 </button>
</div>
<script>
//格式化
$("#validate").click(function(){
var v =$("#json_input").val();
var v1 = format(v,false);
if(v1){
$("#json_input").val(v1);
}
});
//压缩
$("#compress").click(function(){
var v =$("#json_input").val();
var v1 = format(v,true);
if(v1){
$("#json_input").val(v1);
}
});
//json格式化函数
function format(txt,compress/*是否为压缩模式*/){/* 格式化JSON源码(对象转换为JSON文本) */
var indentChar = ' ';
if(/^s*$/.test(txt)){
openTipWin('数据为空,无法格式化!');
return;
}
try{var data=eval('('+txt+')');}
catch(e){
openTipWin('数据源语法错误,格式化失败!');
return;
};
var draw=[],last=false,This=this,line=compress?'':' ',nodeCount=0,maxDepth=0;
var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/
for (var i=0,tab='';i<indent;i++ )tab+=indentChar;/* 缩进HTML */
tab=compress?'':tab;/*压缩模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记录*/
if(value&&value.constructor==Array){/*处理数组*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/
for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/
}else if(value&&typeof value=='object'){/*处理对象*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/
var len=0,i=0;
for(var key in value)len++;
for(var key in value)notify(key,value[key],++i==len,indent,true);
draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/
}else{
if(typeof value=='string')value='"'+value.replace(/"/g,"\"")+'"'; /* value中双引号加上转移斜杠 */
draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line);
};
};
var isLast=true,indent=0;
notify('',data,isLast,indent,false);
return draw.join('');
}

</script>
</body>
</html>

js

jquery-easyui-1.5.2

common.js

var w;
function openTipWin(message){
var mes = message + '<br/><br/><br/><input type="button" onclick="closeTipWin();" value="关闭"/>';
w = new PopWin(message);
w.setWidthHeight(400,150);
w.show();
}
function closeTipWin(){
w.removeObj();
}
function PopWin(str) {
var msgw, msgh, bordercolor;
msgw = 400;//提示窗口的宽度
msgh = 210;//提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#336699";//提示窗口的边框颜色/标题颜色
bgObj = document.createElement("div");//创建一个div对象（背景层）
msgObj = document.createElement("div")//创建一个div对象（提示框层）
var title = document.createElement("h4");//创建一个h4对象（提示框标题栏）

// 设置对话框的宽和高
this.setWidthHeight = function(w, h) {
msgw = w;
msgh = h;
}

this.show = function() {

var sWidth, sHeight;
sWidth = document.body.offsetWidth;//浏览器工作区域内页面宽度
sHeight = screen.height;//屏幕高度（垂直分辨率）

var scrollTop = document.documentElement.scrollTop;

// if (self.frameElement && self.frameElement.tagName == "IFRAME") {
// if (!self.frameElement.contentDocument) {
// sWidth = self.frameElement.contentDocument.body.offsetWidth;
// sHeight = self.frameElement.contentDocument.body.offsetHeight;
// } else {
// sWidth = self.frameElement.Document.body.offsetWidth;
// sHeight = self.frameElement.Document.body.offsetHeight;
// }
// scrollTop = window.parent.document.documentElement.scrollTop;
// }

//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
//this.bgObj=document.createElement("div");//创建一个div对象（背景层）
//定义div属性，即相当于
//<div id="bgDiv" style="position:absolute; top:0; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; 918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id', 'bgDiv');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#777";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);//在body内添加该div对象

//this.msgObj=document.createElement("div")//创建一个div对象（提示框层）
//定义div属性，即相当于
//<div id="msgDiv" align="center" style=" border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; 400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></div>
msgObj.setAttribute("id", "msgDiv");
msgObj.setAttribute("align", "center");
msgObj.style.background = "white";
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = scrollTop + 150 + "px";
msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px";
msgObj.style.marginTop = "0px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight = "25px";
msgObj.style.zIndex = "10001";

//var title=document.createElement("h4");//创建一个h4对象（提示框标题栏）
//定义h4的属性，即相当于
//<h4 id="msgTitle" align="right" style="margin:0; padding:3px; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick="">关闭</h4>
title.setAttribute("id", "msgTitle");
title.setAttribute("align", "left");
title.style.margin = "0";
title.style.padding = "3px";
title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";
title.style.border = "1px solid " + bordercolor;
title.style.height = "18px";
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color = "white";
//title.style.cursor="pointer";
title.innerHTML = "错误提示";
//title.onclick=this.removeObj;

var button=document.createElement("input");//创建一个input对象（提示框按钮）
//定义input的属性，即相当于
//<input type="button" align="center" style="100px; align:center; margin-left:250px; margin-bottom:10px;" value="关闭">
button.setAttribute("type","button");
button.setAttribute("value","关闭");
button.style.width="60px";
button.style.align="center";
button.style.marginLeft="0px";
button.style.marginBottom="0px";
button.style.background=bordercolor;
button.style.border="1px solid "+ bordercolor;
button.style.color="white";
button.onclick=this.removeObj;

document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj
document.getElementById("msgDiv").appendChild(title);//在提示框div中添加标题栏对象title

var txt = document.createElement("p");//创建一个p对象（提示框提示信息）
//定义p的属性，即相当于
//<p style="margin:1em 0;" id="msgTxt">测试效果</p>
txt.style.margin = "1em 0"
txt.setAttribute("id", "msgTxt");
txt.innerHTML = str + "<br/><br/>";//来源于函数调用时的参数值
document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt
document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button
}

this.removeObj = function() {//点击标题栏触发的事件
document.body.removeChild(bgObj);//删除背景层Div
document.getElementById("msgDiv").removeChild(title);//删除提示框的标题栏
document.body.removeChild(msgObj);//删除提示框层
}
}

查看全文

相关阅读:
js 和 jquery 动态创建元素
 京东火车票正式上线：开卖火车票！
网易旗下新域名泰坦尼克曝光：要出航海题材新作
 Facebook CEO扎克伯格造访日本，获首相会见
 struts2教程系列
 hadoop方面的资料
 FlexViewer入门资料
 深入浅出Flex Viewer系列
 flex css
【Flex4中的皮肤使用组件数据】系列

原文地址：https://www.cnblogs.com/ceshi2016/p/7883621.html