前端.攻城狮-优快云博客

当我们做H5移动端项目或移动官网时，要求要根据不同机型做等比例缩放一、rem适配rem是相对单位，是相对HTML根元素的 font-size 来决定它的大小，1rem 就等同于 html标签font-size的大小。所以rem的适配就是去调整 html标签的font-size，所有使用 rem 单位的元素就会自动跟随着发生变化。1、实际案例说明：设计师给到的设计稿是按 750px的标准来设计的设计稿上一个div的标注尺寸 340px * 190px ，我们就可以通过以下计算来设置此元素的宽度和高

2022-04-26 17:07:19 2072 2

原创 vue3.0响应式原理

vue2中的响应式原理使用的是Object.definePropertyvue3中的响应式原理使用的是 Proxy代理模式let person = { name: '王五', age '20'}// 代码模拟实现/* target：代理的对象 propName：被修改的属性 value：修改时传入的值*/const p = new Proxy(person, { // 有人读取P身上的某个属性时调用 get(target, propName) { console.l

2022-03-06 10:54:55 506

原创 vue3.0 中使用echarts图 tooltip 不显示的问题

问题：由于我需要在后台数据还没请求回来时，在echarts图上加个加载图标，所以定义了一个全局变量来接收echarts 实例。之后就发现 option配置了 trigger: ‘axis’，但是 tooltip 显示不出来 tooltip: { trigger: 'axis' }, // 定义了一个全局的响应式变量，用于接收echarts实例const myChart = ref()onMounted(() => { myChart.value = echart

2021-12-23 20:11:29 7550 9

原创 vue 搭建项目后，代码规范配置

1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。VSCode需要安装一个插件：EditorConfig for VS Code我们需要在代码主目录下，创建一个 .editorconfig 文件，将下面的配置复制进去即可# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_st

2021-12-04 20:54:03 2662 2

原创 Vue3 脚手架搭建项目详细过程

一. 安装vue3.0脚手架如果之前安装了2.0的脚手架，要先卸载掉,输入：npm uninstall vue-cli -g 进行全局卸载然后重新安装： npm install @vue/cli -g二，项目搭建过程由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择，所以我们要使用 cmd / powershell，这里使用 powershell1.vue create + 项目名称2.模板选择，通过键盘上下键来选择，我们选择第三个自定义这三个选择分别是 vue2 /

2021-12-04 19:56:15 14796 1

原创 vue3自定义指令（局部 / 全局）

vue3自定义指令

2021-12-01 22:54:03 6922

原创 vue3中的computed、watchEffect、watch

