blog
0%

Posted on Edited on

每次项目发布新版的时候，前端打包后的文件放在服务器上，浏览器读取的代码没有及时更新，导致有时会有缓存的问题。

前端解决办法：

在html页面加meta标签

1
2
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

找到项目中名为webpack.prod.conf.js的文件，用js来获取当时的时间，根据时间戳来划分版本号。然后在js和css文件名上加上版本号，每次上传到服务器的名字不一样，服务器就会识别出来，加载最新上传的这一版本了。（分别更改相应的代码片段，加上时间戳即可）

1
2
3
4
5
6
7
8
9
10
11
12
const  Version = new Date().getTime();


output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name][chunkhash].' + Version + '.js'),
    chunkFilename: utils.assetsPath('js/[id][chunkhash].' + Version + '.js')
},

new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].' + Version + '.css')
        }),

然后执行npm run build，再去打包后的dist文件夹下去看打包后的js和css文件名已经加上了时间戳的后缀了

alt

但是index.html在服务器端有时还是会有缓存的，需要在服务器端配置下nginx，让index.html文件也不缓存

1
2
3
location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}

no-cache, no-store可以只设置其中一个

no-cache浏览器会缓存，但刷新页面或者重新打开时，会请求服务器，服务器可以响应304，如果文件有改动就会响应200

no-store浏览器不缓存，刷新页面需要重新下载页面

Posted on Edited on

阿里巴巴的字体图标库现在已经很完善了，体验了一把，记录下过程。

首先在阿里巴巴图标库网站上注册账号，阿里巴巴图标库地址：https://www.iconfont.cn/collections/index

然后新建一个我的项目，点击上传图标，上传你本地的svg图标即可。

alt

需要注意新建项目的时候需要更改图标的前缀，不要和平台默认的图标前缀一样，这个就是你上传图标后自动生成的前缀

alt

之后阿里巴巴有三种可以引入项目的方式，我本次使用的是font-class引用的方式，相对来说引用方式比较简单，兼容性相对较好。

首先复制项目中生成的代码，然后把代码引入到项目中去
alt

alt

使用的时候直接挑选好你需要的图标，在代码中引用即可

1
<i class="fs_a fs_a_icon_1"></i>

Posted on Edited on

这两天打开谷歌浏览器，看视频的时候总是提示报错：此flash与您的地区不相容，请重新安装Flash。今天才有时间去搜索解决这个问题。

目前flash的版本已经更新到了32，但是只有29以前的版本是可以不根据IP检查这个兼容性问题的，所以先下载一个29的版本备用，附上下载链接：https://pan.baidu.com/s/12PGsvqAbjnUookg_jEQbVA

提取码：ol43

下载之后里边有相关的教程说明，按照说明安装29版本的flash

然后在chrome浏览器地址栏输入：chrome://version/ 然后按回车键，会看到这样一张图

alt

然后复制flash所在的文件夹位置，打开文件夹在地址栏里粘贴该位置并按回车键，会来到这里

alt

删除文件夹里红框里的文件，然后把刚才安装的29版本下的pepflashplayer64_29_0_0_140.dll复制到该文件夹，重命名为pepflashplayer.dll即可

至此圆满解决该问题，关闭所有chrome页面，然后再重新打开就可以观看了。

Posted on Edited on

换行：按下两次enter键

文字

1
2
3
4
*斜体*
**加粗**
***斜体并加粗***
<font color=#409EFF face="微软雅黑" size=2>**关于打标签**</font>//可设置颜色，字体，大小

超链接

