DjangoWeb创建应用及添加静态文件JQuery

最新推荐文章于 2024-04-28 10:04:04 发布
最新推荐文章于 2024-04-28 10:04:04 发布
阅读量1.1k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014725884/article/details/80370526

创建一个工程 
cd 到要创建工程的文件夹下，执行命令：

django-admin startproject my_project
  • 1

创建第一个页面 
my_project/my_project文件夹中创建文件： 
views.py

from django.http import HttpResponse

def first_page(request):
    return HttpResponse("Cool snow!")
  • 1
  • 2
  • 3
  • 4

创建URL和函数之间的映射，编辑urls.py文件：

from django.conf.urls import url,include
from django.contrib import admin
from views import first_page#引入对应的函数

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', first_page),#添加映射
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这个时候启动服务器，

python manage.py runserver
  • 1

结果： 
这里写图片描述
创建一个app

tip：Django只有在app里面才能引用数据库，所以必须创建app

在外层my_project文件夹下，terminal执行：

python manage.py startapp app1
  • 1

配置settings.py：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',#添加我们自己的app
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

配置应用对应的urls.py 
（注意这里是在my_project/my_project/urls.py，不是app1文件夹中的urls.py）

from django.conf.urls import url,include
from django.contrib import admin
from views import first_page

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', first_page),
    url(r'^app1/', include('app1.urls')),#添加这句
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修改app1视图文件： 
app1/views.py

from django.http import HttpResponse
def first_page(request):
    return HttpResponse("happy snow!")
  • 1
  • 2
  • 3

配置app1内部URL映射： 
app1/urls.py

from django.conf.urls import url,include
from django.contrib import admin
from views import first_page# add

urlpatterns = [
    url(r'^$', first_page)
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这里写图片描述
上面的结果就对了，注意体会链接的形式 
配置数据库 
my_project/my_project/settings.py

# DATABASES = {
#     'default': {
#         'ENGINE': 'django.db.backends.sqlite3',
#         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
#     }
# }
# 注释掉原来的数据库，添加我们的Mysql
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'snowtest0106', #我们数据库名称
        'USER': 'root',
        'PASSWORD': '******', #填写你的密码
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

my_project/my_project/_init_.py

import pymysql
pymysql.install_as_MySQLdb()
  • 1
  • 2

检查是否连接成功：

python manage.py shell
>>>from django.db import connection
>>>cursor = connection.cursor()
  • 1
  • 2
  • 3

这里写图片描述
不报错就对了

使用数据库 
编辑models.py

from __future__ import unicode_literals

from django.db import models

# Create your models here.

class myStudent(models.Model):
    def __str__(self):
        return self.name
    name = models.CharField(max_length=20)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

terminal执行

python manage.py makemigrations app1
python manage.py migrate
  • 1
  • 2

这个时候，再去看我们的数据库，就有刚刚创建的表了，我是用navicat来管理数据库的： 
这里写图片描述

这里，我在数据库里面添加了一条记录，snowy，一会儿访问数据库的时候要用到

数据库中的id字段是django在创建数据库的时候自动添加的

让数据库的内容显示到网页中 
app1/views.py

from django.http import HttpResponse
from models import myStudent

def first_page(request):
    student_list = myStudent.objects.all()
    student_str = map(str, student_list)
    return HttpResponse("<p>" + ''.join(student_str) + "</p>")
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

启动服务器，运行： 
这里写图片描述
这时候，数据库里面的snowy被显示出来

到此，我们的目标已经大致完成了，但是可以看出来，这种方式，虽然实现了结果，但是并不符合django的MVC编程思想。我们要把模板和数据分开来，怎么办呢？ 
my_project目录下创建template文件，并添加我们的模板html，这里是hello.html 
这里写图片描述

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{hello}}
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

修改settings.py：’DIRS’: [BASE_DIR+”/templates”,],

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR+"/templates",],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

app1/views.py

from models import myStudent
from django.shortcuts import render

def first_page(request):
    student_list = myStudent.objects.all()
    student_str = map(str, student_list)
    context = {}
    context['hello'] = ''.join(student_str)
    # context['hello'] = 'hello yibo'
    return render(request, 'hello.html',context)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这个时候启动服务器，运行： 

这里写图片描述




引入js库

我们写页面很多时候需要外部js库的支持，那么这些文件应该放在哪里呢？又该如何配置呢？

  • 建立static文件夹： 
    这里写图片描述 
    注意上图里面static文件夹的路径，再在里面添加js文件夹，js文件夹里面就可以放我们需要的js文件了。
  • 配置相关文件 
    接下来，想要使用这些js我们还需要进行一些配置： 
    settings.py
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
  • 1
  • 2
  • 3
  • 4
  • 5

templates/hello.html

{% load staticfiles %}#这句添加在html文件的最上面
<script src="{% static "js/jquery-3.1.1.min.js" %}" type="text/javascript"></script>
#注意看这里面的script标签和我们之前的script标签之间的不同
  • 1
  • 2
  • 3

