django用vue渲染

最新推荐文章于 2023-12-21 15:20:41 发布

ctrl_z_x_c

最新推荐文章于 2023-12-21 15:20:41 发布

阅读量527

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ctrl_z_x_c/article/details/108833305

html代码
注：不能直接通过内部按钮访问到渲染效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{% verbatim %} {{ message }} {% endverbatim %}</p>
    <p>nihao</p>
    <table>
        <tr v-for="me in mes">
        <td>{% verbatim %} {{ me.now }} {% endverbatim %}</td>
        </tr>
    </table>
{#    <p>{% verbatim %} {{ mes }} {% endverbatim %}</p>#}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
      mes:[]

  },
    mounted () {
    axios
    .get('/app/api/777')
    .then(response => (this.mes = response.data))
    }
})

</script>
</body>
</html>

urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import include, url
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    url('index/',views.index),
    url('api/777',views.getdate),

]

view.py

from django.shortcuts import render, HttpResponse
import time
from django.http.response import JsonResponse
# Create your views here.
def index(req):
    return render(req, 'index.html')

def getdate(req):
    t=[{'now':time.time(),'yestoday':time.time()},
       {'now':'今天','yestoday':'昨天'},
    ]
    return JsonResponse(t,safe=False)