四、Django编写简单的接口实现前后端交互

这篇具有很好参考价值的文章主要介绍了四、Django编写简单的接口实现前后端交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

四、Django编写简单的接口实现前后端交互

1.在urls.py中配置好接口路径和视图

2.在views.py中写对应的逻辑

3.在templates中添加对应的页面


四、Django编写简单的接口实现前后端交互

这里以一个简单的根据id查询地址的功能为例

1.在urls.py中配置好接口路径和视图

    #一个用来做页面展示,一个用来做接口逻辑
    path('home/',views.home),#添加页面路径
    path('query/', views.query),#添加接口路径

2.在views.py中写对应的逻辑

#页面配置
def home(request):
    return render(request,'home.html')


#定义接口逻辑
def query(request):
    if request.method == 'POST':
        #获取前端参数值
        number = request.POST.get('number')
        # 从数据库查询对应的数据
        # 增
        try:
            database_addrnew = idaddr.objects.get(id=number)
        except:
            idaddr.objects.create(id=number, addr='addr')

        # 查
        database_addr = idaddr.objects.filter(id=number)
        for da in database_addr:
            test_report = da.addr

        # 返回数据
        response_data = {
            'test_report': test_report,
            'result': 'success',
            'result_code': 0,
        }
        return JsonResponse(response_data)

3.在templates中添加对应的页面

