javascript - 从数据库中解析JSON并显示在前端

标签 javascript node.js json express

好的,基本上我有一个网络抓取工具,我将网络抓取工具的信息保存到名为“db.json”的本地数据库中

我想知道如何着手实现它并在 View 中显示信息。我习惯于像 PSQL 一样工作,所以这样做对我来说是不同的。我很感激你的帮助,我计划设置像 cron 作业和类似的东西,但我稍后会这样做。

当前部分作业映射到 PSQL 数据库并立即获取示例信息,因此将对其进行更改..

我也很难让它获得更多的职位头衔......有组织的 json 但对于 exmaple

job: jobs.title

我认为会得到工作头衔但没有得到任何东西是因为我在函数之外拥有它吗?

代码如下:

将信息推送到 DB 位于 searchJobs 函数的底部。

webScraper.js :

debug = require("../models/conn");
const puppeteer = require("puppeteer");
const axios = require("axios");
const cheerio = require("cheerio");
const db = require("../public/scripts/db")

async function searchJobs(i) {
  const url = await axios
    .get("https://indeed.com/jobs?q=Web+Developer&l=Atlanta&fromage=last")
    .then(response => response)

    .then(res => {
      const jobs = [];
      const $ = cheerio.load(res.data);

      $(".result").each((index, element) => {
        const title = $(element)
          .children(".title")
          .text();
        const linkToJob = $(element)
          .children(".title")
          .children("a")
          .attr("href");
        const body = $(element)
          .children(".summary")
          .text();
        jobs[index] = { title, linkToJob, body };
      });
      console.log(jobs);
      // Push jobs to JSON DB
      db.get('jobs').push({
        job: jobs
      }).write();
      return jobs;
    });
  return url;
}

这是将信息写入 json 文件的脚本。

db.js :

low = require("lowdb"),
    FileSync = require("lowdb/adapters/FileSync");


const adapter = new FileSync('db.json')
const db = low(adapter)

db.defaults({ jobs: [], body: []})
    .write()


module.exports = db;

module.exports = searchJobs;

这是工作路线

工作.js:

    const express = require("express"),
  router = express.Router();
jobModel = require("../models/jobModel");

// gets job page
router.get("/", async function(req, res) {
  const jobData = await jobModel.getAllJobs();

  console.log(jobData);

  res.render("template", {
    locals: {
      title: "jobs",
      jobData: jobData
    },
    partials: {
      partial: "partial-jobs"
    }
  });
});

module.exports = router;

最佳答案

您不需要使用 lowdb 为这样一个简单的任务创建任何类型的模型结构。

您的 searchJobsdb.json 中设置了错误的 jobs,那是因为在 scraping 结束时您将整个 jobs 数组 push 到属于 jobs 的名为 job 的字段。这显然会得到这样的数据:

{
  "jobs": [
    {
      "job": [
        {
          "title": "...",
          "linkToJob": "...",
          "body": "..."
        },
        {
          "title": "...",
          "linkToJob": "...",
          "body": "..."
        },
        ...
    }
  ],
  "body": []
}

这不是你想要的。所以,而不是使用:

db.get('jobs').push({
  job: jobs
}).write();

你必须使用:

db.set('jobs', jobs).write();

然后您将拥有如下所示的数据 JSON 格式:

{
  "jobs": [
    {
      "title": "...",
      "linkToJob": "...",
      "body": "..."
    },
    {
      "title": "...",
      "linkToJob": "...",
      "body": "..."
    },
    ...
  ],
  "body": []
}

现在您有了一个合适的 jobs 集合,您可以使用它来显示数据。

Express 服务器有一个模板引擎 ("Using template engines with Express"),它支持(以及其他)EJS 模板。您可以使用 EJS 模板并在根路由中获取/传递作业给它:

express 服务器文件的代码 server.js

const low = require("lowdb");
const FileSync = require("lowdb/adapters/FileSync");
const express = require('express');
const app = express();
const port = 3000;

const adapter = new FileSync('db.json');
const db = low(adapter);

// Set express views template engine to EJS
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  // Get the jobs collection
  const jobs = db.get('jobs').value();

  // Render the jobs EJS template by passing the jobs
  res.render("jobs", { jobs });
});

app.listen(port, () => console.log(`Listening on port ${port}!`))

用于渲染作业的 EJS 模板jobs.ejs:

...
<body>
  <section id="jobs">
  <% for(const job of jobs) {%>
    <div class="job">
      <a href="<%= job.linkToJob %>"><h3><%= job.title %></h3></a>
      <p><%= job.body %></p>
    </div>
  <% } %>
  </section>
</body>
...

最后的webScraper.js:

const axios = require("axios");
const cheerio = require("cheerio");
const db = require("./db");

async function searchJobs() {
  const url = await axios
    .get("https://indeed.com/jobs?q=Web+Developer&l=Atlanta&fromage=last")
    .then(response => response)

    .then(res => {
      const jobs = [];
      const $ = cheerio.load(res.data);

      $(".result").each((index, element) => {
        const title = $(element)
          .children(".title")
          .text();
        const linkToJob = $(element)
          .children(".title")
          .children("a")
          .attr("href");
        const body = $(element)
          .children(".summary")
          .text();
        jobs.push({ title, linkToJob, body });
      });

      // Push jobs to JSON DB
      db.set('jobs', jobs).write();

    });
}

现在,如果您启动 express 服务器并访问根路由,您将看到类似这样的内容(当然是在您运行 webScraper.js 之后):

.job {
   margin-bottom: 10px;
   border: 1px grey solid;
   padding: 10px;
   border-radius: 5px;
   background-color: lightgray;
 }
<section id="jobs">
  <div class="job">
    <a href="/rc/clk?jk=45633fe1e5f39cc8&amp;fccid=0e1982cac02545cc&amp;vjs=3">
      <h3>Freelance Web Developer</h3>
    </a>
    <p>Extensive knowledge of HTML, CSS, Javascript/jQuery.</p>
  </div>
  <div class="job">
    <a href="/rc/clk?jk=b554d8be38d65cba&amp;fccid=8c101aef95dbfdf6&amp;vjs=3">
      <h3>Web Developer</h3>
    </a>
    <p>VenU is looking for a talented and reliable developer to join an elite development team.
 Applicants must be proficient in Responsive Design, with experience…</p>
  </div>
  <div class="job">
    <a href="/rc/clk?jk=8edc3f88b6ec3083&amp;fccid=9899b2a8ca7c5e21&amp;vjs=3">
      <h3>Web Developer</h3>
    </a>
    <p>We&#39;re looking for a web developer with an excellent eye for design as well as strong HTML &amp; CSS skills.
 The web developer will be responsible for creating new…
    </p>
  </div>
</section>

关于javascript - 从数据库中解析JSON并显示在前端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60725722/

相关文章:

javascript - 尝试在 Jade 中传递复选框值

php - jquery、ajax、php、json - 有没有一个好的 jquery 级联/链式选择插件?

c# - Json 属性 C# 的双重标签

javascript - 需要为我的导航创建一个移动版本不成功

python - 在heroku上的nodejs中生成python脚本

javascript - 如何将 NVD3 折线图置于所有其他区域/条形图之上?

node.js - 错误 : read ECONNRESET ExpressJS and Amazon S3

javascript - 为什么 JSON.stringify() 在对象周围添加额外的 ' '

javascript - 从不同的 Spotfire 服务器动态加载不同的 Spotfire 报告

php css/js 缩小器?