使用uliweb创建一个简单的blog

1.创建数据库

uliweb的数据库都在models.py文件里面，因此先创建该文件

vim apps/blog/models.py

添加如下两行：

#coding=utf-8
from uliweb.orm import *    #对象关系映射（ORM）提供了概念性的、易于理解的模型化数据的方法

一个简单的blog数据库应该有：

• 标题
• 作者
• 内容
• 时间

所以我们需在models.py 里面添加如下内容：

class blogdata(Model):
        username = Field(CHAR)
        content = Field(TEXT)
        title = Field(CHAR)
        datetime = Field(datetime.datetime, auto_now_add = True)

blogdata表示表名，其他四个是字段名称，ID由数据库自动创建。 这里时间的属性是获取系统时间，自动创建。
然后手动建立数据库blog：

create database blog;

在apps/settings.ini中手动配置blog，添加如下设置：

INSTALLED_APPS = [
    'uliweb.contrib.orm',
    'blog',
    'uliweb.contrib.staticfiles',
    ]
[ORM]
CONNECTION = "mysql://数据库用户名:数据库密码@localhost/数据库名称?charset=utf8"

在终端项目目录下输入uliweb -v syncdb命令初始化数据库，这样就会在blog数据库下建立相应的表和字段。

2.创建表单

创建forms.py文件:

vim apps/blog/forms.py

添加如下行:

#coding=utf-8
from uliweb.form import*

添加如下内容:

 #coding:utf-8
 from uliweb.form import *

 class BlogForm(Form):
 #       username = StringField(label = "用户名", required = True)
         title = StringField(label = "标题", required = True)
         content = TextField(label = "内容", required = True, rows = 20, cols = 60)

BlogsForm是继承自Form的类。

3.修改views.py文件

views.py 文件的作用是将数据(models.py)和表单(forms.py) 串联起来。

我们在views.py中添加文件头

#coding=utf-8
from uliweb import expose, functions
from blog.models import blogdata
from blog.forms import BlogForm

头的含义:

• expose 表示访问的url地址。这里仅仅做了一个index
• functions 是一种导入机构，它可以通过 .xxx 的方式来引用设置在settings.ini中 [FUNCTIONS] 下的对象路径
• forms 表单显示

增加默认网页显示代码:

 @expose('/')
 def index():
         #blogs = functions.get_model('blogdata')
         blog = blogdata.all()
         form = BlogForm()
         if request.method == "POST":
                 flag = form.validate(request.params)
                 if flag:　　#读取用户提交表单数据，并且保存到数据库
                         tab = blogdata(**form.data)
                         tab.username = request.user.username
                         tab.save()
         return {'blog':blog, 'form':form}

对上面语句的解释:

• @expose('/') 含义是，当我们访问 "/" 网页的时候， 系统会调用index函数。
• tab = blogdata(**form.data)表示以词典方式将form表单的数据（title和content）插入数据库表blogdata中；
• form = BlogsForm() 新建一组添加内容的空白表单。
• return {} 返回给模板　index.html文件　会得到blog,form。

我们将在index.html里面显示form。

4.创建index.html模板

　index.html模板对应的函数是views.py里面的index。当我们访问 “/”;系统先运行index函数，再用index.html做显示。

vim apps/blog/templates/index.html

将如下内容添加到里面:

显示表单

{{<<form}}

显示内容

 <table>
 {{for n in blog:}}
 <tr>
 <td>{{=n.title}}</td>
 <td>{{=n.content}}</td>
 </tr>
 {{pass}}
 </table>

这里我将一条blog作为一行来显示，显示了title(标题)和content（内容）。

5.添加用户模块

我们访问/login的时候，系统会调用uliweb.contrib.auth.views.login，需要在apps/settings.ini中添加配置：

 [EXPOSES]
 login = '/login', 'uliweb.contrib.auth.views.login'
 logout = '/logout', 'uliweb.contrib.auth.views.logout'
 register = '/register', 'uliweb.contrib.auth.views.register'

 [FUNCTIONS]
 require_login = 'uliweb.contrib.auth.require_login'

 [DECORATORS]
 require_login = 'uliweb.contrib.auth.require_login'

