python爬虫与Django框架vue交互的前后端代码详情（励志人生网实例）

Django(建表，配置一些的就不说了):

class Jiayou(models.Model):  # 建表以及字段名
    zxn_title = models.CharField(max_length=500)
    zxn_brief = models.CharField(max_length=500)
    zxn_date = models.CharField(max_length=500)
    zxn_position = models.CharField(max_length=500)
    zxn_category = models.CharField(max_length=500)
    zxn_cnum = models.CharField(max_length=500)

    class Meta:
        db_table = 'Jiayou'  # 表名

Django(views get请求代码):

class JiayouView(APIView):
    def get(self, request):
        zxn = models.Jiayou.objects.all()  # 获取表里所有数据
        data = JiayouSerializer(zxn, many=True)  # 用序列化添加数据
        return Response({  # 返回响应
            "status": 200,
            "msg": "",
            "data": data.data
        })

爬虫scrapy框架（代码）：

class KaoshiSpider(scrapy.Spider):
    name = 'kaoshi'
    start_urls = ['http://www.mchotline.com/shuji/']

    # print(start_urls)
    def parse(self, response):
        set = response.xpath('.//div[@class="list bgb "]/ul/li')
        for list in set:
            zxn_title = list.xpath('./h2/a/text()').extract()[0]
            # print(zxn_title)
            zxn_brief = ''.join(list.xpath('./p/text()').extract())
            # print(zxn_brief)
            zxn_date = ''.join(list.xpath('./small/span[1]/text()').extract()).replace('\r', '').replace('\n', '').replace('励志人生网', '')
            # print(zxn_date)
            zxn_position = ''.join(list.xpath('./small/span[2]/text()').extract()).replace('\r', '').replace('\n', '')
            # print(zxn_position)
            zxn_category = ''.join(list.xpath('./small/span[3]/a/text()').extract()).replace('\r', '').replace('\n','').replace('励志人生网', '')
            print(zxn_category)
            zxn_cnum = ''.join(list.xpath('./small/span[4]/text()').extract()).replace('\r', '').replace('\n','').replace('励志人生网', '')
            # print(category)

            yield YuekaoItem(zxn_title=zxn_title,zxn_brief=zxn_brief,zxn_date=zxn_date,zxn_position=zxn_position,zxn_category=zxn_category,zxn_cnum=zxn_cnum)
vue(代码 我使用前端跨域展示)

<template>

  <table border="1">
    <tr>
      <td>id</td>
      <td>zxn_title</td>
      <td>zxn_brief</td>
      <td>zxn_date</td>
      <td>zxn_position</td>
      <td>zxn_category</td>
      <td>zxn_cnum</td>
    </tr>
    <tr v-for="(i,index) in ng" :key="index">
      <td>{{i.id}}</td>
      <td>{{i.zxn_title}}</td>
      <td>{{i.zxn_brief }}</td>
      <td>{{i.zxn_date}}</td>
      <td>{{i.zxn_position}}</td>
      <td>{{i.zxn_category}}</td>
      <td>{{i.zxn_cnum}}</td>
    </tr>

  </table>

</template>

<script>
  export default {
    name: "lizhi",
    data() {
      return {
        ng: [],
      };
    },
    methods: {
      GetShui() {
        this.axios({
          url: "http://127.0.0.1:8000/app03/",
          method: "GET"
        }).then(
          res => {
            this.ng = res.data.data;
          })
      },
    },
    mounted() {
      this.GetShui();
    }
  };
</script>
<style scoped>
</style>