需求

前端输入一个用户名，点击查询用户信息，并显示；若用户不存在，则显示用户不存在

表设计
user_table表字段：
username; varchar(20), unique
age; int
sex; tinyint
先在数据库中存储一些用户数据，然后通过前后端的交互来查询用户信息。
路由设计
GET /index 返回首页
GET /user/lauf/ 返回json响应

使用技术

前后端不分离
操作系统：windows
后端框架 django 3.2.9、开发工具python3.6 + vscode
前端Vue 2.6.14
异步请求axios
数据库sqlite3

代码实现

链接：项目代码
提取码：oolg

重难点

Vue中使用axios发送异步请求、this指向、Vue实例对象的数据代理
前后端不分离时，django渲染模板与Vue插值语法冲突的问题
针对axios异步请求，django返回json响应

上一篇：Django模板变量与Vue的插值语法冲突问题

Django与Vue的前后端交互相关推荐

VUE进行前后端交互
目录一. 跨域 1. 什么是跨域? 2. 什么是本域? 3. 浏览器请求的三种报错二.SpringBoot解决跨域问题+其他前后端跨域请求解决方案 1. SpringBoot上直接添加@Cross ...
Django和Vue搭建前后端分离框架
一. 技术选型 1. 开发模式:前后端分离. 2. 后端框架:使用Django实现后端数据接口,使用python语言. 3. 前端框架:使用Vue框架实现页面展示,使用的HTM ...
python django框架+vue.js前后端分离
本文用于学习django+vue.js实现web前后端分离协作开发.以一个添加和删除数据库书籍应用为实例. django框架官方地址:www.djangoproject.com/ vue.js 框架官 ...
spring boot与VUE的前后端交互
一.准备默认认为会了简单的spring boot知识和vue知识 1.前端先安装好vue cli,没有的点这里 2.后端后端IDEA安装vue.js插件就OK了二.创建前端VUE项目就进入C ...
【项目实战】mybatis +vue.js 前后端交互批量删除
单个删除功能已经实现了,批量删除弄了很久也没弄好,来试一下.弄了很久终于把批量删除实现了! 结果: 点击确认后,将看见表中已经少了两条数据. 实现的关键是:1.正确传递数据给后端的js语句 2.后端接 ...
Vue学习--前后端交互
接口调用方式原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程 ...
Django之POST GET与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
前后端交互的几种方式
Vue+Springboot 前后端交互的几种方式前置知识点用于接收前端参数传递的几个注解 @RequestBody注解 @RequestParam注解 @PathVariable注解 @Requ ...
Django vue 搭建前后端分离的web 二
bootstrap的安装和使用: 安装: 在vue项目下使用npm直接安装即可: 由于bootstrap依赖jQuery,所以第一步安装jQuery: npm install jquery 检查在pa ...

Django与Vue的前后端交互

目录

需求

使用技术

代码实现

重难点

Django与Vue的前后端交互相关推荐

最新文章

热门文章