前端展示歌手数据并实现分页功能

后端代码了不少了，开始把拿到的数据展示到前端。

1.写首页接口：

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

所以我们需要它！去官网。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

so   我们也需要它！去官网下载。

然后放到static：

2.创建一个index.html，代码如下：

{% extends 'base.html' %}

{% block my_content %}
    

        A
        B
        C
    
    
        {% for singer in singers.artistlist %}
            
        {% endfor %}
    

        

            
ID
            
头像
            
姓名
            
艺名
            
歌单
        

                
{{ forloop.counter }}--{{ singer.id }}
                

                
{{ singer.name }}
                
{{ singer.AARTIST }}
                
歌单{{ singer.music_num }}
            

    

        

            

                

                    
                        上一页
                    

                
                {% for page in singers.pages %}
                    {% if singers.current_page == page %}
                        
{{ page }}
                    {% else %}
                        
{{ page }}
                    {% endif %}
                {% endfor %}
                


                    
                        下一页
                    
                
            
        
    

{% endblock %}

3.第二步涉及到一个base.html，这一步代码虽然多，但是都是从bootstrap文档复制过来的导航条代码！

{% load static %}



    
    
    
    
    
    {% block my_css%}{% endblock %}
    {% block my_js %}{% endblock %}



    {% block my_nav %}
        （导航条代码写这里）
    {% endblock %}
    {% block my_content %}{% endblock %}
    {% block my_footer %}{% endblock %}


{% block my_js_code %}{% endblock %}

4.views代码，这些代码和我上一个博客有联系。

def index(request):
    singers = get_singers(request)
    print('-----', singers)
    return render(request, 'index.html', {'singers': singers})

else:
    json_str = cache.get('singers.txt')
json_obj = demjson.decode(json_str)
artistlist = json_obj.get('artistlist', None)
for artist in artistlist:
    artist['pic'] = 'http://img1.sycdn.kuwo.cn/star/starheads/' + artist.get("pic")
json_obj['artistlist']=json_obj['artistlist'][(page-1)*size: page*size]
json_obj['pages']=[1,2,3,4,5]
json_obj['current_page']=page
return json_obj

    json_obj = demjson.decode(json_str)
    total = int(json_obj['total'])
    singers_count[x] = total
pie_data = [{'name': name, 'value': value} for name, value in singers_count.items()]
return render(request, 'singer_count.html',{
    'zhu':{
        'xAxis': list(singers_count.keys()),
        'yAxis': list(singers_count.values()),
    },
    'bing':{
        'pie_data': pie_data
    }
})

5.去urls写个path（），然后运行即可。这样前端展示歌手数据并实现分页功能实现了。（仅供参考）