sharryling

原创 Vue踩坑记

Vue踩坑记

原创 2021-06-05

前端页面渲染机制浏览器基础结构参考：https://zhuanlan.zhihu.com/p/26105913浏览器基础结构浏览器基础结构主要包括如下7部分：1.用户界面（User Interface）:用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等；2.浏览器引擎（Browser engine）:负责控制和管理下一级的渲染引擎；3.渲染引擎（Rendering engine）:负责解析用户请求的内容（如HTML或XML，渲染引擎会解析HTML或XML，以及相关CSS，然后返回解析后

原创 canvas踩坑笔记

canvas踩坑笔记【DO - 甘特图】定位要考虑要scroller，很重要，包括在开发一些气泡框的组件也是，web端的定位有点复杂如果有些地方想给空白，在canvas刷新的时候，如果没有给背景或者渲染，会被“感染”dpr 设备像素比(device pixel ratio )， 像我的Mac，dpr = 2，而windows是1，这会导致，在考虑canvas的渲染的宽高时可能要把dpr计算进去...

原创 SCSS语法

[class*=]的用法问题：当有很多同一类型的class有相同的样式，则可以用下面的写法

原创 规范

目录规范components：放一下全局或者基础组件pages：每一个页面（如果一直是只有一个页面，则index），像用了<a />的话，就要pages下新建一个目录components：这里放着的是每个page的组件service：可以封装一下调用后台的apis...

原创 实战笔记—踩坑笔记：Vue的WEB开发

- 父子组件传值的问题出现的问题： 父组件给子组件（表格）异步传对象时，发现子组件第一次渲染后（数据为空），界面仍然没有发生变化，没有数据显示。原因：父组件给子组件传值，传的是“引用“， 也就是说，如果只是对对象赋值，其实引用仍然不变，而传字符串/数字等会改变。解决：采用watch 监听对象computed传参的问题我们...

原创 ES6. proxy

1. proxy参考文献：https://www.jianshu.com/p/c2a1aa2e2b141.1作用proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截var target = { name: 'poetries' }; var logHandler = { get: function(target, key) { console.log(`${key} 被读取`); return target[key]; },

转载 登录Vue2.0

本文代码参考链接为：https://www.cnblogs.com/zhoulifeng/p/9858605.html流程1.接受到后端的数据中，存有token2.保存token到localStorage，还有vuex中（包括token、用户名）3.设置拦截器：3.1 每次发送请求前带上token：config.headers.Authorization = localStorage.eleToken- 返回的请求中设置401错误处理参考链接的代码：import axios

原创 Vue3.0版本

较为详细：https://www.cnblogs.com/lookroot/p/12958148.html1. 更新

原创 产品流程

1. 整个产品生产链流程下图截图来源：https://www.bilibili.com/video/BV1zJ411g7Fx?p=1接上图：

原创 vue8-慕课音乐盒笔记-jsonp爬虫/mixin/轮播图/

代码：https://github.com/sharryling/practice_Web_Vue.gitvue-music_box音乐盒Build Setup# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production

原创 React-5.开发工具（pubsub/json-server/代理/路由/Hooks/Redux）

pubsub/json-server/代理/路由/Hooks/Redux

原创 vuex

what is vuex官网链接：https://vuex.vuejs.org/zh/Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。什么情况下我应该使用 Vuex？Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长

原创 Electron+Vue开发

安装脚手架：vue init simulatedgreg/electron-vue若遇到Electron-vue ReferenceError: process is not defined 问题，参考：https://www.jianshu.com/p/352f1f9fdd8dvue+electron的实战项目例子：参考： Electron+Vue开发跨平台桌面应用...

原创 前后端分离 Node/JAVA Node应用场景

前后端分离(参考链接)：https://juejin.im/post/5b71302351882560ea4afbb8https://blog.youkuaiyun.com/fuzhongmin05/article/details/81591072浅析 Node.js 在 CPU 密集型问题上应用(IBM):https://www.ibm.com/developerworks/cn/opensour...

原创 node+mysql部署到腾讯云Linux服务器

node部署到腾讯云Linux服务器腾讯云注册、购买服务器linux 环境参考链接：https://www.cnblogs.com/OhIAmFine/p/6860388.html腾讯云注册、购买服务器（本问是 cantus 64）linux 环境这里推荐一个终端软件 MobaXterm登陆服务器ssh root@193.xxx.xxx.xxx.xxx// root是账号 后...

原创 node.js 链接远程数据库

