Vue那些小坑

身为后端程序袁的我经常后遇到Django与vue交互时的一些小问题:小白适用

现在就来说说哪些坑

想在vue中展示图片最好是把图片文件夹放在static下

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)     # 看过来  就是这里
]

每个人写代码的方式不同 欢迎留言