当前位置: 首页 > news >正文

结合 Django 和 Vue.js 打造现代 Web 应用


概要

在 Web 开发的世界里,Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称,而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。

本篇文章将详细介绍如何将 Django 与 Vue.js 结合使用,打造一个现代化的 Web 应用。文章会通过一个简单的博客应用案例,展示 Django 如何作为 API 服务端,而 Vue.js 如何用作客户端界面。


环境准备

在我们开始之前,确保您已经安装了 Python、Django、Node.js 和 npm。接下来,我们将分两部分进行:首先设置 Django,然后配置 Vue.js。

第一部分:Django 设置

创建项目

django-admin startproject blogbackend
cd blogbackend

创建应用

python manage.py startapp blog

定义模型

在 blog/models.py 中,我们定义一个简单的 Post 模型

from django.db import modelsclass Post(models.Model):title = models.CharField(max_length=100)content = models.TextField()def __str__(self):return self.title

数据库迁移

python manage.py makemigrations blog
python manage.py migrate

创建序列化器

安装 Django Rest Framework:

pip install djangorestframework

在 settings.py 添加 'rest_framework' 到 INSTALLED_APPS

创建 blog/serializers.py:

from rest_framework import serializers
from .models import Postclass PostSerializer(serializers.ModelSerializer):class Meta:model = Postfields = ("id", "title", "content")

创建视图

在 blog/views.py 中:

from django.shortcuts import render
from rest_framework import generics
from .models import Post
from .serializers import PostSerializerclass PostListCreate(generics.ListCreateAPIView):queryset = Post.objects.all()serializer_class = PostSerializer

设置URLs

添加 URL 规则到 blog/urls.py:

from django.urls import path
from .views import PostListCreateurlpatterns = [path('posts/', PostListCreate.as_view(), name='post-list-create'),
]

并在 blogbackend/urls.py 中包含 blog 应的 urls 模块:

from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('api/', include('blog.urls')),
]

现在,我们的 API 已经建立完毕,可以使用 Django Admin 创建一些 Post 博客文章或者使用 API 测试。

第二部分:Vue.js 设置

创建 Vue.js 项目

vue create blogfrontend
cd blogfrontend

安装 Vue 资源库

为了与后端通信,我们将使用 axios 库。

npm install axios

设置 Vue.js 组件

编辑 src/App.vue:

<template><div id="app"><h1>博客文章</h1><PostList/></div>
</template><script>
import PostList from './components/PostList.vue'export default {name: 'App',components: {PostList}
}
</script>

创建 src/components/PostList.vue:

<template><div><div v-for="post in posts" :key="post.id"><h2>{{ post.title }}</h2><p>{{ post.content }}</p></div></div>
</template><script>
import axios from 'axios'export default {data() {return {posts: []}},mounted() {axios.get('http://localhost:8000/api/posts/').then(response => {this.posts = response.data}).catch(error => {console.log(error)})}
}
</script>

运行 Vue.js 应用

启动 Vue.js 开发服务器:

npm run serve

您现在应该能够访问 http://localhost:8080/,看到从 Django API 加载的文章列表。

总结

通过本文,您已经学会了如何将 Django 设置为强大的后端 API,以及如何使用 Vue.js 创建动态前端。这种前后端分离的架构可以让您的项目更容易扩展、维护并且更好地管理不同的开发团队。

相关文章:

结合 Django 和 Vue.js 打造现代 Web 应用

概要 在 Web 开发的世界里&#xff0c;Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称&#xff0c;而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。 本篇文章将详细介绍如何将 Django 与 Vue.js 结…...

【Linux网络】ssh服务与配置,实现安全的密钥对免密登录

目录 一、SSH基础 1、什么是ssh服务器 2、对比一下ssh协议与telnet协议 3、常见的底层为ssh协议的软件&#xff1a; 4、拓展 二、SSH软件学习 1、ssh服务软件学习 2、sshd公钥传输的原理&#xff1a; 3、ssh命令学习&#xff1a; 4、学习解读sshd服务配置文件&#x…...

自建ES7.10集群,使用OSS快照恢复数据测试

