Fork me on GitHub

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H：最小化窗口

Ctrl+B：显示/隐藏侧边栏

Ctrl+”+/-“：放大/缩小界面

文件操作

more >>

展开全文 >>

插件集合

js读取excel文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1、js读取excel文件 xlsx.js
	

const datas={};
    $('#doc-form-file').on('change', function(e) {
        var fileNames = '';
        $.each(this.files, function() {
            fileNames += '<span class="am-badge">' + this.name + '</span> ';
        });
        $('#file-list').html(fileNames);
        //获取json，同时进行json数据校验
        var files=e.target.files;
        var file=files[0];
        var fileNames=file.name;
        //判断上传的文件是不是excel格式文件
        console.log(fileNames)
        var postfix = fileNames.substr(fileNames.lastIndexOf(".")).toUpperCase();//得到的是后缀名,且转换为大写
        var type=[".XLSX",".XLS"];
        if(!type.includes(postfix)){
            toast('文件格式不是excel')
        }else{
            //进行数据校验
            //console.log(XLSX);
            //读取文件
            var reader=new FileReader();
            reader.onload=function (e) {
                var data=e.target.result;
                var workbook=XLSX.read(data,{
                    type:'binary'
                })
                var sheetNames = workbook.SheetNames;
                var worksheet = workbook.Sheets[sheetNames[0]];
                var  supplement=XLSX.utils.sheet_to_json(worksheet)
                datas.object=supplement
            };
            reader.readAsBinaryString(file);
        }
    });
more >>

展开全文 >>

OpenLayers

OpenLayers 5的体系架构可见，可把整个地图看成一个容器（Map），核心为地图图层（Layer）、对应图层的数据源（Source）与矢量图层样式（Style）、与地图表现相关的地图视图（View）.

工作原理

1
2
3
4
5
6
7
8
9
10
11
12
13
1、数据组织

    从表现形态来看，空间数据的矢量数据由点、线、面三类要素构成.
    
    矢量数据的抽象主要由ol.geom.Geometry基类下的几何对象子类实现

	几何对象子类，即
    -Point与MultiPoint（点与多点）
	-LineString与MultiLineString（线与多线）
    -Polygon与MultiPolygon（区与多区）
    -LinearRing（线性环）
	-Circle（圆），均继承于SimpleGeometry子类

more >>

展开全文 >>

three.js开发指南 笔记

准备

1
2
3
4
5
6
7
8
9
10
11
12
13
1、准备
-Three.js自身也提供了在线场景编辑器，访问地址为http://threejs.org/editor。使用该编辑器，可以用图形化方法创建Three.js场景。


-Three.js 开发指南示例代码
https://github.com/josdirksen/learning-threejs

-禁用Firefox和Chrome的安全性检测
	如果你使用的是Chrome浏览器，有种方式可以禁用安全性设置，这样就可以在没有Web服务器的情况下查看示例。需要注意的是，应尽量避免用下面的方法访问真正的网站，因为这样做会使浏览器向各种恶意代码敞开大门。用下面的命令可以启动Chrome浏览器同时禁用所有安全特性。
    对于Windows操作系统：chrome.exe --disable-web-security
    对于Linux操作系统：gogle-chrome --disable-web-security
    对于Mac OS操作系统：open -a "Google Chrome" --args --disable-web-security
通过这种方式启动Chrome浏览器就可以直接运行本地文件系统中的示例。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example - Baseic skeleton</title>
    <script src="./js/three.js"></script>
    <script src="./js/TrackballControls.js"></script>
    <!-- 主要用于检测动画运行时的帧数。在动画运行时，该库可以在一个图片中显示画面每秒传输帧数 -->
    <script src="./js/Stats.js"></script>
    <!-- 实时调整动画参数 -->
    <script src="./js/dat.gui.js"></script>
    <script src="./js/util.js"></script>