一，computed用法一：传入一个getter函数setup() { const firstName = ref('李') const lastName = ref('华') // 传入一个getter函数 const fullName = computed(() => firstName.vaule + lastName.value);}用法二：传入一个对象，对象包含getter/settersetup() { const firstName = ref('李') cons

2021-10-05 10:09:08 761

原创 vue3非父子组件通信，provide/inject、全局事件总线

一、provide / inject在一些比较深的嵌套组件中，子组件想要获取父组件的部分内容，就会比较麻烦provide 来提供数据inject使用数据// 父组件通过provide提供数据<script> import Home from './Home.vue'; export default { provide: { name: "李华", age: 18, }, data() {}, methods:

2021-09-16 23:37:00 778

原创 vue3父子组件传值，props使用细节

一、父组件要给子组件传值时，可以通过props来完成组件的通信//父组件<template> // 通过自定义属性的方式给子组件传递数据 <message title="父组件中的值"></message></template>//子组件<template> // 使用父组件传递过来的值 <h2> {{title}} </h2></template><script

2021-09-12 23:13:44 26619 6

原创 vue2响应式的缺点及解决办法

vue2响应式的原理：通过Object.defineProperty() 对属性的读取、修改进行拦截。Object.defineProperty(obj,'name', { get() {}, ser() {}})存在问题：由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当新增、删除属性时，捕获不到，导致界面也不会更新。直接通过下标修改数组，界面也不会自动更新。解决办法修改属性时，使用 this.$set()删除属性时，使用 this.$del

2021-08-22 18:21:41 1772

原创微信小程序⾃定义组件、父子组件传值

1、⾃定义组件1.1. 创建⾃定义组件可以在微信开发者⼯具中对应的目录下，右键快速创建组件的⽂件结构类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成1.2 组件中的.js文件在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法Component({ // 里面存放的是要从父组件中接收的数据 properties: { test: { // 期望要的数据是 string

2021-06-12 17:06:30 243

原创小程序基础语法

1. 数据绑定1.1 普通写法// WXML中<view> {{ message}} </view>// js中Page({ data: { message: 'Hello word!' }})花括号和引号之间如果有空格，将最终被解析成为字符串1.2 组件属性// WXML中<view id="item-{{index}}"> </view>// js中Page({ data: { index: 0

2021-06-06 23:19:53 322

原创小程序结构⽬录，配置⽂件

1.⼩程序结构⽬录⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。1.1. ⼩程序⽂件结构和传统web对⽐结构传统web微信⼩程序结构HTMLWXML样式CSSWXSS逻辑JavascriptJavascript配置⽆JSON通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json

2021-06-06 10:06:05 130

原创微信小程序开发前准备

1.环境准备1.1. 注册账号建议使用全新的邮箱，没有注册过其他小程序或者公众号的。访问注册⻚⾯，耐⼼完成注册即可。1.2. 获取APPID由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后，可登录，然后获取APPID。1.3.开发工具下载地址微信⼩程序⾃带开发者⼯具，集开发预览调试发布于⼀⾝的完整环境。...

2021-06-05 22:41:15 204 2

转载前端常见浏览器兼容性问题解决方案

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核：不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。1.不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *{margin:0;padding:0;}备注：这个是最

2021-05-17 20:28:29 234

原创 Angular cli 搭建前端项目常用命令

1.创建项目 -- ng new my-app | ng new my-app --routing // my-app 为项目名称,， --routing 带路有项目2.带有路由的模块 -- ng generate module event --routing | ng g m event --routing // m为简写 event 为模块名3.添加服务service -- ng generate service hero // hero 为服务名

2021-05-17 11:28:54 239 2

原创 TypeScript基础——接口、泛型、类

JavaScript是弱类型语言，TypeScript是强类型语言，TypeScript 是 JavaScript 的一个超集，可以在编译期间发现并纠正错误，降低了试错的成本也提升了代码的规范性。一、ts中的接口Interface接口的作用：在面向对象编程中，接口是一种规范的定义，它定义行为和动作的规范。在程序设计里面，接口起到一定的限制和规范作用。1. 定义接口对函数中的参数进行约束 // 必选 interface FullName { firstName:string;

2021-04-25 20:56:38 321

原创 Table表格中内容太多，不会自动换行导致样式混乱解决办法

问题:在开发使用自适应表格时，如果某一个td的内容太多的话，并且内容没有‘-’/单词边界等，导致内容不会自动换行，直接一行显示导致样式混乱难看解决方法td { word-break: break-all; // 设置强行换行 break-all强制英文单词断行 word-wrap: break-word; // 内容将在边界内换行}// 对于自适应的表格可以给它加个宽度td { max-width: 600px; word-break: break-all;

2021-04-15 11:31:45 1730

原创 Node.js中操作MySQL数据库

安装项目依赖npm install mysql --save开始使用// 引入数据库 var mysql = require('mysql');// 1. 创建连接var connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'root', database: 'users' // 表名});// 2. 连接数据库打开冰箱门connection.c.

2020-11-23 23:22:11 318

原创 node.js中使用MongoDB实现增删改查

连接数据库，设计文档结构（表结构）// 引入包var mongoose = require('mongoose')var Schema = mongoose.Schema// 1. 连接数据库// 指定连接的数据库不需要存在，当你插入第一条数据之后就会自动被创建出来mongoose.connect('mongodb://localhost/itcast')// 2. 设计文档结构（表结构），可以设定约束也可以不设定// 字段名称就是表结构中的属性名称// 约束的目的是为了保证数据.

2020-11-23 23:10:57 236

原创 antv/g6 怎么按条件自定义节点颜色

const graph = new G6.Graph({ defaultNode: { size: 60, style: { fill: “#2db7f5”, // 节点背景色 stroke: “666”, // 节点边框颜色 lineWidth: 10, //节点宽度 strokeOpacity: 0.5, //边框透明度 }， labelCfg: { s..

2020-11-05 16:34:00 8492 3

原创 antv/g6 怎么自定义节点提示信息

需求中经常需要实现鼠标滑动到节点时，可以提示出想要的信息，g6是这么自定义的，我用的是angular框架，其他主流框架应该也差不多。// 在modes 属性中写formatText方法modes：{ default: [“drag-node”, “zoom-canvas”, { // 以下是自定义提示的重点 type: “tooltip”, formatText: (data: any) => { // data 对应后台返回对应节点的所有数据，根

2020-11-05 16:15:01 4767 1

原创主流框架中快速使用 AntV G6图可视化

什么是 G6G6 是一个前端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。让用户看到的数据关系变得透明，简单。官方API文档：https://g6.antv.vision/zh/docs/api/Graph一、安装 & 引用 npm install --save @antv/g6 // 安装 import G6 from '@antv/g6' // 在需要用的 G6 的 JS 文件中导入二、快速使用步骤创建关系图的 HTML 容器；数据准备

2020-11-01 14:24:56 3153

原创 require 引用模块过程分析

第三方模块凡是第三方模块都必须通过 npm 来下载使用的时候就可以通过 require(‘包名’) 的方式来进行加载才可以使用不可能有任何一个第三方包和核心模块的名字是一样的一、引用过程先找到当前文件所处目录中的 node_modules 目录node_modules/模块名node_modules/模块名/package.json 文件node_modules/模块名/package.json 文件中的 main 属性main 属性中就记录了模块的入口模块然后加载使用这个第三

2020-10-18 21:44:24 750 2

原创 Node.js 中的JavaScript，核心模块的原生用法

一、Node.js 是什么1. JavaScript 运行时2. 既不是语言，也不是框架，它是一个平台3. Node.js 中的 JavaScript没有 BOM、DOMEcmaScript 基本的 JavaScript 语言部分在 Node 中为 JavaScript提供了一些服务器级别的 API文件操作的能力http 服务的能力二、Node 中的 JavaScript1. EcmaScript变量方法数据类型内置对象ArrayObjectDateMath

2020-10-11 17:13:00 222

原创 ng-zorro组件库默认样式修改

1.nz-zorro组件样式修改当我们想修改组件默认的样式时，一般是通过F12控制台，定位到需要修改的DOM元素，然后找到它对应的class，然后复制去我们对应代码的 css/less 文件中重写覆盖原有的组件样式。// 重写组件样式，高度修改为0.ant-timeline-item-last>.ant-timeline-item-content { min-height: 0px;}但是发现这么写并没有修改成功，还是组件默认的样式。我们还需要在样式前面加上特殊的标识类名等

2020-09-05 09:20:49 2549 2

原创 formdata在append上传的文件file之后，formdata还是空的？

一、当我们需要前端上传文件，通过接口发送到后台时，一般是通过input标签，type类型为file实现上传//借助Formdata保存上传的文件const formdata= new Formdata();formdata.append('file',file),$.ajax({ url : '后台接口', type : 'GET', dataType : 'json', data:{ 'fail': formdata, // 当我这样发送参数时，发

2020-07-18 20:19:01 22506 14

原创 Angular 中的路由详细配置过程

一、Angular 创建一个默认带路由的项目1. 命令创建项目 ng new angualrdemo08 --skip-install2. 创建需要的组件ng g component home ng g component news ng g component newscontent3. 找到 app-routing.module.ts 配置路由引入组件import { HomeComponent } from './home/home.component'; import {

2020-07-18 14:39:28 2184

ueditor + kityformula-plugin公式插件

空空如也