Django添加js

来源：互联网发布：jetbrains软件编辑：程序博客网时间：2024/05/20 07:15

我们之前完整的搭建了一个app，同时能够使数据库中的数据在前台页面中显示出来。那么，我们如何将用户在前台页面中的操作返回给后台呢？

这篇文章展示一个demo

在Django搭建第一个应用
的基础上，我们继续。

引入js库

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

建立static文件夹：

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

STATIC_URL = '/static/'STATICFILES_DIRS = (    os.path.join(BASE_DIR, 'static'),)

templates/hello.html

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

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

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

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

在前端页面放了一个下拉框，想要在选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(){        var lineno = $("#lineno").val();        $.get("/app1/api?lineno=" + lineno,function(data){            $("#div").html(data);        })    });</script></html>

我对这段代码的理解：

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

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

from django.http import HttpResponsefrom models import myStudentfrom django.shortcuts import renderdef 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]) + '}')

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

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

from django.conf.urls import url,includefrom django.contrib import adminfrom views import first_pagefrom views import apiurlpatterns = [    url(r'^$', first_page),    url(r'api/', api)]

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

至此，我们前端和后台就顺畅的连接在了一起
具体细节还需要在之后的工程里慢慢体会
接下来想要学一下jQuery

0 0