天天果园页面项目:
1.创建文件夹--my_project:
mkdir my_project
2.进入到my_project文件夹创建一个fruitday项目:
django-admin startproject fruitday
3.进入fruitday项目文件并创建名称为index的APP:
cd fruitday
./manage.py startapp index
4.打开sublime Text,点击fruitday文件夹主目录下的settings.py设置配置信息:
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
... ...
... ...
'index'
]
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Aisa/Shanghai'
#静态文件访问路径
STATIC_URL = '/staric/'
#静态文件存储路径
STATICFILES_DIRS = (BASE_DIR,'static')
5.在index文件下创建一个static文件夹(css,js,images):
在static文件夹下分别创建css,js,images文件夹
右键创建即可
6.在index文件下创建一个templates文件夹(modules,模板,存储html文件):
右键创建即可
7.找到设置好的.html文件拖动到templates里面
8.找到设置好的.css文件拖动到css文件夹里面
9.主路由配置,打开主目录下的urls.py文件配置路由信息:
from django.conf.ruls.import url,include
urlpatterns = [
#交给index文件夹下的urls.py文件处理
url(r'^',include('index.urls'))
]
10.在Index文件夹下创建一个urls.py文件:
右键创建即可
11.进入urls.py文件导入模块和配置路由:
from django.conf.urls import url
from .views import *
urlpatterns = [
#login是路由信息,login_views是函数名称
url(r'^login/$',login_views)
]
12.进入views.py文件写函数:
#引入xxx.html文件
def login_views(request):
return render(request, 'login.html')
13.进入fruitday项目文件夹启动服务器:
./manage.py runserver
14.打开浏览器输入localhost:8000/login
15.引用static文件夹下的css,打开导入的.html文件并在顶端写入:
{%load static%}
#修改.html文件的<link.....>,定位到static文件下css文件夹的login.css文件
<link rel='stylesheet' href='{%static 'css/login'%}'>
#修改图片信息,定位到static文件下images文件夹的xxx.jpg
<img src='{%static 'images/xxx.jpg'%}'>
16.导入jquery文件:
<head>
#官方js文件
<script src='%static 'js/xxxx.js'%'></script>
#在js文件夹下创建一个属于自己的js文件(login.js),必须先引入官方的js文件再引入自己的js文件
<script src = '%static 'js/login.js'%'><script>
</head>
17.进入login.js文件:
#加载完成后执行的函数
$(function(){
# uphone是ID名称,blur是失去焦点
$('#uphone').blur(function(){
#判断文本框是否为空,若空则输出‘XXX不能为空’
if($(this.val()== ''){
# uphone_err是ID名称,<p id = 'uphone_erro'></p>
$('#uphone_err').html('xxx不能为空')
#设置XXX不能为空的字体是红色
$('#uphone_err').css('color','red')
}else{
#如果输入了信息就不显示任何的内容
$('#uphone_err').html('')
}
});
});