到这基本上我们的配置就结束了。 
其实我也不是很懂jQuery，昨天看师兄操作看的我眼花缭乱，估计还是得以后自己用的时候慢慢体会，我先把过程记录下来。

先说一下我们想要实现什么。 
我们在后台建立了一个字典（当然这个是demo，我们以后上线的时候肯定是要在数据库里面调用这些数据的）：

{'1':1234,"2":4321}
  • 1

在前端页面放了一个下拉框，想要在选1的时候，页面显示1234，在选2的显示4321。

hello.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static "js/jquery-3.1.1.min.js" %}" type="text/javascript"></script>
</head>
<body>
{{hello}}
<select id="lineno">
    <option>1</option>
    <option>2</option>
</select>
</body>
<div id="div">

</div>
<script type="text/javascript">
    $("#lineno").change(function(){        alert("You have changed the option!");

        })
    });
</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

我对这段代码的理解：

<select>建立一个下拉框，两个选项
<div>建立一个显示结果的div

下面这段script：
就是在下拉框被改变的时候，我们获取用户选择的下拉框中的值，之后拼接一个链接："/app1/api?lineno=" + lineno，并用get方法得到这个链接里面的结果，返回到我们的div中显示
  • 1
  • 2
  • 3
  • 4
  • 5

上面拼接的链接就是我们接下来要说的内容，先上一个结果的截图： 
这里写图片描述
我们在这个页面，改变lineno的值，就可以根据这个key找到对应的后台数据中的value 
那么这个链接我们是怎么处理的呢？ 
首先得有视图V，修改app1/views.py

from django.http import HttpResponse
from models import myStudent
from django.shortcuts import render


def first_page(request):
    student_list = myStudent.objects.all()
    student_str = map(str, student_list)
    context = {}
    context['hello'] = ''.join(student_str)
    # context['hello'] = 'hello yibo'
    return render(request, 'hello.html', context)


def api(request):
    mmap = {'1': 1234, "2": 4321}
    lineno = request.GET.get('lineno', '1')
    return HttpResponse('{volume:' + str(mmap[lineno]) + '}')
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

注意到我们在上面的页面上添加了api函数，我理解的是通过request.GET.get函数，得到用户输入的参数，也就是？后面的参数，之后用HttpResponse返回一个页面的结果

那么根据我们django框架的设计理念，还需要一个URL和api函数之间的映射： 
app1/urls.py

from django.conf.urls import url,include
from django.contrib import admin
from views import first_page
from views import api

