songsong的垃圾堆

收废铜烂铁~

0%

python+django搭建web

发表于 更新于 阅读： Valine：
本文字数： 1.6k 阅读时长 ≈ 6 分钟

前言

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

创建Django项目

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

1
django-admin startproject mytest

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

1
python manage.py runserver

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

交互

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

1
python manage.py startapp 应用名

在这里插入图片描述

用pycharm打开应用程序

打开models.py:

1
2
3
4
5
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中：

1
2
3
4
5
import pymysql

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

pymysql.install_as_MySQLdb()

项目的settings.py文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

执行如下代码：

1
python manage.py makemigrations 应用名
1
2

python manage.py migrate

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

1
python manage.py sqlmigrate 应用名 0001
1
python manage.py migrate

Django有自动的后台管理

1
2
3
4
5
python manage.py createsuperuser
Username: admin
Password: **********
Password (again): *********
Superuser created successfully.

打开admin.py：

1
2
3
4
5

from django.contrib import admin
from . import models

admin.site.register(models.Temperature)

进入管理界面：

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

在这里插入图片描述

请求路径

打开urls.py文件：

1
2
3
4
5
6
7
8
9
10
11
12
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文件：
将应用的请求路径包含进去

1
2
3
4
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
$(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文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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')

效果

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

在这里插入图片描述

1
http://127.0.0.1:8000/polls/

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

------------- Thank you for reading -------------
Title - Artist
0:00