正心全栈编程-文档站

Appearance

Layui + Flask ​

Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用，非常适合网页界面的快速构建。在使用了很久之后，也发现了一些问题。

先说优点：

  1. layui 采用的是原生的 HTML/CSS/JavaScript 技术开发，上手难度低。
  2. layui 有比较非常完善的文档，非常方便入门学习，只要把官方文档全部过一遍，并把提供的案例调试一遍就能快速上手。
  3. layui 有完善的组件、有漂亮的 UI 非常适合后端开发人员使用。
  4. layui 已经存在很久了，经得起时间的考验，并且有大量的教程，很多问题都可以找到解决方案。

再来说一下缺点

  1. layui 的打包方式比较特殊，导致前端在敲代码是，很少有智能提示（没有智能提示我敲代码效率非常低）
  2. 因为一些历史原因，源码的可读性不是很强。在没有源码文档的支持下，想要看懂源码有一些困难。
  3. 相较于 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       # 核心模块库

创建 flask 项目 ​

直接使用前端文件进行学习也可以，但是学到后面的表单、表格组件时，不方便调试。所以本教程直接采用 flask + layui 的方式进行学习。

安装 flask

shell
pip install flask

创建 flask 项目

shell
ubuntu@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 file

然后往 app.py 里面写入最小 flask 程序代码

python
from flask import Flask

app = Flask(__name__)


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


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

执行 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 quit

然后打开浏览器，访问 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 files

然后便是在 templates 目录下新建 index.html 页面，写入以下内容

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- HTML Content -->
<script src="/static/layui.js"></script>
<script>
    // Usage
    layui.use(function () {
        var layer = layui.layer;
        // Welcome
        layer.msg('Hello World', {icon: 6});
    });
</script>
</body>
</html>

然后再修改 app.py 文件第一行与第八行，在第 12 行新增 debug=True 开启调试模式，其余两个是指定绑定地址与运行端口。

python
from 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)

接下来访问页面就可以得到一个笑脸的弹窗。