本节我们的主要任务是把首页通过bottle的目标进行渲染展示出来！

起手式

第一步：资源导入项目

把相关的资源文件拷贝到对应目录文件下，如图示：

image.png

第二步：程序入口代码编写

任何程序的启动都是需要一个入口，后续启动的时候也是需要 使用python xxx.py的方式来启动此程序。

#!/usr/bin/evn python
# coding=utf-8

# 导入程序需要的日志包模块
import logging

# 导入程序需要的Session包模块
from beaker.middleware import SessionMiddleware

# 导入bottle框架路由，运行，模板，程序实例，静态文件处理 和 get,post 错误等处理模块
from bottle import route, run, TEMPLATE_PATH, default_app, template, static_file, get, error

# 导入异步协成处理模块
from gevent import monkey;

# 导入自定义的路由视图模块，即URL路径
from home.routes import *

monkey.patch_all()

# 获取本脚本所在的路径
pro_path = os.path.split(os.path.realpath(__file__))[0]
sys.path.append(pro_path)

# 定义assets路径，即静态资源路径，如css,js,及样式中用到的图片等
assets_path = '/'.join((pro_path, 'home/assets'))

# 定义图片路径
images_path = '/'.join((pro_path, 'home/images'))

# 定义提供文件下载的路径
download_path = '/'.join((pro_path, 'home/download'))

# 定义文件上传存放的路径
upload_path = '/'.join((pro_path, 'home/upload'))

# 定义模板路径
TEMPLATE_PATH.append('/'.join((pro_path, 'home/views')))

# 定义日志目录
log_path = ('/'.join((pro_path, 'log')))

# 定义日志输出格式
logging.basicConfig(level=logging.ERROR,
                    format='%(asctime)s %(filename)s[line:%(lineno)d] %(levelname)s %(message)s',
                    datefmt='%Y-%m-%d %H:%M:%S',
                    filename="%s/error_log" % log_path,
                    filemode='a')

# 设置session参数
session_opts = {
    'session.type': 'file',
    'session.cookei_expires': 3600,
    'session.data_dir': '/tmp/sessions',
    'sessioni.auto': True
}


@error(404)
def error404(error):
    """定制错误页面"""
    return template('404')


@route('/assets/<filename:re:.*\.css|.*\.js|.*\.png|.*\.jpg|.*\.gif>')
def server_static(filename):
    """定义/assets/下的静态(css,js,图片)资源路径"""
    return static_file(filename, root=assets_path)


@route('/assets/<filename:re:.*\.ttf|.*\.otf|.*\.eot|.*\.woff|.*\.svg|.*\.map>')
def server_static(filename):
    """定义/assets/字体资源路径"""
    return static_file(filename, root=assets_path)


@get('/favicon.ico')
def favicon():
    pass


# 函数主入口
if __name__ == '__main__':
    app_argv = SessionMiddleware(default_app(), session_opts)
    run(app=app_argv, host='127.0.0.1', port=8092, debug=True, reloader=True)
else:
    application = SessionMiddleware(default_app(), session_opts)

第三步：路由视图模块

主要是浏览器访问入口地址，相当于控制器文件

image.png

#!/usr/bin/evn python
# coding=utf-8
from imp import reload

from bottle import route, template, redirect, request, unicode

from home.data.datahelper import *

import chardet


def get_friendlink():
    return get_friendlink_data()


def get_case():
    return get_case_data()


@route("/")
def index():
    return redirect('index')


@route("/index")
def index():
    return template('index', title='首页', friendlink=get_friendlink())

第四步：首页HTML页面划分

头部公共模块：

image.png

尾部公共模块：

image.png

尾部包含有一些需要从数据库读取的信息，就友情连接表数据

加载完成后相关呢JS公共模块的加载：

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/polyfill/rem.min.js"></script>
<script src="assets/js/polyfill/respond.min.js"></script>
<script src="assets/js/amazeui.legacy.js"></script>
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<!--<![endif]-->

所以首页划分了四个区域进行分别加载，主要通过模块的

%include('commom.html')

方式来加载

image.png

%include('head.html') -------头部模块
%include('commom.html')------- 公共脚本加载
%include('footer.html')------- 尾部模块
%include('index.html')------- 首页主体内容模块

第五步：首页HTML页面划分

定义首页渲染入口地址：

@route("/")
def index():
    return redirect('index')


@route("/index")
def index():
    # friendlink=get_friendlink()从数据库中读取数据信息
    return template('index', title='首页', friendlink=get_friendlink())

第六步：运行程序

再App.py右键点击Run app.py，成功渲染出首页

image.png

第七步：解决首页渲染时候，当前首页处于选中的状态

image.png

主要是通过加载

%include('commom.html')------- 公共脚本加载

