当前位置: 首页 > news >正文

基于Python、Django开发Web计算器

1、创建项目

创建Django项目参照https://blog.csdn.net/qq_42148307/article/details/140798249,其中项目名为compute,并在该项目下创建一个名为app的应用,并且进行基本的配置。

2、导入Bootstrap前端框架

Bootstrap的使用参照https://blog.csdn.net/qq_42148307/article/details/140904864。在compute项目的app文件夹下面创建一个名为static的子文件夹,然后将Bootstrap中的css、fontsjs三个子文件夹复制到static文件夹下面。另外,在static文件夹下新建一个名为img的子文件夹用于存放静态图片。

由于创建的在线计算器项目需要采用Ajax发送数据,需要导入jQuery组件来支持Ajax的通信。jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库。

编辑index.html,其中:

  • Django中静态文件的引用。先需要导入Django的静态资源引用标签{%load staticfiles%},然后在所有的引用路径前需要添加static标记。即采用类似href="{%static'app/css/bootstrap.min.css'%}"这种引用形式。可以简单地将static标记理解成一种文件映射,即映射到项目app中的static文件夹下
  • 在App应用中的static文件夹下找到css子文件夹,然后在该子文件夹style下创建一个.css文件该文件主要是为了定制一些特殊的CSS样式
  • 在<body>部分引用了两个Bootstrap现成的按钮组件,计算按钮因为采用Ajax通信,并没有设计相对应的响应函数。
{% load staticfiles %}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>在线计算器</title><link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" /><link rel="stylesheet" href="{% static 'css/style.css' %}" /><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script>
</head><body><button type = "button" class = "btn btn - success btn - lg btn_clear" id = "lgbut_clear"onclick = "fun_clear">清空</button><button type = "button" class = "btn btn - primary btn - lg" id = "lgbut_compute">计算</button>
</body></html>

3、前端页面设计

http://www.lryc.cn/news/423433.html

相关文章:

  • 高性能并行计算面试-核心概念-问题理解
  • java-activiti笔记
  • Layui——隐藏表单项后不再进行验证
  • Github Copilot 使用技巧
  • 【实现100个unity特效之20】用unity实现物品悬浮和发光像素粒子特效
  • GPT-4o mini发布,轻量级大模型如何颠覆AI的未来?
  • 高性能的 C++ Web 开发框架 CPPCMS + WebSocket 模拟实现聊天与文件传输案例。
  • 合合信息OCR支持30类国内常见票据一站式分类识别,支持医疗发票、数电票识别
  • LeetCode-day40-3151. 特殊数组 I
  • 技术研究:Redis 数据结构与 I/O 模型
  • 46-扇孔的处理及铺铜以及布线
  • LVS实验的三模式总结
  • 游戏安全入门-扫雷分析远程线程注入
  • bert-base-chinese模型的完整训练、推理和一些思考
  • JS基础5(JS的作用域和JS预解析)
  • Doris 夺命 30 连问!(中)
  • 书生.浦江大模型实战训练营——(四)书生·浦语大模型全链路开源开放体系
  • SpringBoot 整合 RabbitMQ 实现延迟消息
  • Cilium:基于开源 eBPF 的网络、安全性和可观察性
  • Axios 详解与使用指南
  • 深度学习 —— 个人学习笔记20(转置卷积、全卷积网络)
  • 解决Mac系统Python3.12版本pip安装报错error: externally-managed-environment的问题
  • lvm知识终结
  • ESP32S3 IDF 对 16路输入输出芯片MCP23017做了个简单的测试
  • 【技术前沿】Flux.1部署教程入门--Stable Diffusion团队最前沿、免费的开源AI图像生成器
  • Redis 的 STREAM 和 RocketMQ 是两种不同的消息队列和流处理解决方案,它们在设计理念、功能和用途上有显著区别。以下是它们的主要区别:
  • Visual Studio Code安装与C/C++语言运行(上)
  • 探索数据可视化,数据看板在各行业中的应用
  • haralyzer 半自动,一次性少量数据采集快捷方法
  • mall-admin-web-master前端项目下载依赖失败解决