结合 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 开发的世界里,Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称,而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。 本篇文章将详细介绍如何将 Django 与 Vue.js 结…...
【Linux网络】ssh服务与配置,实现安全的密钥对免密登录
目录 一、SSH基础 1、什么是ssh服务器 2、对比一下ssh协议与telnet协议 3、常见的底层为ssh协议的软件: 4、拓展 二、SSH软件学习 1、ssh服务软件学习 2、sshd公钥传输的原理: 3、ssh命令学习: 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的信号与系统试题及解析 本套试卷难度分析:22年华南理工大学811考研真题,我也发布过,若有需要,戳这里自取!本套试题难度中等偏上,只有十道大题,考察大家的综合…...
计算机网络———ipv6简解
文章目录 1.前言:2. ipv6简单分析:2.1.地址长度对比2.2. ipv6包头分析2.3. ipv6地址的压缩表示:2.3. NDP:2.4. ipv6地址动态分配: 1.前言: 因特网地址分配组织)宣布将其最2011年2月3日,IANA (In…...
SQL之开窗函数
文章目录 主要内容一.介绍1.特点2.作用 二.语法及示例1.语法代码如下(示例): 2.示例代码如下(示例):代码如下(示例):代码如下(示例): 总结 主要内容 SQL的开窗函数是SQL语言中非常强…...
OpenAI与微软合作,构建 ChatGPT 5 模型;10天准确天气预报
🦉 AI新闻 🚀 OpenAI与微软合作,构建 ChatGPT 5 模型,下一代人工智能或拥有超级智能 摘要:OpenAI首席执行官 Sam Altman 在接受采访时表示,OpenAI正在与微软合作构建下一代人工智能模型 ChatGPT 5&#x…...
git简明指南
目录 安装 创建新仓库 检出仓库 工作流 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹,打开,然后执行 git init 以创建新的 git 仓库。 检出仓库 执行如下命令以创建一个本地仓库的克隆版本&…...
软件测试面试-如何定位线上出现bug
其实无论是线上还是在测试出现bug,我们核心的还是要定位出bug出现的原因。 定位出bug的步骤: 1,如果是必现的bug,尽可能的复现出问题,找出引发问题的操作步骤。很多时候,一个bug的产生,很多时…...
5、鸿蒙项目远程调试
一、注册华为账号, 如果是华为手机,并注册了账号可能跳过此步骤,如果使用邮箱注册,此邮箱一定是要正确的邮箱,此处需要使用邮箱获取验证码 注册地址: 1、进入注册页面,输入手机号等信息后点…...
什么是原生IP与广播IP?如何区分?为什么需要用原生IP?
在代理IP中,我们常常听到原生IP与广播IP,二者有何区别?如何区分呢?下面为大家详细讲解。 一、什么是原生IP 原生IP地址是互联网服务提供商(ISP)直接分配给用户的真实IP地址,无需代理或转发。此…...
下载文件时的文件名中文乱码问题,文件名丢失
涉及到的java代码如下,下载的时候文件名为中文 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头文件,例如方法都在viewcontr…...
长古诗(一)
春江花月夜 【作者】张若虚 【朝代】 春江潮水连海平,海上明月共潮生。 滟滟随波千万里,何处春江无月明! 江流宛转绕芳甸,月照花林皆似霰; 空里流霜不觉飞,汀上白沙看不见。 江天一色无纤尘&#x…...
VC++ 预编译头学习
头文件的作用,就是把自己的 所有内容直接“粘贴”到相应的 #include 语句处。 编译器在编译你的程序的时候,所做 的第一件事,也就是展开所有的 #include 语句和 #define 语句。 头文件的出现,给书写程序带来了很大方便。 到了 Windows 时代后,慢慢 就呈现出一些问题。 几…...
JVM内存模型:理解Java程序的内存管理
JVM内存模型:理解Java程序的内存管理 在Java编程中,JVM(Java虚拟机)是程序的运行环境,它负责管理程序的内存。JVM内存模型是Java语言规范中定义的一套规则,用于描述在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…...
数据资产“入表”是不是红利?国企怎么认识?怎么利用?
毫无疑问,数字资产入表是红利。 数据资产入表意味着将数据资源作为企业资产进行确认和计量,解决了数据资源作为非物质资产未被充分认可和有效计量的问题,意味着数据完成了从自然资源到经济资产的跨越。上海数据交易所总经理汤奇峰此前表示&a…...
薪资面谈小技巧
从求职者的角度上来说,要求高工资是很正常的,这本身就无可厚非,毕竟金钱是人们衡量一份工作价值的首要因素。但是,我们经常看到这样一种现象,那就是求职者漫天要价。当很想雇佣这个求职者但是其所提薪资无法满足时&…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
