從DB解析JSON並顯示在前端

Question

好的，所以基本上我有一個網絡爬蟲，我將網絡爬蟲信息保存到一個名為“db.json”的本地數據庫中

我想知道如何解決實現它並在視圖中顯示信息。 我習慣於像 PSQL 那樣工作，所以這樣做對我來說是不同的..我很感激你的幫助，我計划設置像 cron 作業之類的東西，但我稍后會這樣做。

當前的部分作業映射到 PSQL 數據庫並立即獲取示例信息，以便對其進行更改。

我也很難讓它獲取更多的職位名稱.. 有組織的 json 但例如

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 文件的腳本。

數據庫.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;

Answer 1

您不需要使用lowdb為這樣一個簡單的任務創建任何類型的模型結構。

你searchJobs套jobs錯了內部db.json ，那是因為在拼搶結束時，你push了整個jobs陣列的一個字段命名job屬於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 服務器有一個模板引擎（ “在 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}!`))

用於呈現作業`jobs.ejs` 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>

從DB解析JSON並顯示在前端

問題描述

1 個解決方案

解決方案1
3 已采納 2020-03-22 10:04:01

快速服務器文件`server.js`代碼

用於呈現作業`jobs.ejs` EJS 模板：

最后的`webScraper.js` ：

從DB解析JSON並顯示在前端

問題描述

1 個解決方案

解決方案1 3 已采納 2020-03-22 10:04:01

快速服務器文件server.js代碼

用於呈現作業jobs.ejs EJS 模板：

最后的webScraper.js ：

解決方案1
3 已采納 2020-03-22 10:04:01

快速服務器文件`server.js`代碼

用於呈現作業`jobs.ejs` EJS 模板：

最后的`webScraper.js` ：