里面的App.js来控制选中的状态

image.png

遍历页面上所有标签对象，判断如果当前访问的路径和当前链接的地址是一致的话，就设置它的样式为选中的状态

第八步：从数据库中读取底部友情链接的数据

（1）简单封装数据库读写模块，需要使用到pymysql模块，需要通过pip或IDE进行此模块安装

image.png

db.py 源码：

#!/usr/bin/evn python
# coding=utf-8
import logging
import pymysql
import sys


from config.const import *


def writeDb(sql, db_data=()):
    """
    连接mysql数据库（写），并进行写的操作
    """
    try:
        conn = pymysql.connect(db=db_name, user=db_user, passwd=db_pass, host=db_ip, port=int(db_port), charset="utf8")
        cursor = conn.cursor()
    except Exception as e:
        logging.error('数据库连接失败:%s' % e)

        return False
    try:
        # cursor.execute(sql)
        cursor.execute(sql, db_data)
        conn.commit()
    except Exception as e:
        # 如果发生错误则回滚
        conn.rollback()
        logging.error('数据写入失败:%s' % e)
        return False
    finally:
        cursor.close()
        conn.close()
    return True


def readDb(sql, db_data=()):
    """
    连接mysql数据库（从），并进行数据查询
    """
    try:
        conn = pymysql.connect(db=db_name, user=db_user, passwd=db_pass, host=db_ip, port=int(db_port), charset="utf8")
        cursor = conn.cursor()
    except Exception as e:
        logging.error('数据库连接失败:%s' % e)
        return False
    try:
        cursor.execute(sql, db_data)
        data = [dict((cursor.description[i][0], value) for i, value in enumerate(row)) for row in cursor.fetchall()]
    except Exception as e:
        logging.error('数据执行失败:%s' % e)
        return False
    finally:
        cursor.close()
        conn.close()
    return data

链接数据库配置信息const.py：

#!/usr/bin/evn python
# coding=utf-8
### 常量参数设置模块，初始化各个常量 ###
##################################################################################
### 数据库参数 ###
# 数据库名称
db_name = 'yunshipei'
# 数据库链接用户名
db_user = 'root'
# 数据库链接密码
db_pass = '111111'
# 数据库链接IP地址
db_ip = 'localhost'
# 数据库链接端口号
db_port = 3306

（2）写SQL读取数据库信息

image.png

datahelper.py

#!/usr/bin/evn python
# coding=utf-8

from utils.db import *

# 初始化Redis缓存链接
friendlink_data = None


def get_friendlink_data():
    """
    从内存中读取友情链接数据，不需要每次都去数据库查
    :return:
    """
    global friendlink_data

    # 将key转换为小写字母
    try:
        if not friendlink_data:
            sql = "select * from tp_friendlink"
            friendlink_data = readDb(sql)
            return friendlink_data
    except Exception as e:
        # log_helper.error('读缓存失败:key(' + key + ')' + str(e.args))
        friendlink_data = None

    return friendlink_data
##################################################################################

（3）再渲染的时候导入模块进行获取，并输出到模板中

image.png

（4）在模板中接收并处理数据

<!-- footer -->
<footer>
    <div class="am-container">
        <div class="footer-logo">
            ![](assets/images/logo-colorful.png)
        </div>
        <ul class="social-links-list">
            <li>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=744071477&site=qq&menu=yes" target="_blank"
                   title="qq">
                    <i class="am-icon-qq am-icon-sm"></i>
                </a>
            </li>
            <li>
                <a href="" target="_blank" id="wechat" title="微信">
                    <i class="am-icon-weixin am-icon-sm"></i>
                </a>
            </li>
            <li>
                <a href="http://weibo.com/allmobilize" target="_blank" title="新浪微博">
                    <i class="am-icon-weibo am-icon-sm"></i>
                </a>
            </li>
        </ul>
        </ul>
        <ul class="friend-links">
            <li>友情链接：</li>
            %if friendlink:
            %for col in friendlink:
            <li>
                <a href="{{col.get('url')}}" target="_blank" title="{{col.get('linkname')}}">{{col.get('linkname')}}</a>
            </li>
            %end
            %end
        </ul>
    </div>
</footer>

结束语：

内容涵盖了数据库读写，页面模板中对数据处理！

其他系列文章目录：

python web（bottle）学习笔记（1）——前言
python web（bottle）学习笔记（2）——python 开发环境准备
python web（bottle）学习笔记（3）——‘我爱python’程序动起来
python web（bottle）学习笔记（4）——实战开篇（初步需求准备）
python web（bottle）学习笔记（5）——实战开篇（数据库篇）
python web（bottle）学习笔记（6）——实战编码（首页模板渲染）
python web（bottle）学习笔记（7）——实战编码（POST提交代理商信息）