简述前后端分离架构案例

Hello , 这里是小恒不会java 。今晚1点写写关于RESTful接口的使用案例,本文会通过django+原生js前后端分离的案例简单讲解。本文带你认识一下简化版的前后端分离架构

代码

本文案例代码在GitHub上

https://github.com/lmliheng/fontend

前后端分离

先说说什么是前后端分离,腾讯混元回答的结果,我猜对于多数人是很无法理解吧
在这里插入图片描述
单体架构是一种将所有功能模块集成到一个应用程序中的设计模式。在这种架构中,前端和后端代码都包含在同一个项目中,它们共享相同的运行时环境和资源。这种架构的优点是简单易懂,易于开发和维护。但是,随着项目规模的增大,单体架构可能会导致代码耦合度高、维护困难、部署难度大等问题。比如springbootdjango使用的模板引擎,根项目代码量十足,维护时就成了屎山代码

前后端分离架构是一种将前端和后端功能模块分开的设计模式。在这种架构中,前端和后端分别作为独立的项目进行开发和部署。前端负责用户界面和交互逻辑,后端负责数据处理和业务逻辑。前后端之间通过API(如RESTful API)进行通信。这种架构的优点是可以实现前后端开发的并行化,提高开发效率,同时也便于项目的扩展和维护。最主要的是接口可以复用。不过缺点也很明显,数据和网络传输,还有接口安全等一系列问题

案例

django + 原生js实现的BookList
环境:Python 3.11.8+django5.0.3
在这里插入图片描述

后端接口开发

创建django项目django-admin startproject fontend,并进入根目录下cd fontend
创建应用python manage.py startapp apistru,并在apistru目录下创建urls.py文件
修改fontend/settings.py,数据库看喜好

# 添加以下内容
INSTALLED_APPS = ['corsheaders', # 解决跨域问题'apistru', # 自定义创建的apistru应用声明
]
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',# 添加跨域相关中间件
]
CORS_ORIGIN_ALLOW_ALL = True

这里不说具体模型定义,模型注册,以及路由设置了。
本案例只是demo,代码从GitHub拉取即可,重点是视图层逻辑部分view.py

from django.shortcuts import render
from apistru.models import Book
from django.views.decorators.http import require_http_methods
from django.http import JsonResponse
from django.core import serializers  # 使用序列化模块
import json@require_http_methods(["GET"])
def add_book(request):response = {}try:book = Book(book_name=request.GET.get('book_name'))book.save()response['msg'] = 'success'response['error_num'] = 0except Exception as e:response['msg'] = str(e)response['error_num'] = 1return JsonResponse(response)@require_http_methods(["GET"])
def show_books(request):response = {}try:books = Book.objects.filter()response['list'] = json.loads(serializers.serialize("json", books))response['msg'] = 'success'response['error_num'] = 0except Exception as e:response['msg'] = str(e)response['error_num'] = 1return JsonResponse(response)

接口调试

生成迁移文件

python manage.py makemigrations

应用迁移文件实现迁移

python manage.py migrate

运行

python manage.py runserver

访问接口路由,
比如我的http://127.0.0.1:8000/api/show_books/以及http://127.0.0.1:8000/api/add_book/

在这里插入图片描述
在这里插入图片描述
查看数据库,我使用mysql,用Navicat远程测试连接
在这里插入图片描述
至此简单的API接口开发完成,只需放置服务器端作为后台server即可
其实也不是很难理解,如果读者有问题可私信作者(任何平台都行)、

前端js原生

Html和Css就不说了,js才是重点

