Python Web开发：在线Web计算器

简介

功能概述

项目功能主要是实现一个在线计算器，

在输入框中输入计算式，单击“计算”按钮就可以输出结果

技术原理

前端采用Bootstrap进行制作，然后通过ajax方式传输给后台
后台采用django进行开发

实现步骤

创建项目

C:\Users\maxin>d:

D:\>cd D:\Tech\大数据\Python Web开发从入门到实战\mycode

D:\Tech\大数据\Python Web开发从入门到实战\mycode>django-admin startproject compute

D:\Tech\大数据\Python Web开发从入门到实战\mycode>cd compute

D:\Tech\大数据\Python Web开发从入门到实战\mycode>python manage.py startapp app

D:\Tech\大数据\Python Web开发从入门到实战\mycode\compute>python manage.py runserver

项目启动后，通过浏览器访问：http://127.0.0.1:8000/

新建页面

在app目录下创建templates子文件夹，

在其中新建index.html文件。

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线计算器</title>
	</head>
	<body>
		<h1>准备制作一款在线计算器</h1>
	</body>
</html>

配置应用

将app导入到项目中：打开配置文件夹compute下的settings.py

找到INSTALLED_APPS字段，添加刚创建的app应用

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
]

另外，为了访问方便，需要开放访问权限，找到ALLOWED_HOSTS字段

ALLOWED_HOSTS = ['*',]

配置视图处理函数

配置视图处理函数，编辑app文件夹下的views.py:

添加了访问首页的home函数

from django.shortcuts import render 

# Create your views here.

def home(request):
    return render(request,'index.html')

配置路由

from django.contrib import admin
from django.urls import path
from app.views import home #导入views模块

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='home'),#配置访问路径
]

启动项目

在命令行输入

python manage.py runserver

浏览器打开：

http://127.0.0.1:8000/

导入Bootstrap前端框架

本节阐述如何在Django中使用Bootstrap，

关键点在于Django静态资源的配置。

在compute项目的app中创建一个名为static的子文件夹，然后将Bootstrap中的css,fonts,js三个子文件夹复制，

另外新建一个名为img的子文件夹来存放图片。

编写index.html文件

{% 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>

静态文件配置

打开配置文件夹compute下的settings.py

添加如下配置：

STATIC_URL = '/static/'
STATICFILES_DIRS=[

    os.path.join(BASE_DIR,'static'),

]