![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端
文章平均质量分 94
html、css、javascript
酒茶白开水
这个作者很懒,什么都没留下…
展开
-
React一基础
React 是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来。声明式——只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI基于组件——组件时React最重要的内容,组件表示页面中的部分内容,组合、复用多个组件,可以实现完整的页面功能学习一次,随处使用——使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用。原创 2024-07-15 15:00:38 · 999 阅读 · 0 评论 -
Vue2 基础十Vuex
父组件向子组件传值,是以属性的形式绑定值到子组件(v-bind),然后子组件用属性props接收。子组件向父组件传值,子组件用 $emit() 自定义事件,父组件用v-on监听子组件的事件。兄弟组件的传值,通过事件中心传递数据,提供事件中心,传递数据方通过一个事件触发hub.$emit(方法名,传递的数据),接收数据方通过在钩子中 触发hub.$on(方法名, 传递的数据)。Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享。原创 2024-07-09 10:42:41 · 435 阅读 · 0 评论 -
Vue2 基础九电商后台管理项目——下
在 vue.config.js 导出的配置对象中,新增 configureWebpack 或 chainWebpack 节点,来自定义 webpack 的打包配置。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即 src/main.js)。至此运行 build 打包,得到的目标文件中确实没有 console 日志输出,但是打包日志中依然有警告,若想消除此条警告可以在。原创 2024-07-03 14:32:46 · 650 阅读 · 0 评论 -
Vue2 基础八电商后台管理项目——中
5、添加商品,完成添加商品的操作,在添加商品之前,为了避免goods_cat数组转换字符串之后导致级联选择器报错需要打开vue控制条,点击依赖,安装lodash,把addForm进行深拷贝。2、展示信息,展示商品参数信息、商品属性信息,在商品参数信息展示中使用的el-checkbox,el-checkbox-group组件,打开element.js引入组件并注册组件。5、完成添加分类,添加级联菜单显示父级分类。3、添加商品,添加编程式导航,在List.vue中添加编程式导航,并创建添加商品路由组件及规则。原创 2024-06-28 16:35:21 · 751 阅读 · 0 评论 -
Vue2 基础七电商后台管理项目——上
当在输入框中输入内容并点击搜索之后,会按照搜索关键字搜索,希望能够提供一个X删除搜索关键字并重新获取所有的用户列表数据,只需要给文本框添加clearable属性并添加clear事件,在clear事件中重新请求数据即可。在数据中添加一个iconsObj,然后将图标类名进行数据绑定,绑定iconsObj中的数据。1、显示数据,在data中添加一个rolesList数据,在methods中提供一个getRolesList方法发送请求获取权限列表数据,在created中调用这个方法获取数据。原创 2024-06-28 16:31:39 · 908 阅读 · 0 评论 -
Vue2 基础五路由
其中"用户管理"组件展示的效果如上图所示,在用户管理区域中的详情链接也是可以点击的,点击之后将会显示用户详情信息,并在详情页实现后退功能。)是 Vue.js 官方的路由管理器。路由重定向指的是用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面;1、props的值为布尔类型:props 被设置为 true,route.params 将会被设置为组件属性,使用 props 接收路由参数。前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系。原创 2024-05-20 08:00:11 · 948 阅读 · 0 评论 -
Vue2 基础四前后端交互
JavaScript的执行环境是单线程,常见的异步调用:定时任务、ajax、事件函数。多次异步调用的结果顺序不确定,异步调用结果如果存在依赖需要嵌套。Promise 是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。Restful 形式的 URL HTTP请求方式:GET 查询、POST 添加、PUT 修改、DELETE 删除。接口调用方式:原生ajax、基于jQuery的ajax、fetch、axios。原创 2024-04-18 11:10:11 · 1115 阅读 · 0 评论 -
Vue2 基础三组件化开发
组件 (Component) 是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。原创 2024-03-18 18:00:25 · 488 阅读 · 0 评论 -
Vue2 基础二常用特性
当内置指令不能满足特殊的需求时,Vue允许我们自定义指令。binding 为自定义的函数形参,通过自定义属性传递过来的值存在 binding.value 里面。局部指令,需要定义在 directives 的选项,用法和全局用法一样;局部指令只能在当前组件里面使用;当全局指令和局部指令同名时以局部指令为准。<h2>自定义指令</h2><h3>自定义全局指令</h3><h3>自定义局部指令</h3></div><script>el.focus();});});data: {},原创 2024-03-08 16:13:02 · 641 阅读 · 0 评论 -
Vue2 基础一指令
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,。原创 2024-03-08 16:06:26 · 736 阅读 · 0 评论 -
前后端交互—使用自己的服务器开发项目
由于使用VSCode访问开发的项目页面使用的是 file 协议,file 协议在开发当中会有很多的问题,通常需要 http 协议来访问开发的 html 文件,更换裁剪的图片,首先拿到用户选择的文件;然后根据选择的文件,创建一个对应的 URL 地址;中的子页面,如果想要调用父页面中的属性、方法,使用 window.parent 即可(但是必须http协议中打开)。导入 layui 的 js 文件,为需要验证的表单项添加 lay-verify 属性,同时指定具体的校验规则即可。原创 2024-01-26 16:19:10 · 835 阅读 · 0 评论 -
前后端交互—开发一个完整的服务器
因为在处理函数中,需要多次调用 res.send() 向客户端响应 处理失败 的结果,为了简化代码, 可以手动封装一个 res.cc() 函数。的形式对数据合法性进行验证,效率低下、出错率高、维护性差。因此, 推荐使用 第三方数据验证模块 ,来降低出错率、提高验证的效率与可维护性, 让后端程序员把更多的精力放在核心业务逻辑的处理上。在实际开发中,前后端都需要对表单的数据进行合法性的验证,而且, 后端做为数据合法性验证的最后 一个关口 ,在拦截非法数据方面,起到了至关重要的作用。原创 2023-12-16 16:01:50 · 189 阅读 · 0 评论 -
前后端交互—数据库与身份认证
客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的 Cookie,客户端会自动将 Cookie 保存在浏览器中。随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的 Cookie,通过请求头的形式发送给 服务器,服务器即可验明客户端的身份。HTTP 协议的无状态性,指的是客户端的每次 HTTP 请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次 HTTP 请求的状态。用户的信息通过 Token 字符串的形式,保存在客户端浏览器中。原创 2023-12-06 14:28:19 · 948 阅读 · 0 评论 -
前后端交互—Express
模拟一个类似于 express.urlencoded 这样的中间件,来解析 POST 提交到服务器的表单数据。定义中间件监听req的data事件,在中间件中,需要监听 req 对象的 data 事件,来获取客户端发送到服务器的数据。如果数据量比较大,无法一次性发送完毕,则客户端会把数据切割后,分批发送到服务器。所以 data 事件可能会触 发多次,每一次触发 data 事件时,获取到数据只是完整数据的一部分,需要手动对接收到的数据进行拼接。原创 2023-11-07 17:23:22 · 192 阅读 · 0 评论 -
前后端交互—模块化
内置模块是由 Node.js 官方提供的模块,内置模块的加载优先级最高。例如,require(‘fs’) 始终返回内置的 fs 模块,即使在 node_modules 目录下有名字相同的包也叫做 fs。使用 require() 加载自定义模块时,必须指定以 ./ 或 …/ 开头的路径标识符。在加载自定义模块时,如果没有指定 ./ 或 …/ 这样的路径标识符,则 node 会把它当作内置模块或第三方模块进行加载。原创 2023-11-03 17:33:27 · 176 阅读 · 0 评论 -
前后端交互—Node.js初识
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 的官网地址: https://nodejs.org/zh-cn/Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API。基于 Express 框架(http://www.expressjs.com.cn/),可以快速构建 Web 应用基于 Electron 框架(https://electronjs.org/),可以构建跨平台的桌面应用。原创 2023-10-30 16:48:37 · 147 阅读 · 0 评论 -
前后端交互—跨域与HTTP
jQuery 提供的 $.ajax() 函数,除了可以发起真正的 Ajax 数据请求之外,还能够发起 JSONP 数据请求,默认情况下,使用 jQuery 发起 JSONP 请求,会自动携带一个 callback=jQueryxxx 的参数,jQueryxxx 是随机生成的一个 回调函数名称。HTTP 请求方法,属于 HTTP 协议中的一部分,请求方法的作用是:用来表明要对服务器上的资源执行的操作。标签的 src 属性,请求跨域的数据接口,并通过函数调用的形式, 接收跨域接口响应回来的数据。原创 2023-10-23 18:26:38 · 692 阅读 · 0 评论 -
JavaScript ES6语法
此题的关键点在于每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下的i值.剩余参数语法允许将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。它类似于数组,但是成员的值都是唯一的,没有重复的值。此题的关键点在于变量i是全局的,函数执行时输出的都是全局作用域下的i值。原创 2023-10-12 14:49:43 · 91 阅读 · 0 评论 -
JavaScript 正则表达式
正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript 正则表达式完成表单验证。正则表达式的特点。原创 2023-10-11 20:54:41 · 511 阅读 · 0 评论 -
JavaScript 函数进阶
方式1 函数声明方式 function 关键字 (命名函数)方式2 函数表达式(匿名函数)方式3 new Function()var fn = new Function('参数1','参数2'..., '函数体')Function 里面参数都必须是字符串格式第三种方式执行效率低,也不方便书写,因此较少使用所有函数都是 Function 的实例(对象)函数也属于对象var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);原创 2023-10-10 15:36:08 · 71 阅读 · 0 评论 -
Web 基于ECharts数据可视化
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表,且可定制。折线图柱状图散点图饼图K线图社区就是一些,活跃的echart使用者,交流和贡献定制好的图表的地方。原创 2023-09-30 11:43:25 · 884 阅读 · 0 评论 -
Web jQuery—事件与其他
本页面内容刷新页面不会丢失。文本框里面输入内容,按下回车,就可以生成待办事项。点击待办事项复选框,就可以把当前数据添加到已完成事项里面。点击已完成事项复选框,就可以把当前数据添加到待办事项里面。点击事项后面圆圈,可以删除该条事项。原创 2023-09-13 19:41:40 · 135 阅读 · 0 评论 -
Web jQuery—属性、元素、尺寸和位置
用户自己给元素添加的属性,我们称为自定义属性。比如给 div 添加 index =“1”。语法获取属性语法attr('属性') // 类似原生 getAttribute()设置属性语法attr('属性', '属性值') // 类似原生 setAttribute()注意:attr() 除了普通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)原创 2023-09-11 14:55:20 · 237 阅读 · 0 评论 -
Web jQuery—选择器、样式和效果
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。原创 2023-09-07 17:40:47 · 404 阅读 · 0 评论 -
Web API—移动端端网页特效
移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touchmove手指在一个 DOM 元素上滑动时触发touchend。原创 2023-09-05 10:03:52 · 224 阅读 · 0 评论 -
Web AP—PC端网页特效
三大系列大小对比作用返回自身包括padding,边框、内容区的宽度,返回数值不带单位返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位返回白身实际的完度,不含边框,返回数值不带单位offset系列 经常用于获得元素位置 offsetLeft offsetTopclient经常用于获取元素大小 clientWidth clientHeightscroll 经常用于获取滚动距离scrollTop scrollLeft。原创 2023-08-31 15:30:36 · 460 阅读 · 0 评论 -
Web API—BOM 浏览器对象模型
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this 的最终指向的是那个调用它的对象。在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。异步任务,JS 的异步是通过回调函数实现的。原创 2023-08-21 16:56:13 · 285 阅读 · 0 评论 -
Web API—事件高级
以上案例:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触 发指定的事件时,指定的回调函数就会被执行,点击每个 li 都会弹出对话框,以前需要给每个 li 注册事件,是非常辛苦的,而且访问 DOM 的次数越多,这就 会延长整个页面的交互就绪时间。原创 2023-08-16 17:29:57 · 407 阅读 · 0 评论 -
Web API一DOM操作
element.属性 获取属性值。获取内置属性值(元素本身自带的属性)。element.getAttribute(‘属性’)。主要获得自定义的属性 (标准) 程序员自定义的属性。element.属性 = ‘值’ 设置内置属性值。element.setAttribute(‘属性’, ‘值’);element.removeAttribute(‘属性’);原创 2023-08-01 14:34:56 · 187 阅读 · 0 评论 -
JavaScript 基础
内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是。原创 2023-08-01 14:27:04 · 108 阅读 · 0 评论 -
移动web二 响应式开发
Bootstrap 里面 container 宽度是固定的,但是不同屏幕下,container的宽度度不同,再把container划分为 12等份。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。列排序,通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而达到适配不同设备的目的。原创 2023-05-04 23:28:24 · 250 阅读 · 0 评论 -
移动web一 屏幕适配
默认 cssrem 插件将16px转换为1rem,这在绝大部分情况下是不能满足开发要求的(比如按照750的设计稿开发,由于flexible.js将屏幕分成10等分,也就是说1rem等于屏幕的十分之一,那么就是75px)。它在CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS 的编写,并且降低了CSS 的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。原理,就是直接在link中判断设备的尺寸,然后引用不同的 css 文件。原创 2023-05-04 23:27:16 · 1051 阅读 · 0 评论 -
HTML基础
HTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容 与 之间的文本描述网页, 与 之间的文本是可见的页面内容, 与 > 之间的文本被显示为标题, 与 之间的文本被显示为段落:基础HTML 标题(Heading)是通过等标签进行定义的。HTML 段落是通过标签进行定义的。HTML 链接是通过标签进行定义的,在 href原创 2022-06-01 10:04:23 · 557 阅读 · 0 评论