python+django搭建web

最新推荐文章于 2024-05-25 14:04:51 发布

songsongL

最新推荐文章于 2024-05-25 14:04:51 发布

阅读量333

点赞数

分类专栏： Python 文章标签： python django

本文链接：https://blog.csdn.net/songsongL/article/details/107237615

版权

Python 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前言

安装Django和pycharm就不说了。
在这里插入图片描述
Django官网教程，很详细
注：我一开始用的pycharm社区版，引入bootstrap等文件没有代码补全。然后用破解版pycharm就可以了。（推"程序员的时光"微信公众号有破解教程）

创建Django项目

cd进入存储项目的地方，运行下面代码：

django-admin startproject mytest

生成一些算是配置文件吧
在这里插入图片描述
在manage.py所在目录运行下面代码：

python manage.py runserver

浏览器访问：http://127.0.0.1:8000/ ，出现下图，空项目算是完成了。
在这里插入图片描述

交互

创建应用程序,实现记录体温

python manage.py startapp 应用名

在这里插入图片描述

用pycharm打开应用程序

打开models.py:

class Temperature(models.Model):
    morning = models.CharField(max_length=10)
    noon = models.CharField(max_length=10)
    evening = models.CharField(max_length=10)
    time = models.CharField(max_length=100)

更换mysql

在__init__.py中：

import pymysql

pymysql.version_info = (1, 3, 13, "final", 0)

pymysql.install_as_MySQLdb()

