您现在的位置是：网站首页 >Django >DjangoCRM客户关系管理 Django

【CRM客户关系管理】03.使用Bootstrap前端模板

admin2018年11月23日 14:58 【Django | Html | JavaScript | Python 】 1491人已围观

DjangoCRM客户关系管理简介 使用Django2.1.3+Bootstrap实现CRM系统，仿照Django Admin重写后台 Github地址：https://github.com/xyliurui/DjangoCRM Django版本：2.1.3

# 使用Bootstrap前端模板 ## 静态文件访问 [下载Bootstrap](https://v3.bootcss.com/getting-started/#download) 下载编译并压缩后的 CSS、JavaScript 和字体文件解压放在项目根目录**static文件夹**（新创建）中 ![BLOG_20181123_145925_40](/media/blog/images/2018/11/BLOG_20181123_145925_40.png "博客图集BLOG_20181123_145925_40.png") 访问 [Bootstrap自定义组件](https://v3.bootcss.com/getting-started/#examples-custom) 下载在项目**templates目录**（项目根目录的）下创建**crm**文件夹，用于crm相关页面放置 ## 创建base.html 访问 https://v3.bootcss.com/examples/dashboard/ 另存网页 **Dashboard Template for Bootstrap.html** 到本地，同时也会下载Dashboard Template for Bootstrap_files文件夹，将**里面的css和js**分别移动到static对应目录，如果已存在的不移动； ![BLOG_20181123_145907_11](/media/blog/images/2018/11/BLOG_20181123_145907_11.png "博客图集BLOG_20181123_145907_11.png") 然后修改名称 base.html 后移动到项目中的templates文件夹下，删除正文部分的内容 ![BLOG_20181123_145849_57](/media/blog/images/2018/11/BLOG_20181123_145849_57.png "博客图集BLOG_20181123_145849_57.png") 所有代码如下 ```html <!DOCTYPE html> {% load static %} <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Django CRM</title>  <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">  <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">  <link href="{% static 'css/dashboard.css' %}" rel="stylesheet">  <script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script>   </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Django CRM</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">功能一</a></li> <li><a href="#">功能二</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> {% block body %} <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">激活的菜单</a></li> <li><a href="#">菜单</a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> {% block content %} {% endblock %} </div> </div> {% endblock body %} </div>  <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script>  <script src="{% static 'js/holder.min.js' %}"></script>  <script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script> </body> </html> ``` ## 创建index.html 在templates/crm/目录下创建index.html文件，直接扩展base.html ```html {% extends 'base.html' %} {% block content %} <h1>主页</h1> {% endblock %} ``` ## 创建index视图修改crm应用的views.py ```python from django.shortcuts import render def index(request): return render(request, 'crm/index.html') ``` ## 配置urls ### 主urls ```python from django.contrib import admin from django.urls import path, include from django.conf import settings from django.conf.urls.static import static urlpatterns = [ path('admin/', admin.site.urls), path('crm/', include('crm.urls', namespace='crm')) ] # 上传的文件能直接通过url打开 if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` ### crm的urls ```python from django.urls import path from crm.views import index app_name = 'crm' urlpatterns = [ path('', index, name='index'), ] ``` 现在访问 http://127.0.0.1:8000/crm/ 可以看到主页 ![BLOG_20181123_145835_39](/media/blog/images/2018/11/BLOG_20181123_145835_39.png "博客图集BLOG_20181123_145835_39.png")