个人技术避坑总结

技术总结

1.Mysql特殊空格(192,160)

场景:Excel数据通过Navicat导入mysql,有些字段会出现空格,需要sql语句去除

普通空格 ascii(32)

update excel_caiwu_contract set overbooking_no=replace(overbooking_no,char(32),’’);

特殊空格 ascii(194,160)

update excel_caiwu_contract set overbooking_no=replace(overbooking_no,char(194,160),’‘);

2.浏览器缓存

场景:发布新版本,浏览器缓存,版本网页不同步

头部禁用缓存:

  <!-- html不缓存 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Expires" content="0">

css 引用加版本时间

<link rel="stylesheet" href="../../../assets/css/style.css?time=202210141800">

js 引用加版本时间

<script src="../../../assets/js-v/config.js?time=202210141800"></script>

网页跳转: 加时间戳跳转

var timestamp = Date.parse(new Date());
 diag.URL = '../../library/policy/policy_watch.html?FID=' + id + "&v=" + timestamp;

3.数据库生僻字

数据库的utf-8不支持存储生僻字,只有表结构编码是utf-8mb4才行

4.前端下载提示框

HTML中在头部引用axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
但发送post请求时,后端无论如何都收不到数据,查阅资料后发现data需要引用qs封装:

<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

post
let qs = Qs
axios({
    method:'post',
    url:'/test',
    data:qs.stringify(this.delOrUpdGoodsInfo)
})

5.sessionStorage缓存

存储在客户端,不与服务器进行通信
sessionStorage只能存储字符串类型的,其他格式的要转换格式再进行存储。

使用方式:

//1.存储进去
sessionStorage.setItem('pageParams',JSON.stringify(pageParams))
//2.拿出来
this.pd = JSON.parse(sessionStorage.getItem(this.USER_ID)); //获取存储的信息,也是字符串格式
//3.删除缓存
 sessionStorage.removeItem("overbookingPd"); //删除存储的信息
 sessionStorage.setItem('gkpd', JSON.stringify(Object.assign({}, this.pd)));//将Array转换为对象传递

6.vue数据视图更新不同步

 //强制数据及时更新  解决数据变动后,视图并未更新
    vm.$set(数组,更新数据的下标,更新的数据)
  vm.$set(vm.taskUserlist, i, s2)//给taskUserlist数组的第i个对象赋值为S2
  // vm.taskUserlist[i] = s2 //此方式解决数据变动后,视图并未更新
vm.$set(vm.userProfile, 'age', 18);//给userProfile对象的age属性赋值为18
this.$forceUpdate()

7.vue-iframe子父页面调用

子页面调用父页面方法

1.父页面js
 mounted() {
                this.init();
                //这里可放到全局,提供给子 iframe 调用
                this.getList()//将需要调用的方法放入全局
            },
2.子页面js
window.parent.vm.getList();//调用父页面的方法

8.js中数字0与空字符串的问题

在开发前端的时候,因为有很多值数据,但这些值从后台传过来的时候,有很多可能性,如:null,undefined,空字符,”null”,”undefined”,排除这些,其他应该就差不多是正常的了、出现这些数据的时候,前端页面统一显示’’(空字符)。

开始的时候我写的是value!=””,后来发现,当value等于0的时候结果是flase,也就是说不走这个判断下面的语句

if` `(i!=``''``){``//操作语句;}

换下逻辑发现,0==’’ 为true

原因其实也很简单:

js中有默认的隐试转换。

以下是数字和字符串隐试转换规则:

  1. 任何非零的数为true,0为false。
  2. 字符串来说任何非空字符串为 true,空字符串为false

所以左边 0转换成布尔为false ,右边“”转化成布尔为false ,false==false, 所以结果为true,想非自动隐试转换判断可以使用=== 或者 !== 替代 ==和!= 例如:zdconsole.log(“”===0) //false

当数据有时候就是0,就是要显示0,解决办法是:value===””,这个是时候就等于false了

9.杀死进程

netstat -ano | findstr 8080   
taskkill -PID 6964 -F

10.查询重复

select * from tablename where id in (select id from tablename group by id having count(id) > 1)

11.行点击事件导致按钮冒泡

1.按钮是el-button标签,为点击事件加.native.stop ,即 @click.native.stop=“handleClick(scope.row)”

2.按钮通过render函数渲染实现,render函数中自带event事件,不用传参,不用写e,直接e.stopPropagation()就可以,当然,加上e也没毛病。

on:{
   click:e=>{
     e.stopPropagation();
    ....
}

3.单选框冒泡

 <el-table-column label="选择">
   <template slot-scope="scope">
    <el-radio v-model="tableRadio" :label="scope.row" @click.native.stop></el-radio>
  </template>
</el-table-column>

12.mysql分页置顶

select index_id FROM c106_multirows order by index_id = 10 desc,index_id asc; – index_id = 10 置顶

将需要置顶的id值传过来按降序排列,在把需要排序的字段按升序排列即可。

13.mybatis算数符号转义

符号 原始字符 转义字符
大于 > gt;
大于等于 >= &gt;=
小于 < it;
小于等于 <= lt;=
& &amp
单引号 &apos;
双引号 &quot;

14.mysql行转列(行,分割)

辅助表mysql.help_topic hp

SELECT DISTINCT substring_index(substring_index(sd.department_leader,',',hp.help_topic_id + 1),',' ,-1) AS department_leader,sd.name  from
    sys_departments sd left join mysql.help_topic hp on hp.help_topic_id < LENGTH(sd.department_leader) - LENGTH(REPLACE(sd.department_leader,',','')) + 1 
    where sd.department_leader !=''

15.URL里出现%20

URL里出现%20是因为地址中存在的空格被转码成了%20导致格式转换出错。

16.sql更新表字段值为另一个表的字段值

UPDATE sys_users sus
JOIN tb_comparison_table tbt ON sus.user_id = tbt.old_user_id
SET xft_user_id = tbt.new_user_id

17.微服务架构流程

image-20240812120257403


  目录