β

使用 Flask 和 Angularjs 开发 Web 系统

Yunlong is me 1217 阅读

回顾这两年的运维工作,也断断续续开发了若干个运维 Web 系统。记得开发的第一个作品,后端用的是 php,前端用的是 bootstrap 和 jquery 库,后来接触了 python,被其丰富的轮子和高效的开发效率所感染,并逐渐尝试 python 的 web 框架,像 flask,bottle。个人比较偏好 flask,轻量适合 DIY,又不是太简陋,对于 url 路由,db 操作,模板渲染等基础功能都有原生支持。另外前端也逐渐转向 angularjs,这是 google 开发的一款 js 框架,但它并不能替代 jquery,使用 jquery 的思路是操作页面元素,而使用 angular 的却是操作数据,定制模板,然后由框架来渲染它。这样做的好处是代码更加易于分离和复用,而 jquery 的代码在页面复杂之后维护起来比较痛苦。

准备

代码仓库

在开发的过程中,多人协作和版本控制很有必要。这里我选择 Git。代码远程托管可以使用自建 Gitlab,也可以使用第三方托管,比较出名的像 Github,Bitbucket。Bitbucket 对于私有仓库是免费的,对于不想公开的代码可以考虑使用 Bitbucket。

仓库至少建立两个分支 master 和 develop,master 用于发布,develop 用于开发。

开发环境

Flask 是 python 框架,当然 python 环境必不可少。为了不对系统造成污染,可以采用 virtualenv 建立隔离环境。

# 安装 virtualenv
pip install virtualenv
# 建立虚拟目录 venv
virtualenv venv
# 切换环境
source venv/bin/activate

测试部署

为了方便测试,应当及时地将代码合并及部署至测试环境,最简单地实时方案是使用 Git 钩子。参考之前写的这篇 使用 git webhook 持续更新代码

推荐库和工具

前端 css 库

名称 备注
bootstrap 特别流行的前端库,angular 支持得很好
semantic ui 这个比较小清新,组件比 bootstrap 丰富,但相关 angular 库不多

追求效率建议用 bootstrap,DIY 推荐 semantic ui。

前端 JS 库

名称 备注
angularjs js 框架
angular-animate angular 动画模块
angular-route angular 前端 url 路由模块
angular-strap angular bootstrap 指令
Chart.js 图表组件
angular-notify 消息通知组件
angular-timeline 时间轴组件,在显示日志时效果不错
jquery 这个可选,作为对 angular 的补充

后端库

名称 备注
Flask python 框架
Flask-SQLAlchemy Flask 数据库操作的库
MySQL-python 用到 mysql 的话,需要装这个库
PyYAML 经常用到 yaml 写配置文件,这个库很实用

模块安装工具

名称 备注
pip python 模块安装工具
bower 前端库下载工具
grunt 前端自动化工具

代码目录

.
├── .gitignore # Git 忽略文件
├── Gruntfile.js # Grunt 自动化脚本
├── README.md # 代码介绍文档
├── app # 代码主目录
│   ├── __init__.py
│   ├── lib # 封装库
│   │   └── __init__.py
│   ├── models.py # 数据库定义
│   ├── routes # url 路由
│   │   ├── __init__.py
│   │   └── index.py
│   ├── static # 静态文件
│   │   ├── css
│   │   ├── index.html # 前端单一入口文件
│   │   ├── js
│   │   ├── lib # 前端库路径
│   │   └── views # 前端分离页面
│   └── templates # 常用来生成 html,使用 angular 之后,这个功能交给了浏览器,用来生成配置还是很有用的
│   └── test.html
├── config.py # 主配置文件
├── venv # python 虚拟环境
│   ├── bin
│   ├── include
│   └── lib
├── instance # 外层配置,用于开发环境,生产环境配置的定制,例如数据库配置等
│   └── config.py
├── package.json # nodejs 需要安装模块,例如 grunt,bower
├── requirements.txt # python 模块列表,用于部署,pip freeze > requirements.txt 即可生成
└── run.py # 代码运行文件,python run.py

以上代码目录组织方式供参考。

回顾这两年的运维工作,也断断续续开发了若干个运维 Web 系统。记得开发的第一个作品,后端用的是 php,前端用的是 bootstrap 和 jquery 库,后来接触了 python,被其丰富的轮子和高效的开发效率所感染,并逐渐尝试 python 的 web 框架,像 flask,bottle。个人比较偏好 flask,轻量适合 DIY,又不是太简陋,对于 url 路由,db 操作,模板渲染等基础功能都有原生支持。另外前端也逐渐转向 angularjs,这是 google 开发的一款 js 框架,但它并不能替代 jquery,使用 jquery 的思路是操作页面元素,而使用 angular 的却是操作数据,定制模板,然后由框架来渲染它。这样做的好处是代码更加易于分离和复用,而 jquery 的代码在页面复杂之后维护起来比较痛苦。

作者:Yunlong is me
原文地址:使用 Flask 和 Angularjs 开发 Web 系统, 感谢原作者分享。

发表评论