技术学习报告（Flask、Echarts、js、html、css）

Tgmmmmmmmm

已于 2022-03-29 12:10:45 修改

阅读量231

点赞数

文章标签： html5 flask echarts

于 2022-03-29 12:10:03 首次发布

本文链接：https://blog.csdn.net/Tgmmmmmmmm/article/details/123818215

版权

技术学习报告

Flask

1. 概述

Flask是一个用Python编写的Web应用程序框架。

2. 准备工作

为开发环境安装virtualenv，方便管理专属的包和python版本。

tips: pycharm本身自带有这个功能，创建的时候选择虚拟环境就好了。

要在 Windows 上激活相应的环境，可以使用以下命令：

venv\scripts\activate

3. 安装Flask

在开启虚拟环境的基础上，使用pip进行安装。

pip install Flask

4. Flask应用

demo

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
   return 'Hello World'

if __name__ == '__main__':
   app.run()

解释

Flask类的**route()**函数是一个装饰器，它告诉应用程序哪个URL应该调用相关的函数。

app.route(rule, options)

rule 参数表示与该函数的URL绑定。
options 是要转发给基础Rule对象的参数列表。

在上面的示例中，’/ ’ URL与**hello_world()**函数绑定。

因此，当在浏览器中打开web服务器的主页时，将呈现该函数的输出。

最后，Flask类的**run()**方法在本地开发服务器上运行应用程序。

app.run(host, port, debug, options)

所有参数都是可选的

序号	参数与描述
1	host 要监听的主机名。默认为127.0.0.1（localhost）。设置为“0.0.0.0”以使服务器在外部可用
2	port 默认值为5000
3	debug 默认为false。如果设置为true，则提供调试信息
4	options 要转发到底层的Werkzeug服务器。

调试模式

在运行或将调试参数传递给run()方法之前，通过将application对象的debug属性设置为True来启用Debug模式。

app.run(debug = True)

5. 路由

可以使用@app.route(rule, options)进行绑定

还可以传递变量参数，默认字符串，可更换类型

@app.route('/hello/<name>')
def hello_name(name):
   return 'Hello %s!' % name

@app.route('/blog/<int:postID>')
def show_blog(postID):
   return 'Blog Number %d' % postID

@app.route('/rev/<float:revNo>')
def revision(revNo):
   return 'Revision Number %f' % revNo

序号	转换器	描述
1	int	接受整数
2	float	对于浮点值
3	path	接受用作目录分隔符的斜杠

6. URL动态构建

Flask URL构建

**url_for()**函数对于动态构建特定函数的URL非常有用。

from flask import Flask, redirect, url_for
app = Flask(__name__)
@app.route('/admin')
def hello_admin():
   return 'Hello Admin'


@app.route('/guest/<guest>')

def hello_guest(guest):
   return 'Hello %s as Guest' % guest


@app.route('/user/<name>')
def hello_user(name):
   if name =='admin':
      return redirect(url_for('hello_admin'))
   else:
      return redirect(url_for('hello_guest', guest = name))


if __name__ == '__main__':
   app.run(debug = True)

上述脚本有一个函数hello_user(name)，它接受来自URL的参数的值。

**hello_user()函数检查接收的参数是否与’admin’**匹配。

如果匹配，则使用**url_for()将应用程序重定向到hello_admin()函数，否则重定向到将接收的参数作为guest参数传递给它的hello_guest()**函数。

7. Flask HTTP方法

默认情况下，Flask路由响应GET请求。

但可以自己更改

8. 模板

模板基本使用

在项目下创建 templates 文件夹，用于存放所有模板文件，并在目录下创建一个模板文件 html 文件 hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我的模板html内容
</body>
</html>

创建视图函数,将该模板内容进行渲染返回

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('hello.html')

模板变量

代码中传入字符串，列表，字典到模板中

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 往模板中传入的数据
    my_str = 'Hello Word'
    my_int = 10
    my_array = [3, 4, 2, 1, 7, 9]
    my_dict = {
        'name': 'xiaoming',
        'age': 18
    }
    return render_template('hello.html',
                           my_str=my_str,
                           my_int=my_int,
                           my_array=my_array,
                           my_dict=my_dict
                           )

模板中代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  我的模板html内容
  <br />{{ my_str }}
  <br />{{ my_int }}
  <br />{{ my_array }}
  <br />{{ my_dict }}
</body>
</html>

Flask 模板_w3cschool

