sanlingwu-CSDN博客

原创 node-sass安装失败

看尽了网上的帖子，就是安装不上。。最后放弃node-sass，改用dart-sass，如下：package.json中代码中如果用到了/deep/语法，替换成::v-deep即可

2022-04-27 12:28:39 161

项目业务中有时会出现频繁变动的变量，比如首页的宣传语、一些时间时长的控制等，时间充裕且有必要的话，可以做一个配置页面在服务器端进行存储和修改，但是在开发过程中以保证业务功能先完成的情况下，可以先将这些变量抽取出来，放在一个json文件中作为配置文件，测试/运维人员可以通过手动修改文件中的值来模拟不同的情况以便于测试。实现方法如下：1.在static（vue2）或者public（vue3）下新建config.json文件：{ "baseUrl":"http://xxxx.com",

2022-04-14 16:26:27 3298

原创【Vue2 & Vue3】开发环境跨域配置

前端开发时难免会遇到本地localhost和后端服务ip不一致导致的跨域问题，这种情况往往可以通过使用nginx来做一个简单的反向代理，但是vue2和vue3在处理方式上还是略有差异，这里简单记录下。Vue2：1.修改config/index.jsmodule.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // 上线配置 proxy

2022-04-14 15:41:57 1086

原创【Vue2 & Vue3】多环境配置（多域名打包）

近期同时接触了多个vue项目，经常在2和3中来回切换，同一种需求的实现方式往往不太一样，这里记录一下面对多域名打包的需求时，2和3分别是如何操作的。需求描述：同一套代码私有化部署，要部署在多个服务器上，或者是测试服务器与生产服务器不同，即访问服务接口域名不同，通过配置实现多环境的打包。Vue2：整体思路：修改配置文件，通过获取命令行的传参定义不同的全局变量。1.项目中/config/dev.env.js修改：新增：HOST: '"dev"''use strict'const

2022-04-14 14:40:13 4457

原创 el-table懒加载树形数据，实现整行点击的展开

做项目遇到一个需求，根据集团层级展现一组数据，每个层级都可以点开看更详细的拆分数据，第一想法是用el-table的树形数据来展示，大概下面这个样子：用过这个组件的应该知道这个只能通过点击每一行前面的小箭头实现伸缩，箭头有点小，而且表格一行的数据很长时，对用户的操作不是很友好，所以想能够点击一行的任意位置都可以进行伸缩。1、官网中的toggleRowExpansion方法如下：<el-table :data="tableData" ref="refTable"

2021-08-16 15:53:32 2672 4

原创【vue cli2 & 3】本地代理解决跨域问题

一、vue-cli2在config/index.js中修改proxyTable：module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // proxyTable: {},//原来为空 proxyTable: { //这里自定义 '/api': { //自己命名 target: "https:/

2021-08-16 14:26:39 387

原创两种websocket实践

以前对websocket能躲则躲，两个项目都被逼着用了websocket之后觉得也算了入了个门，分别记录一下两个项目中的使用方式，好记性不如烂笔头～零、基础知识WebSocket对象的“readyState”属性记录连接过程中的状态值属性值属性常量描述 0 CONNECTING 连接尚未建立 1 OPEN 连接已经建立 2 CLOSING 连接正在关闭 3 CLOSED 连接已经关闭或不可用判断ws对...

2021-08-16 12:20:32 531

原创 chrome DevTools 调试技巧

九大功能面板Elements：检查和调整页面，调试DOM，调试CSSNetwork：调试请求，了解页面静态资源分布，网页性能检测Console：调试js，查看log日志，交互式代码调试Sources：调试js，进行断点调试代码Application：查看调试客户端存储，如cookie、localStorage、sessionStoragePerformance：查看页面细节性能，细粒度对网页载入进行性能优化Memory：js CPU分析器，内存堆分析器Security：查看页

2021-03-19 11:23:18 414

原创 vue元素根据不同条件切换多个class

做需求遇到一个样式问题，横向的菜单tab在非管理员模式下有7个，在管理员模式下有8个，每个tab在中英文状态下的长度又有长有短，用弹性布局搞了好久总是不如意，最后决定用%写死每个tab的width，记录踩坑如下：1、最开始给每个元素的style绑定一个变量，切换语言时判断各种条件，更改变量值，不为所动= =失败2、以为是style的问题，换成class绑变量值，同样改动不生效= =失败3、查阅资料发现官方这样推荐：v-bind:class="{ active: isActive, 'text

2020-12-23 17:58:44 4562

转载【RN】初学React Native

react native 用了 react 的设计模式，但UI渲染、动画效果、网络请求等均由原生端实现。开发者编写的js代码，通过 react native 的中间层转化为原生控件和操作，比ionic等跨平台应用，大大提高了的用户体验。总结起来其实就是利用 JS 来调用 Native 端的组件，从而实现相应的功能。 react native 的跨平...

2019-04-16 13:40:55 191

原创关于前端性能的优化（总结）

关于这个问题各种渠道各种方法随处可查，想总结一篇有条理便于记忆的文章，随时补充吧。首先明确从输入网址到最终渲染出来的整个过程：DNS解析-->建立TCP连接-->拿到资源-->资源解析-->渲染。然后从每个步骤下手进行逐步优化：1、DNS优化1.1 减少DNS请求次数：尽量把所有资源放在一个cdn域名上1.2 DNS预获取（prefetching）：通过...

2019-04-12 17:40:43 286

转载【随笔】chrome75支持图片懒加载

chrome75中<img>和<iframe>的loading将新增一个lazy属性，支持图片懒加载。<img src="celebration.jpg" loading="lazy" alt="..." /><iframe src="video-player.html" loading="lazy"></iframe>...

2019-04-11 22:35:59 220

原创【随笔】with函数

做笔试做到一道题中有with函数，emmmm没见过诶之前，记录一下：with 函数，为语句设定默认对象。with 函数，即所谓的with 语句，可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性，要给对象创建新的属性，必须明确地引用该对象。举例：let obj={a:3}with(obj){console.log(a);//3}即为a指...

2019-04-11 22:34:12 554

原创 js的自输入输出

在牛客网上答腾讯的笔试题，用js答题的我真的是一把辛酸泪。。。居然要自己写输入啊喂，leetcode不是这么教我的（捂脸），所以先附上牛客网的官方教程：https://www.nowcoder.com/discuss/276然后下面附上自己的理解：var readline=require("readline");const rl=readline.createInterface({ ...

2019-03-10 10:13:09 2585

原创 ES5的对象创建以及对象继承

一、对象的创建1、工厂模式function createPerson(){ //内部先声明一个新对象，然后定义对象的属性和方法，最后return这个对象}var person=createPerson();2、构造函数模式function Person(name){//函数名一定大写！！！ this.name=name; th...

2019-02-27 11:10:18 492

转载 Shell--Bash

Shell 是一个用 C 语言编写的程序，它是用户使用 Linux 的桥梁。Shell 既是一种命令语言，又是一种程序设计语言。Shell 是指一种应用程序，这个应用程序提供了一个界面，用户通过这个界面访问操作系统内核的服务。Shell 脚本（shell script），是一种为 shell 编写的脚本程序。Shell 编程跟 java、php 编程一样，只要有一个能编写代码的文本编辑...

2019-02-19 09:35:48 218

转载 vue项目中设置全局变量

跟后端对接口，由于有跨域问题前端设置了代理，但是打包放到服务器上之后就会出现404问题，原因是这个代理不会在线上环境生效，只是给开发时使用。于是让后台更改设置，前端需要直接访问后台接口，就需要将后台地址设为全局变量，可以在每个组件中直接访问。查询记录方法如下：1. 单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。 2. 在main....

2019-01-08 12:18:25 8366

原创【mondb初体验】安装启动及Robo3T简单使用

1、下载官网下载：https://www.mongodb.com/download-center?jmp=nav#community 然后把文件夹改个短些的名字，放在一个路径下就可以了2、启动打开终端，输入sudo mongod回车，输入密码回车，看到最下面一句话：单击一下终端，command+n新建一个终端，输入cd /刚刚存放mongodb文件夹的路径/mongodb/...

2018-11-29 12:19:47 1473

转载 vue中使用插件格式化json（可伸缩）

原本可以使用<pre>标签+JSON.stringfy()函数解决json格式化显示的问题，但是数据量过大希望可以像jsonviewer一样能够伸缩，所以使用了vue-json-viewer插件，mark如下：1、安装$ npm install vue-json-viewer --save2、使用<json-viewer :value="jsonData"&g...

2018-11-16 16:37:31 24647 2

转载阿里icon图标库使用说明

之前只会在图标库里把图片下载下来再逐个引用，实在是蠢的不行，mark一下自己的一整个项目的icon库如何创建。1、进入阿里巴巴图标库网站http://www.iconfont.cn/2、搜索想要的图标3、选一个需要的图标加入购物车4、右上角找到购物车的图标将图标，点击添加至项目，放到项目中，之前没有项目要新创建一个5、然后我们会跳到我们图标所在的项目中，注意红色框框...

2018-10-16 21:23:51 15707 1

原创 Vue+ElementUI实现input框模糊查询提醒

先是用了ElementUI中给的el-autocomplete例子：<el-autocomplete class="inline-input" v-model="inputName" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete&

2018-08-01 18:36:05 21325 11

转载 angular2通过路由进行组件间传值

一、传参在传值组件component.ts的constructor函数里面先声明router：import { Router} from '@angular/router';constructor(public router: Router,) {}1.routerLink单一参数：在<a routerLink=["/exampledetail",id]>&l...

2018-07-19 14:58:05 1310

原创 angular2父子组件之间传值

组件结构如下：main.html<div class="row"> <div class="col-sm-2 col-md-2 catalog"> <app-catalog [input]="catalogmsg" (event)="getData($event)"></app-catalog> &am

2018-07-03 20:30:31 6907 1

原创【Vue初体验】UI工具+axios与后台相连

帮学姐写系统中的一个功能组件，第一次接触了Vue，感觉很好上手，而且可使用的工具也很多，好记性不如烂笔头，小小记录一下～UI组建库：Element，个人很喜欢了，好看又好用。https://element.faas.ele.me/#/zh-CNaxios：一个基于 promise 的 HTTP 库。https://www.kancloud.cn/yunye/axios/234845GET方式：ax...

2018-06-12 11:27:41 247

转载 angular2分页组件

创建一个分页包 pagination，然后在里面依次创建几个文件： page.component.html 分页组件的标签内容 page.conponent.ts 分页组件定义 pagination.ts 分页组件所需配置信息的对象 index.ts 导出分页组件page.component.html<nav aria-label="Page n...

2018-04-19 14:24:27 1870

原创 angular2组件定义（详细）

构建一个简单的to-do应用。to-do列表项格式如下：interface Todo { completed: boolean; label: string;}首先导入所有需要用到的模块：import {Component} from '@angular/core';import {bootstrap} from '@angular/platform-browser-d...

2018-03-17 20:31:19 905

原创 angular2指令定义（详细）

之前泛泛的以tooltip指令展示过如何定义指令，现在详细分解一下：在实现tooltip指令之前，需要从angular2/core里面导入一堆东西：import {HostListener, Input, Injectable, ElementRef, Inject, Directive, Component} from '@angular/core';解释几个类：ElementRef：这个类可以...

2018-03-17 19:38:01 1763

原创 angular2对于指令语法的改进

引入了一些更加简单的约定并且内置到了框架中：propertyName="value"[propertyName]="expression"(eventName)="handler()" 第一行propertyName属性的值可以接收一个字符串字面量，angular不会对这个值做进一步处理，这个值在模版里面是什么样就会怎么样去使用。第二种将会提示angular2这个属性...

2018-03-15 12:18:05 134

原创 angular2---ngFor指令及其简化

app.tsimport {Component} from '@angular/core';import {bootstrap} from '@angular/platform-browser-dynamic';@Component({ selector: 'app', templateUrl: './app.html',})class App { todos:string[...

2018-03-14 17:21:29 1461

原创如何对svg中某个标签进行操作

html代码如上，想把最后一条线隐掉，即给最后一个path标签加上display：none的css属性，用document.getElementbyTagName()函数不起作用，代码如下：$("#sdtDropCanvasAll").find("path:last").attr("display","none");：last表示所有对象中的最后一个。...

2018-03-14 14:42:59 1323

原创 angular2+typescript的第一个应用---Hello world!

首页：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title&gt

2018-02-28 11:06:19 244

原创 angular2的第一个应用---Hello world!

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <app>&

2018-02-22 15:57:13 210

转载用20行JS代码实现粘贴板功能

document.execCommand（）此方法就是实现剪贴板的关键，它可以传入cut,copy,paste三种参数。从最常用的document.execCommand（'copy'）开始介绍。在使用之前，我们应该检查浏览器是否支持copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy')...

2018-02-19 12:06:42 320

转载对象可计算属性名(仅在ES6中)

var suffix = ' name';var person = { ['first' + suffix]: 'Nicholas', ['last' + suffix]: 'Zakas'}person['first name']; // "Nicholas"person['last name']; // "Zakas"

2018-02-19 11:54:51 2832

转载让数字的字面值看起来像对象

2.toString(); // Uncaught SyntaxError: Invalid or unexpected token2..toString(); // 第二个点号可以正常解析2 .toString(); // 注意点号前面的空格(2).toString(); // 2先被计算

2018-02-19 11:52:40 138

转载数据安全类型检查

// 对象function isObject(value) { return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';}// 数组function isArray(value) { return Object.prototype.toString.call(value).slice(...

2018-02-19 11:51:15 202

转载判断对象的实例

// 方法一: ES3function Person(name, age) { if (!(this instanceof Person)) { return new Person(name, age); } this.name = name; this.age = age;}// 方法二: ES5function Person(name,...

2018-02-19 11:49:30 279

转载 + 拼接操作，+x or String(x)？

+运算符可用于数字加法，同时也可以用于字符串拼接。如果+的其中一个操作符是字符串(或者通过隐式强制转换可以得到字符串)，则执行字符串拼接；否则执行数字加法。需要注意的是对于数组而言，不能通过 valueOf()方法得到简单基本类型值，于是转而调用 toString()方法。[1,2] + [3, 4]; // "1,23,4"对于对象同样会先调用 valueOf()方法，然后通过 toStr...

2018-02-19 11:45:24 189

转载 parseInt() or Number()

两者的差别之处在于解析和转换两者之间的理解。解析允许字符串中含有非数字字符，解析按从左到右的顺序，如果遇到非数字字符就停止。而转换不允许出现非数字字符，否则会失败并返回NaN。var a = '520';var b = '520px';Number(a); // 520parseInt(a); // 520Number(b); // NaNparseInt(b); // 520par...

2018-02-19 11:36:45 156

转载使用 ~x.indexOf('y')来简化 x.indexOf('y')>-1

var str = 'hello world';if (str.indexOf('lo') > -1) { // ...}if (~str.indexOf('lo')) { // ...}

2018-02-19 11:30:55 277

空空如也

空空如也