【问题标题】:Parsing JSON from DB and displaying on the front-end从 DB 解析 JSON 并在前端显示
【发布时间】:2020-06-28 17:33:10
【问题描述】:

好的,所以基本上我有一个网络爬虫,我将网络爬虫信息保存到一个名为“db.json”的本地数据库中

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

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

我也很难获得更多的职位头衔.. 有组织的 json 但例如

job: jobs.title

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

代码如下:

信息到数据库的推送位于 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;

这是工作路线

jobs.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;

【问题讨论】:

  • 还可以查看X-Ray 进行抓取
  • @Codebling 哇哦,看起来棒极了。我一定要去看看。

标签: javascript node.js json express


【解决方案1】:

您无需使用lowdb 为如此简单的任务创建任何类型的模型结构。

您的searchJobsdb.json 中设置了jobs 错误,这是因为在抓取 结束时您将push 整个jobs 数组设置为名为@9​​87654330@ 的字段属于jobs。显然最终会得到这样的数据:

{
  "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 模板并在根路由中获取/传递作业:

快速服务器文件代码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>

【讨论】:

  • 太棒了,谢谢你,我使用 es6 作为我的视图引擎,但我现在可以让它全部工作了。也感谢您解释每一件事!
猜你喜欢
  • 2021-05-02
  • 2016-01-05
  • 2019-10-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-03
  • 1970-01-01
相关资源
最近更新 更多