前端基础

一 HTML

attrs={'class': 'form-control'} ：此种类型的展示为很长的一个输入框
例：在form的定义时，通过widget参数来设置样式

forms.CharField(widget = forms.widgets.Select(attrs={'class': 'form-control'}))

URL反向解析

可以参见 liujiang的博客
https://www.liujiangblog.com/course/django/136

跳转

1、HttpResponse render redirect

导入

from django.http import HttpResponse，JsonResponse
from django.shortcuts import render, redirect
from django.urls import reverse

1. HttpResponse 直接返回一个html页(页面上只有传入的字符串)。

from django.http import HttpResponse
def index(request):
	return HttpResponse("欢迎访问我的博客")

这个两行的函数首先接受了一个名为 request 的参数，这个 request 就是 django 为我们封装好的 HTTP 请求，它是类 HttpRequest 的一个实例。然后我们便直接返回了一个 HTTP 响应给用户，这个 HTTP 响应也是 django 帮我们封装好的，它是类 HttpResponse 的一个实例，只是我们给它传了一个自定义的字符串参数

2. render 涉及到数据的渲染

from django.shortcuts import render
def index(request):
	return render(request, 'blog/index.html', context={
		'title':'我的博客首页',
		'welcome':'欢迎访问我的博客首页'
	})

作用：将数据以字典形式填充到html模板文件中，最后将结果返回给浏览器
render可以接受三个参数：
一个是 request参数
一个是html模板文件
一个是保存具有数据的字典参数。 如：{key:value}形式。
最终使用的还是HttpResponse对象，render函数隐式地完
成了此过程。

3. redirect 重定向，跳转到另一个页面

from django.urls import reverse
return redirect(reverse('account:login'))
return redirect('/index/')

2、ajax中跳转

1. 重载本界面
   window.location.reload();
2. 弹出框的父界面 重载
   parent.location.reload();

ajax csrf_token的使用

在django中，若是只用ajax，会涉及到csrf_token的使用，将以下代码添加到即可

/* 以下 ajax 获取csrftoken相关 */
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
/* 以上 ajax 获取csrftoken相关 */

前端传到后端的数据

# POST 与 GET 
if request.method == 'POST':
    tms = request.POST['tms']
if request.method == 'GET':
    tms = request.GET['tms']

二 全局变量使用

// .html
// 定义一个全局变量，在具体函数中使用时，前面就不需要再写var了，直接使用即可；
var dir_name=""
var function1 = function()
{
  if (dir_name == "")
    {
      alert("请先创建保存目录");
      return false;
    }
}

三 前端数据生成JSON格式，传给后端生成JSON文件

//.html
// 创建一个对象
var final = new Object();
// 字符串
final.project_name = $('#project_name').val();
// 数组
final.on_off_times = [$('#open_delay').val(), $('#close_delay').val()]
// JSON化
var finalInfoStr = JSON.stringfy(final);
// ajax传送到后端
$ajax({
  url:'{% url 'on_off_test:json_data' %},
  method:'GET',
  dataType:'json',
  data:{'finalInfoStr':finalInfoStr},
  success:function(result){
    alert('生成成功')},
  error:function(){
    alert('获取数据失败')}
})

# view.py
def create_json(request):
    if request.method == 'GET':
        finalInfoStr = request.GET['finalInfoStr']
        dir_name = 'D:/开关机'
        f = open(dir_name + '/data.json', 'w', encoding='utf-8')
        f.write(finalInfoStr)
        f.close()
        return HttpResponse(1)
    else:
        pass

值的获取

//select值的获取
var option = $("#select_device option:selected").val()
//input框的获取
var value = $("#project_name").val()

四 基础前端控件

常用控件

<!--数值 -->
<input type="number" id="open_delay" min="0" max="10000" step="1" value="50">
<!--文本输入框 -->
<div class="form-group">
  <label for="project_name">项目信息输入</label>
  <input type="text" class="form-control" id="project_name" placeholder="输入项目名称（例：HLTE888T）">
</div>

下拉框中的信息列表获取
方法1：Jquery的load函数

// html，加载功能实现
<select id="sel_dep" ></select>
$('#sel_dep').load("{% url 'phone:list_phone_dep' %}");
// views.py
def list_phone_dep(request):
    phone_dep = PhoneDep.objects.all()
    return render(request, "phone/phone_list_dep.html", locals())

多选框对选中项的操作

    var array_test_modules = new Array()
    $('#testmodules option:selected').each(function(){
            array_test_modules.push($(this).val())
    })
    if (array_test_modules.length == 0){
        //操作
    }

单选框常用

// 1、设置value为ok的项选中
$('.selector').val('ok')

// 2、获取当前选中项的value
$('.selector').val()

信息提示

提示框

通过向元素添加 data-toggle = 'tooltip' 创建提示框

<a href='#' data-toggle='tooltip' title='我是提示内容'>鼠标移到我这会有提示</a>
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>

五 JQuery

函数

//一、入口函数 jquery
$(document).ready(function (){
//执行代码
})
或者
$(function(){
//执行代码
})

// 二、定义函数
<button onclick='myFunction()'>点我</button>
function myFunction()
{
  alter("我被点击了")
}




//三、事件
//点击事件1
$('p').click(function(){
  alert('段落被点击了')
})
//点击事件2
$('p').on('click', function(){
  alter('段落被点击了')
})

延时执行函数

// 延时2.5秒后执行函数
setTimeout(function(){
   location.reload()
},2500)