另外，因为我们要用到auth模块，因此我们的app要添加auth：

1.  INSTALLED_APPS = [
        'uliweb.contrib.orm',
        'uliweb.contrib.auth',
        'blog',
        'uliweb.contrib.staticfiles',
        ] 

添加login.html页面

复制/usr/local/lib/python2.7/dist-packages/Uliweb-0.1.6-py2.7.egg/uliweb/contrib/auth/templates/login.html文件到blog/apps/blog/templates/目录下。 删除blog/apps/blog/templates/login.html 中下面两行：

{{extend "layout.html"}}
和
<h2>{{=_('Login')}}</h2>

login.html内容如下:

 {{block content}}
 <div class="content">
 <div class="box center col_10 box_shadow">
 <div class="box-body">
 {{if msg:}}
 <p style="background:#f48b99;padding:2px;">{{<<msg}}</p>
 {{pass}}
 {{<< form}}
 </div>
 </div>
 </div>
 {{end}}

添加注册模块

注册模块和上面说的login.html一样，在/usr/local/lib/python2.7/dist-packages/Uliweb-0.1.6-py2.7.egg/uliweb/contrib/auth/templates/目录下，我们将其复制到blog/apps/blog/templates/目录下，删除register.html中以下两行代码：

{{extend "layout.html"}}
和
<h2>{{=_('Register')}}</h2>

修改index.html，添加注册、登录窗口

如果我们已经登录，我们就显示用户名。否则，我们就显示 "登录" ,"注册"。所以需在index.html 的

{{<<form}}

之前添加代码：

 {{if hasattr(request,'user')and request.user:}}
 欢迎{{=request.user.username}}<a href="/logout">退出</a>
 {{else:}}
 <a href="/register">注册</a><a href="/login">登录</a>
 {{pass}}
 <hr>
 {{<<form}}

6.美化blog

我们需要安装plugs，plugs内置了很多强大插件，其中也包含bootstrap。

下载

svn checkout http://plugs.googlecode.com/svn/trunk/ plugs

安装

cd plugs
sudo python setup.py install

使用

进入到blog目录，修改apps/settings.ini，添加一行：

'plugs.ui.bootstrap',

添加结果如下:

 INSTALLED_APPS = [
     'uliweb.contrib.orm',
     'uliweb.contrib.auth',
     'plugs.ui.bootstrap',
     'blog',
     'uliweb.contrib.staticfiles',
     ]

添加一个公共文件base.html

vim apps/blog/templates/base.html

内容如下：

 <html>
 <head>
 <title>apk security</title>
 <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
 <meta name="description" content="Is about the android app security."/>
 <link href="{{=url_for_static('bootstrap/2.0.4/bootstrap.css')}}" rel="stylesheet" type="text/css" / >
 </head>
 {{block content}}
 {{end content}}
 </html>

为了让index.html,login.html,register.html都支持bootstrap，需要在这些文件的文件头添加：

{{extend "base.html"}}

大家发现base.html里面有：

{{block content}}
{{end content}}

而index.html的开始为：

{{extend "base.html"}}
{{block content}}
....
{{end}}

所以运行结果就是将index.html block之间的内容和base.html放在一起合并成新的index.html。

然后我们修改index.html的显示内容部分：

     {{for n in blog:}}
         <div class="row show-grid">

           <div class="span2 offset1">
                 <div class="alert alert-info">{{=n.username}}说:</div>
           </div>
           <div class="span6">
              <div class="well">
                 <div class="alert alert-message">{{=n.title}}</div>
                 <div class="alert alert-success">{{<<n.content}}</p>{{=n.datetime}}</div>
              </div>
            </div>
         </div>
     {{pass}}

7.用xheditor让编辑框更强大

