简述前后端分离架构案例

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.rhkb.cn/news/320434.html

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

相关文章

rust将json字符串直接转为map对象或者hashmap对象

有些时候我们还真的不清楚返回的json数据里面到底有哪些数据,数据类型是什么等,这个时候就可以使用批处理的方式将json字符串转为一个对象,然后通过这个对象的get方法来获取json里面的数据。 pub async fn test_json(&self) {let json_st…

『项目整理』易CAR通项目说明文档-我的第一款APP

『项目整理』易CAR通项目说明文档-我的第一款APP 项目介绍功能介绍技术栈介绍实现效果如何运行备注 项目介绍 易CAR通项目是我的第一个Android项目。是一款结合了AR技术的模仿懂车帝的看车软件。因为是初学,所示实现的效果差强人意,很多的功能界面只实现…

【论文阅读】Learning Texture Transformer Network for Image Super-Resolution

Learning Texture Transformer Network for Image Super-Resolution 论文地址Abstract1. 简介2.相关工作2.1单图像超分辨率2.2 Reference-based Image Super-Resolution 3. 方法3.1. Texture TransformerLearnable Texture Extractor 可学习的纹理提取器。Relevance Embedding.…

nginxconfig.io项目nginx可视化配置--搭建-视频

项目地址 https://github.com/digitalocean/nginxconfig.io搭建视频 nginxconfig.io搭建 nginxconfig.io搭建 展示效果 找到这个项目需要的docker镜像,有项目需要的node的版本 docker pull node:20-alpine运行这个node容器,在主机中挂载一个文件夹到容器中 主机&a…

MATLAB 变换

MATLAB 变换(Transforms) MATLAB提供了用于处理诸如Laplace和Fourier变换之类的变换的命令。转换在科学和工程中用作简化分析和从另一个角度查看数据的工具。 例如,傅立叶变换允许我们将表示为时间函数的信号转换为频率函数。拉普拉斯变换使…

微搭低代码入门03页面管理

目录 1 创建页面2 页面布局3 页面跳转总结 上一篇我们介绍了应用的基本操作,掌握了应用的概念后接着我们需要掌握页面的常见操作。 1 创建页面 打开应用的编辑器,在顶部导航条点击创建页面图标 在创建页面的时候可以从空白新建,也可以使用模…

screen

sLinux:screen命令——命令行的窗口操作_screen命令关闭窗口-CSDN博客文章浏览阅读4.2k次。功能:管理命令行终端切换的软件,常用于远程连接Linux过程中,同时使用多个命令行窗口。在窗口运行中的程序,记住窗口名字前面的…

nodejs实战——搭建websocket服务器

本博客主要介绍websocket服务器库安装,并举了一个简单服务器例子。 服务器端使用websocket需要安装nodejs websocket。 cd 工程目录 # 此刻我们需要执行命令: sudo npm init上述命令创建package.json文件,系统会提示相关配置。 我们也可以使…

一款开源的原神工具箱,专为现代化 Windows 平台设计,旨在改善桌面端玩家的游戏体验

Snap.Hutao 胡桃工具箱是一款以 MIT 协议开源的原神工具箱,专为现代化 Windows 平台设计,旨在改善桌面端玩家的游戏体验。通过将既有的官方资源与开发团队设计的全新功能相结合,提供了一套完整且实用的工具集,且无需依赖任何移动设…

im即时通讯源码/仿微信app源码+php即时通讯源码带红包+客服+禁言等系统php+uniapp开发

即时通讯(IM)系统是现代互联网应用中不可或缺的一部分,它允许用户进行实时的文本、语音、视频交流。随着技术的发展,IM系统的功能越来越丰富,如红包、客服、禁言等。本文将探讨如何使用PHP语言开发一个功能完备的即时通讯系统,包括…

如何让 PDF 书签从杂乱无序整洁到明丽清新

1、拉取书签(详细步骤看文末扩展阅读) 原状态 —— 杂乱无序 自动整理后的状态 —— 错落有致,但摩肩接踵 2、开始整理 全选自动整理后的书签,剪切 访问中英混排排版优化 - 油条工具箱 https://utils.fun/cn-en 1 粘贴 → 2 …

Linux下安装snaphu

1、官网下载安装包 2、解压,移动文件夹到/usr/local/下 3、在/usr/local/下创建man,在man下创建man1文件夹 4、进入到snaphu的src文件夹里,执行sudo make,如果报错 在这个 Makefile 中,-arch x86_64 是 macOS 特定的…

最近惊爆谷歌裁员

Python团队还没解散完,谷歌又对Flutter、Dart动手了。 什么原因呢,猜测啊。 谷歌裁员Python的具体原因可能是因为公司在进行技术栈的调整和优化。Python作为一种脚本语言,在某些情况下可能无法提供足够的性能或者扩展性,尤其是在…

[Unity常见小问题]打包ios后无法修改模型透明度

问题 在Editor下可以使用如下代码去修改模型的材质的透明度,但是打包ios后无法对透明度进行修改且没有任何warning和error using System.Collections; using System.Collections.Generic; using UnityEngine;public class NewBehaviourScript : MonoBehaviour {[R…

2010-2022年上市公司彭博ESG披露评分、分项得分数据

2010-2022年上市公司彭博ESG披露评分、分项得分数据 1、时间:2010-2022年 2、来源:Bloomberg ESG 指数 3、指标:股票代码、股票简称、年份、ESG披露评分、环境披露评分、社会信息披露评分、治理披露评分 4、范围:上市公司 5、…

RocketMQ SpringBoot 3.0不兼容解决方案

很多小伙伴在项目升级到springBoot3.0版本以上之后,整合很多中间件会有很多问题,下面带小伙伴解决springBoot3.0版本以上对于RocketMQ 不兼容问题 报错信息 *************************** APPLICATION FAILED TO START *************************** Des…

基于alpha shapes的边缘点提取(matlab)

1、原理介绍 由Edelsbrunner H提出的alpha shapes算法是一种简单、有效的快速提取边界点算法。其克服了点云边界点形状影响的缺点,可快速准确提取边界点。如下图所示,对于任意形状的平面点云,若一个半径为a的圆,绕其进行滚动&…

第五十三节 Java设计模式 - 工厂模式

Java设计模式 - 工厂模式 工厂模式是一种创建模式,因为此模式提供了更好的方法来创建对象。 在工厂模式中,我们创建对象而不将创建逻辑暴露给客户端。 例子 在以下部分中,我们将展示如何使用工厂模式创建对象。 由工厂模式创建的对象将是…

Fireworks AI和MongoDB:依托您的数据,借助优质模型,助力您开发高速AI应用

我们欣然宣布 MongoDB与 Fireworks AI 正携手合作 让客户能够利用生成式人工智能 (AI) 更快速、更高效、更安全地开展创新活动 Fireworks AI由 Meta旗下 PyTorch团队的行业资深人士于 2022 年底创立,他们在团队中主要负责优化性能、提升开发者体验以及大规模运…

解决python/pycharm中import导入模块时报红却能运行的问题

一、问题 导入时报红,如下 二、解决 右键单击项目,将项目Mark Directory as→Sources Root 三、效果 报红消失 学习导航:http://www.xqnav.top