简述前后端分离架构案例-编程知识

简述前后端分离架构案例

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

代码

本文案例代码在GitHub上

https://github.com/lmliheng/fontend

前后端分离

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

前后端分离架构是一种将前端和后端功能模块分开的设计模式。在这种架构中，前端和后端分别作为独立的项目进行开发和部署。前端负责用户界面和交互逻辑，后端负责数据处理和业务逻辑。前后端之间通过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);});
}