下面分别用表单和ajax实现两个简单的查询功能

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <style>
      /* 样式定义 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: Arial, sans-serif;
      }
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 200px;
        background-color: #333;
        color: #fff;
      }
      #sidebar ul {
        list-style: none;
        margin: 20px 0;
        padding: 0;
      }
      #sidebar ul li {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #555;
      }
      #sidebar ul li.active {
        background-color: #555;
      }
      #content {
        margin-left: 200px;
        padding: 20px;
      }
      h1 {
        font-size: 36px;
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 10px;
      }
      input {
        width: 10%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 20px;
        font-size: 16px;
      }
      button {
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
      }
      button:hover {
        background-color: #444;
      }
    </style>
  </head>
  <body>
    <div id="sidebar">
      <ul>
        <li class="active" data-page="home">首页</li>
        <li data-page="feature1">功能1</li>
        <li data-page="feature2">功能2</li>
        <li data-page="feature3">功能3</li>
      </ul>
    </div>
    <div id="content">
      <h1>欢迎使用后台管理系统!</h1>
      <p>请选择左侧菜单进行操作。</p>
      <div id="home" class="page">
        <p>欢迎使用!</p>
      </div>
      <div id="feature1" class="page">
        <h2>欢迎使用功能1</h2>
        <div>
            <!-- form表单形式 -->
            <form action="/query/" method="POST">
            <h1>根据ID查询内容1:</h1>
              <input name="number">
            <button onclick="query()">查询</button>
            </form>
        </div>
        <div>
          <!-- ajax -->
        <h1>根据ID查询内容2</h1>
        <input type="text" id="number"> <!-- 定义输入框 -->
        <div id="result">结果: <b></b></div> <!-- 结果显示,加粗 -->
        <button onclick="query()">查询</button> <!-- 定义点击事件,调用下方的查询方法 -->
        <!-- 使用ajax在不刷新页面的情况下显示结果 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            <!-- 查询方法开始 -->
            function query() {
                var number = $('#number').val(); <!-- 获取前端输入框的数据传给后端接口 -->
                <!-- 请求开始 -->
                $.post('/query/', {'number': number}, function(data) {<!-- 获取结果,放入对应的位置 -->
                    $('#result b').text(data.test_report);
                }, 'json');
            }
        </script>
        </div>
      </div>
      <div id="feature2" class="page">
        <h2>功能2页面</h2>
        <p>欢迎进入功能2。</p>
      </div>
      <div id="feature3" class="page">
        <h2>功能3页面</h2>
        <p>欢迎进入功能3。</p>
      </div>
    </div>
    <script>
      // JavaScript代码
      const pages = document.querySelectorAll('.page');
      const menuItems = document.querySelectorAll('#sidebar li');
      function hidePages() {
        pages.forEach(page => {
          page.style.display = 'none';
        });
      }
      function showPage(pageId) {
        const page = document.getElementById(pageId);
        if (page) {
          hidePages();
          page.style.display = 'block';
        }
      }
      menuItems.forEach(item => {
        item.addEventListener('click', () => {
          const pageId = item.getAttribute('data-page');
          menuItems.forEach(item => {
            item.classList.remove('active');
          });
          item.classList.add('active');
          showPage(pageId);
        });
      });
      showPage('home');
    </script>
  </body>
</html>

具体效果

四、Django编写简单的接口实现前后端交互

 

下一章:

五、Django日志配置_郝家伙~的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-469545.html

到了这里,关于四、Django编写简单的接口实现前后端交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python前后端分离之Django框架最基本后端CRUD开发

    目录   Django介绍: 开发准备 后端编写Django项目里的app模块 编写models.py文件(写模型):  编写序列化文件(serializers.py) 编写视图(Views) 新建urls.py文件,填写路径 ​编辑 进行迁移: 前端: 编写接口文件api.js 编写CRUD文件 编写index.vue文件 前端界面使用: 运行项目: 提

    2024年01月23日
    浏览(65)
  • python前后端简单交互

    前端: 后端:

    2024年02月04日
    浏览(42)
  • 前后端分离------后端创建笔记(06)新增接口&页面布局

    本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论,如有侵权请联系 源码:https://gitee.com/green_vegetables/x-admin-project.git 素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c 项目概述笔记:https://blog.c

    2024年02月13日
    浏览(50)
  • 前后端分离------后端创建笔记(05)用户列表查询接口(下)

    本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论,如有侵权请联系 源码:https://gitee.com/green_vegetables/x-admin-project.git 素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c 项目概述笔记:https://blog.c

    2024年02月12日
    浏览(47)
  • SpringBoot +Vue3 简单的前后端交互

    前端:Vue3 创建项目: npm create vue@latest cd your-project-name npm install npm run dev 项目结构图如下: 1、查看入口文件内容:main.js 代码如下: 在main.js中,首先引入了Vue组件和APP根组件 2、APP跟组件代码如下: 3、路由文件配置:router/index.js 代码如下: 4、Axios请求公共方法:utils/ax

    2024年02月10日
    浏览(37)
  • Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二) 参考微信小程序- 小柠AI智能聊天 ,可自行先体验。 根据上一节的小程序静态页面设计,需要从后端获取数据的主要4个点: 登录流程; 获取今日已提问次数; 获取聊天记录; 发起聊天和响应。

    2024年02月13日
    浏览(40)
  • 若依ruoyi前端vue使用jsencrypt.js加密后端java进行RSA解密(前后端交互RSA加解密)

    目录 1、前后端RSA加解密实现思路 2、前端 3、后端 按照约定来说公钥一般用来加密,大家都可以获取得到,私钥用来解密,当然你也可以混着用,以下示例是前端通过加密,后端解密.  -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ81AMIIBCgKCAQEA1+05vAf7m5NcLNLkRtsm gp+QdzcW6MVdayGTGBJG0v

    2024年02月06日
    浏览(72)
  • 配置web服务器+编写简单页面+分析交互过程

    目录 配置web服务器 IIS配置web服务器 C++搭建简单的web服务器 编写web页面 程序测试 IIS配置测试 C++程序测试 Wireshark捕获交互过程及分析 三次握手 请求报文 请求行 请求头 请求体 响应报文 响应行 响应头 响应体 四次挥手 实验中遇到的问题及分析 参考资料 使用Windows自带的II

    2024年02月08日
    浏览(46)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 创建springboot项目:2.7.8 pom依赖 yml 测试 编写代码生成器 启动类加注

    2024年02月04日
    浏览(53)
  • 基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos

    通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后,实现了前后端分离,并实现了登录认证,认证成功后返回该用户相应权限范围内可见的菜单。 后端采用SpringCloud构建微服,采用SpringCloud Gateway做为服务网关,采用Nacos做为统一配置中心,并在服务网关部分解决了前端跨域调

    2024年02月12日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包