用Django全栈开发——09. 集成AdminLTE的Dashboard页面

title.jpeg

上一讲中，我们已经将AdminLTE中的Login例子搬到了我们的项目中，那么这一节，我们则是需要将AdminLTE的Dashboard集成进来。

需求分析

为什么要继承AdminLTE的Dashboard呢？原因很简单，你看AdminLTE它长的样子：

001.png

这不就是个控制台吗？我们的网站是需要一个CMS(Content Management System)控制系统的。现在有现成的，我们就集成呗，而且，这个东西集成了之后，对以后的开发也是很有好处的，到之后的内容，我们就会看到。

挑选页面

首先我们来简单分析一下我们要继承的页面内容。

我们肯定是想来弄一个类似中控台的页面，这个中控台，大致有这么几个部分：

• 左侧的菜单栏，这个是最关键的；
• 右侧的内容页面，针对每一个菜单中的选项，都有一个页面与之对应；
• 顶部菜单栏；

开始集成

接下来，我们就该将AdminLTE集成到系统里了。

首先，同样是在templates文件夹下创建一个叫Dashboard.html的文件。这个和上节课刚开始集成Login的时候的步骤是一样的。

接着，我们来到已经下载好的AdminLTE文件中，打开任意一个index.html文件，会在浏览器里面看到AdminLTE的样子。

我们既然要集成，那么就得找到代码，这个简单，我们就直接在AdminLTE页面右键查看网页源码：

002.png

既然已经找到源码，那么我们就来一步一步的复制黏贴呗。

head标签

首先是head标签，因为head标签一般是来保存网页基本元信息的，所以我们这里也先把这一部分标签的代码黏贴过来：

同样，这里直接黏贴不做处理，还是会丢失很多东西，和上节课的问题是一样的，当然，解决方法也和上节课一样，我们稍后在做资源的引入工作，我们先把代码黏贴过来，

NavBar

顶部的NavBar，在Demo中长这个样子：

003.png

看到源码里面接下来的部分就是顶部的Navbar了，这个我们也先黏贴过来，一定要注意我们黏贴时候的结构不要发生改变，Navbar是在Body标签之下的，而且Body标签还有Class，不要忘记黏贴。

由于这里我们不需要Navbar那么多信息，所以可以适当删减一些。把最右侧的通知按钮删掉，只留下左侧的链接和搜索：

    

        
        

            

                
            
            

                Home
            
            

                Contact
            
        

        
        

            

                
                

                    
                        
                    
                
            
        

    

SideBar

接下来就是左侧的SideBar了，这是个重头戏：

004.png

这部分在网页源码里面，是有aside关键字的，但是这里面的东西我们不全用，所以复制黏贴的时候，我们会删减一些，只留下最基本的东西，在以后，随着系统开发，我们会逐渐增加回来。

同样，复制黏贴的时候，要注意代码结构，不要乱套：

    

        
        
            
            AdminLTE 3
        

        
        

            
            

                

                    
                    

                        
                            
                            

                                Dashboard
                                
                            
                        
                        

                            

                                
                                    
                                    
Dashboard v1
                                
                            
                            

                                
                                    
                                    
Dashboard v2
                                
                            
                        
                    
                    
EXAMPLES
                    

                        
                            
                            

                                Gallery
                            
                        
                    
                
            
            
        
        
    

正文内容

接下来就是右侧的主页面了，因为左侧不同的tab对应不同页面，所以右边的这个其实算是个容器。这个在源码中的关键字则是content-wrapper，我们只需要把最外层的div移植进来就好。

 
    


        
        

            

                

                    
公众号『皮爷撸码』，连载更新此系统的开发教程，敬请关注
                
                

                    
                
            
        
    

footer

接下来就会发现右侧主页面，每一个页面都有一个footer，源码中的关键字就是footer，我们这里也不需要，所以就不黏贴了，如果有需要的同学，可以自行黏贴，依照上文所讲述的内容，这个自行黏贴的过程完全可以当成小练习来做。

Script

Script内容，一般实在之前，整体body内容的最后，这里面主要包含了网页中所有的JavaScript代码，你也可以将script部分放到header中，如果那样做，那么就会影响网页打开的速度，因为网页是先加载head中的内容，在开始渲染body的，将一些script代码放到body中，可以让浏览器提前渲染body的内容，再加载script代码。提高一定的速度。

这部分黏贴，同样需要将所有确实的引用改为相对地址：

上面的是已经修复好的链接，并且我已经将那些缺失的东西复制黏贴到了dist目录下的adminlte文件夹下。同样，别忘了修改上文提到的head里面的路径问题

005.png

好了，至此我们就将AdminLTE的Dashboard集成到了我们的系统里面，如果你每一步都认真操作的话，最后我们的界面会长这个样子：

006.png

是不是很酷炫？将来我们就在这里面来填充内容。

技术总结

最后总结一下，

集成AdminLTE的Dashboard步骤：

1. 下载源码，打开Demo
2. 右键查看网页源码
3. 在源码里面，按照Demo页面的HTML结构进行复制黏贴
4. 修改head和script路径，修复缺少的文件引用
5. 完毕。

底部图片.png