使用 express js 和 vuejs 提供不同的本地 json 数据
Posted
技术标签:
【中文标题】使用 express js 和 vuejs 提供不同的本地 json 数据【英文标题】：serve different local json data with express js and vuejs 【发布时间】：2021-05-17 04:53:16 【问题描述】：我是 NodeJS 和 Expressjs 的新手。我在一个名为 json-data 的文件夹中有三个 json 文件，我想设置一个简单的 nodejs 应用程序，它是服务数据，我可以在 vuejs 前端使用它。但我不知道如何创建一个可以提供数据的简单 nodeJS 应用程序。
这是我要完成的任务。
呼叫中心每天通过呼叫中心代理拨打大量电话，这些电话被转储到 JSON 文件中。我们需要您处理如此大量的数据，并以一种很好的方式呈现给主管。
数据的问题在于结构，它分布在多个文件中。我需要解决这个问题并以有用的方式呈现数据。
1。第一部分：
创建一个可以提供数据的简单 nodeJS 应用程序。您可以为此使用任何 nodeJS 框架。 json-data 文件夹中的数据不应更改。
2。第二部分：
创建一个使用现代 JS 前端框架 Vue 的应用。前端应用应该有这些路由：
/ 显示调用汇总表的主页，例如：
| Phone number | Number of calls | Last call details |
|---|---|---|
| +49151484522 | 3 calls | Agent name / 11:46 |
| +49158544147 | 1 call | Agent name / 14:46 |
| +49151783331 | 2 calls | Agent name / 16:46 |
点击代理名称会进入代理日志
点击电话号码会进入该号码日志
/agent/$ID 显示特定于座席的通话记录，例如：
| Phone number | Call date and time | Resolution |
|---|---|---|
| +49151484522 | 22/1/2020 14:20:22 | need reschedule |
| +49158544147 | 22/1/2020 16:54:12 | no response |
| +49158544147 | 22/1/2020 17:54:12 | no response |
/call/$number 显示特定号码的通话记录
| Agent Name | Call date and time | Resolution |
|---|---|---|
| John Bob | 22/1/2020 14:20:22 | need reschedule |
| Chris Toms | 22/1/2020 17:54:12 | no response |
| John Bob | 22/1/2020 17:54:12 | no response |
三个json文件名和数据是
agents.json
[
"identifier": "28c6acec-9ee0-11e7-b66c-3cb9f33ef190",
"firstName": "John",
"lastName": "Doe",
"email": "Johndoe@callcenter.xyz",
"photo": "https://via.placeholder.com/300/3366FF/FFFFFF?text=John.Doe"
,
"identifier": "beb04834-9f8b-11e7-9469-8a39b455b609",
"firstName": "John",
"lastName": "Bob",
"email": "JohnBob@callcenter.xyz",
"photo": "https://via.placeholder.com/300/7EE833/333333?text=John.Bob"
,
"identifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"firstName": "Rose",
"lastName": "Patterson",
"email": "RosePatterson@callcenter.xyz",
"photo": "https://via.placeholder.com/300/FF805D/333333?text=Rose.Patterson"
,
"identifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"firstName": "Abraham",
"lastName": "Ellis",
"email": "Abraham.Ellis@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Rose.Patterson"
,
"identifier": "e512594e-a34c-11e7-a6cb-0609e42722e2",
"firstName": "Joel",
"lastName": "Wagner",
"email": "Joel.Wagner@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Joel.Wagner"
,
"identifier": "9644e296-a8f1-11e7-b7d2-36bd3f24901a",
"firstName": "Wilfred",
"lastName": "Anderson",
"email": "Wilfred.Anderson@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Wilfred.Anderson"
,
"identifier": "2900c694-a8f3-11e7-b119-b7844b927e5c",
"firstName": "Delbert",
"lastName": "Pena",
"email": "Delbert.Pena@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Delbert.Pena"
,
"identifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"firstName": "Madeline",
"lastName": "Lee",
"email": "Madeline.Lee@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Madeline.Lee"
,
"identifier": "e86b789e-a8f3-11e7-b549-b60535cbd9d7",
"firstName": "Morris",
"lastName": "Chambers",
"email": "Morris.Chambers@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Morris.Chambers"
,
"identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
"firstName": "Albert",
"lastName": "Roy",
"email": "Albert.Roy@callcenter.xyz",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Albert.Roy"
]logs.json
[
"identifier": "f53b3e0e-6a21-11eb-9439-0242ac130002",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-05T14:48:00.000Z",
"duration": 230
,
"identifier": "0b96031e-6a22-11eb-9439-0242ac130002",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-06T13:50:00.000Z",
"duration": 93
,
"identifier": "29b7189c-6a22-11eb-9439-0242ac130002",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 146
,
"identifier": "44c18ef6-6a22-11eb-9439-0242ac130002",
"agentIdentifier": "e512594e-a34c-11e7-a6cb-0609e42722e2",
"number": "+49158544147",
"dateTime": "2020-11-07T15:20:00.000Z",
"duration": 7
,
"identifier": "237d0a4e-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "e512594e-a34c-11e7-a6cb-0609e42722e2",
"number": "+49158544147",
"dateTime": "2020-11-08T16:50:00.000Z",
"duration": 146
,
"identifier": "274c1818-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "e512594e-a34c-11e7-a6cb-0609e42722e2",
"number": "+49158544147",
"dateTime": "2020-11-09T17:50:00.000Z",
"duration": 189
,
"identifier": "2c97e1b2-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49151783331",
"dateTime": "2020-01-10T18:50:00.000Z",
"duration": 71
,
"identifier": "32cf8544-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49151783331",
"dateTime": "2020-01-11T10:50:00.000Z",
"duration": 286
,
"identifier": "35dcfac8-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49151783331",
"dateTime": "2020-01-12T11:50:00.000Z",
"duration": 286
,
"identifier": "39dfda28-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49151514231",
"dateTime": "2020-02-01T15:50:00.000Z",
"duration": 269
,
"identifier": "3d35d808-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49151514231",
"dateTime": "2020-02-02T16:50:00.000Z",
"duration": 8
,
"identifier": "4104b274-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49151514231",
"dateTime": "2020-02-03T17:50:00.000Z",
"duration": 249
,
"identifier": "9e905d3e-0884-4d38-8195-c5b73278876d",
"agentIdentifier": "2900c694-a8f3-11e7-b119-b7844b927e5c",
"number": "+49221514231",
"dateTime": "2020-09-01T12:50:00.000Z",
"duration": 170
,
"identifier": "730f0d87-030f-4d8d-b1de-686144ad8d73",
"agentIdentifier": "e86b789e-a8f3-11e7-b549-b60535cbd9d7",
"number": "+49221514231",
"dateTime": "2020-09-01T13:50:00.000Z",
"duration": 247
,
"identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "+49221514231",
"dateTime": "2020-09-01T14:50:00.000Z",
"duration": 254
,
"identifier": "b84874bf-ea9c-4b85-a6dd-f0098ec84d25",
"agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"number": "+49221514231",
"dateTime": "2020-08-09T12:50:00.000Z",
"duration": 56
,
"identifier": "8d06b645-5135-4689-891b-ccc4cab886b7",
"agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"number": "+49221514231",
"dateTime": "2020-08-10T10:50:00.000Z",
"duration": 67
,
"identifier": "c93e2611-3a35-4820-9e0d-6bc7bd764118",
"agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"number": "+49221514231",
"dateTime": "2020-08-11T15:50:00.000Z",
"duration": 37
,
"identifier": "9c5c0175-2ef7-4307-ab91-87cc1abfa235",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 16
,
"identifier": "5ec271b1-d89c-4c5f-a552-e5d66562851a",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 118
,
"identifier": "634ee4b1-d492-4f36-8114-f0e98fd63efe",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 63
,
"identifier": "82f96e9e-0591-471f-8d79-0a0cb243e7e1",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 205
,
"identifier": "1388b62e-3390-4dce-8f29-2dd714905f44",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 75
,
"identifier": "38dead49-68de-4332-9089-4c4f519b460f",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 122
,
"identifier": "e3092702-9374-4bd5-8265-c88173d5b252",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 209
,
"identifier": "8ce10c54-24c5-430e-b667-22cd22f6e7d8",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 262
,
"identifier": "c58b1210-985a-47be-a912-f401ff84c118",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 222
,
"identifier": "47316182-1fdd-4d31-be81-020e0dc136d6",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "+49151484522",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 15
]resoulation.json
[
"identifier": "f53b3e0e-6a21-11eb-9439-0242ac130002",
"resolution": "need reschedule"
,
"identifier": "0b96031e-6a22-11eb-9439-0242ac130002",
"resolution": "interested"
,
"identifier": "29b7189c-6a22-11eb-9439-0242ac130002",
"resolution": "interested"
,
"identifier": "44c18ef6-6a22-11eb-9439-0242ac130002",
"resolution": "need reschedule"
,
"identifier": "237d0a4e-6a23-11eb-9439-0242ac130002",
"resolution": "need reschedule"
,
"identifier": "274c1818-6a23-11eb-9439-0242ac130002",
"resolution": "need reschedule"
,
"identifier": "2c97e1b2-6a23-11eb-9439-0242ac130002",
"resolution": "needs follow up"
,
"identifier": "32cf8544-6a23-11eb-9439-0242ac130002",
"resolution": "no answer"
,
"identifier": "35dcfac8-6a23-11eb-9439-0242ac130002",
"resolution": "no answer"
,
"identifier": "39dfda28-6a23-11eb-9439-0242ac130002",
"resolution": "interested"
,
"identifier": "3d35d808-6a23-11eb-9439-0242ac130002",
"resolution": "no answer"
,
"identifier": "4104b274-6a23-11eb-9439-0242ac130002",
"resolution": "need reschedule"
,
"identifier": "9e905d3e-0884-4d38-8195-c5b73278876d",
"resolution": "interested"
,
"identifier": "730f0d87-030f-4d8d-b1de-686144ad8d73",
"resolution": "needs follow up"
,
"identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
"resolution": "no answer"
,
"identifier": "b84874bf-ea9c-4b85-a6dd-f0098ec84d25",
"resolution": "need reschedule"
,
"identifier": "8d06b645-5135-4689-891b-ccc4cab886b7",
"resolution": "needs follow up"
,
"identifier": "c93e2611-3a35-4820-9e0d-6bc7bd764118",
"resolution": "interested"
,
"identifier": "9c5c0175-2ef7-4307-ab91-87cc1abfa235",
"resolution": "no answer"
,
"identifier": "5ec271b1-d89c-4c5f-a552-e5d66562851a",
"resolution": "no answer"
,
"identifier": "634ee4b1-d492-4f36-8114-f0e98fd63efe",
"resolution": "interested"
,
"identifier": "82f96e9e-0591-471f-8d79-0a0cb243e7e1",
"resolution": "needs follow up"
,
"identifier": "1388b62e-3390-4dce-8f29-2dd714905f44",
"resolution": "needs follow up"
,
"identifier": "38dead49-68de-4332-9089-4c4f519b460f",
"resolution": "needs follow up"
,
"identifier": "e3092702-9374-4bd5-8265-c88173d5b252",
"resolution": "no answer"
,
"identifier": "8ce10c54-24c5-430e-b667-22cd22f6e7d8",
"resolution": "interested"
,
"identifier": "c58b1210-985a-47be-a912-f401ff84c118",
"resolution": "interested"
,
"identifier": "47316182-1fdd-4d31-be81-020e0dc136d6",
"resolution": "needs follow up"
]重要提示：
json-data 文件夹中的数据不应更改！
任何帮助将不胜感激。感谢您的时间开发人员。
【问题讨论】：
看看express js，因为它是一个 nodejs 服务器，可以轻松地做你想做的事。 【参考方案1】：从技术上讲，您可以将所有 JSON 加载到 express 服务器的内存中，并在每个请求中搜索您要查找的数据。
实际上，如果您有更大的文件，那将是非常低效的。这意味着每个请求都会将 JSON 加载到内存中。搜索大型对象也很昂贵。
理想情况下，您会将条目存储在数据库中。如果您不能或不需要使用数据库来存储这些数据，您可以使用某种搜索引擎对其进行索引。您可以在服务器上使用一些轻量级搜索引擎。 一个快速的谷歌搜索带来了这个：https://lunrjs.com/ 虽然我没有亲自使用过。
【讨论】：
【参考方案2】：除了文件系统，用数据库就好了。
这里是一个示例解决方案
将json-data 文件夹添加到该项目的根目录。
在这个项目的根目录下添加key.js文件
module.exports =
PATH: "json-data",
RESOULATION: "resoulation.json",
AGENTS: "agents.json",
LOGS: "logs.json",
-
路由器文件
const express = require("express");
const router = express.Router();
const CommonController = require("../controllers/common");
router.get("/", CommonController.home);
router.get("/agent/:id/", CommonController.agent);
router.get("/call/:number/", CommonController.call);
module.exports = router;
-
控制器文件
const fs = require('fs');
const path = require("path");
const KEYS = require("../keys");
function get_logs()
let file_name = path.join(__dirname, `../$KEYS.PATH`, KEYS.LOGS)
let rawdata = fs.readFileSync(file_name);
let logs = JSON.parse(rawdata);
return logs;
function get_agents()
let file_name = path.join(__dirname, `../$KEYS.PATH`, KEYS.AGENTS)
let rawdata = fs.readFileSync(file_name);
let agents = JSON.parse(rawdata);
let data =
agents.forEach(element =>
data[element.identifier] = element
);
return data;
function get_regoulation()
let file_name = path.join(__dirname, `../$KEYS.PATH`, KEYS.RESOULATION)
let rawdata = fs.readFileSync(file_name);
let agents = JSON.parse(rawdata);
let data =
agents.forEach(element =>
data[element.identifier] = element.resolution
);
return data;
exports.home = async (req, res, next) =>
try
let logs = get_logs();
let customData =
logs.forEach(element =>
if(!customData[element.number])
customData[element.number] = [element]
else
customData[element.number].push(element)
);
catch(err)
console.log(err)
return res.status(500).json( message: "File Problem" );
let agent = get_agents();
let result = [];
try
for(const number in customData)
const object = customData[number];
const last = object[object.length-1];
const _agent = agent[last.agentIdentifier];
console.log(_agent, last.agentIdentifier)
const data =
number,
numberOfCall: object.length,
name: _agent.firstName + " " + _agent.lastName,
duration: last.duration
;
result.push(data);
catch(err)
return res.status(500).json( message: "Data Manupulation problem" );
res.status(200).json( result );
;
exports.agent = async (req, res, next) =>
const ID = req.params.id;
const result = []
try
const regoulation = get_regoulation();
const logs = get_logs();
logs.forEach(element =>
if (element.agentIdentifier==ID)
result.push(
number: element.number,
dateTime: element.dateTime,
resolution: regoulation[element.identifier]
)
);
catch(err)
console.log(err)
return res.status(500).json( message: "Data extracting problem" );
res.status(200).json(result);
;
exports.call = async (req, res, next) =>
const NUMBER = req.params.number;
const result = []
try
const logs = get_logs();
const agents = get_agents();
const regoulation = get_regoulation();
logs.forEach(element =>
if (element.number==NUMBER)
const agent = agents[element.agentIdentifier]
result.push(
name: agent.firstName + " " + agent.lastName,
resolution: regoulation[element.identifier],
dateTime: element.dateTime,
)
);
catch(err)
console.log(err)
return res.status(500).json( message: "Data extracting problem" );
res.status(200).json(result);
;
【讨论】：
以上是关于使用 express js 和 vuejs 提供不同的本地 json 数据的主要内容，如果未能解决你的问题，请参考以下文章
是否可以在不使用 express 作为 vue js 的后端的情况下使用纯节点 js？ [关闭]
使用 vuejs 和 nodejs 从 mongodb 数据库中读取数据