由于我们前后台系统没有分开，所以前台页面调用接口时，可以直接使用后台管理系统已经完成的接口，不过后台管理系统接口的访问加上了登录验证，所以需要将前台要用到的接口进行处理，让它们设置到白名单当中

　　我们打开main.py文件，在勾子函数中@hook('before_request')中找到下面代码

# 过滤不用做任何操作的路由（即过滤不用进行判断是否登录和记录日志的url）
if path_info in ['/favicon.ico', '/', '/api/verify/']:
    return

　　这里前面已讲过，是跳过那些需要权限判断和进行日志记录的访问，对于后台上传的图片来说，我们不需要进行日志记录和权限判断，所以在这里添加上日志访问的路由

# 过滤不用做任何操作的路由（即过滤不用进行判断是否登录和记录日志的url）
if path_info in ['/favicon.ico', '/', '/api/verify/'] or path_info.find('/upload/') > -1:
    return

　　path_info是当前客户端访问的url，通常url是固定的话，我们可以通过in的方式直接进行判断

　　因为上传的图片统一存放在/upload/这个目录中，而访问图片的路由是/upload/xxxx/xxxxxxxxx.jpg，每张图片访问路径都不一样，新上传的图片就会生成新的链接，url是动态变化的，所以我们使用查找的方式来进行判断当前url是否是图片，如果是的话，则不执行下面的操作。

 

　　同样在勾子函数@hook('before_request')中找到下面代码

# 过滤不用进行登录权限判断的路由（登录与退出登录不用检查是否已经登录）
url_list = ["/api/login/", "/api/logout/"]
if path_info in url_list:
    pass

　　为了方便出现问题时及时排查，所以我们会将客户端对接口的访问，以及提交的参数记录到日志中，保存一段时间，所以我们会将一些访问频繁但对分析无关的接口添加到前面过滤处理中。

　　因为对后台管理系统操作时，我们需要对用户权限进行验证，所以会在勾子中统一进行验证用户是否已经登录成功。但有一些接口我们是不必要进行验证的，比如登录和退出登录接口，如果它们不排除在外的话，那么用户将无法登录，因为每次访问登录接口都会返回你未登录不能访问，这样就会出现死循环，未登录不能访问接口，而不能访问接口则无法进行登录的怪圈当中，所以我们需要对一些无需登录就可以访问的接口进行例外处理。

　　对于前台获取公司介绍、联系我们、产品分类、产品列表和产品信息的接口，我们可以将它们添加到这里来，进行过滤。

# 过滤不用进行登录权限判断的路由（登录与退出登录不用检查是否已经登录）
url_list = ["/api/login/", "/api/logout/", "/api/about/", "/api/contact_us/", "/api/product_class/"]
if path_info in url_list or (request.method == 'GET' and path_info.find('/api/product/') > -1):
    pass

　　因为我们使用的是RESTful风格的路由，获取产品信息、修改产品信息和删除产品信息路由url是一样的，只是通过get/put/delete来进行区分，所以我们在处理时，需要获取客户端的提交方式是GET还是PUT或DELETE，然后进行区分处理。

　　我们知道获取产品信息的接口路由是：@get('/api/product/<id:int>/') ，它会根据产品id的不同而不同，所以我们可以通过request.method == 'GET' 来判断当前访问提交的是GET方式，而且访问的路径是/api/product/时，我们就不做权限判断处理。

 

　　点击main.py运行debug，然后在浏览器上输入：http://127.0.0.1:81/api/about/ 就可以看到已经可以取到数据了

 

　　打开index.html页面代码，将公司介绍那部分html代码删掉，替换成下面加上id标签的代码

<img id="about_img" width="600" height="150">
<br><br>
<span id="about"></span>

　　然后我们在底部java script脚本中添加下面ajax代码，就可以看到展示效果了

    //读取服务器记录
    $.ajax({
        url: "/api/about/",
        type: "GET",
        dataType: 'json',
        success: function (data) {
            $("#about_img").attr('src', data.data.front_cover_img);
            $("#about").text(data.data.content);
        }
    });

 

　　产品中心这里需要显示四个产品，所以我们先登录后台管理系统，在产品中心那里可以先录入好产品，如下图

　　然后打开index.html，找到显示产品的html代码，将它们全部删除，替换成下面内容，用来接收到服务器端记录以后，替换成对应的html

<div class="panel-body" style="height:460px" id="productsDiv"></div>

　　将代码拉到底部，在java script中，添加下面代码，它会读取到产品信息以后，对html内容重新进行组合

$.ajax({
        url: "/api/product/?rows=4&page=1",
        type: "GET",
        dataType: 'json',
        success: function (data) {
            if (data.rows != null && data.rows.length > 0) {
                for (var i in data.rows) {
                    if (i == 4){
                        break;
                    }
                    var item = data.rows[i];
                    var html = ' <div style="float:left; padding-right:6px; padding-bottom:10px"><a href="/product_details.html?id=' + item.id + '"><div><img style="wid