使用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*添加如下內容:
1 #coding:utf-8 2 from uliweb.form import * 3 4 class BlogForm(Form): 5 # username = StringField(label = "用戶名", required = True) 6 title = StringField(label = "標題", required = True) 7 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 表單顯示
增加默認網頁顯示代碼:
1 @expose('/') 2 def index(): 3 #blogs = functions.get_model('blogdata') 4 blog = blogdata.all() 5 form = BlogForm() 6 if request.method == "POST": 7 flag = form.validate(request.params) 8 if flag: #讀取用戶提交表單數據,并且保存到數據庫 9 tab = blogdata(**form.data) 10 tab.username = request.user.username 11 tab.save() 12 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}}顯示內容
1 <table> 2 {{for n in blog:}} 3 <tr> 4 <td>{{=n.title}}</td> 5 <td>{{=n.content}}</td> 6 </tr> 7 {{pass}} 8 </table>這里我將一條blog作為一行來顯示,顯示了title(標題)和content(內容)。
?5.添加用戶模塊
我們訪問/login的時候,系統會調用uliweb.contrib.auth.views.login,需要在apps/settings.ini中添加配置:
1 [EXPOSES] 2 login = '/login', 'uliweb.contrib.auth.views.login' 3 logout = '/logout', 'uliweb.contrib.auth.views.logout' 4 register = '/register', 'uliweb.contrib.auth.views.register' 5 6 [FUNCTIONS] 7 require_login = 'uliweb.contrib.auth.require_login' 8 9 [DECORATORS] 10 require_login = 'uliweb.contrib.auth.require_login'另外,因為我們要用到auth模塊,因此我們的app要添加auth:
添加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內容如下:
1 {{block content}} 2 <div class="content"> 3 <div class="box center col_10 box_shadow"> 4 <div class="box-body"> 5 {{if msg:}} 6 <p style="background:#f48b99;padding:2px;">{{<<msg}}</p> 7 {{pass}} 8 {{<< form}} 9 </div> 10 </div> 11 </div> 12 {{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}}之前添加代碼:
1 {{if hasattr(request,'user')and request.user:}} 2 歡迎{{=request.user.username}}<a href="/logout">退出</a> 3 {{else:}} 4 <a href="/register">注冊</a><a href="/login">登錄</a> 5 {{pass}} 6 <hr> 7 {{<<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',添加結果如下:
1 INSTALLED_APPS = [ 2 'uliweb.contrib.orm', 3 'uliweb.contrib.auth', 4 'plugs.ui.bootstrap', 5 'blog', 6 'uliweb.contrib.staticfiles', 7 ]添加一個公共文件base.html
vim apps/blog/templates/base.html內容如下:
1 <html> 2 <head> 3 <title>apk security</title> 4 <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/> 5 <meta name="description" content="Is about the android app security."/> 6 <link href="{{=url_for_static('bootstrap/2.0.4/bootstrap.css')}}" rel="stylesheet" type="text/css" / > 7 </head> 8 {{block content}} 9 {{end content}} 10 </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的顯示內容部分:
1 {{for n in blog:}} 2 <div class="row show-grid"> 3 4 <div class="span2 offset1"> 5 <div class="alert alert-info">{{=n.username}}說:</div> 6 </div> 7 <div class="span6"> 8 <div class="well"> 9 <div class="alert alert-message">{{=n.title}}</div> 10 <div class="alert alert-success">{{<<n.content}}</p>{{=n.datetime}}</div> 11 </div> 12 </div> 13 </div> 14 {{pass}}?7.用xheditor讓編輯框更強大
進入到blog目錄,修改apps/settings.ini,添加應用: 1 INSTALLED_APPS = [ 2 'uliweb.contrib.orm', 3 'uliweb.contrib.auth', 4 'plugs.ui.bootstrap', 5 'blog', 6 'uliweb.contrib.staticfiles', 7 'plugs.ui.jquery.xheditor', 8 'plugs.ui.jquery.jquery', 9 ]修改index.html
在form前添加use xheditor;
{{if hasattr(request,'user')and request.user:}} {{use"xheditor"}} {{<<form}}在{{end}}前添加腳本:
1 {{include "inc_xheditor_plugins.html"}} 2 <script type="text/javascript"> 3 $(function(){ 4 $('textarea').xheditor({ 5 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', 6 skin:'default', 7 upFlashExt:"swf", 8 plugins:plugins, 9 height:300, 10 width:600, 11 }); 12 }); 13 </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函數
1 @expose('/delete/<id>') 2 def delete(id): 3 functions.require_login() 4 n = blogdata.get(blogdata.c.id == id) 5 if n: 6 n.delete() 7 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頁顯示。
- 第三步 當修改后,保存。將新的數據存到數據庫里面。
這里在第二步時,我們的顯示使用的edit.html頁面代碼如下:
1 {{extend "base.html"}} 2 {{block content}} 3 {{if hasattr(request, 'user') and request.user:}} 4 歡迎{{=request.user.username}} <a href="/logout">退出</a> 5 {{else:}} 6 <a href="/register"> 注冊</a> <a href="/login">登錄</a> 7 {{pass}} 8 <hr> 9 {{if hasattr(request, 'user') and request.user:}} 10 {{use "xheditor"}} 11 {{<<form}} 12 <hr> 13 {{pass}} 14 {{include "inc_xheditor_plugins.html"}} 15 <script type="text/javascript"> 16 $(function(){ 17 $('textarea').xheditor({ 18 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', 19 skin:'default', 20 upFlashExt:"swf", 21 plugins:plugins, 22 height:300, 23 width:600, 24 }); 25 }); 26 </script> 27 {{end}}?至此,一個簡單的bolg就大功告成。我們來看一下效果,打開終端,在項目目錄下敲入命令:uliweb runserver
瀏覽器中打開http://127.0.0.1:8000/,得到
?
?
轉載于:https://www.cnblogs.com/goodhacker/p/3209339.html
總結
以上是生活随笔為你收集整理的使用uliweb创建一个简单的blog的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: easyui和Ajax在mvc3中的权限
- 下一篇: mfs教程(四)