从“零”开始搭网站(二)

时间:2022-10-19 15:15:26

点击上方“中兴开发者社区”,关注我们

每天读一篇一线开发者原创好文从“零”开始搭网站(二)

▎作者简介

作者李小虎是程序语言的爱好者,崇尚用合适的语言做合适的事情。

本文展示了如何使用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

从“零”开始搭网站(二)