</head>
<body>
    <div id="webgl-output"></div>

    <script>
        // 
        var camera, renderer, scene;
        function init() {
            
            // 初始化状态栏
            var stats = initStats()
            // 创建一个场景，该场景将包含所有元素，例如对象、相机和灯光。
            scene = new THREE.Scene();

            // 创建一个摄像头，它定义了我们要看的地方
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            // 创建渲染并设置大小
            renderer = new THREE.WebGLRenderer();
            // 将场景的背景颜色设置为接近黑色
            renderer.setClearColor(new THREE.Color(0x000000));
            // 设置场景的大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true

            // 创建了坐标轴（axes）对象并设置轴线的粗细值为20
            var axes = new THREE.AxesHelper(20);
            //  在屏幕上显示轴
            scene.add(axes);

            // 创建平面 宽60 高20
            var planeGeometry = new THREE.PlaneGeometry(60, 20);
            // 创建材质对象来设置平面的外观
            var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xffffff
            })

            // 将大小和外观组合进Mesh对象并赋值给平面变量
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true
            // 旋转并定位平面
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.set(15, 0, 0);

            // 将平面添加到场景中
            scene.add(plane);

            // 创建一个立方体
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            // 为立方体添加材质
            var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xFF0000,
            });

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.castShadow = true
            // 定位立方体
            cube.position.set(-4, 3, 0);

            // 将立方体添加到场景中
            scene.add(cube);

            // 创建一个球体
            var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
            var sphereMaterial = new THREE.MeshLambertMaterial({
                color: 0x7777ff,
            });

            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.castShadow = true
            // 定位球体
            sphere.position.set(20, 4, 2);

            // 将球体添加到场景中
            scene.add(sphere);

            // 将相机定位并指向场景中心
            camera.position.set(-30, 40, 30);
            // 摄像机将决定哪些东西会被渲染到场景中。在这段代码中，我们使用x、y、z的位置属性来设置摄像机的位置。
            // 为了确保所要渲染的物体能够被摄像机拍摄到，我们使用lookAt方法指向场景的中心，默认状态下摄像机是指向（0，0，0）位置的
            camera.lookAt(scene.position);


            // 为阴影添加聚光灯
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40, 40, -15);
            spotLight.castShadow = true;
            spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
            spotLight.shadow.camera.far = 130;
            spotLight.shadow.camera.near = 40;
            scene.add(spotLight);


            // 添加微妙的环境照明
            var ambientLight = new THREE.AmbientLight(0x353535);
            scene.add(ambientLight);

            // 将渲染器的输出添加到html元素
            document.getElementById("webgl-output").appendChild(renderer.domElement);

            // 渲染场景
            renderer.render(scene, camera);
            //初始化控制器
            var trackballControls = initTrackballControls(camera, renderer)
            var clock = new THREE.Clock()

            // 定义属性，默认值
            var controls = new function() {
                this.rotationSpeed = 0.02 // 立方体旋转速度
                this.bouncingSpeed = 0.02 // 球体弹跳速度
            }
            console.log('controls:', controls, dat);
            // 需要将这个JavaScript对象传递给data.GUI对象，并设置这两个属性的取值范围
            var gui = new dat.GUI()
            gui.add(controls, 'rotationSpeed', 0, 0.5)
            gui.add(controls, 'bouncingSpeed', 0, 0.5)


            renderScene()
            
            // 动画
            var step = 0;
            function renderScene() {
                stats.update()
                // TrackballControl.js库也需要在render函数渲染完一帧后更新
                trackballControls.update(clock.getDelta())

                cube.rotation.x += controls.rotationSpeed
                cube.rotation.y += controls.rotationSpeed
                cube.rotation.z += controls.rotationSpeed
                // cos 函数返回一个数值的余弦值
                step += controls.bouncingSpeed
                sphere.position.x = 20 + 10*(Math.cos(step))
                sphere.position.y = 2 + 10*Math.abs(Math.sin(step))
                
                requestAnimationFrame(renderScene)
                renderer.render(scene, camera);
            }
        }

        window.addEventListener('resize', onResize, false)
        function onResize() {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }
        // 初始化
        init()

       </script>
</body>
</html>

-threejs

-控制器库TrackballControls.js。
	-有了它便可以利用鼠标任意移动摄像机，以便从不同角度观察场景

