
web前端
文章平均质量分 57
牛仔不当马仔
这个作者很懒,什么都没留下…
展开
-
使用vue-monaco-editor遇到的坑--
编辑器重复加载上次编辑器中的内容,不会被新的内容替代直接上代码给MonacoEditor加上属性key <MonacoEditor width="100%" height="537" :key="randomkey" language="html" theme="vs-dark" :code="code" > </MonacoEditor>每次重新给c原创 2021-11-30 17:06:25 · 2966 阅读 · 1 评论 -
前端面试宝典总结(三)(css)(搬自牛客)
css盒子模型简介:就是用来装页面上的元素的矩形区域,封装周围的html元素,它包括边距、边框、填充和实际内容两种盒子模型的主要区别就是width和height包含的区域,标准盒子模型包含的范围是content,而IE盒子模型包含的范围是content+padding+borderbox-sizing:content-box/border-box/padding-box,就是width包含的内容,padding-box就是content+paddinglink标签和@import的区别link属于原创 2021-09-30 22:14:03 · 192 阅读 · 0 评论 -
前端面试宝典总结(二)(搬自牛客)
前端面试宝典总结(来源牛客)介绍知道的htpp状态码介绍知道的htpp状态码100 Continue – 继续。客户端应继续请求原创 2021-09-30 21:35:00 · 444 阅读 · 0 评论 -
前端面试宝典总结(一)(搬自牛客)
前端面试宝典总结(来源牛客)说一下http和https的区别http和https的基本概念http和https的区别https协议的工作原理说一下http和https的区别http和https的基本概念http:超文本传输协议,是互联网上最为广泛的一种传输协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,网络传输减少https:是以安全为目标的http协议,,简单讲就是http的安全版,在http下加入ssl层,htt原创 2021-09-26 19:36:54 · 1448 阅读 · 0 评论 -
React路由基础
React路由路由使用步骤编程式导航路由使用步骤安装npm i react-router-dom -D引入并使用:// 1.引入路由import { BrowserRouter as Router, Route, Link } from 'react-router-dom'class Demo extends React.Component { render() { return ( // 2.Router包裹整个应用原创 2021-08-22 13:09:26 · 146 阅读 · 0 评论 -
关于React中纯组件PureComponent的注意点
关于React中纯组件PureComponent的注意点1.继承的类修改为React.PureComponent的话,其内部会已经封装好了shouldComponentUpdate这个钩子函数2.会自己判断需不需要重新渲染元素注意:1.纯组件React.PureComponent内部shouldComponentUpdate的对比方法是浅层对比2.对于引用类型来说,浅层对比只会比较引用类型的指向地址3.所以,在修改对象中属性的值时,我们应该创建一个新的数组或者对象,不要直接修改原数组对象4.原创 2021-08-21 23:17:13 · 302 阅读 · 0 评论 -
React(render-props和高阶组件)
render-props和高阶组件render-props高阶组件render-props组件复用(监听鼠标移动并获取鼠标位置)class Mouse extends React.Component { // 设置状态 state = { x:0, y:0 } // render render(){ // 1.return this.props.render(this.state) return this.props.children(this.st原创 2021-08-21 19:59:45 · 148 阅读 · 0 评论 -
React进阶学习
React进阶学习组件通讯props组件通讯简单来说,就是组件之间共享数据props作用:接收传递给组件的数据import React from 'react'import ReactDOM from 'react-dom';// 创建一个组件class Prop extends React.Component { constructor(props){ super(props) } render() { console.log(this.props);原创 2021-08-21 14:51:27 · 103 阅读 · 0 评论 -
React中事件绑定 事件函数this指向问题
React中事件绑定 事件函数this指向问题// 引入react模块import react from "react";// 创建一个模块class Hello extends react.Component { // 解决this指向问题第二种解决办法,通过es5中的bind方法,将事件处理程序中的this与组件实例绑定在一起 /* constructor(){ super() this.add = this.add.bind(this);原创 2021-08-20 16:27:28 · 178 阅读 · 0 评论 -
webpack5区分生产环境打包文件(通过环境变量区分)
webpack5区分生产环境打包文件package.json{ "name": "webpeck", "version": "1.0.0", "description": "", "main": "./index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDepend原创 2021-08-19 15:31:20 · 628 阅读 · 0 评论 -
Webpack5基础
Webpack5五个核心概念安装配置webpack配置文件开发服务器devServer添加css样式前缀五个核心概念Entry:指示 Webpack以那个文件为入口起点开始打包,分析构建内部依赖图Output:指示Webpack打包后的资源bundles输出到哪里,以及如何命名Loader:让Webpack能够去处理那些非js文件(Webpack本身只理解js)Plugins:插件(plugins)的范围包括:打包、优化,重新定义环境中的变量Mode:两种模式:development(开发模原创 2021-08-19 14:25:53 · 184 阅读 · 0 评论 -
跨域问题解决办法nodejs
Ajax跨域问题解决办法nodejsjsonpcors后端设置cros资源共享设置允许跨域的域名,*代表允许任意域名跨域//路由上面---配置一个全局的资源共享router.al1("*", function (req, res, next) { //设置允许跨域的域名,*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin", "*"); //允许的header类型 res.header("Access-Contro1-Allow原创 2021-08-17 22:35:39 · 149 阅读 · 0 评论 -
Node.js入门
nodeJs入门简介node实践简介实现目标:javascript可以操作服务器,让js成为php,python,java等服务端语言平起平坐的语言特点:解决服务器高性能瓶颈问题1.单线程2.非阻塞i/o3.事件驱动应用场景:博客、多人聊天室不擅长计算node实践创建服务器// 1.引入http协议,必须得使用require('http')const http = require('http');// 创建一个服务器const server = http.createServer原创 2021-08-17 20:32:20 · 240 阅读 · 0 评论 -
ES6-ES11学习记录
ES6-ES11学习记录ES6letconst变量解构赋值模板字符串``简化对象写法箭头函数函数参数的默认值rest参数扩展运算符Symbol迭代器ES6let1.使用方法和var一样,但是变量不能被重复声明2.块级作用域2.1声明的变量只在所在代码块中生效(比如for循环中的i用let声明,那么i只在let所在代码片段小括号中生效)3.不存在变量提升4.不影响作用域链效果const1.用于声明常量(一定要赋初始值)const a = 100;2.常量的值不能被修改3.块级作用域原创 2021-08-17 20:02:06 · 640 阅读 · 0 评论 -
微信小程序wx.request使用post向后端传递数组,后端无法接收到数据的解决
wx.request({ url: 'http://127.0.0.1:8090/inStorkAPI/php/add_order_del_multi_carts.php', data: { "cartIds":cartIdarr }, metho...原创 2021-08-06 13:39:00 · 3487 阅读 · 0 评论 -
微信小程序创建订单号思路(附将带其它符号字符串转换成纯数字字符串)
// 1获取当前时间 let time = util.formatTime(new Date()); // 2创建订单号 // 拼接时间字符和电话号码 // let orderNumber = time + telNumber; // 利用正则表达式,将原有字符串转化为只有数字 ...原创 2021-08-06 11:43:12 · 2512 阅读 · 0 评论 -
电商小程序购物车跳转到支付页面数据传递(利用wx.setStorage和wx.getStorage)
购物车点击结算 const {userName, address, telNumber, buyList, checkedNum, checkedPrice} = this.data wx.setStorage({ key:"payInfo", data:{ userName, address, telNumber,原创 2021-08-05 14:23:11 · 971 阅读 · 0 评论 -
微信小程序(获取用户收货地址(包含获取用户设置、引导用户打开权限))
getAddress(){ // 获取用户设置 wx.getSetting({ success: (result1) => { let res = result1.authSetting["scope.address"]; //判断是否授权 if(res === true || res === undefined){ //获取用户收货地址 wx.chooseAddress({原创 2021-08-01 22:35:20 · 621 阅读 · 0 评论 -
微信小程序 访问数据api接口(get请求和获取父页面传递参数并向接口传参获取数据)
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({ url: 'http://127.0.0.1:8090/inStorkAPI/php/goods_detail.php', data: { //options.goods_id为父页面传递过来的参数goods_id为接口中接收参数的参数名 ...原创 2021-08-01 22:29:34 · 2661 阅读 · 0 评论 -
php获取mysql数据库转换成json格式Xdebug输出 <pre class=‘xdebug-var-dump‘ dir=‘ltr‘>问题
原因:启用xdebug调试后,var_dump()和tp中的dump()、halt()输出时,会自动加上pre标签我这里用的是wampsever,需要修改php的配置文件php.ini解决方法:1、关闭XDebug调试,该方法不推荐。2、在php.ini中的[Xdebug]选项中增加设置项,关闭xdebug下var_dump()的重载。修改Xdebug中的配置文件,如果没有就添加以下代码对于xdebug.overload_var_dump,当设置为0时,关闭var_dump()重载,原样输出原创 2021-07-27 21:18:07 · 330 阅读 · 0 评论 -
微信小程序通过setData设置data数组中某一对象的属性值
这里我做的是一个电商类的微信小程序,需要加减购物车中商品的数量WXML:<!-- 减按钮 --><view class="subNum" bindtap="subNum" data-Num="{{item.num}}" data-index="{{index}}">-</view>js:buyList:[ { id:0, url:"", text:"", price原创 2021-07-17 12:43:04 · 959 阅读 · 0 评论 -
微信小程序学习记录
微信小程序学习记录app.json配置(全局配置文件)pageswindowtabbar(导航栏)page.json配置(页面配置文件)模板语法事件绑定WXSS样式导入选择器组件imagesswiper(轮播图组件)navigatar(导航组件)buttonicon(字体图标)radio(单选框)checkbox(复选框)app.json配置(全局配置文件)pages其中存放页面,默认有一个主页面和一个日志页面 "pages/index/index", "pages/logs/logs原创 2021-07-15 13:53:36 · 622 阅读 · 0 评论 -
手撕jQuery源码步骤
手撕jQuery框架步骤1.理解掌握js中面向对象原创 2021-07-11 20:59:46 · 105 阅读 · 0 评论 -
js监听DOM元素加载的优化与解析
js监听DOM元素加载的优化与解析步骤1: //onload会等到dom元素和相关资源加载完毕才会执行 window.onload = function(ev){ var demo = document.querySelectorAll("div"); console.log(1); console.log(demo); } // 通过事件监听执行 // DOMContentLoaded事件只会等到dom元素加载完毕就会执行 document.addEventLi原创 2021-07-11 13:29:29 · 2393 阅读 · 0 评论 -
Vue学习记录(三)
Vue学习记录(三)Vuexstate修改共享数据Vuex定义:Vuex是Vue配套的公共数据管理工具,我们可以将共享的数据保存到Vuex中,方便整个程序中的任何组件都可以获取和修改Vuex中保存的公共数据state爷孙三代使用vuex轻松获取同一数据,不需要靠传递1.引入vuex<script src="js/vuex.js" type="text/javascript" charset="utf-8"></script>2.创建一个Vuex对象 const原创 2021-07-09 18:18:53 · 166 阅读 · 0 评论 -
Vue学习记录(二)
Vue学习记录(二)过渡动画过渡动画1.通过transition双标签嵌套想要执行动画的部分2.通过enter(进入前),enter-to(进入后),enter-to-active(进入过程)和leave(离开前),leave-to(离开后),leave-to-active(离开过程)的类名方式在css中添加样式,就可以实现动态的动画实操代码:<!DOCTYPE html><html> <head> <style type="text/css"&原创 2021-07-08 22:02:58 · 208 阅读 · 0 评论 -
Vue学习记录(一)
Vue本地应用网络应用本地应用v-textv-htmlv-on或者@v-ifv-mind或者:v-showv-forv-moddle网络应用axios:先导入,再引用axios.get("url").then(function(response){ }, funcition(err){})原创 2021-07-07 15:53:24 · 128 阅读 · 0 评论 -
jQuery中的Cookie和hash
jQuery中的Cookie和hashCookieCookie:会话跟踪技术(客户端)session:会话跟踪技术(服务端)Cookie作用:将网页中的数据保存到浏览器当中使用:window.onload = function(){ document.cookie = "name=yxy;"; alert(document.cookie); }Cookie生命周期:cookie生命周期默认情况下是一次会话(浏览器被关闭代表生命周期结束)cookie设置过期时间(通过e原创 2021-07-06 01:33:01 · 307 阅读 · 0 评论 -
Ajax后端返回前端的数据格式
AjaxXMLJSON后端返回前端的数据格式有以下两种:XMLJSON原创 2021-07-05 20:37:36 · 1005 阅读 · 0 评论 -
JavaScript同步和异步问题
同步和异步概念同步同步就是后一个任务需要等待前一个任务执行完成,才能执行,执行顺序和任务的排列顺序一样异步异步逻辑不会阻塞主逻辑代码,异步逻辑与主逻辑相互独立,主逻辑不需要等待异步逻辑执行完成...原创 2021-07-05 16:51:18 · 110 阅读 · 0 评论 -
Ajax(get和post的请求用原生js打包封装)
html部分:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/ajax_post_ask.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">原创 2021-07-04 21:57:05 · 346 阅读 · 0 评论 -
ajax封装get的基本方法(附流程)
Ajax原创 2021-07-04 21:01:38 · 690 阅读 · 0 评论 -
jQuery(一)
jQuery$常用方法$通过$符号就可以获取对象,获取实操如下var demo = $('div');console.log(demo);注:jquery只能使用jquery方法,js对象不能使用jquery方法jq对象是类数组对象,转成js可以加索引值jq支持css2.1和css3的选择器常用方法size():length属性,通过$()获取到的jquery也有lengthsize()表示元素的个数css():表示计算后的css样式,返回的是字符串类型,如果想让得到后的值参原创 2021-06-30 19:11:45 · 117 阅读 · 0 评论 -
jQuery(二)
jQuery(二)效果显示隐藏动画show(),hide(),toggle()对联广告展开和收起动画slideDown(),slideUp(),slideToggle()折叠菜单扩充(.stop()方法)效果显示隐藏动画show(),hide(),toggle()显示、隐藏、切换<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css">原创 2021-07-02 23:30:01 · 587 阅读 · 2 评论 -
学习JavaScript的笔记(三)
学习JavaScript的笔记(三)正则表达式数字方法字符串方法字符串大小写转换与字符串截取正则方法正则的字符串方法正则表达式字符集与边界符边界符量词或与分组非捕获组预定义类定时器DOMdocument属性操作DOM事件批量处理正则表达式在js中,一切数据本质上都是对象,都有各自的属性和操作方法(值类型创建的时候,也是通过对象的方式创建的)数字方法保留两位小数 var i = 11; console.log(i.toFixed(2));注:此时的数据类型已经被转换成了字符串,因为只有原创 2021-06-24 16:05:50 · 419 阅读 · 0 评论 -
学习JavaScript的笔记(二)
学习JavaScript的笔记(一)函数函数参数return模块化编程函数函数定义语法:function 函数名(){},小括号内部时传递参数的调用:函数名()函数参数 //此时a,b都为参数 function pri(a,b){ console.log(a,b); } pri(10,30);arguments:arguments是函数自带属性,是由实参组成的类数组对象例: function demo(a,b){ console.log(argum原创 2021-06-23 13:55:49 · 86 阅读 · 0 评论 -
学习JavaScript的笔记(一)
学习JavaScript的笔记(一)js基础用途基础引入方式行内式内嵌式外链式方法js基础用途数据验证,读写html属性,与浏览器窗口及其内容的交互效果、网页特效、WEB游戏制作,基于node.js技术进行服务器编程基础JavaScript由ECMAsript、DOM、BOM三者组成,是一门弱类型动态的脚本语言引入方式行内式在元素的事件属性中去书写内嵌式在body内部用一对script标签外链式通过外部引用js文件,将引入文件书写head标签内部方法alert()方法表示弹出框、原创 2021-06-20 20:35:04 · 98 阅读 · 0 评论 -
关于HTML的标签记录 二
关于HTML的标签记录 二body超链接的一点补充输入标签表单标签iframe标签frameset和frame`body超链接的一点补充--! target里面的属性值为_blank时另起一页 为_self时刷新此页 --<a href="www.baidu.com" target="_blank"></a> 输入标签--! 单标签<input /> type: text 文本 passwo原创 2021-06-16 18:44:54 · 106 阅读 · 0 评论 -
关于HTML的标签记录(一)
目录1、head2、body2.1 段落文本2.2 p标签css style2.3 部分常用特殊符号2.3 超链接标签以及跳转功能2.4 图片标签2.4 音频以及视频标签2.5 有序列表、无序列表、定义列表1、head// 解析字符类型 <meta charset="utf-8" /> // 搜索关键字 <meta name="keyword" content="......">// 描述 <meta name="description" content=".原创 2021-06-15 22:41:29 · 140 阅读 · 0 评论 -
学习css的笔记
学习css的笔记(一)css的三种引入方式1、行内式2、内嵌式3、链接式4、优先级css三大基本选择器1、标签名选择器2、id选择器3、类选择器4、其他选择器4.1层级选择器4.2属性选择器4.3分组选择器4.4伪类选择器5、盒子模型5.1内边距5.2外边距css的三种引入方式1、行内式通过标签内的style引入(属性名:属性值;属性名:属性值)2、内嵌式将标签内的style抽离出来,在html中的head标签内,通过一对style标签定义样式3、链接式通过link引入css文件,在css文件原创 2021-06-17 16:33:04 · 96 阅读 · 0 评论