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

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

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

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"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Django CRM</title> <!-- Bootstrap core CSS --> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet"> <!-- Custom styles for this template --> <link href="{% static 'css/dashboard.css' %}" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </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> <!-- Placed at the end of the document so the pages load faster --> <script src="{% static 'js/jquery.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="{% static 'js/holder.min.js' %}"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <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")

很赞哦! (0)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行657天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.12
  • 文章统计:235 篇
  • 文章评论:40 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 公众号:微信扫描二维码,关注我们
  • QQ群:QQ加群,下载网站的学习源码
返回
顶部
标题 换行 登录
网站