关闭

Django建教育平台(六)--首页和登录页面配置

标签: django
325人阅读 评论(0) 收藏 举报
分类:

本节设置首页和登录页

1. 复制主页静态文件

a. 复制index.html文件

上本项目的Github, copy index.html文件, copy到templates文件夹中.


b. 复制其他静态文件

上本项目的Github, copy static文件夹下的所有文件.



2. 配置处理静态文件

a. elearn_py3/urls中增加代码

from django.views.generic import TemplateView  # 新增代码
import xadmin


urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),

    url('^$', TemplateView.as_view(template_name="index.html"), name="index")  # 新增代码
]

b.浏览器查看效果

发现显示效果不齐全



打开浏览器的开发者模式, 再刷新网页, 发现以下三个文件加载不到.



c. 指定静态文件位置

在settings最下方添加代码

STATIC_URL = '/static/'  # 原有代码
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]  # 新增代码, 如果用圆括号括起来, 偶尔会报错, 改为中括号.

在index.html中引用静态文件

修改前代码:

	<link rel="stylesheet" type="text/css" href="../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="../js/jquery.min.js" type="text/javascript"></script>  # ..处并没有指明路径
    <script src="../js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

修改后代码:

	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">  # ..改为/static/
	<link rel="stylesheet" type="text/css" href="/static/css/animate.css">  # ..改为/static/
	<link rel="stylesheet" type="text/css" href="/static/css/style.css">  # ..改为/static/

    <script src="/static/js/jquery.min.js" type="text/javascript"></script>  # ..改为/static/
    <script src="/static/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>  # ..改为/static/

浏览器确认效果



基本样式已经出来了, 但还有很多图片没加载, 是因为很多图片的路径还是没有修改.

在index.html中查找 ../image, 将../修改成/static/image


在index.html中查找 ../js, 将../修改成/static/js


在index.html中查找 ../media, 将../修改成/static/media


以上操作, 也可以合并为将../替换成../static/


浏览器查看效果, 图片已经能正常显示.


3. 配置login.html

a. 将Github上的login.html文件复制到templates文件夹下


b. 替换../

将login.html中的../css替换成/static/css

将login.html中的../js替换成/static/js

将login.html中的../images替换成/static/images

c. url配置

elearn_py3/urls中修改代码:

urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),

    url('^$', TemplateView.as_view(template_name="index.html"), name="index"),
    url('^login/$', TemplateView.as_view(template_name="login.html"), name="login")  # 新增代码, 写法与index类似.
]

d. index.html对login.html的链接配置

在index.html中搜索"登录", 定位到login链接位置


修改login链接, 以及把前后的<!--       -->删除


浏览器进入主页确认


点击主页上的登录按钮



0
0
查看评论

[单页面]Django打造在线教育平台(五)--配置第一个页面

1. template中创建留言板页面 a. template文件夹下新建form.html文件 b.将form.html代码替换成以下代码 .smart-green { margin-left: auto; margin-right: a...
  • oldwayphone
  • oldwayphone
  • 2017-06-28 06:26
  • 892

Django建教育平台(一)--搭建环境,新建项目

之前[单页面]Django搭建教育平台系列, 是用单页面form来练习django的用法, 没有建立完整的网站, 接下来才真正建立多页面网站. 1. 创建python3虚拟环境 在cmd命令行输入mkvirtualenv -p C:\Python34\Python.exe elearn_py3 -p...
  • oldwayphone
  • oldwayphone
  • 2017-07-28 22:10
  • 531

Django建教育平台(七)--用户登录

上一节说明的index和login页面, 并不需要专门写views, 因为是使用系统自带的templateview 这一节说明用户登录功能, 因为不是使用系统自带的view, 需要自己写login信息输入后的view. 1. 用户登录 a. 写users/views from django.s...
  • oldwayphone
  • oldwayphone
  • 2017-08-14 22:15
  • 700

Django建教育平台(八)--用户注册

1. 配置html等静态文件 a. 将project中的register.html copy至templates下 b. 修改register.html中../ 将../替换成/static/ c. 修改register.html引用 将index, login, register页面中的&qu...
  • oldwayphone
  • oldwayphone
  • 2017-08-15 06:20
  • 216

Django建教育平台(二)--Users App

1. 新建Users App a. 点击pycharm Tools菜单--Run manage.py task b. 输入startapp users 一般web app中, users表是需要第一个设置的. 2. 设计Users表 a. 设计Users表之前, 先看一下django默认的use...
  • oldwayphone
  • oldwayphone
  • 2017-07-30 09:29
  • 569

[单页面]Django打造在线教育平台(一)--环境搭建

先进行开发环境搭建: 1. Python IDE Pycharm安装 搜索pycharm, 下载windows的professional版本, 可上淘宝购买激活码. 2. 下载MySQL 安装过程中需要记住输入的管理密码, 后面需要使用. 3. 下载Navicat 4. 下载安装Pyth...
  • oldwayphone
  • oldwayphone
  • 2017-06-25 14:19
  • 480

搜索引擎二:Django网站首页设计

安装Django pip install django 或者是: easy_install django 新建项目和应用 找一个地方放项目文件:这里是E盘 按住shift,再点击右键,打开CMD 输入:django-admin startproject search_engine 这样就新建了...
  • ns2250225
  • ns2250225
  • 2015-02-24 17:27
  • 1840

Django建教育平台(四)--Django Admin与Xadmin

Django自带后台管理程序--Admin, Admin也是一个app, 在project创建时就自动创建了. 1. 浏览器尝试登陆admin页面 a. 点击pycharm Run菜单--Debug--elearn_py3 b. 在浏览器输入http://127.0.0.1:8000/admin/,...
  • oldwayphone
  • oldwayphone
  • 2017-08-02 21:51
  • 1373

教育机构最需要的教育直播系统

教育直播系统一般功能包含在线直播教学、课程录播授课、考试题库、智能排课、教学管理等。全部功能开通体验支持PC、pad、手机web端、微信平台,全部终端开放体验 。   一、专业的教学直播平台解决方案   特点:快速搭建完成、强大功能模块、流程操作简单、支持功能定制、行业收费   多端口自由...
  • Inxedu_shuo
  • Inxedu_shuo
  • 2017-01-05 18:13
  • 657

利用django框架,手把手教你搭建数据可视化系统(一)

如何使用django去构建数据可视化的 web,可视化的结果可以呈现在web上。使用django的MTV模型搭建网站基础铺垫—MTV模型Created with Raphaël 2.1.0Request服务器(Djangoweb)Response首先,要搞清楚我们去访问服务器,服务器返回信...
  • jacky_zhuyuanlu
  • jacky_zhuyuanlu
  • 2017-09-26 13:38
  • 1118
    个人资料
    • 访问:11084次
    • 积分:342
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:0篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论