Python自学之Pywebio（一），搭建web版人员管理系统

系统框架详见上面的文章。本文主要是学习如何搭建系统框架。

首先我们需要先做整个系统布局，主要使用put_row、put_column两个函数，若是需要使用网格布局，可以使用put_grid。

put_row(content=[], size=None, scope=None, position=- 1)

行布局，增加一行。

参数说明

• content (list) – 子元素列表, 行中间可以使用 None , None 表示空白行间距，默认10px
• size (str) –用于指示子元素的宽度, 宽度值可用格式:像素值: 例如: 100px，百分比: 表示占可用宽度的百分比. 例如: 33.33%，fr 关键字: 表示比例关系, 2fr 表示的宽度为 1fr 的两倍，auto 关键字: 表示由浏览器自己决定长度，minmax(min, max) : 产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 例如: minmax(100px, 1fr) 表示长度不小于100px，不大于1fr
• scope, position (int) – 与 put_text 函数的同名参数含义一致

样例：

put_row([put_code('A'), None, put_code('B')], size='40% 10px 60%')

pywebio.output.put_column(content=[], size=None, scope=None, position=- 1)

列布局，增加一列。

参数说明如put_row，此处不做赘述。

put_column([put_code('A'), None, put_code('B')], size='40% 10px 60%')

按照之前设计的框架，代码编写如下：

from pywebio.output import *
put_row([put_code('logo')])
put_row([
    put_column([put_code('menu')]),None,
    put_column([
        put_row([put_code('button')]),None,
        put_row([put_code('data')]),None,
        put_row([put_code('page')])
    ])
])

右键运行后，页面如下：

与我们设计的框架基本一致。

下面我们需要针对框架进行高度、宽度的设计，使用size参数。增加“size = '15% 1% 84%'”。

from pywebio.output import *
put_row([put_code('logo')])
put_row([
    put_column([put_code('menu')]),None,
    put_column([
        put_row([put_code('button')]),None,
        put_row([put_code('data')]),None,
        put_row([put_code('page')])
    ])
],size =  '15% 1% 84%')

结果见下图：

后续我们实际开展编程时，不会预留这么多空白，我们需要删除None，通过增加样式style来区分各模块间的边界，增加“style('width:850px;height:100px;border:1px solid green ;text-align:left;background-color:yellow;')”，这个是CSS样式，分别设置了宽度、高度，边框、文字居中，背景颜色等。

from pywebio.output import *
put_row([put_text('logo')]).style('border:1px solid green ;text-align:left;background-color:yellow;')
put_row([
    put_column([put_code('menu')]),None,
    put_column([
        put_row([put_code('button')]),None,
        put_row([put_code('data')]),None,
        put_row([put_code('page')])
    ])
],size =  '15% 1% 84%')

效果如下：

大家后面可以尝试一下，把文本的数字颜色和字体大小修改一下。

遇到的问题：页面整体框架的页面无法设置超过850px，以及整体页面的居中设置。看到文章的各位大料，若有了解，还望不吝赐教。