Web
Web
风浅月明
有问题的可以留言。邮箱地址:1296817932@qq.com
展开
-
web前端命名规范
TO:http://www.web000.cn/?p=67在这里我根据自己以往开发的一些项目,总结了的一些自己的和别人的经验,不一定很详细,不一定适合全部人,仅供参考。在之前,我们先简要了解一下web前端主要包括那几部分:Html:这个是“超文本标记语言”,它具有套统一的标准,不存在命名的问题,只是随着版本的迭代,它更新了一些标签和用法;Css:是层叠样式表,目前还不存统一命名规范,不同人写出来样式是不一样的,所以命名规范主要说的就是这块;javascript:是一种直译式脚本语言,这个转载 2021-02-05 15:30:38 · 646 阅读 · 0 评论 -
VSCode中如何创建React项目
1、下载安装VSCode,Node.js,YarnVisual Studio CodeVSCode帮助文档链接Node.js安装较新版本的Node.js https://nodejs.org/zh-cn/HomebrewMAC上安装brew https://zhuanlan.zhihu.com/p/99104545mac安装brew(亲测) https://blog.csdn.net/yuanshangshenghuo/article/details/106599836bre.原创 2021-02-05 15:12:01 · 5497 阅读 · 0 评论 -
Web开发 相对路径和绝对路径
/ 根目录./ 当前路径../ 上级目录../../ 上上级目录路径分类相对路径: 从当前资源出发找到其他资源的过程绝对路径: 从根目录(服务器根目录或项目根目录)出发找到其他资源的过程标志: 只要以/开头的都是绝对路径绝对路径如果是请求转发 / 表示项目根目录(WebContent)其他重定向,`<img/> <script/>,<style/>,`location.href 等/都表示服...原创 2021-02-03 17:35:04 · 742 阅读 · 1 评论 -
React 使用运算符进行条件渲染
元素变量声明一个变量并使用 if 语句进行条件渲染let tempName = "lisi";let tempUser;if (tempName == "zhangshan") { tempUser = <h1>zhangshan</h1>;} else { tempUser = <h1>other</h1>;}ReactDOM.render( tempUser, document.getElementById('r原创 2021-02-03 17:16:04 · 429 阅读 · 1 评论 -
VSCode中React项目配置Debugger for Chrome插件
1、默认配置默认的配置如下。但不知道出于什么原因,之前在另一个项目能使用这个配置运行成功,但现在这个项目使用这边配置运行不了。{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { ...原创 2021-02-02 11:03:37 · 1145 阅读 · 1 评论 -
React setState同步更新state
在写页面的筛选功能时,遇到一个问题。在清除事件(onClear)中重置内容为“请选择”后,却在页面渲染时未拿到最新的内容。问题问题如下图:需求我想要得到的效果要是下图这样遇到问题时的代码import React, { Component } from 'react'import { Wrapper } from './style';import { Button, Modal, Form, Input, message, Select, InputNumber, Men原创 2021-02-02 10:37:01 · 843 阅读 · 1 评论 -
React 在父组件调用子组件中的方法
父组件import React, { Component } from 'react'import { Wrapper, ContentWrapper, ScrollWrapper } from './style';import { observer, inject } from 'mobx-react';import PageSelect from '@c/pageSelect'import { Spin } from 'antd';import ContractorContract f原创 2021-02-01 18:49:35 · 730 阅读 · 0 评论 -
React报错 TypeError: Cannot read property ‘push‘ of undefined
在项目中,处理列表跳转详情时遇到了问题。初时代码如下:import React, { Component } from 'react'import { observer, inject } from 'mobx-react';import { Wrapper, ModalWrapper, ScrollWrapper } from './style'import ContentReport from '../contentListReport';@inject('base','construc原创 2021-02-01 18:22:33 · 1152 阅读 · 0 评论 -
[JS]JavaScript字符串比较或判断包含关系时如何不区分字符大小写
var tempStr = "ZhangSan";var subStr = "Zh";var subUpperStr = "ZH";console.log(tempStr.includes(subStr)); // 输出:trueconsole.log(tempStr.includes(subUpperStr)); // 输出:false包含方式一console.log(existOneIncludeTwo(tempStr,subUpperStr)); // 输出:tru.原创 2021-01-16 15:40:45 · 5836 阅读 · 0 评论 -
React学习后练手
React学习:https://react.docschina.org/docs/getting-started.html设计稿React 哲学:https://react.docschina.org/docs/thinking-in-react.html练习var tempData = [{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Spo原创 2021-01-16 14:54:06 · 312 阅读 · 0 评论 -
mac电脑怎么安装Visual Studio Code
之前学前端一直使用IntelliJ IDEA,最近问前端移动端方向的开发人员,他们说开发中基本都使用VSCode。VSCode即Visual Studio Code,是微软公司向开发者们提供了一款真正的跨平台编辑器。下面看看VSCode如何下载。1、进入Visual Studio Code或Visual Studio网站下载(一直没下载成功过)2、在一些网址的资源中心下载VSCode-darwin-stable.zip 1.45.0...原创 2021-01-11 18:05:12 · 2159 阅读 · 0 评论 -
[JS]列表布局的几种方式
目录1、监控浏览器宽度即时更新布局2、浮动布局document.body.style.margin = "0px";document.body.style.padding = "0px";document.body.style.overflow = "auto";var navView = document.createElement("div");navView.style.backgroundColor = "blue";navView.style.width = "10...原创 2020-12-16 18:28:43 · 2267 阅读 · 0 评论 -
[JS]多个button或div的点击事件关联同一个方法时如何区分
多个button或div的点击事件关联同一个方法时,如何在响应的方法中区分现在是点击的哪一个元素。var listDataArr = new Array();for (var i = 0 ; i < 20 ; i ++) { listDataArr.push({"title":"标题"+i,"name":"name"+i,"number":"number"+i,"isSelect":"0"});}for (var i = 0 ; i < listDataArr.length原创 2020-12-15 11:12:27 · 2617 阅读 · 0 评论 -
[JS]列表左右摆放固定元素中间区域自适应宽度
示意图JSdocument.body.style.margin = "0px";document.body.style.padding = "0px";document.body.style.overflow = "auto";var navView = document.createElement("div");navView.style.backgroundColor = "blue";navView.style.width = "100%";navView.style.h原创 2020-12-14 18:02:09 · 342 阅读 · 0 评论 -
[JS]技术交底列表
目录示意图index.htmljumpManage.jsjsjd.jsaddInfo.js1、只创建一个html文件时如何实现多个页面的跳转2、多个按钮关联同一个方法时如何区分点击按钮3、弹出筛选视图时下方视图不允许操作示意图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>技术原创 2020-12-08 17:26:30 · 353 阅读 · 0 评论 -
[JS]在JS中调用另一个JS的函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标签</title></head><body> <script src="js/a.js"></script></body></html>a.jsfunction aFunction(.原创 2020-12-07 18:26:16 · 7979 阅读 · 0 评论 -
[JS]根据URL传参展示不同页面
效果跳转管理(enterManage.js)// 返回 web 主机的域名,如:http://127.0.0.1:8080/GANewDemo/index.html?model=home&id=43var url = window.location.href;// 返回当前页面的路径和文件名,如:/GANewDemo/index.htmlvar pathname = window.location.pathname;// 返回 web 主机的端口,如:8080var port原创 2020-12-07 16:21:25 · 1452 阅读 · 0 评论 -
[JS]div根据其中内容自适应宽度和高度
这里以自适应高度为例。先要设定好div的width,不用设置div的height属性。后面只需设置minHeight属性或者干脆minHeight属性也不去设置,再保证div是块级元素或绝对/固定位置的元素,这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight,因为无限制的自适应总会让人担心到时拿到的数据是否合乎规范。minWidth 属性设置或返回元素的最小宽度,属性只在块级元素或绝对/固定位置的元素发挥作用。 le...原创 2020-12-02 10:03:05 · 10077 阅读 · 0 评论 -
[JS]月工作计划列表
效果:日期选择器:https://www.jq22.com/jquery-info13151HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script src="http://www.jq22.com/jquery原创 2020-12-01 18:31:11 · 381 阅读 · 0 评论 -
[JS]导航栏中Button返回按钮
目录默认样式样式调整属性background导航添加的返回按钮默认样式var tempNav = document.createElement("div");tempNav.style.backgroundColor = "#2049a7";tempNav.style.width = "100%";tempNav.style.height = "64px";tempNav.style.position = "sticky";tempNav.style.top = "0px原创 2020-11-30 16:32:31 · 606 阅读 · 0 评论 -
[JS]移动端元素全屏
设置元素全屏,超过容器的内容可滚动屏幕展示。var tempBody = document.getElementsByTagName("body")[0];tempBody.style.margin = "0px";tempBody.style.padding = "0px";var baseDiv = document.createElement("div");baseDiv.style.width = "100%";baseDiv.style.height = "100%";base原创 2020-11-30 15:24:14 · 1041 阅读 · 0 评论 -
[JS]简单登录页
效果图// 登录var tempBody = document.getElementsByTagName("body")[0];var titleLab = document.createElement("p");titleLab.innerText = "登录";titleLab.style.backgroundColor = "red";titleLab.style.display = "block";titleLab.style.textAlign = "center";tem原创 2020-11-30 12:02:26 · 297 阅读 · 0 评论 -
[JS]prototype(原型对象)
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法使用 prototype 属性就可以给对象的构造函数添加新的属性和方法function Dog(name,age,bodyType) { this.name = name; this.age = age; this.bodyType = bodyType;}var tempDog = new Dog("小花","2","小型");console.log(tempDog.nam原创 2020-11-27 16:19:15 · 307 阅读 · 0 评论 -
[JS]Math对象
目录属性方法例.Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。 属性 描述 E 返回算术常量 e,即自然对数的底数(约等于2.718)。 LN2 返回 2 的自然对数(约等于0.693) LN10 返回 10 的自然对数(约等于2.302 LOG2E 返回以 2 为底的 e 的对数(约等于 1.4426950408889634) LOG1原创 2020-11-26 18:15:18 · 226 阅读 · 0 评论 -
[JS]Boolean对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).属性 描述 constructor 返回对创建此对象的 Boolean 函数的引用 prototype 使您有能力向对象添加属性和方法 方法 描述 toString() 把布尔值转换为字符串并返回结果 valueOf() 返回 Boolean 对象的原始值 常见这些对象转为Boolean后是true还是..原创 2020-11-26 17:07:43 · 330 阅读 · 0 评论 -
[JS]Array对象
Array属性 描述 constructor 返回创建数组对象的原型函数 length 设置或返回数组元素的个数 prototype 允许你向数组对象添加属性或方法 Array方法 描述 concat() 连接两个或更多的数组并返回结果 copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中 entries() 返回数组的可迭代对象 every() ...原创 2020-11-26 12:01:02 · 295 阅读 · 0 评论 -
[JS]Date对象
Date 对象用于处理日期与时间,对象创建方法: new Date()。 Date对象属性 描述 constructor 返回对创建此对象的 Date 函数的引用 prototype 使您有能力向对象添加属性和方法 Date对象方法 描述 getFullYear() 从Date对象以四位数字返回年份 getMonth() 从Date对象返回月份 getDate() 从Date对.原创 2020-11-25 18:29:58 · 233 阅读 · 0 评论 -
[JS]String对象
String 对象用于处理文本(字符串),对象创建方法: new String()。 String对象属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许您向对象添加属性和方法 例. var tempStr = "hello word"; console.log(tempStr.length); // 输出:10 console.log(tempStr.cons原创 2020-11-25 16:18:43 · 260 阅读 · 0 评论 -
[JS]Number对象
Number 对象是原始数值的包装对象,创建方式 new Number()。属性 描述 constructor 返回对创建此对象的 Number 函数的引用 MAX_VALUE 可表示的最大的数 MIN_VALUE 可表示的最小的数 NEGATIVE_INFINITY 负无穷大,溢出时返回该值。 POSITIVE_INFINITY 正无穷大,溢出时返回该值。 NaN 非数字值 prototype 允许您可以向对象添加属性和方法原创 2020-11-24 18:30:13 · 346 阅读 · 0 评论 -
[JS]计时
setInterval() 间隔指定的毫秒(1000 毫秒等于一秒)数不停地执行指定的代码clearInterval() 用于停止 setInterval() 方法执行的函数代码var interval;function startIntervalAction (sender) { if (interval == null) { interval = setInterval(printAction,1000); }}function printAction()原创 2020-11-24 17:02:13 · 343 阅读 · 0 评论 -
[JS]弹窗
alert()alert() 方法用于显示带有一条指定消息和一个 “确认” 按钮的警告框。alert ("请输入名称");样式:confirm()confirm()方法用于显示一个带有指定消息和“确认”及“取消”按钮的对话框var f = confirm("确定要删除么?");if (f == true) { alert("true");} else { alert("false");}样式:prompt()prompt()方法用于显示可提示用原创 2020-11-24 12:01:00 · 296 阅读 · 0 评论 -
[JS]window对象
目录Window 对象window属性document属性document方法window方法Window 对象所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。HTML DOM 的 document 也是 window 对象的属性之一。 window属性 描述 innerWidth 浏览器窗口的内部宽度(包括滚动条).原创 2020-11-23 17:46:33 · 422 阅读 · 1 评论 -
[JS]事件
事件 描述 onload onload 事件会在页面或图像加载完成后立即发生。 onload 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 onunload onunload 事件在用户退出页面时发生。 onunload 发生于当用户离开页面时发生的事件(通过点击一个连接,提交表单,关闭浏览器窗口等等。) 注意: onunload 事件同样触发了页面载入事件(...原创 2020-11-23 11:03:13 · 304 阅读 · 0 评论 -
[JS]闭包
JavaScript中变量可以是局部变量或全局变量,若需要声明私有变量就可以用到闭包。闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。var counterAdd = (function () { var tempNum = 0; console.log("路过一次"); return function plus() { tempNum = tempNum + 1; console.log(t原创 2020-11-19 18:03:25 · 241 阅读 · 0 评论 -
[JS]网络请求
异步AJAXAJAX指的是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX不是新的编程语言,而是一种使用现有标准的新方法。它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。var requestURL = "https://search.heweather.net/top?group=cn&key=447d7b4d0f074982910f76250d55e4e0&number=.原创 2020-11-19 15:19:56 · 530 阅读 · 0 评论 -
[JS]JSON字符串与JS对象的转换
JSON字符串转换为JavaScript对象使用JavaScript内置函数JSON.parse()将字符串转换为JavaScript对象// JSON字符串var text = '{"code":"1000","msg":"成功","data":[{"name":"张三","age":"20"},{"name":"李四","age":"30"},{"name":"王五","age":"25"}]}';console.log(typeof text); // 输出:stringconsol原创 2020-11-19 11:19:48 · 6978 阅读 · 0 评论 -
[JS]var、let与const比较
var 声明变量在函数外声明的变量作用域是全局变量,在函数内用var声明的变量是局部变量,在函数内不用var声明的变量是全局变量。在块级作用域中用var声明的变量,在作用域外也能访问。{ var name = "张三";}console.log(name); // 输出:张三let 声明的变量只在let命令所在的代码块内有效。变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。{ let name = "张三";}console.l...原创 2020-11-18 18:31:05 · 227 阅读 · 0 评论 -
[JS]this关键字以及call()、apply()、bind()比较
在JS中函数也是对象有方法,apply()和call()就是函数对象的方法。他们允许切换函数执行时this绑定的对象。先看一下正常情况下this的绑定对象情况例一var postcode = "400000";function lookPostcode () { console.log(this.postcode); // this指向window}lookPostcode(); // 输出:400000例二var province = "重庆市";var city原创 2020-11-18 18:10:44 · 302 阅读 · 0 评论 -
[JS]正则表达式
正则表达式是由一个字符序列形成的搜索模式,可以是一个简单的字符或一个更复杂的模式。可以用这个搜索模式来描述你要查询的内容,用来搜索或进行文本替换操作。语法:/正则表达式主体/修饰符(可选)在 JavaScript 中,正则表达式通常用于如下两个字符串方法。search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。var str = "my name is zhangshan,zhangshan is very strong.".原创 2020-11-17 18:18:15 · 943 阅读 · 0 评论 -
[JS]异常处理
try 语句允许我们定义在执行时进行错误测试的代码块catch 语句允许我们定义当 try 代码块发生错误时所执行的代码块 语句 try 和 catch 成对出现finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块throw 语句允许我们创建自定义错误try { // 异常抛出 var b = 10; var c = a...原创 2020-11-17 10:56:27 · 153 阅读 · 0 评论