示例代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    my_int = 18
    my_str = 'curry'
    my_list = [1, 5, 4, 3, 2]
    my_dict = {
        'name': 'durant',
        'age': 28
    }

    # render_template方法:渲染模板
    # 参数1: 模板名称  参数n: 传到模板里的数据
    return render_template('hello.html',
                           my_int=my_int,
                           my_str=my_str,
                           my_list=my_list,
                           my_dict=my_dict)


if __name__ == '__main__':
    app.run(debug=True)


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <h2>我是模板</h2>
  {{ my_int }}
  <br>
  {{ my_str }}
  <br>
  {{ my_list }}
  <br>
  {{ my_dict }}
  <hr>
  <h2>模板的list数据获取</h2>
  <hr>
  {{ my_list[0] }}
  <br>
  {{ my_list.1 }}
  <hr>
  <h2>字典数据获取</h2>
  <hr>
  {{ my_dict['name'] }}
  <br>
  {{ my_dict.age }}
  <hr>
  <h2>算术运算</h2>
  <br>
  {{ my_list.0 + 10 }}
  <br>
  {{ my_list[0] + my_list.1 }}
</body>

</html>

9. Flask 静态文件

Web应用程序通常需要静态文件，例如javascript文件或支持网页显示的CSS文件。

通常，配置Web服务器并为您提供这些服务，但在开发过程中，这些文件是从您的包或模块旁边的static文件夹中提供，它将在应用程序的**/static**中提供。

index.html的HTML脚本如下所示：

<html>

   <head>
      <script type = "text/javascript" 
         src = "{{ url_for('static', filename = 'hello.js') }}" ></script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
   
</html>

10. 表单数据传模板

来自客户端网页的数据作为全局请求对象发送到服务器。为了处理请求数据，应该从Flask模块导入。

Request对象的重要属性如下所列：

Form - 它是一个字典对象，包含表单参数及其值的键和值对。
args - 解析查询字符串的内容，它是问号（？）之后的URL的一部分。
Cookies - 保存Cookie名称和值的字典对象。
files - 与上传文件有关的数据。
method - 当前请求方法。

<form action="http://localhost:5000/result" method="POST">
     <p>Name <input type = "text" name = "Name" /></p>
     <p>Physics <input type = "text" name = "Physics" /></p>
     <p>Chemistry <input type = "text" name = "chemistry" /></p>
     <p>Maths <input type ="text" name = "Mathematics" /></p>
     <p><input type = "submit" value = "submit" /></p>
</form>

@app.route('/result',methods = ['POST', 'GET'])
def result():
   if request.method == 'POST':
      result = request.form
      return render_template("result.html",result = result)

这个可以将获得的html表单传给result

重新使用他

<!doctype html>
  <table border = 1>
     {% for key, value in result.items() %}
    <tr>
       <th> {{ key }} </th>
       <td> {{ value }}</td>
    </tr>
 {% endfor %}
</table>

11.重定向和错误

Flask类有一个**redirect()**函数。调用时，它返回一个响应对象，并将用户重定向到具有指定状态代码的另一个目标位置。

**redirect()**函数的原型如下：

Flask.redirect(location, statuscode, response)

在上述函数中：

location参数是应该重定向响应的URL。
statuscode发送到浏览器标头，默认为302。
response参数用于实例化响应。

以下状态代码已标准化：

HTTP_300_MULTIPLE_CHOICES
HTTP_301_MOVED_PERMANENTLY
HTTP_302_FOUND
HTTP_303_SEE_OTHER
HTTP_304_NOT_MODIFIED
HTTP_305_USE_PROXY
HTTP_306_RESERVED
HTTP_307_TEMPORARY_REDIRECT

默认状态代码为302，表示**‘found’**。

12. 处理文件上传

在 Flask 中处理文件上传非常简单。它需要一个 HTML 表单，其 enctype 属性设置为“multipart/form-data”，将文件发布到 URL。

URL 处理程序从 request.files[] 对象中提取文件，并将其保存到所需的位置。

每个上传的文件首先会保存在服务器上的临时位置，然后将其实际保存到它的最终位置。

目标文件的名称可以是硬编码的，也可以从 request.files[file]对象的filename属性中获取。

但是，建议使用 secure_filename() 函数获取它的安全版本。

可以在 Flask 对象的配置设置中定义默认上传文件夹的路径和上传文件的最大大小。

app.config[‘UPLOAD_FOLDER’] 定义上传文件夹的路径