项目的settings.py文件中：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'test',        #数据库名字
        'USER': 'root',          #账号
        'PASSWORD': '123456',      #密码
        'HOST': '127.0.0.1',    #IP
        'PORT': '3306',                   #端口
    }
}
#要将应用程序包含在我们的项目中
INSTALLED_APPS = [
    '应用名.apps.应用名Config',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

#改为中国时区
LANGUAGE_CODE = 'zh-hans'
 
TIME_ZONE = 'Asia/Shanghai'
 
USE_I18N = True
 
USE_L10N = True
 
USE_TZ = False

执行如下代码：

python manage.py makemigrations 应用名


python manage.py migrate

去MySQL看，会生成数据库表
在migrations文件夹下会有0001等的编号，可以：

python manage.py sqlmigrate 应用名 0001

python manage.py migrate

Django有自动的后台管理

python manage.py createsuperuser
Username: admin
Password: **********
Password (again): *********
Superuser created successfully.

打开admin.py：


from django.contrib import admin
from . import models

admin.site.register(models.Temperature)

进入管理界面：

python manage.py runserver
 http://127.0.0.1:8000/admin/

在这里插入图片描述

请求路径

打开urls.py文件：

from django.urls import path

from django.conf.urls import url
from . import views

app_name = 'polls'
urlpatterns = [
    url(r'^$', views.show),  # 页面展示
    url(r'^add/', views.addTemperature),
    url(r'^index/', views.index2),
    url(r'^look', views.look),
]

打开项目的（不是应用程序的）urls.py文件：
将应用的请求路径包含进去

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

我这里则为，所有应用请求都是http://127.0.0.1:8000/polls/…
管理为：http://127.0.0.1:8000/admin

html页面

templates文件下新建一个与应用同名的文件（我也不知道为什么这样？？），然后在下面新建
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <link href="/static/css/bootstrap.min.css" rel="stylesheet">
       <script src="/static/js/jquery-3.2.1.min.js"></script>
       <script src="/static/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
       <script src="/static/js/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>
<body>
    <div class="container-fluid">
        <br>
        <br>
        <h1 class="row col-2 m-auto">体温录入</h1>
        <br>
        <br>
        <form action="/polls/add/" method="post" class="col-4 m-auto">
             {% csrf_token %}
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">上午</span>
            </div>
            <input type="text" name="morning" class="form-control" placeholder="请输入温度">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">中午</span>
            </div>
            <input type="text" name="noon" class="form-control" placeholder="请输入温度">
          </div>

            <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">下午</span>
            </div>
            <input type="text" name="evening" class="form-control" placeholder="请输入温度">
          </div>

            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <label>选择日期+时间：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker2'>
                            <input type='text' name="time" class="form-control" placeholder="获取时间" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
             <script>
                $(function () {
                    $('#datetimepicker2').datetimepicker({
                        format: 'YYYY-MM-DD hh:mm',
                        locale: moment.locale('zh-cn')
                    });
                });
            </script>

             <button type="submit" class="col-12 btn btn-primary">提交</button>
        </form>
    </div>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
       <script src="/static/js/jquery-3.2.1.min.js"></script>
       <script src="/static/js/bootstrap.min.js"></script>
      <script src="/static/js/echarts.min.js"></script>
     <script src="/static/js/chart.js"></script>

</head>
<body>
    <div class="container-fluid">
        <br>
        <br>
        <h1 class="col-4 m-auto text-center text-success">体温记录成功</h1>
        <br>
        <br>
        <div class="col-12 m-auto" id="box" style="width: 1000px;height: 500px;"></div>
    </div>
</body>
</html>

chart.js

$(function () {
    $.ajax({
        url: "/polls/look",
        type: 'get',
        dataType: 'json',
        success: function (data) {
            // alert("成功！")
            // alert("上午"+data.list[0].morning+"下午"+data.list[0].noon+"时间"+data.list[0].time)
            lineChart(data.list);
        },
        error: function () {
            alert("失败！")
        }
    })
});

function f() {
//初始化ehcharts实例
    var myChart=echarts.init(document.getElementById("box"));
    //指定图表的配置项和数据
    var option={
        //标题
        title:{
          text:'生鲜销量统计'
        },
        //工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },
        //图例-每一条数据的名字叫销量
        legend:{
            data:['销量']
        },
        //x轴
        xAxis:{
            data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{},
        //数据-data是最终要显示的数据
        series:[{
            name:'销量',
            type:'line',
            data:[40,20,35,60,55,10]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);
}


//JS成功后的代码
function lineChart(result){
    //获取dom容器
    var myChart = echarts.init(document.getElementById('box'));
    option = {
        title: {
            text: '体温变化图',
            // subtext: '数据来源个人采集',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },

        legend: {
            data: ['上午', '下午', '晚上']
        },
        tooltip: { //跟随鼠标显示数值
            trigger: 'axis'
        },

        //保存图片
        toolbox: {
            feature: {
                saveAsImage: {
                    name:'体温表', //图片名
                    pixelRatio:2
                }
            }
        },
        xAxis: {
            name:"时间",
            type: 'category',
            data:(function(){
                var res = [];
                for(var i=0;i<result.length;i++) {
                    res.push(result[i].time);
                }
                return res;
            })()
        },
        yAxis: {
            name:"摄氏度",
            type: 'value',
             scale : true,
            max : 40,
            min : 35,
            splitNumber : 10,
            boundaryGap : [ 0.2, 0.2 ]
        },
        series: [
            {
                name:"上午",
                type: 'line',
                data:(function(){
                    var res = [];
                    for(var i=0;i<result.length;i++) {
                        res.push(result[i].morning);
                    }
                    return res;
                })()
            },
            {
                name: '下午',
                type: 'line',
                data:(function(){
                    var res = [];
                    for(var i=0;i<result.length;i++) {
                        res.push(result[i].noon);
                    }
                    return res;
                })()
            },
            {
                name: '晚上',
                type: 'line',
                data:(function(){
                    var res = [];
                    for(var i=0;i<result.length;i++) {
                        res.push(result[i].evening);
                    }
                    return res;
                })()
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

注意：没有的js百度下载一下！

请求处理

打开应用的views.py文件:

import json

from django.http import HttpResponse, Http404, HttpResponseRedirect, JsonResponse
from django.template import loader
from django.shortcuts import get_object_or_404, render, redirect
from django.urls import reverse
from django.views import generic

from .models import  Temperature

def index(request):
    pass
    return render(request, '应用名/index.html')

def addTemperature(request):

    morning = request.POST.get('morning', "");
    noon = request.POST.get('noon', "");
    evening = request.POST.get('evening', "");
    time = request.POST.get('time', "");
    temperature = Temperature(morning=morning, noon=noon,evening=evening,time = time);
    temperature.save();

    return render(request, '应用名/success.html')


def look(request):
    data = {}

    book = Temperature.objects.values()

    data['list'] = list(book)

    return JsonResponse(data)
    # if request.is_ajax():
    #
    #     """以json形式返回列表"""
    #     # 1. 获取所有对象
    #     # objects.all()  queryset类型的对象，不能直接json
    #     queryset = Temperature.objects.all().values('morning',"noon",'time',)
    #     # 2. 将数据序列化成json格式   date类型的数据不能直接系列化 ensure_ascii=False 修改乱码的现象
    #     ret = json.dumps(list(queryset), ensure_ascii=False)
    #     # 3. 返回
    #     response = JsonResponse({"ret":ret})
    #     return response
    #return HttpResponse({"temp":ret})
    # a = Temperature.objects.all()
    # return render(request, 'polls/success.html',{
    #     'data':a
    # })

def show(request):
    return render(request, '应用名/success.html')

效果

http://127.0.0.1:8000/polls/index/

在这里插入图片描述

http://127.0.0.1:8000/polls/

在这里插入图片描述
大概流程就是这样！

songsongL

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
python+django搭建web

前言安装Django和pycharm就不说了。Django官网教程，很详细注：我一开始用的pycharm社区版，引入bootstrap等文件没有代码补全。然后用破解版pycharm就可以了。（推"程序员的时光"微信公众号有破解教程）创建Django项目cd进入存储项目的地方，运行下面代码：django-admin startproject mytest生成一些算是配置文件吧在manage.py所在目录运行下面代码：python manage.py runserver浏览器访问：h
复制链接

扫一扫

专栏目录