在这一篇文章里,我将通过一个开源的HTML页面再去进行修改,来达到我们的使用要求,最终的目的是学会我们如何使用网页,来达到自己的需求.
首先,我们的环境是Python3,并且之间会用web框架:tornado和request请求页面.
第一步:我们的固定写法,写一个逻辑处理模块
首先,我们导入tornado模块:
![](https://img.haomeiwen.com/i3070770/8275b24ddc487aa4.png)
然后我们再引入tornado的固定格式:
![](https://img.haomeiwen.com/i3070770/6a796bf98690e462.png)
上边这些都是使用tornado的固定格式,我们使用的时候只需要进行简单的修改就好,这也就是模块化开发的魅力和高效率.
第二步:返回一个页面
在这里,我们引入Free Bootstrap Admin Template | AdminLTE.IO,这样的一个模块
![](https://img.haomeiwen.com/i3070770/360721d30a0a17ca.jpg)
这个模块是基于Bootstrap 3进行自定义后的一个开源模块,这个模块的响应式布局做的很不错,可以用一下,在这里我进行了修改,在GitHub文件里有index和search.html两个文件,这个index是可以用,但是search.html是未来写匹配的时候用的,现在我们先不用它.
![](https://img.haomeiwen.com/i3070770/b35fa31cd5b5c176.png)
第三步:套模板
1:规范模板的路径,设置静态文件路径
因为这个页面中有很多的动态组件,所以我们要进行写好静态组件的位置方便之后进行引用.
![](https://img.haomeiwen.com/i3070770/9de33a889d4e5ef2.png)
第四部:前端提交数据给后端
在html中,from是HTML的一个标签,是专门用来提交数据的.在我们的index.html的文件里
method是方法,这个index是post方法
action是路径,这个index的路径是/search
这是网页中的输入框,其中name就是这个输入框的名字,我们在输入单词的时候,我们应该传入到后台,然后在进行查询.
![](https://img.haomeiwen.com/i3070770/0725872d3f773631.png)
基本思路是:
![](https://img.haomeiwen.com/i3070770/812d61281a16a290.jpg)
最终效果如下:
![](https://img.haomeiwen.com/i3070770/57d33b454b709799.jpg)
项目代码:
yunshizhijian/translation_toolsgithub.com
![](https://img.haomeiwen.com/i3070770/e2114257ce37a078.jpg)
网友评论