Django前端开发:项目笔记及链接

下面的内容都是亲身实践得到,这里仅作记录。

参考B站视频理解Django

好评如潮Python Django全套教程,手把手教你从0搭建网站,带项目实战,学完可接单
记录一下,后面可待改进:

  1. 数据库员工管理部分,表项可以添加:
    Django前端开发:项目笔记及链接_第1张图片
  2. [WinError 10013]以一种访问权限不允许的方式做了一个访问套接字的尝试

netstat -ano|findstr 8000命令,最后一列是进程号
taskkill /pid 进程号 /F

  1. Navicat、SQLyog导入数据库遇到的问题

一些参考博文

  1. HttpResponseRedirect实现跳转页面:
    Django页面跳转

  2. 对于Django的一个总体的理解:Django后端笔记(一)框架介绍 、Django的基本使用

  3. html页面引入另一个html页面
    解决:Django中path配置和引入子页面

  4. VScode使用正则表达式替换:
    齐建伟的博客
    用vs code实现正则表达式批量替换内容

  5. js中时间字符串的处理js中时间格式化的几种方法

  6. css左右居中的几种常见方法

  7. Django:获取radio值参考代码如下:

# html代码: 注意,这里要有个换行才行
<input type="radio" name="zl" value="1" checked="checked">百度
<input type="radio" name="zl" value="2">搜狗

# django代码
 zl = request.POST['zl']
 zl = int(zl)
  1. Django传递数据给JS
    附:花4小时解决的一个bug问题:

script未执行,表现为,明明已经传递到页面的数据,但是js无法取到.
解决方法: 将类似于
var check_data_js = {{ check_data | safe }};
也许要使用这句: check_data_js = JSON.parse(check_data_js);
这样的语句,放在要用到数据的地方,比如,紧接着,就有一个for循环,跟着解析check_data_js数据包.

  1. Echarts中series循环添加数据
  2. 设置Input标签Date默认值为当前时间,
  3. Django筛选时,提示字段未定义:Django模型筛选器查询无法识别字段
    链接到:https://docs.djangoproject.com/en/3.2/topics/db/queries/#field-lookups
    与或非【Django】Django model与数据库操作对应关系(转)
  4. onchange 事件,onChange 事件调用js方法带参数是什么意思,将数据从前台传到后台方法总结
  5. django 模版语法,if, Django 模板语言 for 循环,JS实现“隐藏与显示”功能(多种方法)
  6. JS去掉字符串前后空格或去掉所有空格的用法
  7. 网页数据实时更新的三种简单方法,网页数据如何实现实时刷新?websocket

解决Django定时刷新网页的问题

总览: websocket的第三方模块
几个教程:
django中如何实现websocket,真正通过websocket实现群聊功能
django 实现websocket
Django 使用websocket

使用chrome看源代码

使用chrome查看页面元素的css样式
chrome如何查看页面元素的js定义
如何快速找到元素绑定的事件函数 前端程序员看

使用js处理表单

JS如何获取表单中复选框的值?
javascript获取表单的各项值
javaScript遍历对象总结
button的onclick事件给函数传递参数,第2篇参考:jquery实现全选和取消全选(包含子选框全选中,父选框选中功能)
注意理解: f在这里是个变量,只要保持它不被字符串化就行了!颜色一定是亮的。

var tempFloorH = floor_head + "checkall(\'"+f+"\')" + " value=" + f + ">" + f + '';

复选框默认选中: CHECKBOX 复选框默认被选中,我试了一下:checked=“true” 也可以选中.
html 怎么让无序列表不显示点:百度经验.
判断对象中是否有key:js判断数组或对象中的key是否存在
如何获取select选中的值

//1:拿到select对象: 
var myselect=document.getElementById("select");
//2:拿到选中项的索引:
var index=myselect.selectedIndex ; 
// 3:拿到选中项options的value: 
myselect.options[index].value;
// 4:拿到选中项options的text: 
myselect.options[index].text;

设置日期保持

方法1输入框里的值传到后台再传回来;
HTML中INPUT type="date"标签如何赋值注意问题
python time和datetime的常用转换处理

windows服务器发布Django网页

使用IIs发布,一堆问题

Window上通过IIS发布Django网站;
[Django] Window上通过IIS发布Django网站;
Windows server iis部署Django详细操作
ERRORS: ?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT settin;

使用Django发布

参考:DJANGO项目运行允许外部访问。总结一下:

在你的Django项目的settings.py中设置 ALLOWED_HOST = ["*"]
运行时: python manage.py runserver 0.0.0.0:80
外网就可以通过你的ip地址来访问你的网址了。自己电脑的ip地址查看使用命令 ipconfig

待实践:
windows开机自启动的django服务.

设置加载转菊花

参考这篇文章: Loading动画的最佳实现方式

首先,在https://loading.io/定制一个菊花
然后,复制元素到一个.svg文件中
最后,使用https://www.sojson.com/image2base64.html转为base64格式的,可以嵌入网页

使用方式参考:正在载入中…loading页面的几种方法
js加载前显示loading(页面加载前)
css设置div块显示在最上方显示:z-index:999
一个可以用的加载中图片(无背景):

data:image/gif;base64,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

页面中引入地图

何在网页中引入百度地图

表格的几个问题

onclick事件没有反应的五种可能情况。:onclick这个单词重写一下
table设置overflow:scroll: height:600px;

使用ajax请求服务器

使用ajax,可以避免整个页面刷新,而只是刷新一小块区域.称为微请求和微响应。
ajax csrftoken
ajax/csrftoken
Django2.2 中Ajax系统回调----js与后台数据同步

$.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
});
$.ajax({
   type: "POST",
    // url: "127.0.0.1/main/setting/index",
    // url: "/main/setting/index",
    // url: "main_setting",
    // url: "{% url 'main_setting' %}",
    url: "/main/setting/",
    datatype: "json",
    data: "{'d': 1234567}",
    async: true,
    success: function (result) {
    },
    error: function (result) {
    }
});

Django后台返回

django中JsonResponse的小笔记

from django.http import JsonResponse
...
return JsonResponse({'res_1':0,'res_2':1}) # 放字典类型数据

插入活字格的使用

34.1 注册JavaScript/CSS文件
[资源分享] LAYUI树形组件应用实例,二级联
zTree v3.5.48 API 文档
ztree带有选项框的树形菜单使用

你可能感兴趣的:(项目,笔记,django,前端,python)