![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web笔记
文章平均质量分 89
荻风溪畔
清澈的小溪潺潺流淌,流向远处漫无边际的稻田,微风拂过,荻絮纷飞。游一小舟,看水中的鱼,看远处的山,怡然自乐。
留下一些学习笔记,记录下自己的学习过程。一起讨论,一起进步。
展开
-
ubuntu+Docker部署Django+Vue项目(1-Vue)
我这主要是为了在docker容器中部署之后,打包容器,拖到云端直接运行(可移植性)。在这个部署过程中给出一些用到的docker命令(感觉有点像linux命令)sudo docker run -d -p 【主机端口】:【容器端口】 --name 【容器名】【镜像名】搜过一些复杂详细的教程,但是没有安装过Docker,直接按照官网很快顺利的安装完成了。命令的意思该镜像是基于 nginx:latest镜像而构建的。docker启动命令,docker重启命令,docker关闭命令。显示所有的容器,包括未运行的。原创 2022-11-22 16:06:25 · 953 阅读 · 0 评论 -
ubuntu 20.04.4+uWSGI+Nginx安装部署Django+Vue的web前后端全过程记录(3-实现局域网通过本机IP地址加端口号访问本地虚拟机的web项目)
前面已经把前后端项目都部署在了局域网中,但是发现只能虚拟机所在主机能访问,在局域网的其他物理机是访问不到的。下面进行配置解决。原创 2022-11-10 10:57:33 · 958 阅读 · 0 评论 -
ubuntu 20.04.4+uWSGI+Nginx安装部署Django+Vue的web前后端全过程记录(2-Vue)
由于之前一直用的是本地的回环地址,所以这样肯定是无法获取到部署后的Django数据的。如下图所示,浏览器可以查看到我们的项目文件,这可不兴看啊。改完变成这样了,比原来好一些,后续在寻求更好的解决方法吧。检查之前的nginx配置文件是否有语法错误,用如下命令。动态设置标题:通过路由导航守卫设置,使用。在router目录下添加如下代码。报错了,应该是没有权限。nginx加入如下配置。原创 2022-11-10 09:24:23 · 1098 阅读 · 0 评论 -
ubuntu 20.04.4+uWSGI+Nginx安装部署Django+Vue的web前后端全过程记录(1-Django)
由于我们要通过本地的workbench将本地的数据导入到云服务器中,所以需要对这个root用户设置可以远程传输数据的权限。选择你要用文件夹还是文件接收数据 (1) 文件夹就是数据库的每张表单独一个sql文件 (2) 文件就是整一个数据库就一个sql文件。在安装完数据库之后,我们需要用系统生成的用户名和密码登录mysql,这样在后面对数据库操作时,不容易产生错误。,当然也可以是单独的固定 ip,这样就仅允许指定 ip 连接,更加安全。网上说需要给某个文件添加软链接啥的,但是我文件路径中的文件都是不存在的。原创 2022-11-08 09:41:57 · 2064 阅读 · 0 评论 -
vue2 功能:取消编辑表单显示原数据
上面代码中,源对象obj1的a属性的值是一个对象,Object.assign()拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。Object.assign()方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。(这里的功能其实跟之前修改表格,取消导致原数据出现数据消失问题解决原理一样,都是要深拷贝数据之后再进行回显)基础类型(number,string,boolean,null,undefined)原创 2022-10-24 10:15:51 · 1752 阅读 · 0 评论 -
Django数据库orm操作以list形式获取数据库中某列所有值
Django还有q查询和F查询,sql的每一种操作在Django中应该都有对应语句实现。原创 2022-09-20 10:21:46 · 2907 阅读 · 0 评论 -
后台管理系统中,实现修改功能时,数据回显导致table-column数据消失。罪魁祸首竟是浅拷贝
如图所示,在序号为1的行数据点击操作中的修改按钮,弹出如下对话框。清空表单数据,然后关闭。再然后厂家的列数据就没了。花了我几十分钟,找了很久。(因为之前出现过这个问题,但还是想不起来是什么原因)原创 2022-09-19 21:52:49 · 369 阅读 · 0 评论 -
Nodejs3day(express简介,express创建基本Web服务器,托管静态资源,nodemon下载及出现的问题,中间件,编写GET,POST,JSONP接口)
express官网:http://www.expressjs.com.cn/在项目所处的目录中,运行如下的终端命令,即可将 express 安装到项目中使用:创建基本的 Web 服务器样例代码postman测试样例:在编写调试 Node.js 项目的时候,如果修改了项目的代码,则需要频繁的手动 close 掉,然后再重新启动,非常繁琐。现在,我们可以使用 nodemon(https://www.npmjs.com/package/nodemon) 这个工具,它能够监听项目文件的变动,当代码被原创 2022-07-31 21:41:56 · 308 阅读 · 0 评论 -
Nodejs2day(nodejs的模块化,npm下载包,模块加载机制)
使用require()加载自定义模块时,必须指定以./或…/开头的路径标识符。在加载自定义模块时,如果没有指定./或…/这样的路径标识符,则node会把它当作内置模块或第三方模块进行加载。同时,在使用require()导入自定义模块时,如果省略了文件的扩展名,则Node.js会按顺序分别尝试加载以下的文件1.按照确切的文件名进行加载2.补全.js扩展名进行加载3.补全.json扩展名进行加载4.补全.node扩展名进行加载。...原创 2022-07-25 14:32:40 · 164 阅读 · 0 评论 -
nodejs1day(nodejs下载运行,fs、path、http模块,简单构建Web服务器)
涉及到路径拼接的操作,都使用path.join()方法进行处理。后,按下回车键,即可查看已安装的Node.js的版本号。安装流程跟安装普通软件一样,配置环境是安装过程自动配置的。把文件的实际存放路径,作为每个资源的请求url地址。3.将资源的请求url地址映射为文件的存放路径。,文件读取完成后,通过回调函数拿到读取的结果。参数3可选参数,表示以什么格式写入文件内容,不要直接使用+进行字符串的拼接。必选参数,表示一个路径的字符串。,文件写入完成后的回调函数。,字符串,表示文件的路径。...原创 2022-07-24 16:48:03 · 897 阅读 · 0 评论 -
Ajax2day(serialize()函数一次获取form全部数据,art-template模板引擎下载及使用方法步骤。正则表达式实现模板引擎)
通过点击submit按钮,触发表单提交的操作,从而使页面跳转到actionURL的行为,叫做表单的同步提交。表单同步提交后,整个页面会发生跳转,跳转到actionURL所指向的地址,用户体验很差。表单同步提交后,页面之前的状态和数据会丢失。解决方案表单只负责采集数据,Ajax负责将数据提交到服务器。步骤如下//1.监听表单按钮的提交事件$('#formAddCmt').submit(function(e){art-template中文官网首页为。......原创 2022-07-20 17:19:14 · 290 阅读 · 0 评论 -
Ajax1day(get,post请求,PostMan测试工具,图书馆里案例,聊天机器人案例)
Ajax的全称是(异步JavaScript和XML)。通俗的理解在网页中利用对象和服务器进行数据交互的方式,就是Ajax。如果要在网页中请求服务器上的数据资源,则需要用到对象。(简称xhr)是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。最简单的用法。...原创 2022-07-18 21:03:03 · 1936 阅读 · 0 评论 -
JS12day(构造函数创建类对象,prototype, proto,原型链,forEach,filter,some,Oblect.keys(),Object.defineProperty())
script>//Object.defineProperty()定义新属性或修改原有的属性varobj={id'小米',price1999};//1.以前的对象添加和修改属性的方式//obj.num=1000;//2.Object.defineProperty()定义新属性或修改原有的属性Object.defineProperty(obj,'num',{valuetrue});value9.9});httpshttps。...原创 2022-07-15 11:15:20 · 219 阅读 · 0 评论 -
JS11day(类constructor构造函数,super继承,面向对象Tab栏JS代码)
注意子类在构造函数中使用super,必须放到this前面(必须先调用父类的构造方法,再使用子类构造方法)命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个。用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过。(类命名首字母大写,驼峰式命名.如CatRun)注意类必须使用new实例化对象。注意方法之间不能加逗号分隔。......原创 2022-07-15 09:13:15 · 263 阅读 · 0 评论 -
JS13day(函数定义方式,call、apply、bind改变this指向,严格模式,闭包,递归,浅拷贝方法,深拷贝函数封装)
this指向常规指向改变函数内部this指向1.call方法2.apply方法3.bind方法(重点)bind() 方法不会调用函数。但是能改变函数内部this 指向严格模式JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。为函数开启严格模式高阶函数高阶函数原创 2022-07-14 21:34:08 · 180 阅读 · 0 评论 -
JS10day(api 阶段性完结,正则表达式简介,自定义属性,过滤敏感词案例,注册模块验证案例)
不是第一次接触正则表达式了,看来它的应用还是挺广泛的,之前在爬虫就用到很多正则表达式。上菜鸟链接,有需求,cv它写好的https://c.runoob.com/front-end/854/其中 是正则表达式字面量(也就是说这个变量名是一个对象,可以通过来调用方法)2.判断是否有符合规则的字符串: 方法 用来查看正则表达式与指定的字符串是否匹配如果正则表达式与指定的字符串匹配 ,返回,否则3.检索(查找)符合规则的字符串: 方法 在一个指定字符串中执行一个搜索匹配......原创 2022-06-30 14:31:24 · 177 阅读 · 0 评论 -
JS9day(BOM对象模型,setTimeout定时器,JS单线程执行机制,location对象,swiper插件,localStorage本地存储,购物车案例升级版,学习信息案例(本地存储))
定时器-延时函数 内置的一个用来让代码延迟执行的函数,叫 语法: 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略清除延时函数:5秒关闭广告案例递归模拟setInterval函数两种定时器对比 的特征是重复执行,首次执行会延时 的特征是延时执行,只执行 1 次 结合递归函数,能模拟 重复执行 清除由 创建的定时任务JS 执行机制结果都是javaScript 语言的一大特点就是单线程,比如我们对某个 DOM 元素进行添加和删除操作,不能同原创 2022-06-29 17:35:52 · 220 阅读 · 0 评论 -
JS8day(滚动事件(scroll家族),offset家族,client家族,轮播图案例(待做))
当页面进行滚动时触发的事件加载事件方法1加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定事件方法2当初始的 文档被完全加载和解析完成之后, 事件被触发,而无需等待样式表、图像等完全加载。事件名:监听页面DOM加载完毕:给 添加 事件scroll家族获取宽高:获取元素的总宽高(不包含滚动条)返回值不带单位和获取位置:获取元素内容往左、往上滚出去看不到的距离和这两个属性原创 2022-06-28 21:56:15 · 367 阅读 · 0 评论 -
JS7day(事件对象,事件流,事件捕获和冒泡,阻止事件流动,事件委托,学生信息表案例)
事件对象是什么?也是个对象,这个对象里有事件触发时的相关信息例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息如何获取?在事件绑定的回调函数的第一个参数就是事件对象一般命名为、、img要用到绝对定位加上代码:事件流事件流指的是事件完整执行过程中的流动路径:先捕获后冒泡事件捕获概念:从DOM的根元素开始去执行对应的事件 (从外到里)说明:第三个参数传入代表是捕获阶段触发()若传入代表冒泡阶段触发,默认就是若是用 L0 事件监听,则只有冒泡阶段,没有捕获事件冒原创 2022-06-28 15:46:26 · 251 阅读 · 0 评论 -
JS6day(DOM结点的查找、增加、删除。实例化时间,时间戳,时间戳的案例,重绘和回流)
DOM树里每一个内容都称之为节点子节点查找:(了解,几乎不用)获得所有子节点、包括文本节点(空格、换行)、注释节点等children (重点)仅获得所有元素节点返回的还是一个伪数组兄弟关系查找:下一个兄弟节点 属性上一个兄弟节点 属性增加节点:即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点创建元素节点方法:追加节点要想在界面看到,还得插入到某个父元素中,插入到父元素的最后一个子元素:插入到父元素中某个子元素的前面学成在线重构案例原创 2022-06-26 21:54:48 · 325 阅读 · 0 评论 -
js5day(事件监听,函数赋值给变量,回调函数,环境对象this,全选反选案例,tab栏案例)
高阶函数可以被简单理解为函数的高级应用,JavaScript 中函数可以被当成【值】来对待,基于这个特性实现函数的高级应用。【值】就是 JavaScript 中的数据,如数值、字符串、布尔、对象等。目标:能够分析判断函数运行在不同环境中 this 所指代的对象环境对象指的是函数内部特殊的变量 ,它代表着当前函数运行时所处的环境**作用:**弄清楚this的指向,可以让我们代码更简洁当前元素为A状态,其他元素为B状态。使用:改进:(这里必须预设一个按钮有pink类,而第一个方法不需要)tab栏应原创 2022-06-26 17:20:06 · 430 阅读 · 0 评论 -
js4day(DOM开始:获取DOM元素内容,修改元素样式,修改表单元素属性,setInterval定时器,轮播图案例)
DOM(——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API参数:包含一个或多个有效的CSS选择器字符串返回值:CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到,则返回。参看文档:参数:包含一个或多个有效的CSS选择器字符串返回值:CSS选择器匹配的元素集合。得到的是一个伪数组: 有长度有索引号的数组 但是没有 等数组方法想要得到里面的每一个对象,则需要遍历(for)的方式获得。哪怕只有一个元素,通过quer原创 2022-06-25 16:13:00 · 534 阅读 · 0 评论 -
js3day(数组操作,js冒泡排序,函数,调试窗口,作用域及作用域链,匿名函数,对象,Math对象)
将一个或多个元素添加到数组的末尾,并(新增的内容) 方法将一个或多个元素添加到数组的,并数组元素的删除 方法从数组中,并 方法从数组中,并 方法 ,冒泡排序函数返回多个值argument伪数组可以看出,,是能运行,返回。调试全局作用域 局部作用域 块级作用域分别对应下面的相应变量注意点(今天都忘了):如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐但是有一种情况,函数内部的形参可以看做是局部变量。采取就近原则的方式来查找变原创 2022-06-22 22:15:13 · 212 阅读 · 0 评论 -
js2day(又是i++和++i,if语句,三元运算符,switch、while语句,for循环语句)
比较运算符的使用字符串比较,是比较的字符对应的ASCII码从左往右依次比较如果第一位一样再比较第二位,以此类推比较的少,了解即可NaN不等于任何值,包括它本身尽量不要比较小数,因为小数有精度问题不同类型之间比较会发生隐式转换最终把数据隐式转换转成类型再比较所以开发中,如果进行准确的比较我们更喜欢 === 或者 !==if语句注意括号的使用。判断两个数的最大值注意:这里的前面的号很有必要,隐式转换成类型。(否则依次输入5,10输出最大结果是,因为是字符串比较)注意:中的数据要原创 2022-06-21 21:30:53 · 148 阅读 · 0 评论 -
移动式布局(流式布局)
二倍图物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334 我们开发时候的1px 不是一定等于1个物理像素的 PC端页面,1个px 等于1个物理像素的,但是移动端就不尽相同 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比对于一张 50px * 50px 的图片,在手机 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊 在标准的viewport设置中,原创 2022-06-19 15:09:30 · 545 阅读 · 0 评论 -
html+css强化项目品优购完结(一些没注意的点)
这边的角标采取绝对定位来实现的单行文字省略号显示边框先给个透明的总结刚做完这个项目,其实不止上面的这些问题,但是想在博客上完整的表述出来估计要花不少时间。做完之后,还是有了个更好的认识。...原创 2022-06-19 14:05:19 · 101 阅读 · 0 评论 -
CSS8day(新增input表单类型和属性,属性选择器,结构伪类选择器,伪元素选择器,css3过渡,calc函数)
HTML5 在不使用插件的情况下,也可以原生的支持音频格式文件的播放,当然,支持的格式是有限的。新增的多媒体标签主要包含两个:1. 音频: 语法:2. 视频: 使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用 flash 和其他浏览器插件。语法: 音频标签和视频标签使用方式基本一致 浏览器支持情况不同 谷歌浏览器把音频和视频自动播放禁止了 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决) 视频标签是重点,我们经原创 2022-06-11 21:32:50 · 468 阅读 · 0 评论 -
CSS7day(精灵图,字体图标引入过程,CSS画三角形,CSS 用户界面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧:css三角强化)
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。使用精灵图核心:............原创 2022-06-09 14:32:31 · 440 阅读 · 0 评论 -
CSS6day(定位(子绝父相,绝对定位,相对定位,固定定位),元素的显示和隐藏display,visibility,overflow。)
提问: 以下情况使用标准流或者浮动能实现吗?以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以:定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。定位 = 定位模式 + 边偏移 。用于指定一个元素在文档中的。则决定了该元素的。定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。静态定位是元素的默认定位方式,无定位的意思原创 2022-06-08 21:46:08 · 559 阅读 · 1 评论 -
CSS5day(学成在线案例实现 附代码)
我们本次采取结构与样式相分离思想:建议遵循以下顺序:为了提高网页制作的效率,布局时通常有以下的整体思路:这个页面的版心是 1200 像素,每个版心都要水平居中对齐,可以定义版心为公共类:实际开发中,......原创 2022-06-07 22:11:11 · 190 阅读 · 0 评论 -
CSS4day(圆角边框,阴影,浮动详解及其示例)
网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):所谓的标准流:原创 2022-06-06 21:56:06 · 522 阅读 · 0 评论 -
CSS3day(CSS三大特性,行高的继承,选择器的权重,盒子模型:外边距,边框,内边距)
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:如下图文字的样式呈现蓝色。子标签会继承父标签的某些样式,如。(子承父业)如下图,p标签的文字样式从div那里继承而来。当同一个元素指定多个选择器,就会有优先级的产生。最终还是粉色!继承的权重示例1:...原创 2022-05-31 22:10:22 · 653 阅读 · 0 评论 -
CSS2day.2(块内元素,行内元素,行内块元素,背景(background的复合写法))
文章目录CSS元素显示模式块元素行内元素行内块元素总结:显示模式的转换:CSS元素显示模式作用:更好的布局我们的网页HTML一般分为块元素和行内元素两种类型比如div独占一行,一行可以放多个span。块元素常见块内元素有:h1~h6,p,div,ul,ol,li等。特点:独占一行高,宽,外边距和内边距都可以控制宽度默认是容器(父级宽度)的100%可看做是一个容器(盒子),里面可以放行内或者块级元素以下注意: 文字类的元素内不能使用块级元素<p>原创 2022-05-29 16:38:31 · 1206 阅读 · 0 评论 -
CSS2day(emmet语法、复合选择器)
文章目录emmet语法生成html标签emmet快速生成css样式快速格式化代码emmet语法生成html标签<!-- Emmet语法只能手动输,复制粘贴不奏效,最后一个字符不复制粘贴就行。 --><!-- div+Tab键 生成标签--><div></div><!-- div*3 生成多个相同标签 --><div></div><div></div><div>&l原创 2022-05-27 21:23:24 · 144 阅读 · 0 评论 -
html2day(合并单元格,有序、无序列表,input、select、textarea表单)
文章目录合并单元格步骤:无序列表(unordered list):有序列表(ordered list):自定义列表(ordered list):表单的组成:**表单标签**:合并单元格步骤:1.确定是跨行还是跨列合并2.找到目标单元格(即合并的第一格),写上合并方式=合并的单元格数量,比如:<td colspan=“2”></td>3.删除多余的单元格(即被合并的单元格)。否则表格紊乱。示例如上图。表格(table)是用来显示数据的,那么列表就是用来布局的。三大列表:有原创 2022-05-21 21:18:25 · 341 阅读 · 0 评论 -
CSS1day(基础选择器、字体、文本属性、样式表方式)
文章目录CSS选择器基础选择器CSS选择器基础选择器和复合选择器两个大类:基础选择器由单个选择器组成的包括:标签、类、id和通配符选择器基础选择器标签选择器:为页面中某一类标签指定统一的CSS样式。例如将<div>和<p>的所有标签选择出来进行设置样式。显然这类标签的缺点是不能进行差异化样式。例如:p {font-size: large;color: deeppink;}类选择器:差异化选择不同标签进行设置CSS样式。需要在标签中定义cla原创 2022-05-22 22:11:45 · 202 阅读 · 0 评论 -
html1day(锚点链接、img标签、vscode插件,vscode保存文件自动格式化代码)
html特殊字符原创 2022-05-15 17:15:03 · 677 阅读 · 0 评论