實(shí)現(xiàn)目的

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司服務(wù)，網(wǎng)站設(shè)計(jì)，綿陽服務(wù)器托管等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)建站。

使用D3.js開發(fā)的前端應(yīng)用，用戶與圖交互更改圖的內(nèi)容后，如何在下一次加載的顯示上一次最后交互的內(nèi)容？

本文提供通過后端的Node.js程序提供一種最小化方案，作為參考。

開發(fā)環(huán)境

• 后端：Node.js
• Node.js模塊：Express、body-parser、fs
• 前端：JQuery
  

后端

1、安裝nodejs，裝好后用顯示版本號確認(rèn)是否安裝好

node --version

2、新建一工程目錄（文件夾），安裝模塊。

npm install express
npm install body-parser

Express 是一種Node.js Web 應(yīng)用程序框架：http://expressjs.com/

bodyParser是用來解析http請求體：https://github.com/expressjs/body-parser

3、新建一個(gè)createServer.js

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');

var app = express();

// bodyParser.urlencoded解析form表單提交的數(shù)據(jù)
app.use(bodyParser.urlencoded({extended: false}));

// bodyParser.json解析json數(shù)據(jù)格式的
app.use(bodyParser.json());

app.post('/saveJSON',function(req, res){

 // 對象轉(zhuǎn)換為字符串
 var str_json = JSON.stringify(req.body); 

 fs.writeFile('graph.json', str_json, 'utf8', function(){
  // 保存完成后的回調(diào)函數(shù)
  console.log("保存完成");
 });

});

app.listen(3000);

4、運(yùn)行createServer.js

Node createServer.js

它會(huì)監(jiān)視 http://127.0.0.1:3000 發(fā)送來的請求。

如果請求來自：http://127.0.0.1:3000/saveJSON，它就會(huì)在服務(wù)器目錄下保存一個(gè)graph.json文件，文件的內(nèi)容是客戶端發(fā)送的post數(shù)據(jù)。

前端

// 創(chuàng)建一個(gè)對象
var person = {
 name: "lucy",
 age: 25
}

// 通過JQuery 發(fā)送POST請求，內(nèi)容是person
$.post("http://127.0.0.1:3000/saveJSON",person,function(data, status){
 alert("Data: " + data + "\nStatus: " + status);
});

在瀏覽器加載后，后端控制臺顯示“保存完成”，這是我們在writeFile里寫的回調(diào)函數(shù)。服務(wù)器目錄下會(huì)多一個(gè)graph.json，證明結(jié)果正確。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對創(chuàng)新互聯(lián)的支持。