按照mysqlnpm i mysql -S测试var mysql = require("mysql")var connection = mysql.createConnection({ connectionLimit: 50, host: "localhost", //远程MySQL数据库的ip地址 user: "root", password: "root726...

原创 Eslint

Eslinteslint的好处网上一堆。Eslint的各个属性.eslintrc.js 或package.json的“eslintConfig”属性解析：关键在于，优先级，rules的优先级是高于extends的，每个plugins可能含有多个extends，也是有各种嵌套关系。例如：关系总结如下关系当然是会不会被覆盖的关系。Vue规范实操每一个rules的规则，自己尝试esl...

原创 egg + web 登陆权限

登陆跨域问题流程可以参考其他：https://blog.youkuaiyun.com/JiangYuXuan1994/article/details/80196090https://blog.youkuaiyun.com/qq_39081974/article/details/81085717https://blog.youkuaiyun.com/weixin_43704471/article/details/916331...

原创 electron - 2.应用创建踩坑

1. 创建electron + ts1.1 全局命令 electron -v克隆这仓库$ git clone https://github.com/electron/electron-quick-start进入仓库$ cd electron-quick-start安装依赖库$ npm install运行应用$ npm start1.2 配合ts安装typescript:...

原创 MYSQL + eggJS + sequelize

MYSQL设置updated_at 和 created_at 自动添加：ALTER TABLE devlist MODIFY updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL;ALTER TABLE devlist MODIFY created_at TIMESTAMP DE...

原创 js模块化的整理与总结

前端模块化转载于: https://juejin.im/post/5c17ad756fb9a049ff4e0a62#heading-31一、模块化的理解将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信...

原创 实习总结

3个月的实习总结：技术上：补充后台的学习（important !!）：node.js的学习/数据库登录鉴权（！！分等级！！）网络常识（实习过程，很多很多关键词都没理解，加强网络知识的积累：跳板机、部署过程、ip…）promise/async await 要弄清楚react/Vue的高级使用，像redux、vuex表单引擎??有空尝试做做typescript的使用、ES6...

转载 Axios统一错误处理与后置

转载：https://blog.youkuaiyun.com/weixin_34192732/article/details/88740411在进行业务开发的时候，前后端会对接口的数据结构进行约定，若接口有异常，需要将异常信息展示给用户知晓。这个流程里，数据结构是确定的（事先约定），数据的处理逻辑是相同的（展示给用户），如果在业务代码代码中重复的catch(e) { 展示给用户 }，就非常的不优雅。本着Do...

原创 小程序带网关

为什么要带网关见 https://yq.aliyun.com/articles/69118 《小程序之API管理》

原创 实习总结-小程序组件

总结1.proporties虽然小程序允许改变，但是像vue等props属性都是不允许改变的，注意“受控与非受控组件”思想，可见文章：https://www.cnblogs.com/qingguo/p/5857923.html2.负责popover组件过程中，小程序对于某些边框的位置，长宽初始位置→经过惟一后→长宽会改变。这时候要考虑一下absolute是用left还是right，来消除pop...

原创 CSS的坑

1.垂直居中的坑wxml：<g-form-item disabled='{{disabled}}'> <view class='number-container'> <view class='number-container__lable inline-sytle'>{{lable}}</view> <view clas...

原创 规范

CSS–BEM规范转载：https://www.jianshu.com/p/5e018c7f0bc6【tx】实战：scss：.number-container { display: flex; align-items: center; &__lable { width: 50%; float: left; word-break: break-a...

原创 eggJS

什么是eggJSNode.js的一个库，是基于koa的库

转载 1.KOA + 2.nunjucks = 3.MVC

koa的基础转载于廖雪峰老师的博客：https://www.liaoxuefeng.com/wiki/1022910821149312/10997523441921921.基础代码1.先导入koa2.基础代码// 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示:const Koa = require('koa');// 创建一...

原创 electron-1.应用结构

什么是electronelectron1.应用结构主进程和渲染器进程主进程：Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。 主进程管理所有的web页面和它们对应的渲染进程。渲染进程：每个渲染进程都是独立的，它只关心它所运行的 web ...

转载 React-redux框架之connect()与Provider组件 用法讲解

react-redux作者：光强_上海链接：https://www.jianshu.com/p/81e9e9eaf8fa来源：简书在react-redux 框架中，给我提供了两个常用的API来配合Redux框架的使用，其实在我们的实际项目开发中，我们完全可以不用react-redux框架，但是如果使用此框架，就如虎添翼了。我们来简单聊聊这两个常用的APIconnect()Provi...

转载 TypeScript-2.断言 Record

断言转载连接：https://www.jianshu.com/p/4bd337c2115c语法<类型>值 或者 值 as 类型在 tsx 语法（React 的 jsx 语法的 ts 版）中必须用后一种。例子：将一个联合类型的变量指定为一个更加具体的类型当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或...

原创 注意！--实习经验

1.规范不能相信用户的输入，要进行规范

原创 promise及手写promise、await/async

promise主要是解决callback中的回调地狱问题。1.基础概念/* 1 打印hh 2 timeout结束，打印h1,参数sss 3 由于下面返回的全都是实例w，w在一开始已经执行完，所以 在w.then之后的return w,和之后的w.then return w，都是同时执行的。 */var w = new Promise((resolve,rejec...

原创 MongoDB

下载版本第二位偶数：稳定版；基数：开发板安装MongoDb及MongoDb compass基本概念参考：https://www.runoob.com/mongodb/mongodb-databases-documents-collections.html“show dbs” 命令可以显示所有数据的列表。...

转载 正则匹配

注意：[-+.] —> 匹配 -+.中任意一个\w —> 匹配一个单字字符（字母、数字或者下划线）。. —> 换行符之外的其他字符。贪婪匹配/非贪婪匹配参考：https://blog.youkuaiyun.com/duliu1314/article/details/87874809特殊需求表达式：Email地址：^\w+([-+.]\w+)@\w+(...

原创 TypeScript-1.TS与JS的区别 变量类型 函数 class

1.TS与YS的区别

原创 React基础-4.数据绑定 事件绑定

1.事件绑定 数据修改 render() { return <div><h1>I'm component4</h1> {this.state.ArrObj.map(item =><Component5 {...item} key={item.id}></Component5>)} ...

原创 buil 错误