app.config[‘MAX_CONTENT_LENGTH’] 指定要上传的文件的最大大小（以字节为单位）

Echarts

如何开始

echarts使用非常简单，只需要你能够获取到一个div的dom元素，同时设置了高度和宽度，就能利用其进行漂亮的图表展示，同时还可以通过setoption方法进行调整图标的配置项。

正交投影地球

myChart.showLoading();
let projection;
$.when(
  $.get(ROOT_PATH + '/data/asset/geo/world.json'),
  $.getScript('https://cdn.jsdelivr.net/npm/d3-array'),
  $.getScript('https://cdn.jsdelivr.net/npm/d3-geo')
).done(function (res) {
  myChart.hideLoading();
  // Add graticule
  const graticuleLineStrings = [];
  for (let lat = -80; lat <= 80; lat += 10) {
    graticuleLineStrings.push(createLineString([-180, lat], [180, lat]));
  }
  for (let lng = -180; lng <= 180; lng += 10) {
    graticuleLineStrings.push(createLineString([lng, -80], [lng, 80]));
  }
  res[0].features.unshift({
    geometry: {
      type: 'MultiLineString',
      coordinates: graticuleLineStrings
    },
    properties: {
      name: 'graticule'
    }
  });
  echarts.registerMap('world', res[0]);
  projection = d3.geoOrthographic();
  option = {
    geo: {
      map: 'world',
      projection: {
        project: (pt) => projection(pt),
        unproject: (pt) => projection.invert(pt),
        stream: projection.stream
      },
      itemStyle: {
        borderColor: '#333',
        borderWidth: 1,
        borderJoin: 'round',
        color: '#000'
      },
      emphasis: {
        label: {
          show: false
        },
        itemStyle: {
          color: 'skyblue'
        }
      },
      regions: [
        {
          name: 'graticule',
          itemStyle: {
            borderColor: '#bbb'
          },
          emphasis: {
            disabled: true
          }
        }
      ]
    }
  };
  myChart.setOption(option);
});
app.config = {
  rotateX: 0,
  rotateY: 0,
  onChange() {
    projection && projection.rotate([app.config.rotateX, app.config.rotateY]);
    myChart.setOption({
      geo: {}
    });
  }
};
app.configParameters = {
  rotateX: {
    min: -180,
    max: 180
  },
  rotateY: {
    min: -80,
    max: 80
  }
};
function createLineString(start, end) {
  const dx = end[0] - start[0];
  const dy = end[1] - start[1];
  const segs = 50;
  const stepX = dx / segs;
  const stepY = dy / segs;
  const points = [];
  // TODO needs adaptive sampling on the -180 / 180 of azimuthal projections.
  for (let i = 0; i <= segs; i++) {
    points.push([start[0] + i * stepX, start[1] + i * stepY]);
  }
  return points;
}

javascript

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript。

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例

var person={fname:“Bill”,lname:“Gates”,age:56}; for (x in person) // x 为属性名 { txt=txt + person[x]; }

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

详细记录

emmm，基本跟C++和java语法类似，可以看看菜鸟教程的[JavaScript教程](JavaScript 教程 | 菜鸟教程 (runoob.com))

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

基本架构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

详细总结

本技术此前有过研究与总结，直接可以跳转HTML总结

CSS

通过使用 CSS 我们可以大大提升网页开发的工作效率！

在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

基本样式

body {
    background-color:#d0e4fe;
}
h1 {
    color:orange;
    text-align:center;
}
p {
    font-family:"Times New Roman";
    font-size:20px;
}

详细总结

本技术此前有过研究与总结，直接可以跳转CSS总结

Tgmmmmmmmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
技术学习报告（Flask、Echarts、js、html、css）

基本对一些技术进行了了解，确定是否可用以及如何使用
复制链接

扫一扫

技术学习报告（Flask、Echarts、js、html、css）

技术学习报告

文章目录

Flask

1. 概述

2. 准备工作

3. 安装Flask

4. Flask应用

demo

解释

调试模式

5. 路由

6. URL动态构建

7. Flask HTTP方法

8. 模板

模板基本使用

模板变量

示例代码：

9. Flask 静态文件

10. 表单数据传模板

11.重定向和错误

12. 处理文件上传

Echarts

如何开始

正交投影地球

javascript

常见的HTML事件

For/In 循环

改变 HTML 样式

详细记录

HTML

基本架构

详细总结

CSS

基本样式

详细总结

“相关推荐”对你有帮助么？