工作中遇到的问题-方便查阅（持续更新）
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 = '<div class="oppo">' + msg + '</div>';
$('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样式问题
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的使用
项目全局正则验证输入的合法性
前台分页