首页 > 其他分享 >vue 引入链接+ django 快速入门例子

vue 引入链接+ django 快速入门例子

时间:2024-09-01 12:57:37浏览次数:5  
标签:vue 入门 links views django home import path name

 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎访问首页</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<h1>欢迎访问首页</h1>
<H2>我是副标题</H2>
<!--   {% for i in all_links %}-->
<!--   <a href="{{i.link_url}}">{{i.link_name}}</a>-->
<!--    {% endfor %}-->
<div id="links_div">
    <div v-for="i in all_links">
        <a :href="[[ i.link_url ]]">[[ i.link_name ]]</a>
    </div>

</div>

<script>
    console.log('你好啊')
    var div = new Vue({
        el:"#links_div",
        delimiters:["[[","]]"],
        data:{
            all_links:{{ all_links|safe }}
        }
    })
</script>


</body>
</html>

 url

"""
URL configuration for zcx_db_make project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/5.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from myapp.views import *

urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/',home),
    path('/',home),
]

 view

from django.shortcuts import render
from myapp.models import *
# Create your views here.
def home(request):
    all_links = DB_links.objects.all()
    list_all_links = list(all_links.values())
    return render(request,'home.html',{"all_links":list_all_links})

model 

from django.db import models

# Create your models here.
class DB_links(models.Model):
    link_name = models.CharField(max_length=50,null=True,blank=True)
    link_url = models.CharField(max_length=300, null=True, blank=True)

    def __str__(self):
        return self.link_name

标签:vue,入门,links,views,django,home,import,path,name
From: https://blog.csdn.net/daxiashangxian/article/details/141749512

相关文章

  • UE5入门 00 什么是UE5
    【UE5入门00什么是UE5】UE5入门00什么是UE5_哔哩哔哩_bilibili1.介绍UE5UE,英文全称UnrealEngineer,中文全称虚幻引擎,5是UE的最新版本。它是由EpicGames开发的一款全面的游戏开发平台。它不仅被广泛应用于游戏行业,还扩展到了电影、建筑可视化、教育等多个领域。2024......
  • UE5入门 01 安装UE5
    视频教程:UE5入门01安装UE5_哔哩哔哩_bilibili1.下载安装EpicGamesLauncher访问https://www.epicgames.com/zh-CN/下载“EpicGamesLauncher”安装包安装“EpicGamesLauncher”安装包(尽量安装在非C盘纯英文目录)2.下载安装UnrealEngine引擎打开安装好的“Epic......
  • 毕业设计-基于Springboot+Vue的大学生租房系统的设计与实现(源码+LW+包运行)
    源码获取:https://download.csdn.net/download/u011832806/89456841基于SpringBoot+Vue的大学生租房系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven系统演示视频:链接:https://pan.baidu.com/s/1oXxVE3PeuLS5YOJvYjvKKw?pwd=......
  • springboot+vue+mybatis计算机毕业设计飞机订票系统+PPT+论文+讲解+售后
    快速发展的社会中,人们的生活水平都在提高,生活节奏也在逐渐加快。为了节省时间和提高工作效率,越来越多的人选择利用互联网进行线上打理各种事务,然后线上管理系统也就相继涌现。与此同时,人们开始接受方便的生活方式。他们不仅希望页面简单大方,还希望操作方便,可以快速锁定他们需......
  • 【有源码】基于springboot+vue的高校大学生创新创业学分管理系统的设计与实现
    注意:该项目只展示部分功能,如需了解,文末咨询即可。本文目录1.开发环境2系统设计2.1设计背景2.2设计内容3系统展示3.1功能展示视频3.2前台页面3.3后台页面4更多推荐5部分功能代码1.开发环境开发语言:Java采用技术:sprngboot、vue数据库:MySQL开发环境:In......
  • 校园便利|基于SprinBoot+vue的校园便利平台(源码+数据库+文档)
    校园便利平台基于SprinBoot+vue的校园便利平台一、前言二、系统设计三、系统功能设计 系统前台实现系统首页功能用户后台管理功能管理员功能实现四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推荐八、源码获取:博主介绍:✌️大厂码农|毕设......
  • Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区
    SPASPA(SinglePageApplication,单页面应用)是一种Web应用程序架构,其核心特点是在用户与应用程序交互时,不重新加载整个页面,而是通过异步加载页面的局部内容或使用JavaScript动态更新页面。以下是对SPA的详细解析,包括其优点和缺点:SPA的优点更好的用户体验:SPA无需重新加载......
  • 基于Vue+Django的企业人力资源管理系统设计与实现-计算机毕业设计源码+LW文档
    摘要企业人力资源管理系统是随着信息化时代的到来和人力资源管理理念的更新而应运而生的一种管理工具。在当前竞争激烈的市场环境下,企业面临着人才竞争激烈、管理难度加大等挑战,因此,建立高效、便捷的人力资源管理平台显得尤为重要。企业人力资源管理系统能够大幅提升人力资源管理......
  • 计算机毕业设计django+vue公交线路查询系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着城市化进程的加速,公共交通系统作为城市运行的重要基础设施,其便捷性、高效性直接影响到市民的日常生活质量。然而,面对日益复杂的公交线......
  • 计算机毕业设计django+vue大学生兼职管理系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今竞争激烈的就业市场中,大学生寻找兼职工作已成为提升个人能力、积累社会经验的重要途径。然而,传统的兼职招聘方式往往受限于地域、信......