只用Python也能做出很漂亮的网站?Streamlit说可以。
有python环境后,使用下面这条命令就可以安装streamlit。
pipinstallstreamlit安装streamlit成功后可以使用下面这条命令看看能不能运行起来。
装好streamlit后,找个创建一个文件夹,然后创建一个python文件。
然后运行指定py页面文件。
streamlitrunxxx.py比如我这里创建一个streamlit-demo1的文件夹,表示这个项目叫streamlit-demo1。然后再创建一个page1.py文件。
接下来使用终端进入streamlit-demo1目录运行下面这条命令。
看到下图这个页面就是成功了。
接下来试试streamlit基础用法,其实跟HTML的难度差不多的,而且streamlit还提供了一些默认的样式,省去很多写CSS的工作。
在使用streamlit之前需要先引入它。
importstreamlitasst之后才能调用streamlit提供的方法。
importstreamlitasstst.write('雷猴!')标题title使用st.title()可以设置标题内容。
st.title('雷猴')相比起st.write(),使用st.title()出来的效果字号会更大,而且字体也加粗了。
streamlit是支持使用markdown语法来写页面内容的,只需使用单引号或者双引号的方式将内容包起来,并且使用markdown的语法进行书写,页面就会出现对应样式的内容。
importstreamlitasst"#1级标题""##2级标题""###3级标题""####4级标题""#####5级标题""######6级标题""""```pythonprint('雷猴')```"""markdown的语法不是本文的重点,这里就不过多介绍了。
渲染图片可以使用st.image()方法,也可以使用markdown的语法。
st.image(图片地址,[图片宽度]),其中图片宽度不是必填项。
importstreamlitasstst.image('./dog.jpg',width=400)我在项目里放了一张狗的图片,使用st.image渲染它,并将宽度设置成400。
streamlit有静态表格和可交互表格。表格在数据分析里属于常用组件,所以streamlit的表格也支持pandas的DataFrame。
st.table()支持传入字典、pandas.DataFrame等数据。
importstreamlitasstimportpandasaspdst.write('dict')#字典st.table(data={"姓名":['雷猴','鲨鱼辣椒'],"年龄":[18,22]})#DataFramedf=pd.DataFrame({"姓名":['雷猴','鲨鱼辣椒'],"年龄":[18,22],})st.write('DataFrame')st.table(df)可交互表格dataframe可交互表格使用st.dataframe()方法创建,和st.table()不同,st.dataframe()创建出来的表格支持按列排序、搜索、导出等功能。
importstreamlitasstst.divider()变量variable接下来要介绍的组件在交互上会越来越丰富,所以在此先引入一个“变量”的东西。
使用streamlit写页面也支持python的变量。变量的主要作用是存值。
importstreamlitassta=10b=20st.write(a*b)条件判断if条件判断使用if。也可以配合elif和else一起使用。
importstreamlitassta=11ifa%2==0:st.write(f'{a}是偶数')else:st.write(f'{a}是奇数')循环for循环(遍历)可以使用for,语法就是python的语法。
输入框又可以设置不同的类型,比如普通的文本输入框、密码输入框。
输入框使用st.text_input()渲染。
name=st.text_input('请输入你的名字:')ifname:st.write(f'你好,{name}')st.text_input()括号里的内容会变成输入框的提示内容。在这个例子中,将st.text_input()接收到的值赋给变量name。然后再通过一个if判断name有没有内容,如果有内容就向页面打印这个内容。
如果要使用密码框,可以给st.text_input()加多个类型type="password"。
importstreamlitasstpwd=st.text_input('密码是多少?',type='password')数字输入框number_input数字输入框需要使用number_input,这个可能和你想象中有点不一样,一开始我也以为使用st.text_input(type="number"),失算了。
importstreamlitasstage=st.number_input('年龄:')st.write(f'你输入的年龄是{age}岁')众所周知,正常表达年龄是不带小数位的,所以我们可以设置st.number_input()的步长为1,参数名叫step。
#省略部分代码st.number_input('年龄:',step=1)这个步长可以根据你的需求来设置,设置完后,输入框右侧的加减号每点击一次就根据你设置的步长相应的增加或者减少。
还有一点,人年龄不可能是负数,通常也不会大于200。可以通过min_value和max_value设置最小值和最大值。同时还可以通过value设置默认值。
st.number_input('年龄:',value=20,min_value=0,max_value=200,step=1)多行文本框text_area创建多行文本框使用的是st.text_area(),用法和st.text_input()差不多。
importstreamlitasstchecked=st.checkbox("同意以上条款")ifchecked:st.write("同意")else:st.write("不同意")单选按钮radio使用st.radio()可以制作单选按钮,比如让用户选择性别的时候就能派上用场。
它还支持设置默认值,使用index参数即可。index的默认值是0,也就是选中下标为0的那项。可以根据你的需求自定义设置。
用法是:
可以使用st.slider()创建滑块元素。它接收的参数和st.number_input()差不多,也是可以设置提示语、默认值、最大值、最小值以及步长。
在streamlit中可以使用st.file_uploader()创建一个文件上传元素。
importstreamlitasstuploaded_file=st.file_uploader("上传文件",type=["csv","json"])ifuploaded_file:st.write(f"你上传的文件是{uploaded_file.name}")st.file_uploader()第一个参数是提示文本,然后可以使用type属性限制用户上传的文件格式。
接收到的文件可以赋值给一个变量,这个变量接收到文件后可以通过.name属性查看文件名。
使用st.sidebar()可以给网页弄个侧边栏。
importstreamlitasstres=''withst.sidebar:res=st.text_input('搜索:')st.write(f'页面内容,看看搜索了啥:{res}')多列布局columns按照前面学到的内容写页面的话,所有元素都是从上往下布局的。如果你想一个页面有多列布局,可以使用st.columns()方法。
importstreamlitasstcol1,col2,col3=st.columns(3)withcol1:st.write('第1列')withcol2:st.write('第2列')withcol3:st.write('第3列')代码结构和页面对应起来,很直观,我就不过多讲解了。
在使用st.columns时,默认每列的宽度都是一样的。如果你希望每列宽度占比不一样的话可以这样写。
importstreamlitasst#多列布局(不同比例)col1,col2,col3=st.columns([1,2,3])withcol1:st.write('第1列')withcol2:st.write('第2列')withcol3:st.write('第3列')此时st.columns()括号里传入的就不是数字(列数),而是一个数值型列表,这个列表元素个数表示列数,元素的数字表示每列占比。
使用st.tabs()可以创建选项卡组件。
画折线图用的是st.line_chart()方法。
网站通常由多个页面组成,在streamlit中想创建多个页面很简单。
你看我这个目录结构,然后在每个文件里输入点内容。
打开浏览器看效果:
未注册过的工友需要注册一下账号,然后根据提示填写好账号信息。
在部署之前还需要将你的代码传到你的github仓库上。这一步应该所有程序员都要掌握的,本文就不讲解了。
然后根据提示填写好你的网站资料。
填好资料后点击“Deploy!”按钮,稍等片刻后就部署好了。
还没完!还没完!streamlit还有很多功能本文没讲到的,比如会话、各种各样的图表。这些留到下一篇再讲。