1
[http://www.google.com](http://www.google.com)

引入图片

1
2
![alt][image]
[image]:图片链接地址

以后用到的再慢慢补充

Posted on Edited on

整理下常用到的命令，方便自己用时查询

基础应用

添加修改(*是指添加所有修改，也可以自定义添加)

1
git add *

提交

1
git commit "添加信息"

提交到远程分支（默认分支是master,若想提交到其他分支，改为其他分支名即可）

1
git push origin 分支名

切换到其它分支

1
git checkout 分支名

查看提交历史

1
git log

关于打标签

打轻量级标签

1
git tag v1.0

默认标签是打在最新提交的commit上的。有时候，如果忘了打标签，就需要先找到需要打标签的commit，然后再打标签

1
2
git log//查看历史提交，找到需要打标签的commit
git tag v1.0 <commit id>

查看标签

1
git tag

推送某个标签到远程仓库

1
git push origin <tagname>(v1.0)

推送全部未推送过的标签到远程仓库

1
git push origin --tags

克隆远程仓库到本地（创建新的文件夹，在空文件夹中执行）

1
git clone <cloneUrl>(https://github.com/)

拉取远程代码

1
git pull origin <tagname>

先想到这么多，以后用到的再慢慢补充。

Posted on Edited on

用el-radio过程中遇到的需求，需要再次点击时取消选中，本来以为要用多选框然后来限制可选个数了，猛然间发现还有这个可以来解决

html部分

1
2
3
4
<el-radio-group v-model="radio1">
    <el-radio @click.native.prevent="clickitem(2)" :label="1">选项一</el-radio>
    <el-radio @click.native.prevent="clickitem(1)" :label="2">选项二</el-radio>
</el-radio-group>

1
2
3
4
5
6
7
8
9
10
11
12
export default {
    data () {
        return {
            radio1:1
        }
    },
    methods:{
        clickitem(e){
            e === this.radio1 ? this.radio1 = '' : this.radio1 = e
        }
    }
}

这样功能就实现了，然后发现点击取消后，选项前的圆圈那里还有阴影，虽然失去焦点之后就没有了，但是看这很不爽，还是把他干掉了

1
2
3
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{
        box-shadow: none;
}

把这个box-shadow禁掉就ok啦。完美解决。

Posted on Edited on

目前的项目是vue+element ui搭建的，其中需要用到el-tabs来做标签页来回切换，以显示不同的内容，后台调的都是同一个接口，只是传的参数不同，但是用过el-tabs的童鞋都知道，这个控件是直接将全部的内容都加载出来的，既浪费服务器资源，又不能满足实际业务场景需求，于是在写了过程中做了些优化：

首先是html代码

通过给每个组件添加条件判断来控制组件的显示，默认显示第一个，其余的全部设置为false

1
2
3
4
5
6
7
8
9
10
11
12
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
        <orderTable v-if="load.first"/>
    </el-tab-pane>
    <el-tab-pane label="待接单" name="second">
        <orderTable v-if="load.second"/>
    </el-tab-pane>
    <el-tab-pane label="待上门" name="third">
        <orderTable v-if="load.third"/>
    </el-tab-pane>
  </el-tab-pane>
</el-tabs>

js代码段：

点击时通过点击事件控制让点击的tab的判断条件变为true，从而让改tab显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
    components: {orderTable},
    data() {
        return {
            activeName:'first',
            load:{
                first:true,
                second:false,
                third:false,
            },
            status:'',
        }
    },
    methods: {
        handleClick(tab,event){
            if (this.load[tab.name] === false){
                this.load[tab.name] = true
            }
        },
    }
}

再用watch监测一下activeName,通过activeName值的变化来改变参数中status的值，传给后台从而获得不同的数据展示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
watch: {
    activeName(newVal, oldVal){
        switch (newVal) {
            case 'first':this.status = null
            break;
            case 'second':this.status = '1'
            break;
            case 'third':this.status = '2'
            break;
            default:this.status = null
            break;
        }
    }
}

至此大功告成，如有不对之处欢迎之处，联系邮箱：libeibei0804@outlook.com

Posted on Edited on

今天在一台新的电脑上拉代码来写博客，拉下来代码，一切安装就绪后，执行hexo s命令发现出现了警告：

alt

于是查询了一些网站，发现是原来用的next主题，现在拉下的代码里没有这个主题，只有原始默认的主题，解决办法就是下载next主题就好了：

git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完主题之后重新启动就正常啦

Posted on Edited on

gitbash拉取代码的时候输错了账号密码，以为重新打开gitbash就会再次弹出输入账号密码的弹窗，结果并没有，于是只能去清除电脑的凭据：

1、快捷键win+r，然后输入control打开控制面板

2、点击打开用户账户

3、点击凭据管理器

4、点击windows凭据找到git凭据删除即可

Posted on Edited on

vue项目中，前端调用后台接口是会遇到跨域问题，可以用jsonp或者CROS（跨域资源共享）的方式解决：

1、CROS(跨域资源共享) 后台更改header


header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
　　
这样就可以跨域请求数据了。

2、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

打开config里的index.js文件

然后更改dev里的内容


proxyTable: {
    ‘/api’: {
      target: ‘http://www.qdd.com ‘,//后台提供的接口地址
      changeOrigin: true,
    }
}

顺便说一下可以让在局域网内的所有电脑打开你的程序的方式，还是打开config里边的index.js文件，在dev里更改host为0.0.0.0


host: ‘0.0.0.0’,

如有错误或其他问题可以直接邮件联系libeibei0804@outlook.com