urlpatterns = [
    url(r'^$', first_page),
    url(r'api/', api)
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

到这里就结束了，贴一下结果： 
这里写图片描述
我们在下拉框里面选择2的时候，显示的是4321


Django | 一文带你搞定Django项目的创建、应用的注册、服务请求、urls.py的配置、settings.py的配置、配置项的介绍、URL调度器的使用
猫天意的博客
08-10 3998
django项目创建后，在主应用中，会有一个settings.py文件，这个就是该项目的配置文件settings文件包含Django安装的所有配置settings文件是一个包含模块级变量的python模块，所以该模块本身必须符合python规则，并且可以使用python的语法settings中的所有配置项的key必须全部大写。
【图书推荐】《Django 5企业级Web应用开发实战（视频教学版）》
brucexia的专栏
05-25 1703
本书精选当前简单、实用和流行的Django实例代码，帮助读者学习和掌握Django 5框架及其相关技术栈的开发知识。本书系统全面、内容翔实、重点突出、通俗易懂，基本涵盖Django 5框架应用开发的所有技术。本书配套示例源码、PPT课件和教学视频。本书共分为13章，内容包括Django框架基础与环境搭建、常用配置、模型、视图与路由、模板、表单、后台管理、异常管理与自动化测试、用户Auth认证系统、安全与国际化，以及常用的Web应用程序工具等。
Django导入jquery
那些为成为程序员而做准备的岁月
07-13 2901
1.  在settings.py中配置静态路径： # Additional locations of static filesSTATICFILES_DIRS = ( # Put strings here, like "/home/html/static" or "C:/www/django/static". # Always use forward slashes, eve
在django模板中添加jquery
weixin_30321709的博客
11-27 764
路径 /project_name /app_name /templates /index.html /project_name setting.py /static /js jquery.js 导入方法 1.在index.html文件中引用jquery.js文件时，在inde...
Django （二）使用 JQuery、Ajax
程序员战胜
07-21 1477
一、作业内容 1、班级表的操作，包括增加、编辑、删除。要求（1）增加、编辑，弹出对话框；（2）这些操作用JQuery、Ajax实现。 2、学生表的操作，包括增加、编辑、删除。要求（1）增加、编辑，弹出对话框；（2）这些操作用Jquery、Ajax实现。 3、教师表的操作，包括增加、编辑、删除。要求（1）增加、编辑，弹出对话框；（2）这些操作用Jquery、Ajax实现。 1、班级表的操作，包括增加、编辑、删除。要求（1）增加、编辑，弹出对话框；（2）这些操作用JQuery、Ajax实现。 <!
django使用本地jquery
weixin_43992799的博客
04-05 2142
下载query 网页输入: https://www.bootcdn.cn/jquery/ 然后复制链接，如图一。 打开新的网页，将链接粘贴，如图二。 右击另存在。如图三。 放到django项目中。在创建的sign应用下面新建static文件夹，将上面的js文件放进去。如图4.对项目的setting.py进行修改。如图5。在自己写的html文件加上文件位置。如图6。这样就做好啦。 STATIC_URL = '/static/' HERE = os.path.dirname(os.path.ab.
如何在Django项目中引入静态文件
09-18
在Django项目中引入静态文件是构建Web应用时不可或缺的一部分，因为这些文件通常包含CSS、JavaScript和图片等资源，它们负责提升用户体验和页面交互性。接下来我们将深入探讨如何在Django项目中有效地管理静态文件。...
【python】Django——templates模板、静态文件、django模板语法、请求和响应
urge的博客
11-14 1378
笔记为自我总结整理的学习笔记，若有错误欢迎指出哟~【Django专栏】
基于Django框架的AJAX文件上传功能实现及三种方式源码解析
最新发布
10-04
此外，本项目还可能包含了一些关于Django框架和AJAX技术的额外知识点，如Django的中间件使用、模板配置、静态文件管理、跨域资源共享（CORS）问题的处理、JavaScript中的AJAX调用及响应处理等。通过学习本项目，...
【图书介绍】《Django 5企业级Web应用开发实战（视频教学版）》
brucexia的专栏
04-28 1483
全书共分为13章，内容包括Django框架基础与环境搭建、常用配置、模型、视图与路由、模板、表单、后台管理、异常管理与自动化测试、用户Auth认证系统、安全与国际化，以及常用的Web应用程序工具等。此外，为了突出本书项目实战的特性，最后两章基于Django框架分别讲解了投票应用系统和内容管理系统两个实际项目的开发，可以帮助读者深入理解Django的应用开发流程。
Django配合使用Jquery post方法
卧龙居
10-15 7580
Django使用Jquery的post方法需要解决两个
Django 创建工程文件
qq_37605109的博客
04-14 552
先使用pip install django 来安装，安装完这个之后就会有一个django-admin,来创建工程文件 命令： django-admin startproject thz_django #创建一个django项目 python manage.py runserver #启动项目 python manage.py runserver 8999 #指定端口号启动 python manage.py runserver 0.0.0.0:8999 #这...
小栗子说明Django中如何使用JQuery实现Ajax
navyhu的专栏
09-26 1975
小栗子说明Django中如何使用JQuery实现Ajax 1. 修改url.py，假设你的appname是polls，第一个是处理访问页面的url，第二个处理ajax请求的url urlpatterns = patterns('',        url(r'^/polls/ajax/$','polls.views.ajax_page'),        url(r'^/pol
【Django4】django创建静态文件
ONLYSRY的博客
05-07 717
urls.py文件配置url """firstdemo URL Configuration""" from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ # path('admin/', admin.site.urls), path('index/', views.index), path('user/list/', vie..
[jquery学习]jquery使用、简介（以django+pycharm为例）
fronde2233的博客
07-28 862
jquery是js的一个 库，能够支持对页面（html）元素的获取、修改、前后端异步传输数据。 在html文件中使用jquery时，应当导入所需jquery的脚本，导入示例： <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <script></script>可以写在<head></head&gt
在python下django的安装和创建文件
fsdha的博客
09-23 344
安装django win+r 调出cmd, 以管理员身份运行命令:pip install django 系统会自动安装django最新版本 验证是否安装： 在python交互环境：打开pycharm点击Terminal进入交互环境 输入pip list可以查看是否安装django 输入之后能显示上图就算是安装成功了。 如果未显示则查看上面的安装django即可。 创建项目 在pycharm交互命令中输入命令： django-admin startproject mysite ‘mysite‘是自定义
Django-创建项目和基本文件介绍
qq_42991834的博客
06-04 389
pip install django #创建项目 django-admin startproject 项目名称 ----项目结构---- manage.py 项目名称 __init__.py settings.py urls.py wsgi.py manage.py 1.与项目进行交互的命令行工具集的入口 2.通俗点讲就是项目管理器 3.执行Python manage.py来查看所有...
Django学习: 静态文件引入框架
xiaoweids的博客
06-30 192
转自：微点阅读 https://www.weidianyuedu.com导语各环境等的使用版本如下：Linux Mint 18.2 （Ubuntu 16.04）；python版本2.7.12和3.5.2；Django版本为1.9。在前一篇文章中我们已经把一个登录的页面显示在网页上了，而且跳转只跳到了原来的页面，这些只是前期简单的建立项目，相当于学一门语言的开篇课，建立helloworld项目。我们可以看到上一篇的登录页面非常简单（丑），我们想要使用一些开源的框架来美化界面怎么办呢，比如我想使用amazeU
基于Python+Django+Jquery架构的Web开发
clm20482的博客
06-30 487
近来，公司要开发一个自动化运维平台，使用到基于Python+Django+Jquery架构的Web开发，这里介绍一下该架构的组建。 环境信息： 操作系统：Linux rhel 7.1 数据库：mysql 5.6 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值