十二月
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 的行高
![在这里插入图片描述](https://img-blog.csdnimg.cn/461b9b4349e4497c94de1dc4771475a1.png)
### 上传按钮的样式处理
>问题描述:在做文件上传的功能,要求是 `formdata` 里跟着文件流以及其他的属性,我能想到的就是用原生的 `input`
修改前:
![在这里插入图片描述](https://img-blog.csdnimg.cn/1755cb0c1775412b8ded27a93fb6f440.png)
修改后:
![请添加图片描述](https://img-blog.csdnimg.cn/4c7fa21514fb4d12afb8127175a0a3f6.gif)
思路就是:屏蔽掉原先的样式,然后在最外面写自己的样式。
首先呢给这个原生的 `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);