2018-08-14

一些开发过程中遇到的问题(一)

记录一些我在平常工作中遇到的问题

1.json文件

"react": "^16.2.0",这里面的^表示版本当前主版本号内的版本都是可以的也就是16.x.x都是会自动更新的。～则表示最小位版本号内的版本，也就是16.2.x.
devDependencies开发环境
dependencies生产环境，npm项目
rm -rf 强制删除指定目录下的文件和所有子文件递归删除，无需询问
安装某个固定版本

npm install

2.对象

对象可以不加双引号，也可以加

//写法一
let json = {
    a:'apple',
    b:'banana'
}
//写法二
let json = {
    'a':'jspang',
    'b':'技术胖'
}

3.el表达式

epression language,也就是我们常见到的${expression}这种

4.形参的命名

形参的命名和其他东西真的没有什么关系，他可以是任何名字，只要是你在调用时候用的就是形参中的名字，但是要注意的是，如果你在头文件也就是函数定义的时候写了一个名字，那么后面调用的时候的数据类型，形参名字是和你之前定义的要保持一致的。当然了，一般为了方便，我们都会定义成和他的作用差不多的名字，比如我们需要传入的参数或者说需要操作的函数是名字，那么我们一般将参数也命名为name。

5.一些框架

angular是一个mvvm框架，它有数据绑定，更适合以数据中心为的系统，比如像一些管理平台，比如应用管理平台或者电商店铺的管理等，总之就是以数据流为中心等一些管理系统更适合用angularjs这样等。

6.sublime文件无法保存

原网址：http://blog.csdn.net/cigg153/article/details/69938277

sublime text 3 保存文件时，提示sublime text 3 unable to save permission denied错误。

原因：保存文件时，保存文件的位置是根目录，在根目录下没有写入的权限

解决办法：更换保存文件的位置

7.随机数的生成

//生成有n个元素的随机数组，每个元素的随机范围为[rangeL, rangeR]
#include<iostream>
#include<ctime>
#include<cassert>
using namespace std;
int* generateRandomArray(int n ,int rangeL, int rangeR){
    assert(rangeL <= rangeR);
    int *arr = new int[n];
    srand(time(NULL));
    for(int i =0; i <n; i++){
        arr[i]= rand()%(rangeR -rangeL +1)+ rangeL;
    }
    return arr;
}

8.压缩

一般图片的话可以使用tinypng来压缩，而js代码的话可以使用UglifyJS来进行压缩。

9. git

进入系统磁盘，那么则直接输入cd \系统盘名称
进入某个文件夹，那么则直接输入cd 文件夹名称
git 中不允许名称中包含有大写字母

10. express的安装和简单应用

http://weizhifeng.net/how-to-publish-a-node-module.html

如何发布Node模块到NPM社区

http://www.expressjs.com.cn/
express 官网

如果只是全局的安装了express好像不可以，一定要在项目目录下再安装一次。

服务启动不成功的时候，会生成一个express的debug的文件，记录调试信息，如果服务成功启动以后，那么这个文件会自动消失。
关于端口号被重复占用的问题

Failed at the myresume@0.0.0 start script 'node ./bin/www'.其实这个指的就是我们的文件夹目录下的www文件，在这里我们可以手动修改端口号的值。从而解决端口号被占用的问题。

11.express不是内部或外部命令也不是可运行的程序？

安装时请使用npm install -g express命令，另因express默认安装是最新的版本，已经是4.x.x的版本。而最新express4.0+版本中将命令工具分出来了，所以必须要安装express-generator，执行命令npm install -g express-generator命令即可。无需配置环境变量等东西。安装完成后，执行express --version命令，即可看到安装的express的版本号。另外，npm -v命令并不是查看版本号，而是 -v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)

12、location.href

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面

13.margin不起作用

把margin-top改成padding-top,不过,前提是内层的Div没有设置边框
给外层的Div加padding-top
给外层DIV加：

float: left或right
position: absolute
display: inline-block或table-cell或其他 table 类型
overflow: hidden或auto
14.修改element样式
问题描述:当我们修改elementUI的默认样式比如dialog的时候，如果我们的style有加scoped或者直接在标签中书写内联样式并且加！important也是不管用的。如果去掉scoped有效，但是这个改变会是全局的，其他的样式也会改变。
解决方案: 将dialog组件最外层包裹一个class，并且在书写样式时也包上这一层class

示例代码

**** html ****
.dialog
    el-dialog(...)
    
**** css ****
<style lang='scss'>
.dialog {
  .el-dialog {
    margin-left: 60px;
  }
}
</style>

15.setCurrentRow失效

问题描述：table表格数据回显

解决方法：

****1****
setTimeout(() => {
    this.$refs.singleTable['setCurrentRow'](oSel);
}, 10);