一、云上集群创建仓库 前置条件 创建云OSS bucket lcsc-es-snapshot,并获取到access_key_id,secret_access_key信息 授予oss bucket lcsc-es-snapshot相关方完全控制权限 创建一个名称为my_backup的仓库。 云上集群创建仓库。PUT _snapshot/my_backup/ {"type": &qu…...

电源线虚接,导致信号线发烫

音频板的信号是经过隔直电容接到音频板的。...

【23真题】难!985难度第一梯队!

今天分享的是23年华南理工大学811的信号与系统试题及解析 本套试卷难度分析&#xff1a;22年华南理工大学811考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自取&#xff01;本套试题难度中等偏上&#xff0c;只有十道大题&#xff0c;考察大家的综合…...

计算机网络———ipv6简解

文章目录 1.前言&#xff1a;2. ipv6简单分析&#xff1a;2.1.地址长度对比2.2. ipv6包头分析2.3. ipv6地址的压缩表示&#xff1a;2.3. NDP&#xff1a;2.4. ipv6地址动态分配&#xff1a; 1.前言&#xff1a; 因特网地址分配组织)宣布将其最2011年2月3日&#xff0c;IANA (In…...

SQL之开窗函数

文章目录 主要内容一.介绍1.特点2.作用 二.语法及示例1.语法代码如下&#xff08;示例&#xff09;: 2.示例代码如下&#xff08;示例&#xff09;:代码如下&#xff08;示例&#xff09;:代码如下&#xff08;示例&#xff09;: 总结 主要内容 SQL的开窗函数是SQL语言中非常强…...

OpenAI与微软合作,构建 ChatGPT 5 模型;10天准确天气预报

&#x1f989; AI新闻 &#x1f680; OpenAI与微软合作&#xff0c;构建 ChatGPT 5 模型&#xff0c;下一代人工智能或拥有超级智能 摘要&#xff1a;OpenAI首席执行官 Sam Altman 在接受采访时表示&#xff0c;OpenAI正在与微软合作构建下一代人工智能模型 ChatGPT 5&#x…...

git简明指南

目录 安装 创建新仓库 检出仓库 工作流 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹&#xff0c;打开&#xff0c;然后执行 git init 以创建新的 git 仓库。 检出仓库 执行如下命令以创建一个本地仓库的克隆版本&…...

软件测试面试-如何定位线上出现bug

其实无论是线上还是在测试出现bug&#xff0c;我们核心的还是要定位出bug出现的原因。 定位出bug的步骤&#xff1a; 1&#xff0c;如果是必现的bug&#xff0c;尽可能的复现出问题&#xff0c;找出引发问题的操作步骤。很多时候&#xff0c;一个bug的产生&#xff0c;很多时…...

5、鸿蒙项目远程调试

一、注册华为账号&#xff0c; 如果是华为手机&#xff0c;并注册了账号可能跳过此步骤&#xff0c;如果使用邮箱注册&#xff0c;此邮箱一定是要正确的邮箱&#xff0c;此处需要使用邮箱获取验证码 注册地址&#xff1a;‎ 1、进入注册页面&#xff0c;输入手机号等信息后点…...

什么是原生IP与广播IP?如何区分?为什么需要用原生IP?

在代理IP中&#xff0c;我们常常听到原生IP与广播IP&#xff0c;二者有何区别&#xff1f;如何区分呢&#xff1f;下面为大家详细讲解。 一、什么是原生IP 原生IP地址是互联网服务提供商&#xff08;ISP&#xff09;直接分配给用户的真实IP地址&#xff0c;无需代理或转发。此…...

下载文件时的文件名中文乱码问题,文件名丢失

涉及到的java代码如下&#xff0c;下载的时候文件名为中文 package com.example.springboot.service.impl;import com.alibaba.excel.EasyExcel; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.toolkit.StringU…...

ios swift sqlite3 简单使用

一.创建Person类 import UIKitclass Person: NSObject {var name:String? nilvar sex:String? nilvar age:String? niloverride func setValue(_ value: Any?, forUndefinedKey key: String) {}} 二.在使用的地方导入sqlite.3头文件&#xff0c;例如方法都在viewcontr…...

长古诗(一)

春江花月夜 【作者】张若虚 【朝代】 春江潮水连海平&#xff0c;海上明月共潮生。 滟滟随波千万里&#xff0c;何处春江无月明&#xff01; 江流宛转绕芳甸&#xff0c;月照花林皆似霰&#xff1b; 空里流霜不觉飞&#xff0c;汀上白沙看不见。 江天一色无纤尘&#x…...

VC++ 预编译头学习

头文件的作用,就是把自己的 所有内容直接“粘贴”到相应的 #include 语句处。 编译器在编译你的程序的时候,所做 的第一件事,也就是展开所有的 #include 语句和 #define 语句。 头文件的出现,给书写程序带来了很大方便。 到了 Windows 时代后,慢慢 就呈现出一些问题。 几…...

JVM内存模型:理解Java程序的内存管理

JVM内存模型&#xff1a;理解Java程序的内存管理 在Java编程中&#xff0c;JVM&#xff08;Java虚拟机&#xff09;是程序的运行环境&#xff0c;它负责管理程序的内存。JVM内存模型是Java语言规范中定义的一套规则&#xff0c;用于描述在JVM中程序如何通过内存来交互和操作。…...

golang opt-in transparent telemetry

目录 1. golang opt-in transparent telemetry1.1. Getting started1.2. Learning Go1.3. Troubleshooting 1. golang opt-in transparent telemetry Recent gopls release (v0.14) includes opt-in transparent telemetry. Telemetry uploading is off by default even when…...

数据资产“入表”是不是红利?国企怎么认识?怎么利用?

毫无疑问&#xff0c;数字资产入表是红利。 数据资产入表意味着将数据资源作为企业资产进行确认和计量&#xff0c;解决了数据资源作为非物质资产未被充分认可和有效计量的问题&#xff0c;意味着数据完成了从自然资源到经济资产的跨越。上海数据交易所总经理汤奇峰此前表示&a…...

薪资面谈小技巧

从求职者的角度上来说&#xff0c;要求高工资是很正常的&#xff0c;这本身就无可厚非&#xff0c;毕竟金钱是人们衡量一份工作价值的首要因素。但是&#xff0c;我们经常看到这样一种现象&#xff0c;那就是求职者漫天要价。当很想雇佣这个求职者但是其所提薪资无法满足时&…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...