| Layui + Flask | 您所在的位置：网站首页 › 框架与表格 › Layui + Flask |
|
Layui + Flask Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用，非常适合网页界面的快速构建。在使用了很久之后，也发现了一些问题。 先说优点： layui 采用的是原生的 HTML/CSS/JavaScript 技术开发，上手难度低。layui 有比较非常完善的文档，非常方便入门学习，只要把官方文档全部过一遍，并把提供的案例调试一遍就能快速上手。layui 有完善的组件、有漂亮的 UI 非常适合后端开发人员使用。layui 已经存在很久了，经得起时间的考验，并且有大量的教程，很多问题都可以找到解决方案。再来说一下缺点 layui 的打包方式比较特殊，导致前端在敲代码是，很少有智能提示（没有智能提示我敲代码效率非常低）因为一些历史原因，源码的可读性不是很强。在没有源码文档的支持下，想要看懂源码有一些困难。相较于 mvvm 框架稍微有些过时，但是超低的学习门槛，还是值得很多后端开发者学习使用的。flask 是一个 Python web 框架，也以易上手著称。只要稍微有一点 python 基础也可以轻松上手。如果想要快速上手可以查看 flask 中文文档 或者是 flask 官方文档 layui 使用 官网地址： https://layui.dev/ 项目地址： https://github.com/layui/layui ， https://gitee.com/layui/layui 点击官网地址可以进入到官方文档，里面有丰富的文档与案例。在官网首页点击开始使用 就可以进入到指引手册。 下载源码 layui 2.8 版本有非常大的变动，在你学习的时候一定要先确定你是用的是那个版本的。我这里因为是学习，直接下载最新的 layui 2.8.4。 可以在 官网首页 或 更新日志 页面下载到 Layui，它经过了自动化构建，更适合用于生产环境。解压出来之后项目目录结构如下： layui/ ├─css │ └─layui.css # 核心样式库 └─layui.js # 核心模块库1234创建 flask 项目 直接使用前端文件进行学习也可以，但是学到后面的表单、表格组件时，不方便调试。所以本教程直接采用 flask + layui 的方式进行学习。 安装 flask shellpip install flask1创建 flask 项目 shellubuntu@ubuntu:~$ mkdir flask-layui ubuntu@ubuntu:~$ cd flask-layui/ ubuntu@ubuntu:~/flask-layui$ mkdir templates ubuntu@ubuntu:~/flask-layui$ mkdir static ubuntu@ubuntu:~/flask-layui$ touch app.py ubuntu@ubuntu:~/flask-layui$ tree . ├── app.py ├── static └── templates 2 directories, 1 file123456789101112然后往 app.py 里面写入最小 flask 程序代码 pythonfrom flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' if __name__ == '__main__': app.run()123456789101112执行 python app.py 即可启动程序，得到下面内容 shell$ python app.py * Serving Flask app 'app' * Debug mode: off WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Running on http://127.0.0.1:5000 Press CTRL+C to quit123456然后打开浏览器，访问 http://127.0.0.1:5000 就可以看到返回的 Hello World! 信息。 使用 layui 将下载好的 layui 文件解压之后，复制静态文件到项目的 static 目录下，结果如下所示 ubuntu@ubuntu:~/flask-layui$ tree . ├── app.py ├── static │ ├── css │ │ └── layui.css │ ├── font │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ └── layui.js └── templates 4 directories, 8 files12345678910111213141516然后便是在 templates 目录下新建 index.html 页面，写入以下内容 htmlDOCTYPE html> Quick Start - Layui // Usage layui.use(function () { var layer = layui.layer; // Welcome layer.msg('Hello World', {icon: 6}); }); 123456789101112131415161718192021然后再修改 app.py 文件第一行与第八行，在第 12 行新增 debug=True 开启调试模式，其余两个是指定绑定地址与运行端口。 pythonfrom flask import Flask, render_template app = Flask(__name__) @app.route('/') def hello_world(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=5000)123456789101112接下来访问页面就可以得到一个笑脸的弹窗。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |