【CRM客户关系管理】03.使用Bootstrap前端模板
2018-11-23 本文已影响0人
吾星喵
个人博客，欢迎查看：https://blog.starmeow.cn/
Github地址：https://github.com/xyliurui/DjangoCRM
使用Bootstrap前端模板
静态文件
访问 下载Bootstrap 下载编译并压缩后的 CSS、JavaScript 和字体文件
解压放在项目根目录static文件夹（新创建）中
image.png
访问 Bootstrap自定义组件 下载
在项目templates目录（项目根目录的）下创建crm文件夹，用于crm相关页面放置
创建base.html
访问 https://v3.bootcss.com/examples/dashboard/ 另存网页 Dashboard Template for Bootstrap.html 到本地，同时也会下载Dashboard Template for Bootstrap_files文件夹，将里面的css和js分别移动到static对应目录，如果已存在的不移动；
image.png
然后修改名称 base.html 后移动到项目中的templates文件夹下，删除正文部分的内容
image.png
所有代码如下
<!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
{% extends 'base.html' %}
{% block content %}
<h1>主页</h1>
{% endblock %}
创建index视图
修改crm应用的views.py
from django.shortcuts import render
def index(request):
return render(request, 'crm/index.html')
配置urls
主urls
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
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/ 可以看到主页
image.png
