应用开发教程

熟悉项目目录结构

目录结构

  1. -z42
  2.     -z42  ------配置和公用库
  3.     -zapp ------所有应用目录
  4.         -ANGELCRUNCH -------- AngelCrunch网站目录
  5.             -html ----------- Mako 模板和静态 HTML 目录
  6.             -_html ---------- Mako 模板缓存路径
  7.             -plim ----------- Plim 模板目录
  8.             -css  ----------- CSS 文件目录
  9.             -coffee --------- CoffeeScript
  10.             -javascript ----- JavaScript 库和 CoffeeScript 编译生产的文件目录
  11.             -model ---------- Python 对象
  12.             -view ----------- Python 应用视图
  13.             -dev.sh --------- 应用启动脚本
  14.         -...         -------- 其它网站目录

对于 CoffeeScript、JavaScript、CSS、SASS、SCSS，其文件目录下的 _lib 用于存放第三方库/框架。

启动开发服务器

dev.sh

restart.sh

创建项目所需文件

app 目录& __init__.py

_env.py

_route.py

root.py

j.py

配置路由&编写视图

View 与 tornado.web.RequestHandler

@route

  1. # root.py
  2. ...
  3. @route
  4. class hello_world(View):
  5.     def get(self):
  6.         o = 'world'
  7.         self.render()
  8. ...

第一个 Mako 文件

  1. <h1 id="hello" class="mako plim" data-height="10">Hello, ${ o }</h1>
  2. <div class="d1">
  3.     <div class="d2">
  4.         <span>div</span>
  5.     </div>
  6. </div>
  7. <%include file="file.html"/>

第一个 Plim 文件

  1. h1#hello.mako.plim data-height=10
  2.     Hello, ${ o }
  3. .d1
  4.     .d2
  5.         span
  6.             |div
  7. -include file.html

第一个 SCSS/SASS 文件

SCSS

  1. $font-stack:    Helvetica, sans-serif;
  2. $primary-color: #333;
  4. body {
  5.   font: 100% $font-stack;
  6.   color: $primary-color;
  7. }
  9. nav {
  10.   ul {
  11.     margin: 0;
  12.     padding: 0;
  13.     list-style: none;
  14.   }
  16.   li { display: inline-block; }
  18.   a {
  19.     display: block;
  20.     padding: 6px 12px;
  21.     text-decoration: none;
  22.   }
  23. }

第一个 CoffeeScript 文件

  1. obj = {
  2.     a: 1
  3.     b: 2
  4.     c： ->
  5.         alert 'Hello World!'
  6. }

输出：

  1. var obj = {
  2.     a: 1,
  3.     b: 2,
  4.     c: function(){
  5.         alert('Hello World');
  6.     }
  7. }

重启开发服务器

添加 CoffeeScript/JavaScript/CSS/SASS/SCSS 文件后需要手动重启服务器：

  1. 结束当前 dev.sh： Ctrl-c
  2. 运行 dev.sh