console.log("作者:小恒不会java")
console.log("欢迎查看源代码!")document.getElementById('add_book').addEventListener('click', addBook);
document.getElementById('book_list').addEventListener('DOMContentLoaded', fetchBooks);function addBook() {const bookName = document.getElementById('book_name').value;if (!bookName) {alert('Please enter a book name');return;}fetch('http://118.195.137.125:7000/api/add_book?book_name=' + encodeURIComponent(bookName), {method: 'GET',}).then(response => response.json()).then(data => {if (data.error_num === 0) {alert('Book added successfully');fetchBooks();console.log("add_book接口测试成功");} else {alert('Error: ' + data.msg);console.log("add_book接口测试失败");}})}function fetchBooks() {fetch('http://118.195.137.125:7000/api/show_books/', {method: 'GET',mode: 'cors',}).then(response => response.json()).then(data => {if (data.error_num === 0) {const bookList = document.getElementById('book_list');bookList.innerHTML = '';data.list.forEach(book => {const li = document.createElement('li');li.textContent = book.fields.book_name;bookList.appendChild(li);});console.log("show_books接口测试成功");} else {alert('Error: ' + data.msg);console.log("show_books接口测试失败");}}).catch(error => {alert('Error: ' + error);});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/832530.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go中如何将io.Writer转换成字符串(将两个管道连接的exec.Command输出的标准输出获取成字符串)

假设我们需要在Go中运行下面的命令: PS -A | grep wget这里需要写成两个exec.Command,如下,第一个命令为cmd,第二个为cmd2: cmd : exec.Command("PS", "-A") cmd2 : exec.Command("grep&qu…

Leetcode 第396场周赛 问题和解法

问题 有效单词 有效单词需要满足以下几个条件: 至少包含3个字符。 由数字0-9和英文大小写字母组成。(不必包含所有这类字符。) 至少包含一个元音字母。 至少包含一个辅音字母。 给你一个字符串word。如果word是一个有效单词,则…

Spring扩展点(三)Spring常用内置工具类

Spring常用内置工具类 Base64UtilsFileCopyUtilsFileSystemUtilsReflectionUtilsResourceUtilsStringUtilsAopUtilsMethodInvokingBean(简洁反射调用,指定类的指定方法,将其声明为Bean即可在 afterPropertiesSet 阶段触发反射方法调用)ReflectionUtils&a…

GateWay检查接口耗时

添加gateway依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId> </dependency>创建一个LogTimeGateWayFilterFactory类&#xff0c;可以不是这个名字但是后面必须是x…

【高校科研前沿】中国科学院地理资源所钟帅副研究员研究组博士生朱屹东为一作在Top期刊发文:从潜力到利用:探索西藏风能资源开发的技术路径优化布局

01 文章简介 论文名称&#xff1a;From potential to utilization: Exploring the optimal layout with the technical path of wind resource development in Tibet&#xff08;从潜力到利用:探索西藏风能资源开发的技术路径优化布局&#xff09; 文章发表期刊&#xff1a;《…

【Pytorch】2.TensorBoard的运用

什么是TensorBoard 是一个可视化和理解深度爵溪模型的工具。它可以通过显示模型结构、训练过程中的指标和图形化展示训练的效果来帮助用户更好地理解和调试他们的模型 TensorBoard的使用 安装tensorboard环境 在终端使用 conda install tensorboard通过anaconda安装 导入类Sum…

车道线检测交通信号识别车辆实时检测

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言车道线检测机器学习前言 认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长! 本文先对车道线检测&交通信号识别&…

蛋白质/聚合物防污的机器学习(材料基因组计划)

前言&#xff1a;对于采用机器学习去研究聚合物的防污性能&#xff0c;以及或者其他性质。目前根据我的了解我认为最困难的点有三条&#xff1a; 其一&#xff1a;数据&#xff0c;对于将要训练的数据必须要有三点要求&#xff0c;1.数据要多&#xff0c;也就是大数据&#xff…

Retrofit使用举例, Android Gradle 知识,RxJava和接口回调,Activity与Fragmen关系

目录 Retrofit使用举例 Android Gradle 知识 1. Gradle Wrapper​编辑 2. 构建文件 3. 依赖管理

电子取证平航杯的复现

闻早起部分&#xff1a; 一、闻早起的windows10电脑 &#xff08;1&#xff09;.“闻早起”所使用的笔记本电脑使用何种加密程式&#xff1f; 1.在EFI文件中找到加密程式 &#xff08;2&#xff09; 教徒“闻早起”所使用的笔记本电脑中安装了一款还原软件&#xff0c;其版本…

寻找最佳App分发平台:小猪APP分发脱颖而出

在当今移动应用市场日益饱和的环境下&#xff0c;选择一个合适的App分发平台对于开发者来说至关重要。这不仅关系到应用能否快速触达目标用户&#xff0c;还直接影响到品牌的塑造与市场份额的争夺。本文将深入探讨几大关键因素&#xff0c;帮助开发者判断哪个App分发平台最适合…

SAP系统简介,接口的调用方式,以及各个方式的比较

SAP系统是一套企业资源规划&#xff08;ERP&#xff09;软件&#xff0c;由德国SAP公司开发。SAP的全名是“System Applications and Products in Data Processing”&#xff08;数据处理中的系统、应用与产品&#xff09;。SAP系统旨在帮助企业管理和整合公司的关键业务流程。…

Whisper、Voice Engine推出后,训练语音大模型的高质量数据去哪里找?

近期&#xff0c;OpenAI 在语音领域又带给我们惊喜&#xff0c;通过文本输入以及一段 15 秒的音频示例&#xff0c;可以生成既自然又与原声极为接近的语音。值得注意的是&#xff0c;即使是小模型&#xff0c;只需一个 15 秒的样本&#xff0c;也能创造出富有情感且逼真的声音。…

【driver4】锁,错误码,休眠唤醒,中断,虚拟内存,tasklet

文章目录 1.互斥锁和自旋锁选择&#xff1a;自旋锁&#xff08;开销少&#xff09;的自旋时间和被锁住的代码执行时间成正比关系2.linux错误码&#xff1a;64位系统内核空间最后一页地址为0xfffffffffffff000~0xffffffffffffffff&#xff0c;这段地址是被保留的&#xff0c;如果…

全球260多个国家的年通货膨胀率数据集(1960-2021年)

01、数据简介 全球年通货膨胀率是指全球范围内&#xff0c;在一年时间内&#xff0c;物价普遍上涨的比率。这种上涨可能是由于货币过度供应、需求过热、成本上升等原因导致的。通货膨胀率是衡量一个国家或地区经济状况和物价水平的重要指标&#xff0c;通常以消费者价格指数&a…

leetcode 1652.拆炸弹

这道题没有什么明确的做法&#xff0c;我们其实可以根据数组的思想来做。 一般来说是一个循环数组的话&#xff0c;我们可以用while来处理。 如果循环次数很少&#xff0c;我们可以用一种思想&#xff0c;那就是把原先的数组再复制一份放在后面&#xff0c;这样就相当于是循环…

深度学习之DCGAN

目录 须知 转置卷积 DCGAN 什么是DCGAN 生成器代码 判别器代码 补充知识 LeakyReLU&#xff08;x&#xff09; torch.nn.Dropout torch.nn.Dropout2d DCGAN完整代码 运行结果 图形显示 须知 在讲解DCGAN之前我们首先要了解转置卷积和GAN 关于GAN在这片博客中已经很…

数据结构——链表专题2

文章目录 一、返回倒数第k 个节点二、链表的回文结构三、相交链表 一、返回倒数第k 个节点 原题链接&#xff1a;返回倒数第k 个节点 利用快慢指针的方法&#xff1a;先让fast走k步&#xff0c;然后fast和slow一起走&#xff0c;直到fast为空&#xff0c;最后slow指向的结点就…

BGP路由控制实验

1、按照需求配置IP地址&#xff0c;R1和R4配置环回口模拟业务网段&#xff0c;R2、R3、R4配置Loopback0口地址作为OSPF的Router-id和IBGP邻居地址。 2、AS 200 内部配置OSPF&#xff0c;仅用于实现BGP的TCP可达&#xff0c;不允许宣告业务网段。 3、配置BGP&#xff0c;R1和R…

【C++之AVL树旋转操作的详细图解】

C++学习笔记---022 C++之AVL树旋转操作的详细图解1、AVL树的简单介绍1.1、基本概念1.2、平衡因子1.3、AVL树的特性2、C++中pair的介绍2.1、定义和初始化2.2、访问元素2.3、作为容器的元素2.4、作为函数的返回值3、AVL树节点的定义4、AVL的插入规则探究5、AVL树的旋转操作5.1、R…