搭建简单的Node服务器

这篇文章是基于上一篇文章所写的，有需要的话请先访问上一篇文章：
使用NodeJS+Cheerio实现网络爬虫
https://blog.csdn.net/kowloonchen/article/details/104515952

1.配置NodeJS服务器

//从网络上爬取数据
let request = require('request');
let cheerio = require('cheerio');
//获取客户端请求
let http = require('http');
let url = require('url');
//要爬取的数据源地址
let path = 'https://ncov.dxy.cn/ncovh5/view/pneumonia';

let PORT = 8090;
http.createServer(function (req, res) {
	//设置允许跨域访问
	res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader("Access-Control-Allow-Origin", "*");
	//设置返回的数据格式
    res.setHeader("Access-Control-Allow-Headers", "Content-Type"); 
    res.setHeader("content-type", "text/json; charset=utf-8");
   //解析请求的url
	let obj = url.parse(req.url,true);
	let type = obj.query.type;
	
	//收到请求之后开始根据不同的type类型爬取数据
	zhuaqu(path,type,(data)=>{
			res.end(data);
		});
	}).listen(PORT, function () {
     console.log('server is listening on port ' + PORT);
	}
);
//从网络上爬取数据的方法
function zhuaqu(path,type,callback){
	request(path,(err,req)=>{
		if(err){
				callback(err);
		}
		let $ = cheerio.load(req.body.toString());	
		//根据type获得疫情数据
		let data = $('#'+type);
		data = data[0].children[0].data;
		//根据不同的请求类型做不同的数据处理，这里要根据实际情况处理
		if(type=='getAreaStat'){
			data = data.substring(data.indexOf('['));
			data = data.substring(0,data.lastIndexOf(']')+1);	
		}else if(type=='getStatisticsService'){
			data = data.substring(data.indexOf('{')+1);
			data = data.substring(data.indexOf('{'));
			data = data.substring(0,data.lastIndexOf('}catch'));
		}				
		callback(data);
	});	
}

需要注意的是，在配置服务器的时候一定要设置成为允许跨域访问，否则在前端页面上是无法访问的。
配置后之后就可以在前端页面通过Ajax来发送请求到我们的Node服务器了。

2.在前端页面中通过Ajax访问服务器

	//获得国内疫情总数据
  $.get("http://192.168.16.110:8090?type=getStatisticsService", (data) => {
         console.log(data);
   });
  //获得国内疫情
  $.get("http://192.168.16.110:8090?type=getAreaStat", (data) => {
     console.log(data);
  });

3.通过Vue在页面上显示数据

在页面上采用的是bootStrap+Vue的方式来展示数据的。在Vue中获得数据之后，我们再在页面上去显示。

<script>
        //创建Vue对象
        let vue = new Vue({
            el: "#app",    //Vue对象映射的HTML标签为id为app的标签
            data: {       //Vue对象中的数据
                areaStat: [],
                staticService: {}
            },
            methods: {
                //表格的省份折叠处理
                selectShengfen: (e) => {
                    //获得点击的省份ID
                    let shengfen = e.currentTarget.firstElementChild.id;
                    //console.log($("."+shengfen).css("visibility"));
                    if ($("." + shengfen).css("visibility") == "visible") {
                        $("." + shengfen).css("visibility", "collapse");
                    } else {
                        $("." + shengfen).css("visibility", "visible");
                    }
                }
            },
            mounted() {
                //获得国内疫情总数据
                $.get("http://localhost:8090?type=getStatisticsService", (data) => {
                    vue.staticService = data;
                }
                );
                //获得国内疫情
                $.get("http://localhost:8090?type=getAreaStat", (data) => {
                    vue.areaStat = data;
                    getDataList(data);
                }
                );
            }
        });
    </script>

通过Vue遍历出所有的数据，显示在页面上：
这里是用来展示总数据的地方：

<table class="table">
      <tr class="text-center">
            <td scope="row">
                <small>较昨日:{{staticService.currentConfirmedIncr}}</small>
                <h4 style="color:#FF6600">{{staticService.currentConfirmedCount}}</h4>
                <small>现存确诊</small>
            </td>
           <td>
               <small>较昨日:{{staticService.suspectedIncr}}</small>
                <h4 style="color:#FF9900">{{staticService.suspectedCount}}</h4>
                <small>现存疑似</small>
           </td>
           <td>
               <small>较昨日:{{staticService.seriousIncr}}</small>
                <h4 style="color:#FFCC00">{{staticService.seriousCount}}</h4>
                <small>现存重症</small>
            </td>
       </tr>
        <tr class="text-center">
            <td scope="row">
	            <small>较昨日:{{staticService.confirmedIncr}}</small>
	            <h4 style="color:#CC6600">{{staticService.confirmedCount}}</h4>
	            <small>累计确诊</small>
            </td>
            <td>
	            <small>较昨日:{{staticService.deadIncr}}</small>
	            <h4 style="color:#555555">{{staticService.deadCount}}</h4>
	            <small>类似死亡</small>
           </td>
          <td>
              <small>较昨日:{{staticService.curedIncr}}</small>
              <h4 style="color:#00FF66">{{staticService.curedCount}}</h4>
              <small>累计治愈</small>
         </td>
      </tr>
  </table>

这里是用来展示各个省和地区数据的位置：

<table class="table table-hover tableFont">
      <thead class="bg-primary">
           <tr>
                 <th>地区</th>
                 <th>现存确诊</th>
                 <th>累计确诊</th>
                 <th>死亡</th>
                 <th>治愈</th>
           </tr>
     </thead>
     <tbody v-for="(hubei,key) in areaStat">
           <tr class="my-bg-td" @click="selectShengfen">
                 <td scope="row" v-bind:id="hubei.provinceShortName">>{{hubei.provinceShortName}}</td>
                 <td>{{hubei.currentConfirmedCount}}</td>
                 <td>{{hubei.confirmedCount}}</td>
                 <td>{{hubei.deadCount}}</td>
                 <td>{{hubei.curedCount}}</td>
            </tr>
            <tr v-bind:class="hubei.provinceShortName" v-for="city in hubei.cities" v-bind:style="{'visibility': (key==0?'visible':'collapse')}">
                  <td scope="row">{{city.cityName}}</td>
                  <td>{{city.currentConfirmedCount}}</td>
                  <td>{{city.confirmedCount}}</td>
                  <td>{{city.deadCount}}</td>
                  <td>{{city.curedCount}}</td>
             </tr>
      </tbody>
</table>

另外，我们只默认显示一个读取的地市数据，其它地市默认是被折叠起来的，可以通过给省份行添加一个事件来处理：

//表格的省份折叠处理
selectShengfen: (e) => {
    //获得点击的省份ID
    let shengfen = e.currentTarget.firstElementChild.id;
     if ($("." + shengfen).css("visibility") == "visible") {
               $("." + shengfen).css("visibility", "collapse");
     } else {
             $("." + shengfen).css("visibility", "visible");
      }
}

到这里，我们就大功告成了，现在取访问一下，享受成功的喜悦吧！