Я занимаюсь разработкой проекта vue, бэкэнд - django.API django вернет StreamHTTPResponse.Я хочу показать ответ, в то время как django выдает некоторые данные.Я не знаю, как настроить прокси-таблицу Vue для архивирования.
# Create your views here.
from django.http import StreamingHttpResponse, HttpResponse
def stream_response_generator():
from shelljob import proc
g = proc.Group()
p = g.run(["bash", "-c", "nmap baidu.com -sV -vvv"])
while g.is_pending():
lines = g.readlines()
for proc, line in lines:
yield line
def stream_response(request):
return StreamingHttpResponse(stream_response_generator())
def index(request):
return HttpResponse(content="""
<head><style>
body {
background: lightblue;
}
</style></head>
<p>Hello
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '/tools/test');
xhr.seenBytes = 0;
xhr.onreadystatechange = function() {
console.log("state change.. state: "+ xhr.readyState);
if(xhr.readyState == 3) {
var newData = xhr.response.substr(xhr.seenBytes);
console.log("newData: <<" +newData+ ">>");
document.body.innerHTML += "" +newData+ "<br />";
xhr.seenBytes = xhr.responseText.length;
console.log("seenBytes: " +xhr.seenBytes);
}
};
xhr.addEventListener("error", function(e) {
console.log("error: " +e);
});
console.log(xhr);
xhr.send();
</script>""")
Это представление хорошо работает, когда используется python manage.py runserver и visit / index.Он работает хорошо и показывает вывод подпроцесса построчно.но в vue я создаю такое представление:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
</ul>
</div>
</template>
<script>
// const axios = require('axios')
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
this.steamIT()
},
methods: {
steamIT: function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', '/tools/test')
xhr.seenBytes = 0
xhr.onreadystatechange = function () {
console.log('state change.. state: ' + xhr.readyState)
if (xhr.readyState === 3) {
var newData = xhr.response.substr(xhr.seenBytes)
console.log('newData: <<' + newData + '>>')
document.body.innerHTML += 'New data: <<' + newData + '>><br />'
xhr.seenBytes = xhr.responseText.length
console.log('seenBytes: ' + xhr.seenBytes)
}
}
xhr.addEventListener('error', function (e) {
console.log('error: ' + e)
})
console.log(xhr)
xhr.send()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
в index.js proxyconfig. Я настраиваю прокси так:
proxyTable: {
'/tools':{
target: 'http://127.0.0.1:8000/', # django is run at 127.0.0.1:8000
headers: {
},
selfHandleResponse:true,
changeOrigin: true
},
},
, но оно не работает.vue proxy_table вернет все данные после завершения подпроцесса.код Vue, как это.