自己可以给公司做网站吗,wordpress新建网页插件,wordpress 实时更新,百家号和网站同步做Hello , 这里是小恒不会java 。今晚1点写写关于RESTful接口的使用案例#xff0c;本文会通过django原生js前后端分离的案例简单讲解。本文带你认识一下简化版的前后端分离架构 代码
本文案例代码在GitHub上
https://github.com/lmliheng/fontend前后端分离
先说说什么是前后… Hello , 这里是小恒不会java 。今晚1点写写关于RESTful接口的使用案例本文会通过django原生js前后端分离的案例简单讲解。本文带你认识一下简化版的前后端分离架构 代码
本文案例代码在GitHub上
https://github.com/lmliheng/fontend前后端分离
先说说什么是前后端分离腾讯混元回答的结果我猜对于多数人是很无法理解吧 单体架构是一种将所有功能模块集成到一个应用程序中的设计模式。在这种架构中前端和后端代码都包含在同一个项目中它们共享相同的运行时环境和资源。这种架构的优点是简单易懂易于开发和维护。但是随着项目规模的增大单体架构可能会导致代码耦合度高、维护困难、部署难度大等问题。比如springboot和django使用的模板引擎根项目代码量十足维护时就成了屎山代码
前后端分离架构是一种将前端和后端功能模块分开的设计模式。在这种架构中前端和后端分别作为独立的项目进行开发和部署。前端负责用户界面和交互逻辑后端负责数据处理和业务逻辑。前后端之间通过API如RESTful API进行通信。这种架构的优点是可以实现前后端开发的并行化提高开发效率同时也便于项目的扩展和维护。最主要的是接口可以复用。不过缺点也很明显数据和网络传输还有接口安全等一系列问题
案例
django 原生js实现的BookList 环境:Python 3.11.8django5.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 jsonrequire_http_methods([GET])
def add_book(request):response {}try:book Book(book_namerequest.GET.get(book_name))book.save()response[msg] successresponse[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] successresponse[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);});
}
