使用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：

 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>

 {{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/，得到