vue添加页面 + django + 反序列化

最新推荐文章于 2025-09-28 20:39:03 发布
原创 最新推荐文章于 2025-09-28 20:39:03 发布 · 287 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

vue与django交互，vue页面添加对应关系图

在这里插入图片描述‘’’
django视图文件与vue代码关系对应图
在这里插入图片描述
反序列化图

在这里插入图片描述

Django~溪风
关注
python课程设计——Django+vue信息管理系统
weixin_53519274的博客
01-04 5079
python课程设计——Django+vue2基于Python 语言、Django Web 框架和MySQL数据库，设计出在局域网内本地服务器上的米果信息管理系统网站。完成信息管理系统的前端设计和功能实现，采用前后端不分离的方式进行编写和设计，对其中的SQLite数据库和Django自带的前端网页模版进行基于现实需求的二次修改，实现以信息管理为主的功能。该系统功能上还不怎么完善、界面简洁、可操作性强，具有一定的实际应用价值。
Django+Vue环境搭建
WeirdoGiraffe的博客
05-19 9873
一、Django环境 1、下载Django pip install django 2、创建Django项目 django-admin startproject server #server 为项目名 3、将最外层目录改为项目名称 4、启动服务 python manage.py runserver 0.0.0.0:8000 二、Vue环境 因为Vue环境可能会面临网络问题引发的timeout，所以以下介绍两种方式来安装。 方式一：线上安装 1、安装node.js js环...
python：Django 和 Vue.js 技术栈解析
最新发布
belldeep的专栏
09-28 860
Django 和 Vue.js 是当前主流的 Web 开发技术组合，分别承担 后端服务 和 前端交互 的核心角色。二者通过合理协作，可快速构建高性能、易维护的 Web 应用
Django+Vue创建项目前后端分离
我就是我是好孩子的博客
04-29 2377
Django+Vue创建项目前后端分离
vue反序列化
m0_74608954的博客
09-06 194
【代码】vue反序列化。
Vue + Django API 前后端分离学习笔记 5.3-5.4 djangoseriallizer序列化model
@凌晨三点半的博客
05-17 471
5.1 5.2视频中的新内容大概说下 goods = Goods.objects.all()[:10] json_list = [] from django.forms.models import model_to_dict for good in goods: json_dict = model_to_d...
Vue3+Django的博客项目.zip
09-29
REST框架简化了创建API的过程，提供了序列化、权限控制和错误处理等功能。 对于数据库，Django默认使用SQLite，但根据需求，可能已经配置为使用PostgreSQL或MySQL等更强大的数据库。Django的数据库迁移工具（如`...
基于python3+django+Vue自动化测试平台开发
09-29
DRF提供了序列化、认证、权限控制等功能，简化了API的开发。通过定义Serializer类，我们可以将Python对象转换为JSON格式，方便前端消费。 5. 前后端分离：在这个项目中，前端Vue应用和后端Django服务是分离的，通过...
【前端VUE】Vue3+TypeScript+Django Rest Framework-环境准备
TT小子的博客
11-24 844
开发环境搭建 需要用到的环境如下： * Python 3.7.7 * Node.js v20.4.0 * NPM 9.7.2 * Yarn 1.22.21 * Git 2.40.1.windows.1 前端环境安装 1、下载安装Node.js,下载链接 https://nodejs.org/dist/v14.17.3/node-v14.17.3-x86.msi 2、安装Node.js时自动安装了...
网站搭建入门VUE+Django+Mysql-23.3.16
梓陌轩的博客
04-20 541
视频学习–b站 大致了解流程 搭建一个自己的网站 JavaScript基础 JavaScript Vue & Django 语速慢，19年的视频，但是讲的不错 Django web后端开发 Vue语法什么的看过就忘了，建议直接装ElementPlus然后现学Vue语法，详见我的笔记-Vue Vue入门 下面两个好像Django不是纯后端，但是有对应的他的笔记 vue + django 前后端分离开发 django+前端+数据库 笔记 VUE入门 Django入门 参考文献
django+vue分离项目实战.rar
09-03
DRF是一个强大的工具集，支持序列化、权限管理、认证等。前端Vue通过这些API与后端进行数据交换。 6. 数据交互： 前端Vue.js利用Axios或fetch等库发起HTTP请求，向Django后端发送GET和POST请求，获取或提交数据。...
Django+Vue开发环境框架
05-08
Django+Vue开发环境框架 使用python3.6和django3.0还有@vue/cli 4.3.1 其他版本可能出错，可以作为一个脚手架，进行后续开发
django反序列化使用
huwei_1993的博客
08-15 671
1.验证 使用序列化器进行反序列化时，需要对数据进行验证后，才能获取验证成功的数据或保存成模型类对象。 在获取反序列化的数据前，必须调用is_valid()方法进行验证，验证成功返回True，否则返回False。 验证失败，可以通过序列化器对象的errors属性获取错误信息，返回字典，包含了字段和字段的错误。 验证成功，可以通过序列化器对象的validated_data属性获取数据。 i...
vue3中使用protobuf插件,进行数据序列化和反序列化操作
weixin_40153718的博客
02-03 2055
中途对protobuf的库引用遇到了问题，最后采用vue3+webpack来搭建项目，通过测试，才可以走通。下面是实现数据序列化和反序列化的步骤
Vue项目使用goole-protobuf实现数据序列化和反序列化
m0_45078046的博客
12-18 1610
protobufjs在vue项目中的应用
在vue中序列化与反序列化的应用
孙天成-全栈工程师
08-16 2630
vue中序列化： -通过JSON.stringify-- this.data_vl={"username":"apitest","password":"888888"}; // this.in_in=this.uuid+Object.values(this.data_vl)+this.chk;//BASE64.encode(this.data_vl);/////能取第一个序列内容 this.in_in=this.uuid+JSON.stringify(th...
序列化和反序列化
fanfan999的博客
06-24 485
序列化流,不懂可以给我留言 序列化 java.io.ObjectOutputStream类,将java对象的原始数据类型写入到文件,实现对对象的持久存储,通俗来说,就是把对象以流的方式写入到文件中叫序列化. 构造方法: public ObjectOutputStream(OutputStream out), 其中,参数为字节输出流. 序列化流特有的成员方法: void w...
26. Django_framework_反序列化和前端校验
安小静--
12-04 391
反序列化优化：校验前端参数 之前的代码中，因为太繁琐，就省略了对前端传递的参数进行正确性校验。在这里，我们对这部分进行优化 调用序列化器对象的is_valid方法，校验前端参数的正确性 校验成功返回True 校验失败返回False serializer.is_vaild(raise_exception = True) 校验失败会抛出异常 当调用is_valid()方法后，就可以调用s...
Vue+Django
Major_S的博客
06-26 685
Vue+DjangoVue+DjangoVue+Django
vue.js＋django
02-23
### 结合Vue.js与Django进行Web开发 #### 创建项目结构 为了有效地将Vue.js前端框架与Django后端相结合，在构建应用程序之前规划好项目的目录结构至关重要。通常建议保持前后端分离的方式，即把Vue.js应用作为独立的部分处理，而Django则专注于API服务提供。 #### 设置静态文件和模板路径 为了让Django能够识别并服务于Vue编译后的资源文件（如JavaScript、CSS），需配置`settings.py`中的STATICFILES_DIRS以及TEMPLATES选项来指向正确的文件夹位置[^1]。 ```python import os from pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent # Static files (CSS, JavaScript, Images) STATIC_URL = '/static/' STATIC_ROOT = BASE_DIR / 'static' STATICFILES_DIRS = [ BASE_DIR / "frontend/dist", # Vue build output directory ] # Templates configuration TEMPLATES = [ { ... 'DIRS': [os.path.join(BASE_DIR, 'templates')], ... }, ] ``` #### 安装必要的依赖包 通过pip安装django-cors-headers中间件以便解决跨域资源共享(CORS)问题；同时利用npm管理前端所需的库，比如vue-cli脚手架工具创建单页面应用(SPA)[^2]。 ```bash pip install django-cors-headers npm install -g @vue/cli ``` #### 配置CORS Headers 编辑`INSTALLED_APPS`列表加入'corsheaders'模块，并调整MIDDLEWARE设置确保允许来自特定源的请求访问API接口[^4]。 ```python INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Add this line at top ... ] CORS_ORIGIN_ALLOW_ALL = True # For development only; set False in production and specify origins. ``` #### 构建RESTful API 采用DRF(Django Rest Framework)快速搭建起一套完整的REST风格的服务层供Vue调用获取数据。定义序列化器(serializers)，视图(viewsets), 路由(routers)等组件完成CRUD操作逻辑实现[^3]. ```python # serializers.py from rest_framework import serializers from .models import Book class BookSerializer(serializers.ModelSerializer): class Meta: model = Book fields = '__all__' # views.py from rest_framework import viewsets from .serializers import BookSerializer from .models import Book class BookViewSet(viewsets.ModelViewSet): queryset = Book.objects.all() serializer_class = BookSerializer # urls.py from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import BookViewSet router = DefaultRouter() router.register('books', BookViewSet) urlpatterns = [ path('', include(router.urls)), ] ``` #### 前端部分：Vue实例初始化 在Vue工程里可以通过axios发起HTTP请求连接至上述建立好的Django REST API拉取所需的数据展示给用户。记得要根据实际情况修改baseURL参数匹配服务器地址. ```javascript // main.js import axios from 'axios'; const apiClient = axios.create({ baseURL: `http://localhost:8000/api`, // Replace with your server URL headers: { Accept: 'application/json' } }); new Vue({ el: '#app', render(h){ return h(App); }, created(){ apiClient.get('/books/') .then(response => console.log(response.data)) .catch(error => console.error(error)); } }) ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值