React之模拟数据库json-server 2019-01-26

在前端开发的时候，我们有时候需要验证一些异步请求返回数据后的交互效果，那么就需要搭建一个nodejs服务器来模拟，但是需要自己去在node项目中写比较麻烦，json-server就是快速搭建这样一个node服务器，你只需要创建一个json的文件，然后监听这个文件就可以了

这里我使用yarn本地安装并演示json-server，因为我npm已经有了全局的json-server

终端命令：

现在你已经运行了一个小的服务器，通过向 >

将数据以json格式传给前端：

function generateDtb() {

//写入

var txtName = documentgetElementById("txtName")value;

//创建数组

var dtb = new Array();

//通过循环把数据写入到数组并返回

for (var i = 0; i < firstGrouplength; i++) {

var row = new Object();

rowName = txtName;

rowfullMoney = firstGroup[i]value;

rowdiscount = secondGroup[i]value;

dtbpush(row);

}

return dtb;

}

把数组转换成json串传入到后台：

$(function () {

//点击botton1

$("#lbtnOK")click(function () {

var url = "DiscountMangeraspxajax=1";

var dtb = generateDtb();

// var strName = documentgetElementById("txtName")value;

if (dtb == null)

{ }

else {

//序列化对象

var postdata = JSONstringify(dtb);

//异步请求

$post(url, { json: postdata }, function (json) {

if (json) {

jBoxtip("添加成功！", "提示");

locationreload();

}

else {

jBoxtip("添加失败！", "提示");

locationreload();

}

}, "json")

}

});

});

在后台的 *** 作：

首先判断是否需要传输数据

if (!IsPostBack)

{

//判断是否异步请求

if (RequestQueryString["ajax"] == "1")

{

ProcessRequest();

}

在这里进行对数据的处理：

/// <summary>

/// 处理异步请求

/// </summary>

private void ProcessRequest()

{

//存入要填写的策略

ArrayList arrDiscount = new ArrayList();

ResponseContentType = "text/html";

string json = RequestForm["json"];

//反序列化DataTable

if (json == null)

{

return;

}

else

{

DataTable newdtb = Json2Dtb(json);

for (int i = 0; i < newdtbRowsCount; i++)

{

EntityStrategyDiscount enStrategyDiscount = new EntityStrategyDiscount();

//打折方案名

enStrategyDiscountname = newdtbRows[i]["Name"]ToString();

//商店ID

enStrategyDiscountshopId = longParse(LoginInfoShopID);

enStrategyDiscountfullMoney = ConvertToDecimal(newdtbRows[i]["fullMoney"]ToString());

enStrategyDiscountdiscount = ConvertToDecimal(newdtbRows[i]["discount"]ToString());

//写入数据到数组

arrDiscountAdd(enStrategyDiscount);

}

//写入数据到数据库

IStrategyBLL strategy = new StrategyBLL();

if (strategyAddStrategyDiscount(arrDiscount))

{

ResponseWrite("true");

ResponseEnd();

}

else

{

ResponseWrite("false");

ResponseEnd();

}

}

这里，我们需要把json转换成datatable

/// <summary>

/// Json转DataTable

/// </summary>

/// <param name="json"></param>

/// <returns></returns>

private DataTable Json2Dtb(string json)

{

JavaScriptSerializer jss = new JavaScriptSerializer();

ArrayList dic = jssDeserialize<ArrayList>(json);

DataTable dtb = new DataTable();

if (dicCount > 0)

{

foreach (Dictionary<string, object> drow in dic)

{

if (dtbColumnsCount == 0)

{

foreach (string key in drowKeys)

{

dtbColumnsAdd(key, drow[key]GetType());

}

}

DataRow row = dtbNewRow();

foreach (string key in drowKeys)

{

row[key] = drow[key];

}

dtbRowsAdd(row);

}

}

return dtb;

}

这样，就可以把数据无刷新的写入到数据库。

当然，如果我们有一个从数据库读取的datatable，如果通过json显示在前台呢。

首先，我们需要把datatable转换为json数据

/// <summary>

/// DataTable转Json

/// </summary>

/// <param name="dtb"></param>

/// <returns></returns>

private string Dtb2Json(DataTable dtb)

{

JavaScriptSerializer jss = new JavaScriptSerializer();

ArrayList dic = new ArrayList();

foreach (DataRow row in dtbRows)

{

Dictionary<string, object> drow = new Dictionary<string, object>();

foreach (DataColumn col in dtbColumns)

{

drowAdd(colColumnName, row[colColumnName]);

}

dicAdd(drow);

}

return jssSerialize(dic);

}

然后写回到前台

/// <summary>

/// 处理异步请求

/// </summary>

private void ProcessRequest()

{

ResponseContentType = "text/html";

string json = RequestForm["json"];

//反序列化DataTable

DataTable newdtb = Json2Dtb(json);

//序列化DataTable为JSON

string back = Dtb2Json(newdtb);

ResponseWrite(back);

ResponseEnd();

}

在前台接受显示：

$(function() {

//点击botton1

$("#botton1")click(function() {

createTable(json);

});

});

//显示Json中的数据

function createTable(json) {

var table = $("<table border='1'></table>");

for (var i = 0; i < jsonlength; i++) {

o1 = json[i];

var row = $("<tr></tr>");

for (key in o1) {

var td = $("<td></td>");

tdtext(o1[key]toString());

tdappendTo(row);

}

rowappendTo(table);

}

tableappendTo($("#back"));

}

以上就是关于React之模拟数据库json-server 2019-01-26全部的内容，包括:React之模拟数据库json-server 2019-01-26、前端与后端的数据交互（jquery ajax+python flask）、如何将数据以json格式传给前端等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！