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视图函数.

1     from django.shortcuts import render2     # Create your views here.3     def dashboard(request):4         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里是不是可以配置多个静态文件存放的目录,是一个列表.

1     STATIC_URL = '/static/'2     STATICFILES_DIRS = [3         os.path.join(BASE_DIR, "statics"),4         '/var/www/static/',5     ]

那么问题来了,我们在模版文件里引入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