1.前言
先熟悉下流程把之前爬取的数据展示出来
2.服务端
注释不多了，看不懂的可自行回顾下
const express = require('express') const fs = require('fs') var app = express() app.use(express.static(__dirname + '/public')) // 模板目录 app.set("views", __dirname + "/view") // 模板引擎 app.set("view engine", "ejs") app.get('/', function (req, res) { //test.json之前爬虫的数据 fs.readFile(__dirname + "/test.json", function (err, data) { if (err) { console.log("读取错误:", err); } else { console.log("数据:", data.toString()); res.render("index", { list: JSON.parse(data.toString()) }) } }) }) app.listen(6789, function () { console.log("6789 服务已启动"); })
3.ejs模板
后缀尽量是ejs,写的多了就习惯了
vscode可以装ejs的插件
后缀格式不妨碍 文件内容是 html
好的习惯 :如需换行 就把 <% %>补全 , 省的报错 ，把自己搞懵逼了
view/index.ejs
完整 ejs模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中华有为</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <ul> <% list.forEach(function(item){ %> <li> <img src="<%= item.imgSrc %>" alt=""> <h2> <%= item.title%></h2> <p><%= item.desc%></p> </li> <% }) %> </ul> </body> </html>
4.样式
注意哦 这里引用的css文件路径
这个
css文件是在服务器端指定的静态资源目录里面的public/css/index.css根据自己的结构 样式自己玩
<link rel="stylesheet" href="css/index.css">
5. 完整的服务器代码
包含爬取数据的代码
爬取的网站自己找 某东 某宝 某为 某米 等等 都可以自己玩
const express = require("express") const request = require("request") const cheerio = require("cheerio") var app = express() app.use(express.static(__dirname+"/public")) const fs = require("fs") // 模板目录 app.set("views",__dirname+"/view") //模板引擎 app.set("view engine","ejs") request({ url:"https://XXXX" },(err,res,body) => { if(err){ return console.log("爬取网页失败:",err); } var $ = cheerio.load(body) var arr = []; $(".grid-list li").each(function(){ arr.push({ title: $(this).find(".title").html(), imgSrc: $(this).find("img").attr("src"), desc: $(this).find(".desc").attr("title") }) }) fs.writeFile(__dirname+"/test2.json",JSON.stringify(arr),(err)=>{ if(err){ return console.log("写入失败:",err) } console.log("写入数据成功"); }) }) app.get("/",(req,res)=>{ fs.readFile(__dirname+"/test2.json",(err,data)=>{ if(err){ return console.log("读取数据失败:",err); } res.render("index",{list:JSON.parse(data.toString())}) }) }) app.listen(6767,()=>{ console.log("6767服务启动"); })
注意 render数据
res.render("index",{list:JSON.parse(data.toString())})