在代码中，首先定义了场景（scene）、摄像机（camera）和渲染器（renderer）对象。
	1、场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有THREE.Scene对象，那么Three.js就无法渲染任何物体，在第2章还会对THREE.Scene进行详细介绍。示例中所要渲染的方块和球体稍后将会添加到场景对象中。
	
	2、还定义了摄像机对象，摄像机决定了能够在场景看到什么。
		你还会进一步了解摄像机对象能够接受的参数。
    3、我们定义了渲染器对象
		该对象会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子。最后WebGLRenderer将会使用电脑显卡来渲染场景。

-dat.GUI

	在创建类似三维场景和动画时，我们需要尝试很多次才能够确定最合适的速度和颜色。如果有一个GUI（可视化图形界面）允许我们在运行期间修改这些属性，那么事情就会变得很简单。幸运的是，这样的GUI是存在的

three.js基础知识

more >>

展开全文 >>

vite + vue3 + tailwindcss

中前台项目 开发

项目架构

image-20221208154045915

开发使用到的技术及开发插件

vite

以速度运行制胜 webpack. 兼容 rollup 几乎所有插件，生态已经支持企业项目开发

创建项目：

1
npm init vite@latest

没有安装vite@latest会提示勾选安装

vue3

vue 最新版，搭配 vite 使用更佳

tailwindcss

前端 css 四种模式

  1. 行内样式，自由度极高但复用性极差
  2. 通用组件库，风格固定，自定义性差
  3. 原子样式， tailwindcss 众多类名，每个类名都对应一个 css 样式，类似于boostrap
  4. 经典模式， class 类名方式，但是媒体查询需要重写

安装

1
yarn add tailwindcss postcss@8.4.8 autoprefixer@10.4.2 -D

报错缺少依赖 sass

1
yarn add sass -D

生成配置文件 tailwind.config.js

1
npx tailwindcss init -p

配置文件 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// purge: [], purge在3.0 更改为 content
{
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    ...
}
    
// 最新
module.exports = {
  // purge: [], purge在3.0 更改为 content tailwind 应用范围
  content: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      height: {
        header: '72px',
        main: 'calc(100vh - 72px)'
      },
      fontSize: {
        xs: ['0.25rem', '0.35rem'],
        sm: ['0.35rem', '0.45rem'],
        base: ['0.42rem', '0.52rem'],
        lg: ['0.55rem', '0.65rem'],
        xl: ['0.65rem', '0.75rem']
      },
      boxShadow: {
        'l-white': '-10px 0 10px white',
        'l-zinc': '-10px 0 10px #18181b'
      },
      colors: {
        main: '#f44c58',
        'hover-main': '#f32836',
        'success-100': '#F2F9EC',
        'success-200': '#E4F2DB',
        'success-300': '#7EC050',
        'warn-100': '#FCF6ED',
        'warn-200': '#F8ECDA',
        'warn-300': '#DCA550',
        'error-100': '#ED7456',
        'error-200': '#f3471c',
        'error-300': '#ffffff'
      },
      backdropBlur: {
        '4xl': '240px'
      },
      variants: {
        scrollbar: ['dark']
      }
    },
  },
  plugins: [],
}

在src下新建styles文件夹， 增加 index.scss

1
2
3
4
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

然后在mian.js中引用这个index.scss.tailwind CSS就引入成功了,

1
import '@/styles/index.scss'

tailwind CSS 依赖scss,可能需要手动安装

1
yarn add sass@1.54.4 -D
more >>

展开全文 >>

vite 打包优化项

配置别名

1
2
3
4
5
6
7
8
9
10
11
resolve: {
   // https://cn.vitejs.dev/config/#resolve-alias
   alias: {
     // 设置路径
     '~': path.resolve(__dirname, './'),
     // 设置别名
     '@': path.resolve(__dirname, './src')
   },
   // https://cn.vitejs.dev/config/#resolve-extensions
   extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
 },

代码分割

more >>

展开全文 >>

vue 2.0 基础知识

这里写图片描述

指令

v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新

v-html：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

v-text:更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值

v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

1
2
3
4
[v-cloak] {
  display: none;
}

​ 计算属性是一个属性不需要函数调用方式进行使用，简写的默认为get方法，一般计算属性没有set方法，只读属性。

计算属性会进行缓存，多次使用计算属性之后调用一次

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。