
前端
文章平均质量分 81
谭CV
希望未来一年,活在UI里
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【js】ES6进阶学习
1.SymbolSymbol是ES6引入的,继undefind,null,String,Number,Boolean,Object之后的第七种原始数据类型。Symbol变量通过Symbol函数生成,可以传入一个字符串用于描述(主要是方便在控制台打印和遍历识别)symbol.Symbol表示独一无二的值。//由于 Symbol 表示独一无二的值,则使用Symbol()生成的值不存在和别的值相等const s1 = Symbol('s1');const s2 = Symbol('s2');con原创 2021-12-07 11:24:42 · 1119 阅读 · 0 评论 -
mock.js了解学习
mock.js官网1.安装npm i mockjs其他辅助安装npm i json5npm i axios2.语法规范该部分出自b站李炎恢视频,有兴趣可以去看1. Mock.js 的语法规范包括两个部分:数据模板定义规范和数据占位定义规范; 2. 数据模板定义的规范包含 3 个部分:属性名、生成规则和属性值//'属性名|生成规则':属性值'name|rule':value 1.字符串/数值(7种)生成规则 说明 示例 min-max...转载 2021-07-02 10:44:31 · 278 阅读 · 0 评论 -
自动化构建工具-gulp学习
1.gulp安装//全局安装npm install gulp@3.9.1 -g//本地安装npm install gulp@3.9.1//全局及本地都需要进行安装//安装后检测gulp -v2.生成package.json管理gulp依赖//npm进行初始化,生成package.jsonnpm init -y 再在根目录下创建gulpfile.js文件,用于配置gulp任务,并引入gulp://gulpfile.js// gulp定制任务 =>..原创 2021-06-23 17:29:58 · 541 阅读 · 3 评论 -
【js】数据处理
这里收集一下看到的数据处理方法和技巧,以及在实际工作中碰见的。1.copy Array 的6种方法let arr = [1,2,3,4,5,6]; // 解构console.log('[...arr]:',[...arr]);// Array.from()方法console.log('Array.from(arr):',Array.from(arr));// slice方法console.log('arr.slice():',arr.slice());//原创 2021-06-04 17:37:07 · 243 阅读 · 0 评论 -
【css】grid布局学习
grid据说是最强大的css布局方案。兼容性:灵活但兼容不好,就连谷歌浏览器都有部分不兼容:https://www.caniuse.com/?search=gridgrid布局特征:将容器划分为行和列,以产生单元格1.容器 / 项目 / 单元格 / 网格线 / 容器属性采用grid布局的区域,称为容器(container),容器内部采用网格定位的子元素,称为项目(item)正常情况下,n行和m列会产生n*m个单元格(cell),比如3行*3列 = 9个单元格划分网格的线,称..原创 2021-04-06 11:40:32 · 432 阅读 · 0 评论 -
【typescript】记录typescript基本知识的学习
1.typescript特点1.编译型的语言2.强类型的语言3.真正面向对象的语言typescript 就是比javascript 更java 的script2.全局安装npm install -g typescripttips:ts编译成js:tsc demo.ts3.基础数据类型字符串类型let email:string="111@163.com"let msg:string = `my email is ${email}`...原创 2021-04-03 22:42:16 · 340 阅读 · 1 评论 -
【vue3.x】vue3.x基础知识学习
1.vue2.x和vue3.x项目的区别1.1.创建应用实例的方式vue2.x:通过new Vue()创建vue根实例,从同一个vue构造函数创建的每一个根实例共享相同的全局配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ ro.原创 2021-02-27 00:50:52 · 1285 阅读 · 4 评论 -
【vue】jison解决后台返回的long类型数据位数过长的问题
问题:前端接收后端long类型数据超过16位,则会通过补零展示该数据,js自带的json parser无法对该数据进行正确解析,且浏览器上不能正确展示.如下图:可以看到16位数字后面是01.解决方案一 后端进行long转string操作,最为彻底.2.解决方案二 通过jison包在前端将long类型数据转为string类型来使用. 由于前后端交互是通过jsonString,到时候转换后的long类型数据再提交给后端不需要再次进行转换jison...转载 2020-12-23 18:20:37 · 2848 阅读 · 0 评论 -
【vue && vuex】vuex中的数据同步到localStorage和sessionStorage
懒,所以我使用插件。可是,要面对的就是对插件的一知半解。大家都知道vuex中存储的数据在刷新地址栏时,会被销毁,故而vuex不能一直保持状态的存储。其实手写代码去改造这一点是最好的,但我选择插件。使用的是vuex-persistedstate。1.安装插件npm i vuex-persistedstate2.默认使用该插件默认将数据存储到localStorage中。在store/index.js中使用:import createPersistedState fro..原创 2020-11-22 02:15:01 · 2010 阅读 · 3 评论 -
【vue && less】vue使用全局less
我一直以为vue可以是用全局的less,直到自己接触了才知道要通过配置去实现。我可查到的配置还挺坑的。这里就记录一种。该方式我只在vue-cli4及以上使用过1.安装相关包npm i style-resources-loader vue-cli-plugin-style-resources-loader -D2.在vue.config.js中添加以下代码module.exports = { pluginOptions: {//全局使用less 'style-.原创 2020-11-22 01:39:44 · 532 阅读 · 0 评论 -
【vuex学习】vuex基本使用及模块拆分
1.vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式我认为vuex主要分为以下几个模块:state 状态 mutations vuex的methods actions vuex的异步methods getters vuex的状态处理 modules vuex的模块划分 辅助函数 ...map* vuex的映射(方便直接使用vuex中的数据和方法) mutations_type 暂不知2.安装npm install ...原创 2020-11-21 20:19:40 · 922 阅读 · 2 评论 -
【工具类】cookie工具类封装
/* 设置cookie */function setCookie (cName, value, options) { options = options||{}; let expire = null; if(options.hour){ let today = new Date(); expire = new Date(); expire.setTime(today.getTime() + options.hour * 3600000); .原创 2020-11-21 17:09:49 · 200 阅读 · 0 评论 -
将已有项目导入svn
经常是本地建好了项目,却不知道该怎么把项目放到svn上?1.在svn上新建文件夹,名字和已有项目名字保持一致2.将已有项目中所有的文件及文件夹导入svn:3.上传后,将不需要的文件及目录删除4.在本地已有项目中直接checkout,检出后会发现本地已有项目已经生成了.svn的文件夹...原创 2020-11-21 17:00:33 · 1780 阅读 · 0 评论 -
【面试】BFC(块级格式化上下文)
1.box(盒子)页面的基本构成元素,分为inline,block,inline-block三种类型的box.2.FC(Formatting Context)Formatting Context是W3C规范中的一种概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。常见得Formatting Context有Block formatting context(简称BFC)和inline formatting context(简..原创 2020-10-29 01:33:51 · 424 阅读 · 0 评论 -
【面试】javascript事件循环(Event Loop)
1.javascript的单线程javascript是单线程的。单线程的意思就是说负责解释和执行javascript代码的线程只有一个,同一个时间内只能执行特定的一段js代码(当前任务)。为什么javascript是单线程的?1.js最初被设计出来及时作为一种浏览器脚本,主要负责和用户交互,操作dom.2.如果js是多线程的,那么就会带来非常复杂的同步问题: 1.比如有两个线程,同时对一个dom操作,一个线程要删除,一个线程要在它上面添加属性,此时就有点不知所措 2.有...转载 2020-10-28 17:40:54 · 298 阅读 · 0 评论 -
【react学习】react入门必备知识
1.新建react项目npx:该方式不用全局下载脚手架,直接运行脚手架的命令原理:先下载脚手架生成项目,完了再删掉脚手架npx create-react-app my-appnpm start全局安装脚手架来创建项目://全局安装脚手架npm i -g create-react-app//新建react项目create-react-app my-appnpm start2....原创 2020-10-02 14:48:06 · 926 阅读 · 0 评论 -
【面试】对网络的了解
1.终端终端跟服务器相对应,连接到服务器上的东西都叫做终端。比如: pc 手机 IP电视 空调 冰箱 电话 终端就是一个节点的意思,网络中有很多节点。网络就是把各种终端连在一起,就成了网络。那么问题来了?这么多各式各样的终端要怎么连?2.终端连接方式(共同构成网络)1.按拓扑结构分类 总线型 环形 星型:中间是核心的节点 网状 ...原创 2020-10-02 01:54:54 · 1344 阅读 · 0 评论 -
【小程序】小程序细节:场景值的使用
1.根据场景值变更页面部分显示效果小程序中场景值是用来描述用户进入小程序的路径,通过不同的场景值ID来分辨小程序来自于哪个场景或处于哪个场景之中。场景值列表:https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html在小程序中,可以通过以下三种方式获取场景值:App的onLaunch App的onShow wx.getLaunchOptionSync()场景值有什么作用?以羊城通乘.原创 2020-10-02 01:18:47 · 3621 阅读 · 0 评论 -
vscode 黑屏和终端不能输入命令的问题
这个问题的记录是没有意义的,因为电脑,软件本身导致的问题各有不同,我之所以想记录主要是因为这两个问题花了我太多时间,在这个过程中,多次使我崩溃,没想到学前端那么久以来,最让我头疼的问题是这个。背景:重装win7系统,装各种软件,装vscode,装完后打开vscode(大概一点2的版本),没有任何问题...原创 2020-07-09 19:09:26 · 2388 阅读 · 1 评论 -
vue dist包部署到码云Page服务
实在不想买服务器,于是打算把vue项目部署到码云的Page服务上试试,但是默认配置部署到码云上静态文件回404无法访问故需配置webpack部署前提 前端必须接入线上的后台服务api配置webpack(仅适用于vue-cli3以上)根目录新建vue.config.jsmodule.exports = { // 这里是脚手架的配置, // 其中如果想修改 webpack 配置 publicPath:'./', configureWebpac...转载 2020-06-22 14:31:57 · 888 阅读 · 0 评论 -
git基本使用
git原创 2020-06-20 12:12:20 · 285 阅读 · 0 评论 -
vue脚手架快速搭建工程
安装vue脚手架(全局安装) 终端最好使用管理员模式 新版安装(3.0以上)npm install @vue/cli -g旧版安装(2.0)npm install vue-cli -g 新旧版本冲突下载//卸载新版npm uninstall @vue/cli -g//卸载旧版npm uninstall vue-cli -g 检测安装成功vue --version脚手架新建vue项目 新版新建命令vue create 项...原创 2020-06-20 11:59:41 · 229 阅读 · 0 评论 -
node和npm的开发环境配置使用(个人)
node的使用1.下载安装http://nodejs.cn/download/打开cmd输入node -v检测是否安装成功(node版本太低可能导致开发不畅)注意:一旦安装了node,则会自动一并安装npmnpm的使用(node package manager )1.初始化项目//初始化时手动配置npm init//初始化时自动配置npm init -y2.下载包命令npm install 包名//简化npm i 包名@指定版本号3.安装..原创 2020-06-19 15:18:05 · 379 阅读 · 0 评论 -
vue中webpack基础配置
webpack集成vue版本1.使用到的包:// 用到的包下载命令:// npm install --save-dev style-loader css-loader //加载css// npm install --save-dev less less-loader //加载less// npm install sass-loader node-sass webpack --save-dev //加载scss// npm install --save...原创 2020-06-19 14:53:58 · 812 阅读 · 0 评论 -
css样式重置
/* 把所有标签的内外边距清零 */* { margin: 0; padding: 0; box-sizing: border-box;}/* em 和 i 斜体的文字不倾斜 */em,i { font-style: normal;}/* 去掉li 的小圆点 */li { list-style: none;}img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝.原创 2020-06-14 13:56:17 · 265 阅读 · 0 评论 -
了解单页应用
1.什么是单页应用 单页应用是整个webapp就一个html文件,全程无刷新,里面的各个功能页面是javascript通过hash,或者history api来进行路由,并通过ajax拉取数据来实现响应功能,所以叫单页面。2.单页应用的实现 实际上只在一个页面处理所有业务。但在用户视觉上却呈现多个页面的效果,多个页面的效果由js控制拼接完成,所以本能的浏览器上的历史记录前进后退无效,也因无刷新页面而使用户体验良好<!DOCTYPE html><html ...原创 2020-06-11 13:36:12 · 255 阅读 · 0 评论 -
前端样式技巧
1.图片在盒子中水平垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *原创 2020-05-30 15:55:19 · 886 阅读 · 1 评论 -
json-server的简单安装和使用
等待更新原创 2020-06-02 23:00:27 · 417 阅读 · 0 评论 -
后台管理系统样式布局写法
我也是刚开始学布局,对后台管理系统的布局并不了解,但想尝试一下,最后呈现的结果如下:将布局划分为三块:顶部,左侧,右侧html代码呈现为: top为顶部,nav-container为左侧导航栏,main为右侧内容区<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de.原创 2020-05-30 15:32:30 · 2183 阅读 · 0 评论 -
前端固定功能和工具类方法
等待更新原创 2020-05-28 10:46:22 · 343 阅读 · 0 评论 -
前端常用插件记录
。。。等待更新原创 2020-05-24 19:04:26 · 500 阅读 · 0 评论 -
vue小白踩坑记
最近有接触到一个网站内容管理的后台系统,项目很小,但对我而言,vue是挺难的,因为我一直是保持对vue和element的轻量级接触,往深了就是根本不会,也不懂。可没办法,因为这是我的工作,必须要做。因为我有一段时间没有接触过vue的配置和环境了,大概半年多吧,我感到前端的变化真的是太快了,这次npm的坑我踩了不少,就是因为前端的环境我没跟上。坑一:如果不能确定可以遵守ESLint规范的话,...原创 2019-06-14 20:20:38 · 206 阅读 · 0 评论 -
java前后端开发某些版本问题
这两天工作中出现了一些版本冲突的问题,我也是醉了,前后端都是这个类型的问题。可能是由于我是用自己的烂电脑开发的原因,再有,就是两个月没工作了,技术更新换代的快1.springboot版本和mybatis分页插件版本冲突这个问题的解决花了我很长时间,原因是我换和springboot版本相匹配的pagehelper包时,我的idea没反应过来,导致导包一直不能成功,我就认为maven抽风了。...原创 2019-06-14 20:11:58 · 408 阅读 · 0 评论