第十九天 實戰(zhàn)練習(6)
今天計劃用Python繼續(xù)一個web開發(fā)的實戰(zhàn)項目練習攒磨,學習項目及練習源碼地址:
GitHub源碼
處理用戶登錄session
在response中間件中加入處理用戶登錄的session,這樣可以方便的傳入用戶登錄的相關(guān)信息到模板渲染粱快。
session = await get_session(request)
uid = session.get("uid")
r['is_login'] = False if not uid else True
resp = web.Response(body=app['__templating__'].get_template(template).render(**r).encode('utf-8'))
resp.content_type = 'text/html;charset=utf-8'
return resp
模板中簡單應(yīng)用:
{% if is_login %}
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" id="u_logout">登出</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/b/write">寫文章</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/u/login">登錄</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/u/register">注冊</a>
</li>
{% endif %}
文章的保存和更新
@post('/b/{id}')
async def save_content(*,id,title,content,request):
if not title or not title.strip():
raise APIValueError('title')
if not content or not content.strip():
raise APIValueError('content')
session = await get_session(request)
uid = session.get('uid')
if not uid:
return {'success':False,'msg':'please login.'}
if id == '0':
blog = Blog(
user_id = uid,
user_name = '',
user_image = '',
name = title,
summary = '',
content = content
)
await blog.save()
return {'success':True,'blog_id':blog.id}
else:
blogs = await Blog.findAll('id=?', [id])
if len(blogs) != 1:
raise APIError('update:failed', 'id', 'id is not find.')
blog = blogs[0]
blog.name = title
blog.content = content
await blog.update()
return {'success':True,'blog_id':blog.id}
在這里只是簡單的驗證用戶是否登錄坦胶,實際中,應(yīng)該防止用戶通過非法手段狂寫入文章數(shù)據(jù)刽宪。
文章列表的獲取和展現(xiàn)
@get('/')
async def index(request):
blogs = await Blog.findAll(limit=5)
return {
'__template__':'index.html',
'blogs': blogs
}
前端渲染
{% for blog in blogs %}
<div class="ll-card">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-12 ll-card-image">
<a href="#">
<img src="/static/img/list-image.jpg" class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="col-lg-10 col-md-9 col-sm-12 ll-card-main">
<h3 class="ll-card-main-title"><a href="/a/{{blog.id}}">{{ blog.name }}</a></h3>
<div class="ll-card-tag">
<div><i class="fa fa-clock-o"></i> 2017-10-01 18:00</div>
<div><i class="fa fa-eye"></i> 156</div>
<div><i class="fa fa-commenting-o"></i> 2</div>
</div>
<p class="ll-card-main-info">{{ blog.sumary }}</p>
<p class="ll-card-more"><a href="/a/{{blog.id}}">閱讀更多...</a></p>
</div>
</div>
</div>
{% endfor %}
文章詳情
@get('/a/{id}')
async def detail(id,request):
blogs = await Blog.findAll('id=?', [id],limit=1)
return {
'__template__':'detail.html',
'blog': blogs[0]
}
前端展現(xiàn)
<h2 class="ll-artical-title">{{blog.name}}</h2>
<div class="ll-card-tag">
<div class="">
<img src="img/list-image.jpg" class="img-fluid rounded-circle" alt="Responsive image">
<span class="text-success">海哥</span>
</div>
<div><i class="fa fa-clock-o"></i> 2017-10-01 18:00</div>
<div><i class="fa fa-eye"></i> 156</div>
<div><i class="fa fa-commenting-o"></i> 2</div>
</div>
<div class="ll-artical">
{{blog.content | safe}}
</div>
一個小坑: 要展現(xiàn)保存的富文本內(nèi)容,需要要{{blog.content | safe}}
自此界酒,文章的增圣拄,刪,查毁欣,改已經(jīng)全部完成庇谆,需要豐富文章的內(nèi)容,如:查看次數(shù)凭疮,作者信息饭耳,文章配圖顯示等。
如何將張貼到富文本內(nèi)容的圖片連接轉(zhuǎn)存到本地执解,過濾粘貼內(nèi)容的外部連接等寞肖,是需要慢慢完成的工作。