①Django代码块

首先查询数据

def find_all(request): name =request.GET.get("name") if name: data = models.Spiders.objects.filter(name=name) from django.core import serializers 导入模块 var=serializers.serialize('json',data) #将结果集转换成json 前提 结果集必须是可迭代的 return JsonResponse(var,safe=False)

在setting中配置相关配置

加上这个

②vue代码

<template <div id="center"> <button @click="getmes">boss直聘</button> <button @click="job">51job</button> <button @click="lagou">拉钩</button> <button @click="zhi">智联</button> <table align="center" border="1" cellpadding="10"> <tr> <td>网站名称</td> <td>职位</td> <td>职位内容</td> </tr> <tr v-for='i in meslist'> <td>{{i.fields.name}}</td> <td>{{i.fields.zhiwei}}</td> <td>{{i.fields.content}}</td> </tr> </table> </div> </template <script import Axios from 'axios' export default { name: 'spider_vue', data:function(){ return{ meslist:[] } }, methods: { getmes:function(){ Axios({ url:'http://127.0.0.1:8000/ django接口路由 /?name=boss直聘', method:'GET', responseType:'json' }) .then((res)=>{ this.meslist = res.data console.log(this.meslist) }) }, job:function(){ Axios({ url:'http://127.0.0.1:8000/ django接口路由 /?name=51job', method:'GET', responseType:'json' }) .then((res)=>{ this.meslist = res.data console.log(this.meslist) }) }, lagou:function(){ Axios({ url:'http://127.0.0.1:8000/ django接口路由 /?name=拉钩', method:'GET', responseType:'json' }) .then((res)=>{ this.meslist = res.data console.log(this.meslist) }) }, zhi:function(){ Axios({ url:'http://127.0.0.1:8000/ django接口路由 /?name=智联', method:'GET', responseType:'json' }) .then((res)=>{ this.meslist = res.data console.log(this.meslist) }) } } } </script

效果

点击按钮 异步渲染出相对应的内容

推荐

博客导读