当前位置: 首页 > 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;那就是求职者漫天要价。当很想雇佣这个求职者但是其所提薪资无法满足时&…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...