1、html页面解析
2、html的url配置
3、静态文件css、js等路径设置
现将html页面拷贝到templates模板文件夹
新建静态文件夹static将css、js、image、img拷贝到static文件夹
urls.py文件配置首页url
# _*_ encoding:utf-8 _*_
"""MxOnline URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/1.9/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.conf.urls import url, include
2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView
# 用于处理模板文件,这样django就能自动识别出templates文件夹
import xadmin
urlpatterns = [
url(r'^xadmin/', xadmin.site.urls),
url(r'^$',TemplateView.as_view(template_name="index.html"),name="index")
# 首页的url配置
]
因为我们还没有在settings.py文件夹中配置静态文件的路径,所以页面中无法加载到js和css等文件;配置方法如下:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [(os.path.join(BASE_DIR,"static"))]# 配置css等静态文件,因为现在和教程上不一样,所以外面多了[]
#STATIC_ROOT = os.path.join(BASE_DIR, 'static') # 配置路径,避免Django命令行报错
另外还需要修改html中的调用文件路径设置成static的文件路径
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>课程机构列表 - 慕学在线网</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/animate.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
</head>
替换后:
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>课程机构列表 - 慕学在线网</title>
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/css/animate.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
</head>
【登录页面设置】:
urls配置
urlpatterns = [
url(r'^xadmin/', xadmin.site.urls),
url(r'^$',TemplateView.as_view(template_name="index.html"),name="index"),
# 首页的url配置
url(r'^login/$',TemplateView.as_view(template_name="login.html"),name="login"), # 登录的url
]
html的路径配置成 /login/ (表示根目录的login)