工作中遇到的问题（持续更新）

工作中遇到的问题-方便查阅（持续更新）

1.formData上传多文件的问题

通常formdata是这样的

formData.append("username", "Groucho");
formData.append("accountnum", 123456);//数字123456会被立即转换成字符串 "123456"

如果后台接收的是数组的话 就是下面这种写法 ，多文件上传的难点在于 选择完多个文件 回显之后 如果再删除已经选择的话 这个时候formdata的数组里的数据是没有被删掉的，formData有一个delete方法 删除指定 key 和它对应的 value(s)。 可是多文件的话 就不能用这个了,所以思路就是 一开始 可以新建一个数组 文件发生改变的话 我们去操作这个数组 最后 提交的时候 把这个数组 赋值给formData

fd.append('attach[]', curFiles[i]);

2.获取浏览器 各种宽度高度问题

3.echarts x轴在上的那种横柱状图

4.隐藏滚动条滚动 兼容火狐

		(思路：在外面添加一个div  设置overflow：hidden;通过调整内部div的宽度 来把滚动条遮盖掉)、
		chrome我们都知道 有一个属性

			::-webkit-scrollbar {display:none}

		可以实现隐藏滚动条 而且也可以滚动

5.ajax中的contentType 以及统一设置请求头（用来验证tooken）

axios.defaults.withCredentials=true;//设置允许跨域携带cookie信息
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = 'http://192.168.0.1:8000'

6.封装jquery方法 例如 一个简单的弹出层

	$.oppo = function (msg, time, callback) {
        var html = '
' + msg + '
';
        $('body').append(html);
        setTimeout(function () {
            $('.oppo').remove()
            if (typeof (callback) == 'function') {
                callback()
            } else {

            }
        }, time * 1000)
    }

7.git如何覆盖更新 如何解决代码冲突

8.td里面嵌套div

9.flex布局

10.ES6 箭头函数

11.vue的router-link样式问题

关于base64格式的图片 显示问题

获取到的base64码前面拼接上'data:image/png;base64,'    然后把拼接后得到的字符串 赋值给src即可 

关于二进制图片显示问题

以axios请求为例

this.$axios.get('/api/validate_code/',
    {
     responseType:'blob'
    }
   )
   .then((response) => {
             var img = document.getElementById('vcode-img');
             var objectUrl = window.URL.createObjectURL(response.data);
             img.src = objectUrl;
             img.onload = function(){ //当图片加载完成后 释放对象url
               window.URL.revokeObjectURL(objectUrl);
             };
   })
   .catch((error) => {
    console.log(error)
   })  

webpack创建项目

1.新建一个文件夹
2.进入这个文件夹 npm init 生成packge.json
3.npm install --save-dev webpack 本地安装webpack依赖
4.创建webpack.config.js文件并配置

npm i -g npm 升级npm版本
npm install npm -g

vue-cli升级

lite-server

启动vue打包后的项目文件夹,需要安装插件

vue-devtool的安装

https://segmentfault.com/a/1190000009682735

webpack+vue-cli初始化一个vue项目

1.全局安装 vue-cli npm install -g vue-cli
2.用webpack模板初始化vue一个项目 vue init webpack my-project
3.进入my-project目录下 启动 cd my-project npm install(安装依赖) npm run dev（启动项目）

下载cnpm 安装淘宝镜像 即可使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue query传值和params传值

//传值:
this.$router.push({name:'系统基本信息',path:'/systemMessage',query:{system_id:id,system_name:name}});
//获取:
this.$router.query.system_id
this.$router.query.system_name

params传值和query传值 类似 区别 在于 query传值 页面刷新 值就没有了 而params传值 刷新了值还在

npm -S和-D的区别

vue-cli引入element-ui

1.npm安装element-ui
npm i element-ui -S
2.在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

还可以按需引入 可查看element-ui 官方文档

vue+element使用富文本编辑器

1.安装组件
npm install vue-quill-editor --save
2.在页面中使用

作者：陈楠酒肆
链接：https://www.jianshu.com/p/4e00f11583fa
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

vue-arae-linkage //vue三级联动插件

vue-cli引入jquery

1.cnpm install jquery --save-dev
2.在webpack.base.config.js中添加以下配置：
const webpack = require(‘webpack’)

plugins: [
new webpack.ProvidePlugin({ //引入Jquery
$: ‘jquery’,
jQuery: ‘jquery’,
‘window.jQuery’:‘jquery’
})
]
3.需要在那个页面用，直接 import $ from ‘jquery’
或者直接写入main.js

vue-cli安装axios

1.安装npm install axios
2.修改main.js
添加

import axios from 'axios'
Vue.prototype.$http = axios
axios.defaults.baseURL = host
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers['XPS-Version'] = '1.0.0'
//使用：
this.$http.get('http://192.168.1.253:8000/validate_code').then(function(response){
	console.log(response)
}).catch(function(error){console.log(error)})

axios的使用 以请求本地json文件为例

1.json文件必须放到 static目录下
2.请求方式 必须用get post会404
3.用法
this.$http.get(’…/static/test.json’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

vue-cli引入echarts

1.安装echarts依赖 npm install echarts -S
2.全局引入
修改main.js
// 引入echarts
import echarts from ‘echarts’

Vue.prototype.$echarts = echarts

// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(‘mycharts’);

vue: npm run dev报错如下：
‘webpack-dev-server’ ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\piseclab-1\AppData\Roaming\npm-cache_logs\2018-06-25T07_59_19_020Z-debug.log

解决办法：
1：删除node_modules

2：执行cnpm cache clean --force 或者 npm cache verify

3：cnpm install

4：npm run dev

npm i -g npm 升级npm版本
npm install npm -g

echarts图表随窗口大小适应

window.onresize = function(){
myChart.resize();
}

git常用命令

git clone 克隆代码到本地
git diff +文件名 对比自己的文件和线上的文件有哪些不一样
git pull 下拉代码
git branch 查看分支信息
git checkout +分支名 切换到某一分支
git checkout -b test //新建test分支
git checkout -d test //删除test分支
git add . 提交所有文件
git add 文件1名 文件2名 提交单个文件
git commit -m “注释” 把代码提交到本地库
gut push origin master 把本地代码推送到远程仓库

如何覆盖更新
git fetch --all
git reset --hard origin/master

如何忽略某一个文件更新
编写.gitignore文件过滤

可扩展：
DataV数据可视化
vue全局函数，公共方法的抽离
vue引入公共js
公共css
公共组件 组件传值(子传父 父传子 非父子组件之间)
axios异步执行顺序问题 promise
ref的使用
wacth的使用
计算属性computed的使用
bus传值
vuex的使用
keep alive的使用
项目全局正则验证输入的合法性
前台分页