点击上方“中兴开发者社区”,关注我们
每天读一篇一线开发者原创好文
▎作者简介
作者李小虎是程序语言的爱好者,崇尚用合适的语言做合适的事情。
本文展示了如何使用Python、HTML、Javascript进行化学效应,搭一个属于我们自己的网站。其中你会发现语言之间有很多相通性,当我们领悟了这种相同性,你会发现初学一门语言也没那么可怕, 这也就是为什么我敢从零开始去搭建网站的原因。
本文档适合初学者,用切身感受期望帮助初学者少走一些弯路,或产生一些启发。
上文帖子讲了我们如何搭建一个网站的初始模型:
点击回顾:从“零”开始搭网站(一)
现在我们要真正的去开发web应用了,推荐flask的文档:
http://docs.jinkan.org/docs/flask/ 。
这篇文档基本涵盖了所有flask开发的知识点,那在本帖就不重点阐述了。我在这个帖子中着重将讲一些我费了些功夫、或者小技巧的东西。
一、目录架构
首先我们先考虑下目录架构,我参照了廖雪峰的web开发介绍,将目录分级为:
javis ----------- 我给自己网站的命名
www ------------这是指向www-17-11-01软连接
www-17-11-01
static -----------存放静态文件,如css样式、图片等等
templates------------ 存放html文件
javis.py--------------- web应用代码
为什么要创建软连接呢?这也是为了方便以后扩展开发,比如以后我要预研先的功能,新建了www-18-01-01文件夹,那么只要将www软连接指向到www-18-01-01就可以了,其余配置(如Gunicorn)都不用变,一旦预研失败,还可以将www软连接指向回 www-17-11-01,快速切换,不影响业务。
二、规划路由
这里的路由可以理解为url,就是上篇帖子里面展现的装饰器:@app.route('/')
一开始我显示主页面是这么写的:
@app.route('/')
def show():
return render_template('home.html')
后来发现扩展起来就恶心了,因为一级目录被一个特有特性占用了,后续扩展起来都非常别扭。由于我领悟上还未臻化境,言语上可能无法表达清楚,还是用代码说话吧。后来我优化成这样:
@app.route('/')
def index():
return redirect(url_for('show'))
@app.route('/show',methods=['GET'])
def show():
return render_template('home.html')
即客户端直接访问一级目录时会被重定向到/show,那么以后我就可以规划/show以后的路由路径都是展示用的,/post以后的路由路径都是用户提交表单用的等等。
三、html模板
定义好一个模板,会减轻我们很多前端开发的工作量。模板可以理解为C语言的头文件,在里面定义的东西后,其他html如果需要就不需要自己重新开发,直接引用该模板就好了。比如我们定义一个模板,命名为base.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
{% block body_content %} ------------------------这个可以理解为一个占位符,下面我们会看到这个占位符的作用。
{% endblock %}
</body>
</html>
那么我们如果在home.html也要展现“Hello World”的头部,就不需要再写一遍<title>Hello World</title>了,代码如下:
{% extends 'base.html' %} ----------------引用模板
{% block body_content %}----------------“占位符”中填充内容
<p>这是一个测试程序</p>
{% endblock %}
四、BootStrap
既然前面已经讲了前端开发的一些东西,那么推荐一个前端开发框架BootStrap,简单易学,推特就是采用的这套框架。Flask也有BootStrap插件可以直接安装。当然也可以直接到官网下载BootStrap进行开发。BootStrap的相关基本知识参照:
http://www.runoob.com/bootstrap/bootstrap-tutorial.html