Python实战项目
高血压项目详解（上）
涉及内容：爬虫&开发&数学分析&数据挖掘
a、前端界面的技术——> Juqery Mobile (JQM)，俗称“机器猫”
b、后面逻辑——>Django，前后端分离技术，使用模块 django restframework
c、收集的数据进行数据分析——Pandas模块，结合pyechars画图
d、从网上抓取在于高血压的文献——>爬虫技术，使用selenium模块进行模拟
一、项目开发前的分析
1、调查问卷对象：病人&非病人
2、调查的对象与高血压的相关维度
⇒姓名
⇒性别
⇒身份证号
⇒体重
⇒是否吸烟
⇒多大年龄开始吸烟
⇒目前吸烟状况
⇒戒过烟吗
⇒你喝酒吗
⇒每次的饮酒量
⇒饮酒频率
⇒父母弟是否患过此病症
3、这里的项目使用以下几个维度做参考。
⇒姓名
⇒性别
⇒ 年龄
⇒身高
⇒体重
⇒是否吸烟
⇒ 是否饮酒
⇒母兄弟是否患病（遗传）
注：
这里使用身高和体重这一项目是为了国际上的判断肥胖的标准身体质量系数,即BMI。
BMI = 体重/身高的平方（kg/m^2）
一般认为肥胖的人会有高血压病症.所以身体质量系数来表征肥胖的级别，判断与高血压关系。
二、前端框架------JQuery Mobile（JQM,适用于移动端）
1、移动端的前端技术在这个项目中需要解决的问题
（1) JQM如何使用?
（2) 移动端的九宫格界面怎么做？
（3) 移动端调查问卷页面怎么做？
2、关于版本号的说明
（1）Jquery ==> 1.7.1
（2）Jquery mobile ==> 1.3.2
3、网页头文件中关于jqm在头文件中的引用。
Jqm 需要 Jquery，Js文件，Css文件
代码如下：
<link rel="stylesheet" href="css/jquery.mobile.min.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
4、jqm基本页面制作
注：移动端页面不用考虑标签，直接使用div进行布局
(1) 启动Pycharm，新建一个项目 ,命名为blood_project。
(2) 把css,js，images图片文件拷贝到项目文件夹中。当前的blood_project下面有三个文件夹，名字是css/js/images1。
(3) 新建一个网页文件,右键项目，New_---HTML files ，首页取名index.html。引入jquery的使用文件，先引入css文件。
<link rel=”stylesheet” href=” css文件路径”/>
(4)引入jquery文件。
<script src="js/jquery-1.7.1.min.js"></script>
(5) 引入jquery mobile文件。
<script src="js/jquery.mobile.min.js"></script>
(6) jquery mobile布局文件的特点。
data-role=”page” 是一个页面
data-role=”header” 是页面的头部
data-role=”content” 是页面的内容
data-role=”footer” 是页面的底部
如果报错，检查以下内容
1、检查单词:header content footer data-role
2、检查引用的路径是否正确,是否能够找到文件
3、文件引用顺序 css-->jquery-->jqm jquery-->css-->jqm
(7) 如果改变头部或底部的颜色,可以在header或者footer这样的标签上加上data-theme=”a,b,c,d”。改变头部或底部的颜色。
(8) 其它对头部和底部的修饰。
data-role=”navbar” 导航
data-position=”fixed” 设置位置
data-icon=”名字” 加图标
相关指令表示如下。
顶部 ⇒data-role=header
中部 ⇒data-role=content
底部 ⇒data-role=footer
改变显示的样式 ⇒data-theme=”a,b,c,d,e”
固定顶部在顶端，底部在底端 ⇒data-position=”fixed”
把底部变导航 ⇒data-role=”navbar” （中间嵌套ul li）
加图标 ⇒data-icon=”图标名”
(8) 完成基本框架如上，工作时只对内容部分做改动,即content部分，其它部分复制粘贴 (以下为所有JQM共有框架)
<!DOCTYPE html>
<html lang**="en"**>
<head>
<meta charset="UTF-8">
<title>高血压检测</title>
<link rel="stylesheet" href="css/jquery.mobile.min.css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
返回
<h1>血压分析</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul >
<li>首页</li>
<li>设置</li>
<li>推荐</li>
<li>收藏</li>
</ul>
</div>
</div>
</div>
</body>
</html>
3、jqm实现九宫格
“ui-grid”里面嵌套”ui-block”
（1）Class=”ui-grid-a”——> 一行两个元素
（2）Class=”ui-grid-b”——> 一行三个元素
（3）Class=”ui-grid-c”——> 一行四个元素
注：每一行都按ui-block-a——>ui-block-b——>ui-block-c的顺序，遇到ui-block-a换行
（九宫格要求一行三个元素，代码如下）
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="/user/"><img src="images1/16.png"/></a>
<p>用户信息输入</p>
</div>
<div class="ui-block-b">
<img src="images1/11.png" />
<p>高血压类论文抓取</p>
</div>
<div class="ui-block-c">
<img src="images1/15.png" />
<p>高血压类数据分析</p>
</div>
<div class="ui-block-a">
<img src="images1/13.png" />
<p>高血压病数据模型预测</p>
</div>
</div>
4、调查问卷
（1）结合九宫格技术进行布局
（2）两个单选按钮组合在一起,需要和div把input单选钮包起来,在div上面做属性:
data-role=”controlgroup” 组合框
data-type=”horizontal” 横向
data-role=”vertical” 纵向
（3）两个单选钮还要用一个label标签包起input
（4）表单中的任何一个元素都需要有name属性
代码如下：
<div data-role="controlgroup" data-type="horizontal">
<!--type="radio"是单选钮-->
<!--name属性保证服务器端能够接收该属性-->
<label>
<input type="radio" name="sex"/>男
</label>
<label>
<input type="radio" name="sex"/>女
</label>
</div>
整个调查问卷的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高血压分析</title>
<link rel="stylesheet" href="css/jquery.mobile.min.css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<!--移动端页面的头部-->
<div data-role="header" data-theme="b" data-position="fixed">
<a href="#">返回</a>
<h3>高血压分析</h3>
</div>
<!--移动端页面的内容-->
<div data-role="content">
<form method="post" action="">
<!--显示姓名一栏-->
<div class="ui-grid-a">
<div class="ui-block-a">
<h3>姓名</h3>
</div>
<div class="ui-block-b">
<!--name属性保证服务器端能够接收该属性-->
<input type="text" name="username"/>
</div>
</div>
<!--显示性别一栏-->
<div class="ui-grid-a">
<div class="ui-block-a">
<h3>性别</h3>
</div>
<div class="ui-block-b">
<div data-role="controlgroup" data-type="horizontal">
<!--type="radio"是单选钮-->
<!--name属性保证服务器端能够接收该属性-->
<label>
<input type="radio" name="sex"/>男
</label>
<label>
<input type="radio" name="sex"/>女
</label>
</div>
</div>
</div>
<!--显示身高一栏-->
<div class="ui-grid-a">
<div class="ui-block-a">
<h3>身高</h3>
</div>
<div class="ui-block-b">
<!--name属性保证服务器端能够接收该属性-->
<input type="text" name="tall"/>
</div>
</div>
<!--显示体重一栏-->
<div class="ui-grid-a">
<div class="ui-block-a">
<h3>体重</h3>
</div>
<div class="ui-block-b">
<!--name属性保证服务器端能够接收该属性-->
<input type="text" name="weight"/>
</div>
</div>
<!--显示是否吸烟一栏-->
<div class="ui-grid-a">
<div class="ui-block-a">
<h3>是否吸烟</h3>
</div>
<div class="ui-block-b">
<div data-role="controlgroup" data-type="horizontal">
<!--type="radio"是单选钮-->
<!--name属性保证服务器端能够接收该属性-->
<label>
<input type="radio" name="smoke"/>吸
</label>
<label>
<input type="radio" name="smoke"/>不吸
</label>
</div>
</div>
</div>
<!--显示是否饮酒一栏-->
<div class="ui-grid-a">
<div class="ui-block-a">
<h3>是否饮酒</h3>
</div>
<div class="ui-block-b">
<div data-role="controlgroup" data-type="horizontal">
<!--type="radio"是单选钮-->
<!--name属性保证服务器端能够接收该酒属性-->
<label>
<input type="radio" name="drink"/>喝
</label>
<label>
<input type="radio" name="drink"/>不喝
</label>
</div>
</div>
</div>
<button type="submit">提交</button>
</form>
</div>
<!--移动端页面的底部-->
<div data-role="footer" data-theme="b" data-position="fixed">
<!--移动端页面的导航-->
<div data-role="navbar" >
<ul>
<li><a href="#" data-icon="home">首页</a></li>
<li><a href="#" data-icon="star">收藏</a></li>
<li><a href="#" data-icon="grid">关注</a></li>
<li><a href="#" data-icon="gear">设置</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
三、django前后端分离
1、写接口
用前后端分离技术，编写后台的技术叫接口。接口返回json数据。把接口写成API文档
2、接口文档举例
举例1：登陆接口
login（）登陆接口
参数说明：传入一个用户名，传入一个密码。
返回值，返回登陆成功的json数据。{“code”:200,”status”:“登陆成功”}
举例2：实现的问卷调查接口
接口请求方式：localhost:8000/blood_info
参数：username,sex,tall,weight,smoke,drink
参数说明：
username用户名
sex性别
Tall 身高
Weight 体重
smoke是否吸烟
Drink 是否喝酒
返回值：返回存储成功的json数据.
{
"id": 1,
"username": "李一",
"sex": true,
"tall": "179.00",
"weight": "80.00",
"smoke": true,
"drink": true
}
3、版本
（1）Django == 2.2.1
（2）Mysql == 5.6.40
（3）Djangorestframework == 0.3.0
（4）Pymysql == 0.9.3
4、创建django项目
django-admin startproject myhyper
4、创建应用
django-admin startapp blood
6、创建数据库
create database myblood default charset=utf8;
7、restful接口——安装djangorestframework
pip3 install djangorestframework
8、settings.py设置
(1) INSTALLEDAPP (设置应用名称,restframework)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'myblood'
]
(2)templates模板的设置 DATABASES （数据库相关配置）
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,"templates")],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
(3)数据库的设置 DATABASES （数据库相关配置）
'default': {
'ENGINE': 'django.db.backends.mysql',
'HOST':'localhost',
'PORT':3306,
'USER':'root',
'PASSWORD':'admin',
'NAME': 'myblood',
}
(4) 静态文件的设置
STATICFILES_DIRS=[
os.path.join(BASE_DIR,"static")
]
(5)在项目目录下，建立文件夹,templates,static,把html文件拷贝到templates里面，把js/css/images1拷贝到static中。结构如图。
9、设计models，实现编码。
username=models.CharField(max_length=20)
sex=models.BooleanField(default=False)
cardid=models.CharField(max_length=18)
tall=models.DecimalField(max_digits=6,decimal_places=2)
weight=models.DecimalField(max_digits=6,decimal_places=2)
smoke=models.BooleanField(default=True)
drink=models.BooleanField(default=True)
ill=models.BooleanField(default=False)
10、同步数据库
Python manage.py makemigrations
Python manage.py migrate
注：如果有报错，需要安装pymysql，放在项目下的init.py文件中
import pymysql
pymysql.install_as_MySQLdb()
11、引入rest_framework目的——序列化
（1）定义序列化的类，类继承于serializers.ModelSerializer
（2）类中指明序列化的模型，并指明返回前端的json数据输出维度有哪些
（3）元类指明上述内容
class BloodSerializer(serializers.ModelSerializer):
'''
要序列的是哪个models,json里面显示是哪些字段
all所有字段
写元类
'''
class Meta:
model=BloodInfo
fields="all"
12、后台存储，前端返回json数据
（1）view中的方法变成类的形式，类继承APIView
（2）定义一个BloodView，继承于APIView
（3）提供了两个方法：get&post（注意get与post区别）
get方法的实现
class BloodInfo(APIView):
'''
继承APIView后实现两个方法,get方法和post方法
get方法实现用户访问调查问卷
post方法实现用户提交调查问卷的数据
request请求是共有的参数
'''
def get(self,request):
#实现功能是访问页面
return render(request,"user_1.html")
post方法的实现,用blood变量存储BloodSerializer序列化的模型类，模型类中的参数就是接收的数据。
class BloodInfo(APIView):
def post(self,request):
blood=BloodSerializer(data=request.data)
if blood.is_valid(): # 用blood.is_valid()判断一下数据是否有效
blood.save() # 用blood.save()完成数据的存储
return Response(blood.data) # 返回Response,这是Views函数要求
else:
return Response(blood.errors) # 这里要判断blood是否有效，else返回Response的错误
13、写路由规则，通过地址找到方法的映射
（1）urls.py中写相应的路由规则
urlpatterns = [
path('admin/', admin.site.urls),
path("blood_info/",views.BloodInfo.as_view())
]
12、前端做表单提交，需要有form
属性：action=”/blood/” method=”post”
①用form表单提交,得到rest_framework原生的APIView
②手写form表单提交
'''
jquery可以用$("#")提取id元素，发生的click点击事件
'''
$("#btn").click(function(){
'''
form是form的id名，取表单数据，序列化 serilizer()
data=$("#myform").serialize()
用post方法,地址要用”/blood/“
'''
$.post('/blood/',data,function(res){
console.log(res)
})
})
代码的github地址：https://github.com/wawacode/high_blood_testing
项目对应视频地址：
高血压检测1-实现前端框架
https://www.bilibili.com/video/BV18p4y1p7tv/
高血压检测2-实现前端调查问卷
https://www.bilibili.com/video/BV1Kb4y1R7wZ/
高血压检测3-实现后端mvt模式
https://www.bilibili.com/video/BV14t4y1B7BU/
高血压检验4-实现用户提交后显示信息接口
https://www.bilibili.com/video/BV1hV411B7jU/
2451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
