python网页连接服务器顺序和设置

天天果园页面项目:


	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('')
}
				
	});
		
	});


posted @ 2018-11-11 22:11  IndustriousHe  阅读(485)  评论(0编辑  收藏  举报