- 博客(66)
- 收藏
- 关注
RSS订阅原创 antdPro、umi、配置环境变量，多环境多份配置文件，document.ejs中使用变量
环境，那么现在我们就需要配置这三个环境对应的所需要使用的全局变量（网络请求地址，图片路径之类的），配置完之后就可以通过不同的打包命令来直接打包，而不需要一个个手动去改了。项目要打包部署到不同环境，需要对应不同的api地址和名称，例如后台管理项目中左上角的title和网页title及其他页面中需展示的不同名称。也能访问到，但是项目重新启动的时候config.xx.ts中的变量就是。代表所需使用的全局变量，也可以在这里定义其他需要使用的全局变量。就是刚才我们在config.xx.ts中定义的。
2023-03-14 14:56:28
2127
1
原创 react+node.js+mysql 前后端分离项目 宝塔面板 部署到腾讯云服务器
安装完推荐界面的软件后，软件商店里搜索PM2下载安装，安装完成后打开PM2，切换node版本，并安装后端项目所需依赖（这里node项目用的express）。上传完成后，添加站点，根目录选打包后的前端文件夹（这里是dist），域名这里，域名备案没审核完或没备案，填服务器的ip地址也可以。端口这里，要同时在宝塔和腾讯云两个地方放行（建议把用到的所有端口在这两个地方同时添加了，包括前端、后端、mysql）。开头的请求，直接代理到本地服务器的8088端口（也就是后端接口地址的端口）nginx反向代理，
2022-12-01 13:41:21
2878
2
原创 AntdPro-Simple中使用redux-toolkit及配置持久化存储
AntdPro-Simple：V5.2.0(框架内置Umi版本V3.5.0)配置redux及持久化存储
2022-09-15 10:09:43
1205
1
原创 2021-前段高频面试题整理-兼容/优化/网络篇(持续更新)
文章目录移动端的兼容（安卓和ios）整理的同时自己也复习一下，答案仅供参考。移动端的兼容（安卓和ios）1.怎么判断是安卓还是 ios//获取浏览器的userAgent,并转化为小写var ua = window.navigator.userAgent.toLowerCase();//判断是否是苹果手机，是则是truevar isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);if(isIos){ 做
2021-03-08 12:08:47
326
3
原创 2021-前端高频面试题整理-JavaScript篇（持续更新）
文章目录说一下JS执行机制整理的同时自己也复习一下，答案仅供参考。说一下JS执行机制1.JS是单线程的JS中的代码都是串行的, 前面没有执行完毕后面不能执行2.执行顺序程序运行会从上至下依次执行所有的同步代码在执行的过程中如果遇到异步代码会将异步代码放到事件循环中当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件一旦满足条件就执行满足条件的异步代码3.宏任务和微任务在JS的异步代码中又区分"宏任务(MacroTask)“和"微任务(M
2020-11-20 11:41:00
1235
2
原创 2021-前端高频面试题整理-CSS篇（持续更新）
文章目录清除浮动的几种方式解释css sprites ，如何使用？px、em、rem的区别整理的同时自己也复习一下，答案仅供参考。清除浮动的几种方式1.给父元素设置高度要求浮动元素有确切的高度2.父级div定义overflow:hidden这种方法是通过触发BFC达到清除浮动的目的参考：BFC的触发方式及作用3.利用clear：both在父元素的最底下 添加一个块级标签（p,div等），然后给它添加clear：both 来清除浮动。如果页面浮动布局多，就要增加很多空标签。4.父级使用
2020-11-20 11:40:03
968
原创 2021-前端高频面试题整理-HTML篇（持续更新）
目录1.语义化标签1.语义化标签什么是标签语义化？有什么作用都有哪些标签，都是啥意思块级标签和行内标签的区别如何转换display除了这几个值还有哪些display:none- 让元素隐藏，你可以怎么做？- display:none 和 visibility:hidden的区别- opacity的兼容处理- filter还能做那些事display:flex项目中什么时候用到了flex除了这种方式能居中还有哪些？响应式布局还可以怎么做？都有哪些盒子模型...
2020-11-18 13:24:36
730
2
原创 CSS-盒子水平垂直居中的五大方案
文章目录定位：三种display: flexdisplay: table-cellJS实现让.box在.wrapper中水平垂直居中。HTML代码：<div class="wrapper"> <div class="box"></div></div>定位：三种1. position：absolute 需要知道子盒子的具体宽高2. margin: auto 需要子盒子有宽高，但不需要去考虑它的宽高是多少3. css3新属性transfo
2020-06-11 12:45:18
4157
原创 ES6---Generator函数和async函数
文章目录GeneratorasyncPromise,Generator和async比较参考资料：阮一峰老师的es6Generator基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，执行 Generator 函数会返回一个遍历器对象（Iterator Object）。function* helloGenerator() { yield 'hello'; ...
2020-04-18 18:27:19
279
原创 ES6---Promise的基本用法
文章目录Promise概念基本用法then和catchPromise.all()Promise.race()finally()Promise.allSettled()Promise.any()参考资料：阮一峰老师的es6Promise概念Promise 是异步编程的一种解决方案，可以理解为一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise对象有以下两个特...
2020-04-17 12:25:52
209
原创 ES6---Class的基本用法与继承
参考资料：阮一峰老师的es6基本用法简介JavaScript 语言中，生成实例对象的传统方法是通过构造函数：function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';...
2020-04-16 23:21:40
223
原创 ES6 数组的扩展：数组的扩展运算符，新增方法Array.from()、find()、includes()等
数组的扩展数组的扩展运算符扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3由于扩展运算符可以展开数组，所以它可以替代函数的 apply 方法。// ES5 的写法Math.max.apply(null, [14, 3, 77])// ES6 的写法...
2020-04-16 11:53:25
381
原创 ES6 对象的扩展:属性名和方法简写、对象新增方法、super关键字
参考资料：阮一峰老师的es6对象的扩展属性和方法的简写let obj = { name: 'nan', age, // 等同于 age: age say () { console.log('Hello') }}对象的新增方法Object.is()： 比较两个值是否严格相等Object.assign()： 用于对象的合并，将源对象的所有可枚举属性复制到目标对象...
2020-04-15 19:36:30
941
原创 ES6 字符串的扩展和新增方法，Number的扩展，Set和Map数据结构
set和map数据结构setSet 结构类似数组，但是不会有重复的值。Set结构只能通过 Set() 构造器创建：const s = new Set();Set函数也可以接受一个数组或类数组（具有 iterable 接口的其他数据结构）作为参数，用来初始化。const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]数组...
2020-04-15 14:36:31
208
原创 ES6 函数的扩展：参数默认值，箭头函数，rest参数
参考资料：阮一峰老师的es6参数默认值ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', ''...
2020-04-14 22:38:12
328
原创 ES6 变量的解构赋值，for of循环
for of循环for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for…of循环遍历它的成员。var arr = ['a', 'b', 'c...
2020-04-14 13:53:47
966
原创 ES6 let和const，数据类型symbol，模板字符串
参考资料：阮一峰老师的es6let和constES6 中新增了 let 和 const 来声明变量。let和const声明的变量只在它所在的代码块（块级作用域内）有效。什么是块级作用域: 代码中任何一对{}之间的语句称为一个代码块，代码块中的变量，只能在块内使用 比如: if () {…} else{…}，for () {…}，while () {…}let特点不存在变量提升...
2020-04-14 11:34:46
287
原创 ES5的扩展内容：严格模式，JSON、Object、Arrary扩展方法和bind
严格模式为什么使用严格模式：为了消除JavaScript语法的不合理不严谨之处，减少怪异行为消除代码运行的不安全之处，保证代码安全执行提高编译效率，增加运行速度为未来新版本的JavaScript做好铺垫在全局或函数的第一条语句加上: 'use strict' 即开启严格模式。严格模式内容：变量必须先声明后使用禁止this指向全局对象函数参数不能有同名属性，否则报错不能...
2020-04-13 22:43:32
189
原创 vue笔记 (十六) axios的基本使用
安装使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>使用 npm:$ npm install axios --saveGET 方法axios.get('http://123.207.32.32:8000/home/multidata') .then(res =&g...
2020-04-11 22:02:18
307
原创 vue笔记 (十四) vue-router (4)：导航守卫guard、组件缓存keep-alive
导航守卫导航守卫主要用来监听路由的进入和离开，vue-router 提供了三类守卫方式， 全局设置，路由设置，组件内部设置。全局设置全局前置守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { next()})三个参数解析:to: 即将要进入的目标路由对象from:...
2020-04-03 14:09:09
1409
原创 vue笔记 (十三) vue-router (3):嵌套路由、路由参数传递与获取、$router和$route区别
嵌套路由嵌套路由是一个很常见的功能，比如在 home 页面中，我们希望通过 /home/news 和 /home/message 访问一些内容。一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。路径和组件的关系如下:实现嵌套路由有两个步骤：1.创建对应的子组件，并且在路由映射中配置对应的子路由配置路由：2.在组件内部使用<router-view>标签显示效...
2020-04-03 00:00:49
4015
1
原创 vue笔记 (十二) vue-router(2):router-link属性补充、编程式路由、动态路由、路由懒加载
router-link属性补充在前面的 <router-link> 中，我们只是使用了一个属性:to，用于指定跳转的路径<router-link> 还有一些其他属性：tag:<router-link to="/home" tag="button">首页</router-linktag可以指定 <router-link> 之后渲染成什么...
2020-04-01 23:27:27
441
原创 vue笔记 (十一) vue-router(1):路由概念、发展阶段、vue-router基本使用
路由概念什么是路由路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动 — 维基百科路由器提供了两种机制， 路由和转送：路由是决定数据包从来源到目的地的路径转送将输入端的数据转移到合适的输出端路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表，决定了数据包的指向。发展阶段后端路由阶段早期的网站开发，整个 HTML 页面都是是由服务器来...
2020-04-01 14:04:37
380
原创 vue笔记 (十) vue-cli2和vue-cli3的使用与对比
CLI 是 Command-Line Interface , 翻译为命令行界面, 俗称脚手架。Vue CLI 是一个官方发布的 vue.js 项目脚手架，使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。vue-cli的使用前提，已安装node和webpack。vue-cli2安装$ npm install -g @vue/cli注意:上面安装的是vu...
2020-03-31 19:36:38
476
原创 webpack (二) loader、plugin的使用
loader的使用在之前的实例中，主要是用 webpack 来处理 js 代码，并且 webpack 会自动处理 js 之间相关的依赖。但在开发中往往不仅仅有基本的 js 代码处理，也需要加载 css、图片，也包括一些高级的将 ES6、TypeScript 转成 ES5 代码，将scss、less 转成 css，将 .jsx、.vue 文件转成 js 文件等。对于webpack本身的能力来说...
2020-03-30 19:17:44
193
原创 webpack (一) webpack的基本使用、和grunt/gulp的对比
认识webpack什么是Webpack？官方的解释：At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。我们可以用两个关键词来解释上面这句话：模块化和打包，所谓打包，说白了就是编译；模块化可...
2020-03-28 00:08:28
303
原创 前端模块化开发－发展过程及解决方案
为什么需要模块化JavaScript原始功能在网页开发的早期，js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码很少，直接将代码写在 ...
2020-03-27 12:28:52
154
原创 Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)
slot 翻译为插槽，插槽的目的是让我们原来的设备具备更多的扩展性。vue组件中使用插槽，也是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。vue2.6.0之前用法单个插槽(默认/匿名插槽)在子组件中，使用特殊的元素 就可以为子组件开启一个插槽，该插槽插入什么内容取决于父组件如何使用。具名插槽当子组件的功能复杂时，子组件的插槽可能并非是一个。比...
2020-03-26 22:37:40
776
原创 Vue学习笔记 (八) 父子组件通信
父子组件的传值父传子：通过props向子组件传递数据子传父：通过自定义事件向父组件发送消息父传子props验证1.默认值props: { cmessage: { type: String, default: '默认值', // 默认值 }当默认值类型是数组或对象时，default后面必须是一个函数props: { cmessage: { ...
2020-03-25 23:05:43
134
原创 Vue笔记 (七) 组件化思想
Vue组件化组件化是 Vue.js 中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树：注册组件的基本步骤(了解)Vue.extend()这种写法在Vue2.x以后基本就很少见了，会直接使用语法糖，但内部还是这个原理。全局组件和局部组件当我们通过调用 Vue.component() 注册组件时，组件的注册是全...
2020-03-24 22:15:07
459
原创 Vue笔记 (六) v-model的基本使用及实现原理
v-model的基本使用vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。<div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2></div><script src="../js/vue.js"><...
2020-03-23 16:14:48
306
原创 JavaScript高阶函数filter、map、reduce的使用
filter函数(过滤)filter用于过滤，就是把数组中的每个元素，使用回调函数func进行校验，回调函数func返回一个布尔值，将返回值为 true 的元素放入新数组let array = [1, 2, 4, 6]let newArray = array.filter(item => item < 6)console.log(newArray) // [1, 2, 4]m...
2020-03-23 13:59:13
174
原创 Vue笔记 (五) 阶段性小案例
鼠标点击改变样式如下图，给出一个列表，鼠标点击样式跟着改变。css:.active { color: red;}html：<div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active:index === currentIndex}" ...
2020-03-22 23:06:55
120
原创 Vue笔记 (四) 事件监听v-on、条件判断v-if、v-show、循环遍历v-for
v-on在前端开发中，我们需要经常和用户进行交互，这个时候，就必须监听用户发生的事件，比如点击、拖拽、键盘事件等，在 Vue 中监听事件使用 v-on 指令基本用法<!-- 'add'是在下面定义的方法名 --> <button v-on:click="add">+</button>// ...data: { num: 0},methods...
2020-03-21 23:15:48
3537
原创 Vue笔记 (三) 绑定属性v-bind和计算属性computed
v-bind基本用法v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props值(后期介绍链接)。前面学习的指令主要作用是将值插入到我们模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定，比如：动态绑定 a 元素的 href 属性、动态绑定 img 元素的 src 属性。这时可以使用 v-bind 指令来动态绑定属性<img v-bind:s...
2020-03-20 22:50:05
4175
原创 Vue笔记 (二) Vue的插值操作和简单V指令
插值操作Mustache可以通过Mustache语法(也就是双大括号),将data中的文本数据插入到HTML中：<div class="div"> <!-- 插到标签中 --> <h2>Hello {{name}}</h2> <!-- 使用了两个Mustache--> <h2>{{firstName}} {...
2020-03-20 11:04:03
158
原创 Vue笔记 (一) Vue简介、MVVM、Vue生命周期
Vue简介Vue（读音 /vjuː/，类似于 view）是一个渐进式的框架，什么是渐进式：渐进式意味着你可以将 Vue 作为应用的一部分嵌入其中，带来更丰富的交互体验，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统（比如：Core+Vue-router+Vuex）也可以满足你各种各样的需求Vue 有很多特点和Web开发中常见的高级功能：解耦视图和数据可复...
2020-03-19 14:17:49
215
原创 Javascript Bom概念及常用api
BOM简介JavaScript的实现包括以下3个部分：1.核心（ECMAScript）：描述了JS的语法和基本对象。2.文档对象模型 （DOM）：处理网页内容的方法和接口3.浏览器对象模型（BOM）：与浏览器交互的方法和接口BOM 是 Browser Object Model，浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window，而window对象又具...
2020-03-18 23:28:42
322
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人