进入到blog目录，修改apps/settings.ini，添加应用：

 INSTALLED_APPS = [
     'uliweb.contrib.orm',
     'uliweb.contrib.auth',
     'plugs.ui.bootstrap',
     'blog',
     'uliweb.contrib.staticfiles',
     'plugs.ui.jquery.xheditor',
     'plugs.ui.jquery.jquery',
     ]

修改index.html

在form前添加use xheditor；

{{if hasattr(request,'user')and request.user:}}
{{use"xheditor"}}
{{<<form}}

在{{end}}前添加脚本:

 {{include "inc_xheditor_plugins.html"}}
 <script type="text/javascript">
 $(function(){
 $('textarea').xheditor({
 tools:'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Hr,Emot,Table,Code,Quote,|,About',
 skin:'default',
 upFlashExt:"swf",
 plugins:plugins,
 height:300,
 width:600,
 });
 });
 </script>

由于因为xheditor 编辑后结果带有html格式，如果要正确显示需要使用 {{<<n.content}} 格式修改n.content显示：

<divclass="alert alert-success">{{<<n.content}}</p>{{=n.datetime}}</div>

8.增加删除、修改功能

删除

在index.html文件中增加删除的链接

<divclass="alert alert-success">{{<<n.content}}</p>{{=n.datetime}}|<ahref="/delete/{{=n.id}}">删除</a></div>

修改views.py,增加require_login,防止未登录误删除。

from uliweb import functions

添加delete函数

 @expose('/delete/<id>')
 def delete(id):
         functions.require_login()
         n = blogdata.get(blogdata.c.id == id)
         if n:
                 n.delete()
         return redirect('/')

当 require_login()发现用户没有登录时，会自动跳转到 /login 地址上让用户进行登录，成功后会跳转回原来的地址。

修改（编辑）

在index.html文件中增加修改的链接

<divclass="alert alert-success">{{<<n.content}}</p>{{=n.datetime}}|<ahref="/delete/{{=n.id}}">删除</a>|<ahref="/edit/{{=n.id}}">编辑</a></div>

增加函数支持

分三歩走：

• 第一步   判断是否登录。
• 第二步　读取要修改的数据，调用edit页显示。
• 第三步　当修改后，保存。将新的数据存到数据库里面。

 @expose('/edit/<id>')
 def edit(id):
         functions.require_login()
         if request.method == 'GET':
                 page = blogdata.get(blogdata.c.id == id)
                 form = BlogForm(data = {'title':page.title, 'content':page.content})
                 return {'form':form}
         elif request.method == 'POST':
                 form = BlogForm()
                 flag = form.validate(request.params)
                 if flag:
                         tab = blogdata(**form.data)
                         tab.username = request.user.username
                         tab.content = form.data.content
                         tab.title = form.data.title
                         tab.save()
         return redirect('/')

这里在第二步时，我们的显示使用的edit.html页面代码如下:

 {{extend "base.html"}}
 {{block content}}
 {{if hasattr(request, 'user') and request.user:}}
 欢迎{{=request.user.username}} <a href="/logout">退出</a>
 {{else:}}
 <a href="/register"> 注册</a> <a href="/login">登录</a>
 {{pass}}
 <hr>
 {{if hasattr(request, 'user') and request.user:}}
 {{use "xheditor"}}
 {{<<form}}
 <hr>
 {{pass}}
 {{include "inc_xheditor_plugins.html"}}
 <script type="text/javascript">
     $(function(){
         $('textarea').xheditor({
             tools:'Cut,Copy,Paste,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Flash,Hr,Emot,Table,Code,Quote,|,About',
             skin:'default',
             upFlashExt:"swf",
             plugins:plugins,
             height:300,
             width:600,
         });
     });
 </script>
 {{end}}

至此，一个简单的bolg就大功告成。我们来看一下效果，打开终端，在项目目录下敲入命令：uliweb runserver

浏览器中打开http://127.0.0.1:8000/，得到