Django中引用bootstrap
实现在前端可以创建客户信息,可以修改客户信息
我们需要设计一个前端用户交互系统.
我们在设计之前,讨论一些需求:
前端实现:
1. 不同角色的用户,看到的东西是不一样的
    销售:
        客户纪录
        能修改自己的纪录
        不能修改别人的纪录
        可以看本校区的所有客户纪录(不能修改别人的)
    老师:
        创建上课纪录,点名,批作业,管理班级
    学员:
        查看自己的成绩,
        交作业
        介绍学员
        建议投诉
角色结合权限来实现上述需求,这些都实现对于现在的我们要花很长时间的.
那么今天我们不讲这些,我们更多讲的是简单搞一搞页面.
首先我们要做前端,现在主流写前端都是用bootstrap和jQuery
所以我们要在自己的项目中加入这两个.具体如何加入并使用:
1.首先先下载bootstrap和jQuery
bootstrap-3.3.5-dist
jquery-3.1.0.min.js
2.在Django Project中创建静态文件目录,并配置settings.py文件.
bootstrap和jquery都属于静态文件,在Django project中一般创建一个目录statics用于存放静态文件.

然后我们把bootstrap-3.3.5-dist下的文件拷贝到该静态文件目录下.

我们知道bootstrap要基于jquery,所以我们把jquery-3.1.0.min.js文件也放到静态目录下.

准备工作完成!!!
我们要做一个系统,前端首先选好一个前端模版,对于我们来说完全没必要自己写一个.我们可以从bootstrap网站下一个前端模版,直接用.
3.下载一个合适的前端框架模版.
    访问:www.bootcss.com
    我们选择这么一个简单的后台系统的前端框架模版:http://v3.bootcss.com/examples/dashboard/
    打开网址,选择另存为.将整个网页保存下来.
4.打开这个模版文件,查看源代码如下:

5.我们把下载下来的模版文件,放到templates目录下,作为基础模版,其它html模版都开发前都继承这个基础模版.

6. 配置urls.py文件.做一个二级路由的include

7. 在crm 目录下创建urls.py文件并配置(默认没有urls.py文件).

8. 创建dashboard首页.
我们知道一个Django Project项目中可能有多个app,那么每一个app 都有自己的首页和其它页面.页面的名称是有可能重复的.
所以我们应该在templates目录下为每一个app程序创建一个单独的目录,dashboard放在这个单独的目录下,如图:

9. 在dashboard文件中继承base.html基础文件

10. 在crm/views.py文件中定义dashboard视图函数.

     from django.shortcuts import render

     # Create your views here.

     def dashboard(request):

         return render(request,'crm/dashboard.html')

11. 上面完成,我们访问http://127.0.0.1:8000/crm,看下能否正常访问

我们看到访问正常,说明urls.py配置和views.py都没有问题.问题处在模版文件引入的js文件和css文件的地址不正确
12. 配置settings.py文件,声明静态文件的地址路径

13. 在base.html文件中,将地址更换成
    /statics/bootstrap/js/
    /statics/bootstrap/css/
14. 访问测试,依然报错

原因是什么?
首先我们看settings.py里是不是可以配置多个静态文件存放的目录,是一个列表.

     STATIC_URL = '/static/'

     STATICFILES_DIRS = [

         os.path.join(BASE_DIR, "statics"),

         '/var/www/static/',

     ]

那么问题来了,我们在模版文件里引入css文件时,查找是从这个列表中所有的目录中查找的.你看我们前面在base.html中更改的
    /statics/bootstrap/js/
    /statics/bootstrap/css/
这路径都是写死的,如果找不到如何从/var/www/static/这个目录查找?
按照上面的写法肯定不行,Django强大的功能又展示了,它在这个列表上定义了一个别名.我们所有的css,js文件的调用,直接引入别名,这样就可以实现从多个目录中查找了.
这个别名的实现就是
    STATIC_URL = '/static/'
随你我们的base.html应该改成:
    /static/bootstrap/js/
    /static/bootstrap/css/
15.最终访问,查看结果

上面的15个小步骤，算是把从bootstrap.com网站shang22

2