十二月
nginx 配置 443
如果想配置 https，然而没有打开 443 端口，或者证书不好使的话，部署之后就会失效。
listen 443 ssl;
ssl_certificate /usr/share/nginx/html/server.crt;
ssl_certificate_key /usr/share/nginx/html/ca.key;
ssl_protocols SSLv2 SSLv3 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
十一月
在项目中判断开发环境和生产环境
就是判断当前环境是否为 production
process.env.NODE_ENV === 'production'
vue 弹出新页面
const routeData = this.$router.resolve({
path: '/algorithm/list',
query:{}
});
window.open(routeData.href, '_blank');
十月
React 生产环境上报错
今天修改了个 React 项目，部署到线上的时候报了个错误 Minified React error #152，记录到这里了
vue 热更新很慢
在 vue.config.js 中吧这两句话注释掉即可
似乎是热编译的之后限制了最小块的大小后，webpack 还要切割块，那可卡死了，每次更新都要等5s左右，这还是项目小的时候。
CSS：变色标题
类似这种效果
主要用到的是以下下的 css
.title {
color: #f35626;
background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: hue 10s infinite linear;
}
@keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(-360deg);
}
}
九月
css 小方块
.son_title_icon {
width: $iconsize;
height: $iconsize;
border: $iconsize solid black;
}
自适应的css
问题：
我想让 表单中的元素自适应填充剩余的元素，如下图所示
所以我把 from 表单变成弹性盒了
.form_content form {
display: flex;
}
完美，perfect！！！！
下载文件
把想要下载的文件放到public 文件夹下，他会在 npm run build 的时候被 编译到根目录下
然后我们访问根目录下的东西即可
随机密码生成
const random_str = Math.random()
.toString(36)
.slice(-8)
密码校验
/**
* 验证密码：长度为8~20位
* \w 字母数字下划线
*/
const reg_alphabet = /^[\w]{8,20}$/i
console.log(reg_alphabet.exec(value))
if (!reg_alphabet.exec(value)) {
callback(new Error('密码位数在 8~20 位'))
} else {
callback()
}
前端部署线上后，样式跟本地不一致
哎，也是巧了，类名起的重复了，跟其他 vue 里的 style 冲突了，不知道哪位大哥写的，不添加局部样式 scoped，把样式替换成全局的了,真是让人抓狂
docker 编译的问题
1、重启电脑，node 报错，内存溢出
2、如果报错 app/disk 文件夹 not found ，那么就在 dockerfile 文件中添加mkdir dist，初步怀疑的是异步的问题
新建一个文件夹 mkdir disk ，
时间戳转换成字符串优雅写法
// now 是时间戳
now
.toJSON() // 2021-09-11T13:12:03.000Z
.substr(0, 19)
.replace('T', ' ')
上面那个有问题，我改一下吧下面的，会少八个小时，不知道为什么
function time(time = +new Date()) {
var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
return date.toJSON().substr(0, 19).replace('T', ' ');
}
我之前写的恶臭代码
x.push(
[
now.getFullYear(),
String(now.getMonth() + 1).padStart(2, 0),
String(now.getDate()).padStart(2, 0)
]
.join('-')
.concat(' ')
.concat(
[
String(now.getHours()).padStart(2, 0),
String(now.getMinutes()).padStart(2, 0),
String(now.getSeconds()).padStart(2, 0)
].join(':')
)
)
```Ï
## 八月
### 本地代码样式没问题，部署到服务器上就有问题了
这个是`webpake` 打包的顺序问题，因为我有一个全局的样式，是用的苹果的字体，在打包的时候不保证代码的顺序，从而之前没有暴露出这个问题
### git 代码推不上去，显示超出大小
这个是 `assets` 这个文件夹中的图片**总体** 太大了，并不是单个文件过大，因为有些图片我看是不到 `1MB` 但是一并推送的话也推不上去
解决办法就是分批推送，存一点儿，推一点儿。
还有另一种情况就是单文件过大，这个根据网上的说法。
### 修改element table 的行高
### 上传按钮的样式处理
>问题描述：在做文件上传的功能，要求是 `formdata` 里跟着文件流以及其他的属性，我能想到的就是用原生的 `input`
修改前：
修改后：
思路就是：屏蔽掉原先的样式，然后在最外面写自己的样式。
首先呢给这个原生的 `input` 框一些属性，屏蔽掉原先的属性，让他漂浮起来。
```typescript
.intput{
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
然后再给 input 外面包上一层 div，再给这个外层做样式，
.file_select_box {
width: 120px;
height: 36px;
background-color: #3312af;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
cursor: pointer;
position: relative;
}
再给他设置个 css 颜色渐变
.file_select_box:hover {
color: #589aec;
background-color: #ffffff;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
border: 1px solid #589aec;
}
最后文件名上传后的回显，给这个 input 做个监听的事件
document
.querySelector('#guangdong_file')
.addEventListener('change', () => {
const file = document.querySelector('#guangdong_file').files[0]
this.display_file_name = file.name
})
给不同的项目进行配置
问题：我想在a项目中保存时自动格式化，b项目保存时不格式化
vscode 在每个工作夹下新建 .vscode settings.json文件，他跟全局的关系是
全局最大，会覆盖所有，然后是工作夹下的
参考文章 https://www.cnblogs.com/mu-ge/p/14344630.html
项目中的 eslint 不好使
原来是有人给关了
根据项目中的eslint 规则进行修复代码
eslint --fix 文件路径
配置 perttier
perttier 格式化后会和 eslint 冲突，我的处理办法就是一条一条的添加规则
七月
element-ui 中 ref 的 使用
需求，选择后，让 input 失去焦点
看官方手册如下
我就没搞懂这个方法 是啥？然后是这么用的
this.$refs["selectRef"].blur()
// 这里只能用中括号。不能用圆括号
摸鱼，自己学学跨域的解决办法
echart
给定容器大小，如果是空的话就不会显示
项目中遇到的问题
- 项目中的菜单列表是后端传递来的，
六月
组件属性设置
如果想设置组件属性的值，记得前面加冒号，这样才会把后面的变量解析了，不然 false 会被看做成字符串，永远都是对的了。
路由引入
引入路由的时候注意大小写。
我当时是引入的 '../views/dept.vue'，注意这里的dept小写了，虽然页面上能正常，但是修改文件的时候没有热更新了，我猜测页面还有是因为缓存。
cookie 在后端的获取和使用
哎呦原来后端可以直接获取到前端存的 cookie，我还在前端项目中获取到 cookie 然后通过 post/get 传递呢
后端直接通过 ctx.cookies.get() 就可以获得到了~
const department = ctx.cookies.get(DEPARTMENT);
而且后端也可以直接让前端存 cookie，比方说：
ctx.cookies.set('department', rows[0].department, {
maxAge: 7 * 24 * 60 * 60 * 1000,
httpOnly: false,
})
数据库的使用笔记
最近改了些后台的东西，感慨大学的东西还是有用啊！
WHERE 1 = 1：博客1- 两表合并的时候有重复的列名
https://stackoverflow.com/questions/46619599/1052-column-status-in-field-list-is-ambiguous
主要修改的语句
后端存储cookie到前端中去
Koa 中通过上下文中的 cookies.set 方法
ctx.cookies.set(DEPARTMENT, rows[0].department, {
maxAge: 7 * 24 * 60 * 60 * 1000,
httpOnly: false,
});
引入
// 引入
import jsCookie from "js-cookie";
// 使用变量:前端
var username = jsCookie.get('jiaofu_username');
// 存储变量:后端
ctx.cookies.set()
Vue 中 使用 eChart
在 main.js 中要这样引入
// main.js
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts
不加星号引入的话会报错，我也不知道为什么，等会我查查，先做项目。
Node 中的 SQL 使用
报错信息如下：
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where no = ?' at line 3
用 node 写查询的时候报错，翻译是语法问题，哎，是细节问题，解决办法如下：去掉where前面的逗号。
五月
docker 使用时遇到的坑
刚开始使用的时候，我遇到了页面 404 的问题
是因为 Dockerfile 中有一个参数配置
后来我修改了这个 Dockerfile 文件后，还是使用了原来的镜像，所以问题还是存在的
解决的办法就是：你既然已经修改了 Dockerfile 文件，就要重新根据新的 Dockerfile 生成一个镜像啊～
浏览器开发工具中看不到代理地址
如图所示，我当时还在迷惑我是启动了个本地的后台吗？
实际上是代理过去的
exlint 的安装
搜了一下，说是要全局安装这个插件 eslint-plugin-vue，切换成 root 用户之后，全局安装一下
四月
阅读笔记：工程化
前端工程化，并不是一个工具，比方说 webPack ，而是为了提高开发效率所使用的手段
webpack 打包时配置项目
问题：如何根据生产/测试命令去自动配置/获得baseUrl
项目拿到手，已经封装好了的，不过思路要有：可以看 axios 中是如何配置的
所以就直接引用 setter 的即可
之前错误的处理方法是
我直接引用这个prod.js文件，可能是因为npm run prod 的时候这个 env 才会有值，所以一直走的后面的测试的链接（我的三木运算?后面是生产环境:后面是测试环境）
layUI：获取/修改 checkBox 的值
如果是在 layUI 中获取的话，直接用 jq 方法是不行的，要用这个方法：
// 获取
// Dom
<input type="checkbox" title="是否永久" lay-skin="primary" id="isForeverInp" lay-filter="isForeverInputFilter">
// JavaScript
// 其中 checkbox 要传递 (LayUI 的过滤器)
form.on('checkbox(isForeverInputFilter)', function(data) {
console.log(data.elem.checked);
})
// 修改
// 选好 input 框的 id 后，用 prop 方法修改
$("#isForeverInp").prop("checked",false);
吐槽
真的是很麻烦啊，如果没有响应式的话，数据和视图的双向绑定，真的太好用了。
接触 layUI 的开发
- 获取路由传递的参数
layui.router().search - 如何传递路由参数，平常都是用
?分割参数的我，不太适应，应该是这个项目就这么规定的
- 接触其他的框架项目，才觉得
Vue用的是多么舒服了！不要停止学习啊！
复习
- vuex：state（this.store.state.xxx）,mutations（能够改变state的数据）(
this.$store.commit(xxx)),getters（装潢公司）,actions（可以放一些异步的操作）(this.$store.dispatch()) - http的osi七层：物理层，数据链路层，网络层，传输层，应用层（会话层，表示层）
- http:三次握手和四次挥手：
- 握手相当于我要找你链接了，客户端分手例子
第一个是三次握手：
女朋友向程序员提出约会(Seq = x)的建议，然后女朋友进入SYN_SEND状态。
程序员收到后同意了去约会(ACK = x + 1), 然后向女朋友建议去吃麻辣烫吧(Seq = y)，程序员进入SYN_RCVD状态。
女朋友收到建议后，勉为其难的答应了，然后告诉程序员说 那好吧(ACK = y + 1)。女朋友就进入了ESTABLISHED状态， 程序员也进入了 ESTABLISHED状态，整个约会讨论结束。
第二个是四次挥手：
四次挥手连接看起来挺复杂，其实认真看看也挺简单的，同样的比喻:
女朋友向程序员提出分手
程序员告诉女朋友说，我知道了，但是要考虑一下
程序员考虑清楚后，跟女朋友说那就分手吧
女朋友接收到程序员的消息后，然后还在等程序员发挽留的消息，然而等了两天后没等到，就认为程序员是真的不会再发消息来了，于是就拉黑删除程序员，关闭连接了。
- 内存泄漏：那些场景会遇到内存泄漏？意外的全局变量，被遗忘的定时器啊，监听器（addEventListener(),removeEvent）
vue 封装弹框组件思路
我感觉我的思路麻烦了，但是目前可以实现，先记录一下：
- 首先在调用组件的时候给绑定属性和隐藏回调函数
- 然后在写组件的时候，监听
isShow的值是否改变
- 如果想要隐藏的话，调用自己写的隐藏函数，通过emit给夫组件发送信息，最后父组件改变值。
验证码刷新
使用封装的验证码组件，场景是当用户提交表单后，想要通过 js 控制验证码刷新（组件的更新）
实现效果如图
- 一个思路就是通过
v-if切换，和settimeout配合使用，实现组件的销毁和重新加载 - 另一个就是用
$nextTick
this.isShowYzm = false;
// 这个 nextTick 也可以
this.$nextTick(() => {
this.isShowYzm = true;
});
高德地图插件使用
今天提了个需求，在网页上使用地图插件，记录一下踩得坑
-
首先就是
npm install xxx了 -
接着在入口文件中配置
-
使用如下
<template>
<div class="mapBox">
<el-amap vid="amap" :plugin="plugins" :center="center" :zoom="zoom">
<el-amap-marker vid="marker" :position="center" :label="label">
</el-amap-marker>
</el-amap>
</div>
</template>
A标签页面跳转是403，回车后正常问题
这个问题就是目标网站检测了来源，header里的Referer
在a标签中添加属性referrerpolicy="no-referrer"
参考
三月
iframe 中的 video 允许全屏播放
设置 iframe 的属性 allowfullscreen="true"
Vue 同一个路由，根据参数不同来更新
vue 如果复用一个路由的话，默认是不再刷新的，然而我有刷新数据的需求，（效果图如下：就是内容用的同一个路由）所以怎么办呢？
通过watch来监听route的变化，?后面的参数变化也会检测到，然后再mounted 的时候去请求并渲染数据。
watch: {
$route(to, from) {
this.getData(this.$route.query.content_id);
},
},
Vue 跳转路由后回到页面顶部
// 跳转后返回顶部
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})
多行文字，超出部分自动隐藏
样式大概如下图所示：
.info{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
背景图片模糊，文字正常的css处理
参考博客
Vue 中循环背景图片
我想给一些div设置动态背景图片，通过style 中的 background-image属性来设置的，当写标签的时候蒙了
写法是如图片所示，动态绑定style后，再写一个对象，key值为驼峰命名法，后面拼接个url(
文字样式对齐 CSS
首先就是第一行缩进：text-indent:2em
然后是段落的行间距：line-height,（原先经常用这个属性来设置文字居中的，没想到还可以调整行间距）
新工作的准备
换了个新工作，开始用vueBootStrap搭建一个网站，休息了大概十天，其中还干了些傻逼事情，花了不少钱，妈的，花钱长记性吧，不说了，先来看看这个新项目如何搭建起来。
二月
判断空
这是个神奇的问题
console.log(0 == ''); // true
console.log(0 === ''); // false
小程序右上角中添加分享
在小程序中添加 onShareAppMessage 处理函数即可，参考文章如下：微信小程序API 转发 （Page.onShareAppMessage）
onShareAppMessage (){},
秒数转化成时分秒第二版
function formatSeconds(value) {
var theTime = parseInt(value);// 秒
var middle = 0;// 分
var hour = 0;// 小时
if (theTime > 60) {
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
// if (middle > 60) {
// hour = parseInt(middle / 60);
// middle = parseInt(middle % 60);
// }
}
var result = "" + String(parseInt(theTime)).padStart(2,'0');
// if (middle > 0) {
result = "" + String(parseInt(middle)).padStart(2,'0') + ":" + result;
// }
// if (hour > 0) {
// result = "" + parseInt(hour) + ":" + result;
// }
return result;
}
let a = formatSeconds(1);
let b = formatSeconds(61);
let c = formatSeconds(610000);
console.log(a);
console.log(b);
console.log(c);
秒数转化成时分秒
function formatSeconds(value) {
var theTime = parseInt(value);// 秒
var middle = 0;// 分
var hour = 0;// 小时
if (theTime > 60) {
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
if (middle > 60) {
hour = parseInt(middle / 60);
middle = parseInt(middle % 60);
}
}
var result = "" + parseInt(theTime);
if (middle > 0) {
result = "" + parseInt(middle) + ":" + result;
}
if (hour > 0) {
result = "" + parseInt(hour) + ":" + result;
}
return result;
}
let a = formatSeconds(100);
console.log(a);
切换组件时需要请求
这些请求可以放到 vue 的生命周期里，而不是小程序 onload/onshow 的生命周期里。
一月
考勤小程序遇到的问题
拦截器里的 Modal 注意点
我设置一个登录失效就弹窗提示，登录成功后发现弹窗还在？？
于是我分析了一波，原来是因为每个请求失败，都弹一次 modal，所以登录成功后还显示弹窗。
直到问题了，那么解决方案也就呼之欲出了，我的方法是设置一个计数器，计数器为0 的时候可以弹窗口，只要弹过窗口，那么计数器就加一。
登录失效时的处理办法
因为添加了保持会话，而会话是有有效时长的，所以一旦失效就需要重新登录了。
在拦截器中我又发现了个东西，叫响应拦截。也就是我们每次请求接口，返回的数据都要从响应拦截中路过，我们在这里写一些规则，（登录失效时的一些处理逻辑，自动登录啊，或者跳转到登陆页面之类的）
如何保持会话
登录的时候可以在本地缓存一个session（后台传递过来的），之后的所有请求都在请求头中添加这个session。
然而在拦截器里直接读取缓存，这样的操作会带来问题：之后的请求依然不会携带sessionId（在开发者平台中测试有问题，我就直接重新编译了，此时本地缓存已经有session了，于是就很隐蔽的跳过了这个bug）
因为拦截器是在应用启动后只配置了一次，所以解决思路就是如何在登录后直接修改拦截器，想了一下，网络拦截器这些配置应该在$u上有挂载，翻了翻，果然有！
于是我在登陆后，直接修改拦截器里的配置。
踩坑是真的累啊…
POST 需要 formdata 传输数据
哎后台需要的数据费的要 formdata 传过去，我也是迷惑啊。
我在拦截器里修改
"Content-Type": "application/x-www-form-urlencoded",
JQuery 中的 closest 方法
这个方法是干嘛的呢？
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。jQuery 遍历 - closest() 方法
这个功能就可以配合事件委托来做些事情了，例子点我。
小程序转换base64
首先本地新建一个脚本，把 Base64.js 页面中的代码复制，粘贴到本地
然后引入本地，加密，解密的使用方法如下图
重温sort
有个需求，给时间字符串排序
在这里插入代码片
这函数老是忘啊。对此我掏出了大宝贝红宝书，好好看一看。
ajax 请求跨域的数据：jsonp
今天遇到个跨域的问题，我用 ajax 请求一个跨域的链接，提示我跨域了
心思心思要不要找后台呢，在自己想一下，百度了一下跨域如何解决
于是找到了这篇博文：什么是跨域？跨域解决方法，其中的第三条就是jsonp 解决的。
接着参考文章 JSONP跨域详解。
在请求中添加dataType: "jsonp",,然后写个接收的函数。
获取当前页面的url
console.log('window.location.search:>>',location.search);
扫一扫
60万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
