身为后端程序袁的我经常后遇到Django与vue交互时的一些小问题:小白适用
现在就来说说哪些坑
想在vue中展示图片最好是把图片文件夹放在static下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7483af93b9a1c0fda31a4e02531c5c31.png)
Vue端
<template>
<div align="center">
<button @click="show('人工智能')">人工智能</button> # 点击事件
<br>
<table width="1400" border="1" cellspacing="0">
<tr>
<td>标题</td>
<td>图片</td>
</tr>
<tr v-for="aa in blogs">
<td>{{ aa.title }}</td>
<td><img :src="'../../static/img/'+ aa.imgname" alt="" style="width: 100px;height: 100px"></td> # 导入图片
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
blogs: [] #在这里定义你所需要的变量
}
},
methods:{
show(kw){
this.axios({
url:'http://127.0.0.1:8000/show/' + kw, # 给后端传数据
method:'GET'
}).then(res=>{
this.blogs=res.data.data # 这个是从后端拿过来的数据
})
}
},
mounted() {
this.axios({
url: 'http://127.0.0.1:8000/index', #与后端连接的url
mothod: 'GET'
}).then(res => {
this.blogs = res.data.data # 这个是从后端拿过来的数据
})
}
}
</script>
Django端
import pymongo
from django.http import JsonResponse
conn = pymongo.MongoClient()
db = conn.boke
table = db.bk
# 这是我从mongdb中拿出的数据
def index(request):
ret = list(table.find({}, {'_id': 0}))
return JsonResponse({
'data': ret
})
# 这是为了点击事件的函数
def show(request, *args, **kwargs):
kw = ' ' + args[0]
print(kw)
ret = list(table.find({'typ': kw}, {'_id': 0}))
return JsonResponse({
'data': ret
})
# 注意: 想要使用点击按钮的时候url里需要这样写
from django.contrib import admin
from django.urls import path, re_path #要导入re_path
from boke.views import index, show
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', index),
re_path('show/(\w+)', show) # 看过来 就是这里
]
每个人写代码的方式不同 欢迎留言