****2****
也许用nextTick也是可以的

16.@change=”handleCheckAllChange”

问题描述:handleCheckAllChange(val)代表什么
回答：val代表当前所选中的v-for里面的label值。也就是说我们可以在template里面改变这个值。根据我们的需要。目前在修改label 的值后，这个并不影响我们其他的显示功能

17.表格中的按钮和图片

表格中的按钮的话，如果有第二行，可能会有错开的现象，后面发现从二行开始及以后的按钮都会往里缩紧。后面发现他们有一个默认的margin-left:10px，去掉就好了
1
2
3
4
5
.el-button + .el-button {
margin-left: 0;
margin-bottom: 10px;
margin-right: 10px;
}
添加margin-right:10px之后，第一行的按钮没有分开，要手动再给他加一个margin-right:10px;因为我们的margin-right是加载砂上面这个类里面，而这个类的意思应该是第一个按钮追加的按钮的类。
多选框也有一个默认的margin-left值

如果我们要在表格中添加图片的话，可以添加如下代码，利用scope.row,他后面的值就是我们使用的prop

el-table-column(label="头图" width="180")
    template(slot-scope="scope")
        img.w-90.h-90(v-if="scope.row.covers.length!==0" :src="scope.row.covers[0].url")
        .w-90.h-90.lh-90(v-else style="border:1px dashed #d9d9d9") 暂无相关图片

18. keyup.enter(native可能要加)

vue可以利用v-on监听键盘回车事件，

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

但是如果使用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native

<el-input @keyup.enter.native="submit"></el-input>

19.elementui table

我们有的时候根据某一行的状态不是一定要非要后端返回给我们他们的boolean值然后根据这个去v-show或者v-else去判断他到底展不展示、是否disabled
你也不要一直局限于我非要根据某一行的boolean值然后，给他去加一个boolean值然后去怎样怎样，结果搞得每一行都是一个状态
另外，很多时候如果你觉得if和else比较繁琐(这两行其他数据都是一毛一样的)，这时候可以多多去尝试使用三目运算符，减少代码量的冗余，可读性也会更强。
最后，表格中的scope.row什么的，你是可以直接拿来在template中使用的呀，不是非要放到ts中才会生效。甚至我们通过这些数据与后端数据的比较直接实现我们上面那样的操作的啊

20.如何获取response headers中的信息

浏览器Request Header和Response Header的内容:https://blog.csdn.net/m0_37828249/article/details/78164320
详解web缓存:https://segmentfault.com/a/1190000006741200

前端

AJAX

需要配置Access Control Allow Origin选项

xhr.getAllResponseHeaders();//返回全部头信息,string
xhr.getResponseHeader('date');//获取对应的某一个字段

21. elementui cascader

后端传回来的数据可以获取到，但是在下拉列表里没有显示
原因一：没有对数据进行处理，要处理成合适的数据格式
原因二:没有写props,对于数据的话，他得知道显示哪些东西才对嘛，你不告诉他，他自己也懵了。

props如何写

oCateTreeProps: {
    value: 'name',
    label: 'name',
    children: 'child',
    disabled: true
}

原有geshi

{
    "value":{
        "cate_id":"0e2",
        "name":"服饰",
        "parent":"root",
        "level":1,
        "weight":10,
        "desc":"",
        "tag_ids":"",
        "status":0,
        "cate_image":null,
        "alias":"",
        "if_checked":false,
        "cates_lv1_lv2":""
    },
    "children":Array[0],
    "count":0,
    "if_checked":false,
    "child":Array[9]
}

现在格式

{
    "value":Object{...},
    "children":Array[0],
    "count":0,
    "if_checked":false,
    "child":Array[9],
    "cate_id":"0e2",
    "name":"服饰",
    "parent":"root",
    "level":1,
    "weight":10,
    "desc":"",
    "tag_ids":"",
    "status":0,
    "cate_image":null,
    "alias":"",
    "cates_lv1_lv2":""
}

修改格式的函数,可以看出，这两个的区别就是我们把父节点的值取出来，不过这样的话，父节点的值重复了两次，有没有什么更好的方法呢？

// 处理tree 数据
fnBsnModifyTreeData(aList) {
  function loop(item) {
    item = {
      ...item,
      ...item.value
    };
    if (item.child.length) {
      item.child = item.child.map((child, i) => {
        return loop(child);
      });
    } else {
      delete item.child;
    }
    return item;
  }
  aList = _.map(aList, (item, i) => {
    return loop(item);
  });
  return aList;
},

本文标题:一些开发过程中遇到的问题(一)

文章作者:Gentlelynn

发布时间:2018-08-14, 14:07:39

最后更新:2018-08-14, 14:13:10

原始链接:https://gentlelynn.github.io/2018/08/14/tips/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。