Express学习笔记
Express的安装npm install express -g
脚手架工具安装express的脚手架工具express-generator
npm install express-generator -g
创建项目
express express-demo
安装依赖
cd express-demo && npm install
运行
npm start
在浏览器里面输入：http://localhost:3000/
路由路由方法Express方法源于 HTTP 方法之一，附加到 express 类的实例。它可请求的方法包括：
get、post、put、head、delete、options、trace、copy、lock、mkcol、move、purge、propfind、proppatch、unlock、report、mkactivity、checkout、merge、m-search、notify、subscribe、unsubscribe、patch、search 和 connect。
路径Express路径包含三种表达形式，分别为字符串、字 ...
Vue富文本编辑器-Ckeditor4
Ckeditor4的下载link: https://ckeditor.com/ckeditor-4/download/
下载好后解压, 打开index, 打开后就是配置界面 在这里进行增删移动，看自己需求,调整好后 这里就是配置文件了，复制
导入将整个目录放在你的项目下 在需要用到的地方引用
<script src="../static/ckeditor/ckeditor.js"></script>
vue主要在index.html
需要的界面通过id引入
<div>
<textarea :id="id"></textarea>
</div>
之后再mounted周期里面
mounted: function () {
const self = this;
// 渲染编辑器
self.ckeditor = window.CKEDIT ...
javascript系列学习笔记-this
javascript系列学习笔记-this
笔记内容来自 《你不知道的Javascript》 (上)
为什么要用thisfunction getName() {
console.log('this.name', this.name)
}
let a = {
name: 'kif1'
}
let b = {
name: 'kif2'
}
getName.call(b)
上面代码可以在不同对象上下文（a,b）上使用 getName这个方法，不用针对每个对象编写不同版本的函数；
如果不用this，就需要给getName方法显示的传入一个上下文对象：
let a = {
name: 'kif1'
}
let b = {
name: 'kif2'
}
function getName(context) {
console.log('context.name', context.name)
}
getName(a) ...
# Vue3 UI库/相关工具/可视化/生态全分享
Vue3UI库/相关工具/可视化/生态全分享技术胖整理分享
1.Web UI库1. ElementUI Plus一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库https://element-plus.org/zh-CN/
2. Ant Design of VueAnt Design 的 Vue 实现，开发和服务于企业级后台产品https://www.antdv.com/docs/vue/introduce-cn
3. BalmUI基于谷歌的 Material Design，附带 Vue 插件和指令，以及从简单到复杂的高度可定制组件https://next-material.balmjs.com/
4. Naive UI图森Vue3的组件库，文档完整，我项目中经常使用https://www.naiveui.com/zh-CN/os-theme
5. arco.design字节跳动企业级产品设计系统，支持React和Vue双版本https://arco.design/
6, Quasar轻松构建高性 ...
dom-to-image失真，修改生成后的清晰度
背景：项目中遇到了网页截图的场景，开始使用了html2canvas ，本地一切都好，但正式环境中出现问题，dom中有图片，以为是这些图片跨域，最后按照解决办法也不行；再后来又看到是dom要设置宽高，但试过依旧不可以。最终换个库来实现需求
dom-to-imagegithub: https://github.com/tsayen/dom-to-image
后来发现了基于此库的新项目 dom-to-image-more（https://www.npmjs.com/package/dom-to-image-more）
改造项目中使用发现清晰度有点低，客户也指出来，但这个库貌似并没有相关配置可以实现，无奈只得开始对其进行修改
文件替换文件路径： node_modules\dom-to-image\src\dom-to-image.js
(function (global) {
'use strict';
var util = newUtil();
var inliner = newInliner();
var fontFaces = ...
未读
前端知识点杂集
第一题尝试推测它的输出：
const person = { name: '代码与野兽' }
Object.defineProperty(person, 'age', { value: 18 })
console.log(person.age)
console.log(Object.keys(person))
输出：
18
['name']
解析：很多人容易搞错第二个输出，因为使用 defineProperty 定义的属性默认是不可枚举的。
第二题尝试推测它的输出：
const name = '代码与野兽'
age = 18
console.log(delete name)
console.log(delete age)
console.log(typeof age)
输出：
false
true
"undefined"
解析：第一个 false 是因为 delete 只能删除对象上的属性，name 不是属性，所以删除失败。第二个 true 是因为我们不使用任何声明创建变量，它会被视作全局变量，挂载到 window 对象上面，等价于 d ...
未读
奇奇怪怪网站记录
开发工具：
前端开发：smooth shadow
url:https://shadows.brumm.af/
GrabientCSS 在线渐变色搭配网址，你可以更改自己喜欢的渐变色或者使用提供的渐变色案例，只需单击【COPY CSS】复制 CSS 渐变色代码，马上用到你的网站设计里面。
传送门：https://www.grabient.com/
ColorffyColorffy 设计师必备配色神器，能够快速生成渐变、调色板和配色方案的色彩搭配工具箱，包含网格渐变、CSS 渐变、调色板、文本渐变、配色方案、图像调色板、颜色对比、随机颜色等等在线生成器，能够最直观的看到配色效果的工具箱，加入了很多渐变色探索的功能，能够让你更加微妙的对渐变色进行深度探索，无论是前端设计、还是 UI 设计师都不容错过，可以说是设计师最迷你的配色神器。
传送门：https://colorffy.com/
HeroiconsHeroicons 一个漂亮时尚且纯手工创作的 SVG 图标库，由 Tailwind CSS 制造商创作。目前图标库的版本有 1.0.6 ...
js中截取字符串的三个方法 substring()、substr()、slice()
js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆，特别是substring()和substr()，连方法名都差不多，下面就具体来看一下区别。
相同点这三个方法都可以对字符串进行截取，并且返回一个新的字符串，也就是不会对原字符串进行修改
//chrome控制台
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a
< "0123456789" //没有发生改变
不同点这三个方法的不同之处在于参数不同。
substring
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法
string.substring(start,stop)
参数
参数
描述
start
必需。一个非负的整数，规定要提取的子串的第一个字符在 string 中的位置。
stop
可选。一个非负的整数，比要提取的子串的最后一个字符在 string 中的位置多 1。如果省略该 ...
pinia
Pinia介绍：状态管理工具，代替Vuex
安装：npm install pinia
配置：main.ts：
import {createPinia} from 'pinia'//导入
const state = createPinia()//
app.use(state)//
初始化仓库src/store/index.ts
import { defineStore } from 'pinia'
import { names } from './store_name'
export const userTestStore = defineStore(names.name, {
state: () => {
return {
name: 'kif',
age: 18
}
},
getters: {},
//
act ...
vue3+vite+axios中proxy跨域配置
axios引入安装：
npm install axios -S
src目录下创建api目录，下新建axios.js
axios.js
import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
baseURL: '/api', // 所有的请求地址前缀部分
timeout: 60000, // 请求超时时间毫秒
withCredentials: true, // 异步请求携带cookie
headers: {
// 设置后端需要的传参类型
'Content-Type': 'application/json',
'token': 'your token',
'X-Requested-With': 'XMLHttpRequest',
},
})
// 添加请求拦截器
service.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
r ...
