分页: 6/273 第一页 上页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 下页 最后页 [ 显示模式: 摘要 | 列表 ]
9月29
1、打开本地git bash,使用如下命令生成ssh公钥和私钥对ssh-keygen -t rsa -C 'xxx@xxx.com' 然后一路回车(-C 参数是你的邮箱地址)

2、然后打开~/.ssh/id_rsa.pub文件(~表示用户目录,比如我的windows就是C:\Users\Administrator),复制其中的内容

3、打开gitlab,找到Profile Settings-->SSH Keys--->Add SSH Key,并把上一步中复制的内容粘贴到Key所对应的文本框,在Title对应的文本框中给这个sshkey设置一个名字,点击Add key按钮

4. 到此就完成了gitlab配置ssh key的所有步骤,我们就可以愉快的使用ssh协议进行代码的拉取以及提交等操作了
5. 再试一下拉取代码和提交代码,应该就不需要输入密码了

本地配置多个ssh key
1、为公司生成一对秘钥ssh key
[codes=c#]ssh-keygen -t rsa -C 'yourEmail@xx.com' -f ~/.ssh/gitlab-rsa[/codes]

2、为github生成一对秘钥ssh keyssh-keygen -t rsa -C 'yourEmail2@xx.com' -f ~/.ssh/github-rsa3、在~/.ssh目录下新建名称为config的文件(无后缀名)。用于配置多个不同的host使用不同的ssh key,内容如下:
[codes=c#]
# gitlab
Host gitlab.com
    HostName gitlab.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/gitlab_id-rsa
# github
Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/github_id-rsa
  ​
# 配置文件参数
# Host : Host可以看作是一个你要识别的模式,对识别的模式,进行配置对应的的主机名和ssh文件
# HostName : 要登录主机的主机名
# User : 登录名
# IdentityFile : 指明上面User对应的identityFile路径
[/codes]

4、按照上面的步骤分别往gitlab和github上添加生成的公钥gitlab_id-rsa.pub和github_id-rsa.pub
5、OK,大功告成,再次执行git命令验证是不是已经不需要再次验证权限了。
6、再次查看~/..ssh目录下的文件,会有gitlab_id-rsa、gitlab_id-rsa.pub和github_id-rsa、github_id-rsa.pub四个文件
9月22

Vue3.0 setup写法

16:41大前端 » vue.js  From: 本站原创
Vue3.0 正式版已经发布一段时间了,除了拥抱函数式编程,还带来了新的语法糖,用以替代原本需要大量 return 的写法
基础用法
想要使用 setup 模式只要在 script 标签上面加个 setup 属性就可以了。这个模式下不需要 return 和 export 就可以在模板中使用。
[codes=c#]



[/codes]
使用 props、emit
[codes=c#]



[/codes]
使用生命周期钩子
[codes=c#]

[/codes]
setup 语法糖的缺陷
这个语法糖暂时还不支持单文件导出内容,如果使用 export 导出模块会导致编译报错。

不支持设置组件名,传统的 options 写法有个 name 属性可以设置组件名,这个在编写递归组件的时候很有用

不支持 jsx,不过如果需要使用 jsx 的话,个人还是建议直接使用传统方式,setup 函数可以直接 return 一个 jsx 函数。而且 Vue 3.0 已经默认支持 css module 了,jsx 的体验会比之前更好。
[codes=c#]



[/codes]

其他
[codes=c#]
如何导入组件 => components
在 script-setup 中导入任意的组件就可以直接在 template 中使用






如何导入指令 => directive
导入指令的用法同 导入组件






如何使用 props
通过defineProps指定当前props类型的同时,获得上下文的props对象
在script中需要props[key]引用,而template中可直接调用key




如何使用 emit
通过defineEmit指定当前组件含有的触发事件
事件通过 defineEmit 返回的上下文 emit 进行触发




如何获取 slots 和 attrs



Note
遵循 setup 函数的规则,仅在组件加载时调用一次
7月11

子曰,四十而不惑

21:49tommy的掰活  From: 本站原创
子曰:吾十有五而志于学,三十而立,四十而不惑,五十而知天命,六十而耳顺,七十而从心所欲,不逾矩。
希望时光安详静宜,偶尔的小确幸足以
点击在新窗口中浏览此图片
6月10
首先,移除一些冷门的 feature(比如 filter、inline-template 等);

其次,引入 tree-shaking 的技术,减少打包体积。

第一点很好理解,所以这里我们来看看 tree-shaking,它的原理很简单,tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。
举个例子,一个 math 模块定义了 2 个方法 square(x) 和 cube(x) :
[codes=c#]
export function square(x) {
  return x * x
}
export function cube(x) {
  return x * x * x
}
[/codes]
我们在这个模块外面只引入了 cube 方法:
[codes=c#]
import { cube } from './math.js'
// do something with cube
[/codes]
最终 math 模块会被 webpack 打包生成如下代码:
[codes=c#]
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
  'use strict';
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__['a'] = cube;
  function square(x) {
    return x * x;
  }
  function cube(x) {
    return x * x * x;
  }
});
[/codes]
可以看到,未被引入的 square 模块被标记了, 然后压缩阶段会利用例如 uglify-js、terser 等压缩工具真正地删除这些没有用到的代码。

也就是说,利用 tree-shaking 技术,如果你在项目中没有引入 Transition、KeepAlive 等组件,那么它们对应的代码就不会打包,这样也就间接达到了减少项目引入的 Vue.js 包体积的目的。
5月20

getOffsetTop

18:52大前端 » HTM5  From: 本站原创
如果拿到的offsetTop为0,则往上循环得到设置滚动的root 容器的高度
        getOffsetTop (herfId) {
          let offsetTop = 0
          try {
            if (document.getElementsByClassName(herfId).length > 0) {
              let eleId = document.getElementsByClassName(herfId)[0]
              let par = eleId.offsetParent
              if (par.dataset.id == 带滚动的根容器id){ 
                // 当节点为body可直接使用offsetTop获取距离
                offsetTop += eleId.offsetTop// 获取高度
              } else {
                while (par) {  
                  // 循环获取当前对象与body的高度
                  offsetTop += par.offsetTop;
                  par = par.offsetParent;
                }
              }
            }
          } catch (e) {
            console.log(`getOffsetTop:${e.message}`)
          }
          return offsetTop
        }
1月14
https://eslint.bootcss.com/docs/user-guide/getting-started

npm包:
引用

    "eslint": "^7.17.0",
    "eslint-plugin-vue": "^7.4.1",


配置lint文件
引用

。。。
"globals":{
        "Vue": true,
}
。。。

或js文件
/* global Vue */

配置.eslintignore
例如除了src目录,其他的都不检查
引用

!src

或js文件
/* eslint-disable */
。。。
/* eslint-enable */

rules:
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger

1月5
https://github.com/fxsjy/jieba
支持四种分词模式:
精确模式,试图将句子最精确地切开,适合文本分析;
全模式,把句子中所有的可以成词的词语都扫描出来, 速度非常快,但是不能解决歧义;
搜索引擎模式,在精确模式的基础上,对长词再次切分,提高召回率,适合用于搜索引擎分词。
paddle模式,利用PaddlePaddle深度学习框架,训练序列标注(双向GRU)网络模型实现分词。同时支持词性标注。paddle模式使用需安装paddlepaddle-tiny,pip install paddlepaddle-tiny==1.6.1。目前paddle模式支持jieba v0.40及以上版本。jieba v0.40以下版本,请升级jieba,pip install jieba --upgrade 。PaddlePaddle官网
支持繁体分词
支持自定义词典
MIT 授权协议
1月5
浏览器有一个安全机制即同源策略,所谓同源就是两个资源具有相同的协议(protocol),主机(host)端口号(port)。浏览器不允许客户端脚本访问非同源的资源,如果客户端发起这样的请求就产生了跨域问题。

跨域发生的场景:
前后端数据联调的时候,前端服务在A域名下,而后端API 服务在B域名下,从A发ajax请求到B就发生了跨域。

跨域的3种解决方案
一、JSONP
JSONP (JSON with Padding) 是一种目前不太常用的解决方案,他的原理是通过script标签去请求URI资源,后端收到请求后返回一个callback函数并将数据放到函数的参数中,前端执行函数时即可获取到参数数据。

之前小编在使用过程中踩过2个坑:

    
一个是当时同时发了2个JSONP的请求a和b,结果发现b得到是a请求的结果,后来发现两个JSONP请求设置了同一个函数名,显然当后一个请求完成时把之前的同名函数给覆盖了。
    
另一个是请求发出后浏览器一直报CORB的异常,提示后端返回数据的MIME类型应该是javascript,排查发现后端返回的content-type类型是application/json应该处理修改为application/javascript。
如上可以总结出,JSONP的几个特点:

    
必须前端和后端一起合作修改代码;
    
只能发送get请求;
    
script标签请求资源,而不是xhr;
二、web Server代理
假设前端服务在A域名下,而后端API 服务在B域名下,从A发ajax请求到B就发生了跨域。那么,前端服务器代理这种解决方案就是让前端一直访问同源的A域名,当匹配到某个路径开头的URL时(如"/api"),将其代理到B域名。

这种方式又称为隐藏跨域,浏览器一直认为访问的资源没有跨域,实际是服务器做了处理。我们开发的时候经常使用,比如:在vue.config.js或是webpack.config.js中配置devServer的相关参数来实现代理,或者是使用nginx做代理。

// vue.config.js module.exports = {   devServer: {       proxy: {         '/api/': {           target: 'http://localhost:4000',          }       }   } } 复制代码
三、CORS跨域资源共享--后端方案
跨域资源共享是w3c规范,真正意义上解决跨域问题。它需要服务器对请求进行检查并对响应头做相应处理,从而允许跨域请求。

1.简单请求:
对于简单请求,设置如下的响应头即可:

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000') 复制代码
可以根据后端的白名单去确定允许的源,当然测试时也可以设置允许任何源访问。

这里提到了简单请求,什么是简单请求?

满足简单请求的3个条件:

    
1.请求方法为:GET/POST/HEAD 之一;
    
2.当请求方法为POST时,Content-Type是application/x-www-
form-urlencoded,multipart/form-data或text/plain之一;

    
3.没有自定义请求头;
    
4.不使用cookie;
2.复杂请求先预检:
当有一项不符合简单请求的条件时,浏览器会发出OPTIONS预检请求,那么后端需要实现对OPTIONS请求的处理,并通过设置头允许访问资源。

举个例子:

1.当请求方式为PUT请求时,需要如下设置:

// 前端发送PUT请求 await axios.put("/api/users")  // OPTIONS  res.writeHead(200, {    "Access-Control-Allow-Origin": "http://localhost:3000",    "Access-Control-Allow-Methods": "PUT" }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 复制代码
2.当此时需要给后端提交数据时,需如下设置:

// 前端发送PUT请求,且带数据
await axios.put("/api/users",{a:"b"})  
// OPTIONS  res.writeHead(200, {     "Access-Control-Allow-Origin": "http://localhost:3000",     "Access-Control-Allow-Headers": "Content-Type",     "Access-Control-Allow-Methods": "PUT" }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 复制代码
3.在上面2的基础上还要设置自定义请求头,需如下设置:允许自定义请求头

// 前端发送PUT请求,且带数据 await axios.put("/api/users",{a:"b"},{headers:{"x-token":"jjj"}}) // OPTIONS  res.writeHead(200, {     "Access-Control-Allow-Origin": "http://localhost:3000",     "Access-Control-Allow-Headers": "Content-Type, x-token",     "Access-Control-Allow-Methods": "PUT" }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 复制代码
4.在上面3的基础上还要请求带cookie,需如下设置:

// 前端发送PUT请求,且带数据
axios.defaults.withCredentials = true await axios.put("/api/users",{a:"b"},{headers:{"x-token":"jjj"}}) // OPTIONS  res.writeHead(200, {     "Access-Control-Allow-Origin": "http://localhost:3000",     "Access-Control-Allow-Headers": "Content-Type, x-token",     "Access-Control-Allow-Methods": "PUT",     'Access-Control-Allow-Credentials':'true' }); // PUT res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); res.setHeader('Set-Cookie', 'cookie=123;'); res.setHeader('Access-Control-Allow-Credentials', 'true'); 复制代码
Access-Control-Allow-Credentials的意义是允许客户端携带验证信息,例如 cookie;
7月31
遇到vue一直报错assigning to rvalue解决,一直以为是js代码的问题,后面找了很久的原因,才发现是在html的模板中v-model绑定的属性并没有在data属性中定义

v-model绑定错误引起
分页: 6/273 第一页 上页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 下页 最后页 [ 显示模式: 摘要 | 列表 ]