一、前端页面布局
1、使用Bootstrap选定布局
2、下载选定布局并分为Base.html(放js和css的导入)和index.html(写HTML语句)
1 <!DOCTYPE html>
2 <!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
3 <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
8 <meta name="description" content="">
9 <meta name="author" content="">
10 <link rel="icon" href="">
11
12 <title>CRM</title>
13
14 <!-- Bootstrap core CSS -->
15 <link href="/static/css/bootstrap.min.css" rel="stylesheet">
16
17 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
18 <link href="/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
19
20 <!-- Custom styles for this template -->
21 <link href="/static/css/dashboard.css" rel="stylesheet">
22
23 <script src="/static/js/ie-emulation-modes-warning.js"></script>
24
25 {% block extra-css %}
26 {% endblock %}
27 </head>
28
29 <body>
30 {% block body %}{% endblock %}
31
32 <!-- Bootstrap core JavaScript
33 ================================================== -->
34 <!-- Placed at the end of the document so the pages load faster -->
35 <script src="/static/js/jquery.min.js"></script>
36 <script src="/static/js/bootstrap.min.js"></script>
37 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
38 <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
39
40 </body></html>
=============================
1 {% extends 'base.html' %}
2
3 {% block body %}
4
5 <nav class="navbar navbar-inverse navbar-fixed-top">
6 <div class="container-fluid">
7 <div class="navbar-header">
8 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
9 <span class="sr-only">Toggle navigation</span>
10 <span class="icon-bar"></span>
11 <span class="icon-bar"></span>
12 <span class="icon-bar"></span>
13 </button>
14 <a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">Project name</a>
15 </div>
16 <div id="navbar" class="navbar-collapse collapse">
17 <ul class="nav navbar-nav navbar-right">
18 <li class="dropdown">
19 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">{{ request.user }} <span class="caret"></span></a>
20 <ul class="dropdown-menu">
21 <li><a href="#">个人信息</a></li>
22 <li><a href="/logout/">Logout</a></li>
23 </ul>
24 </li>
25 </ul>
26 </div>
27 </div>
28 </nav>
29
30 <div class="container-fluid">
31 <div class="row">
32 <div class="col-sm-3 col-md-2 sidebar">
33 <ul class="nav nav-sidebar">
34 <li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a></li>
35 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
36 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
37 <li><a href="https://v3.bootcss.com/examples/dashboard/#">Export</a></li>
38 {% for role in request.user.userprofile.role.select_related %}
39 {% for menu in role.menus.select_related %}
40 <li><a href="{% if menu.url_type == 0 %}{{menu.url_name}}{% else %}{% url menu.url_name %}{% endif %}">{{menu.name}}</a></li>
41 {% endfor %}
42 {% endfor %}
43 </ul>
44 </div>
45 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
46 <h1 class="page-header">Dashboard</h1>
47 </div>
48 </div>
49 </div>
50
51 {% endblock %}
3、statics静态文件跟templates木块的存放路径分类
二、登录页面
1、使用Bootstrap选定登录页面并下载
2、创建login.html并自定制
1 {% extends 'index.html' %}
2
3 {% block extra-css %}
4 <!-- Custom styles for this template -->
5 <link href="/static/css/signin.css" rel="stylesheet">
6 {% endblock %}
7
8 {% block body %}
9
10 <div class="container">
11
12 <form class="form-signin" method="post">{% csrf_token %}
13 <h2 class="form-signin-heading">Please sign in</h2>
14 <label for="inputEmail" class="sr-only">Username</label>
15 <input type="text" id="inputEmail" name="username" class="form-control" placeholder="Username" required="" autofocus="">
16 <label for="inputPassword" class="sr-only">Password</label>
17 <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required="">
18 <span style="color:red;">{{error_msg}}</span>
19 <div class="checkbox">
20 <label>
21 <input type="checkbox" value="remember-me"> Remember me
22 </label>
23 </div>
24 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
25 </form>
26
27 </div>
28 {% endblock %}
3、创建login函数（Django_CRM的views.py中）
4、使用Django内置验证，并保存状态
1 from django.shortcuts import render,redirect
2 from django.contrib.auth import authenticate,login,logout
3
4 def acc_login(request):
5 error_msg = ''
6 if request.method == "POST":
7 username = request.POST.get('username')
8 password = request.POST.get('password')
9 # 验证
10 user = authenticate(username=username,password=password) # user对象
11 if user:
12 # 记录状态
13 login(request,user)
14 # 登录成功后返回原来访问的页面，如果没有返回主页
15 return redirect(request.GET.get('next','/'))
16 error_msg = 'Wrong username or password!'
17 return render(request, 'login.html',{'error_msg':error_msg})
5、访问其他页面需验证是否登录
- 装饰器
from django.contrib.auth.decorators import login_required
@login_required
1 from django.shortcuts import render
2 from django.contrib.auth.decorators import login_required
3
4 @login_required
5 def dashboard(request):
6 return render(request, 'crm/dashboard.html')
- setting配置
URL：LOGIN_URL = '/login/'
时区：TIME_ZONE = 'Asia/Shanghai'
6、退出(清除session)
1 def acc_logout(request):
2 logout(request)
3 return redirect('/login/')
7、Django_CRM中URL
1 urlpatterns = [
2 re_path('^admin/', admin.site.urls),
3 re_path('^crm/', include('crm.urls')),
4 re_path('^kingadmin/', include('kingadmin.urls')),
5 re_path('^login/', views.acc_login),
6 re_path('^logout/', views.acc_logout,name='logout'),
7 ]