那些年踩过的坑(1)

那些年踩过的坑

Module not found: Error: Can't resolve 'views/coverConfigurationRong' in 'D:\new-operation-admin\src\js\router'

原因：写好路由之后，新建文件夹，但是没有给一个带export的入口（出口）文件。

_.assign() _.assign(object, [sources]

const rst = await api.initData(params)
        console.log(JSON.stringify(rst))
        // const res = rst.data.data
        // let data 
        // error：_.assign(object, [sources])，
        //需要声明data是一个对象！！！
        let data = {}
        _.assign(data,{
          vos: data ? rst.data.data.vos: [],
          total: data ? rst.data.data.total : 0
        })
        this.vos = data.vos
        this.page.total = data.total      

async await

const rst =  api.initData(params)
console.log(rst)//undefined
 //async 要声明在离await最近的 作用域

el-table-item 不显示

v-if & v-for

This 'v-if' should be moved to the wrapper element

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnGmOObE-1594481810310)(C:\Users\YY\AppData\Roaming\Typora\typora-user-images\image-20200701110504941.png)]

正确写法

 <el-select
            v-model="searchForm.firstCategory"
            placeholder="请选择一级经营目录">
              <template  v-for="(item,index) in searchForm.categoryList" >
                <el-option
                v-if="searchForm.categoryList.level===1"
                :key="index"
                :label="item.categoryName+item.categoryId"
                ></el-option>
              </template>
</el-select>

el-table

el-column 组件里的内容显示不出来

 <template v-slot="{row}">
  </template>
  //需要用上面的 包住

text-align 只控制行内的对齐，不控制块级元素自己

el-upload

image()

image()函数将会创建一个新的实例相当于document.createElement(‘img’)

image(width,height)

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

error：

vue.min.js:6 TypeError: Cannot read property '_withTask' of undefined

@click 监听的clic事件处理函数找不到

例如没有声明previewImg,报错

 <i class="el-icon-view" @click="previewImg"></i>

return会停止函数

typeMatch(row,type){
         console.log(row.vos.length)
        for(let i=0; i < row.vos.length; i++){
          // 只循环了两次
          if(row.vos[i].type){
            console.log(5555, i)
            let pathMatch = row.vos[i].type === type ? row.vos[i].coverUrl : ''
            // console.log('pathMatch:',pathMatch)
             return pathMatch ? pathMatch : ''
          }
        }
      },

怎么在elment ui 组件的事件里传入自定义的属性:

<el-upload
class="image-uploader"
:action="uploadUrl"
:show-file-list="false"
accept="image/jpeg, image/jpg, image/png"
//:before-upload="beforeUpload"
//改写如下
:before-upload="(file)=> beforeUpload(item.type,file)"
:on-success="imageUploadSuccess"
v-show="!hideShow(row,item.type)"
>
<i class="el-icon-plus"></i>
</el-upload>

原理：得看源代码啊。。。

error: react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child 

it turned out to be that I was unintentionally including an Object in my JSX code that I had expected to be a string value

function Comment(props){
        return(
          <div className="comment-container"> 
            <img src={props.url} alt=""/>
            <div className="user-name">{props.name}</div>
            <div className="comment-text">{props.text}</div>
            <div className="comment-date">{props.date}</div>
            //上面的props.date期待应该是String类型
          </div>
        )
      }
      const data = {
        userName: 'all',
        text: "I hope you enjoy react",
        date: new Date(),//typeof(new Date()) Object
        url: 'https://placekitten.com/g/64/64'
      }
      ReactDOM.render(
        <Comment 
        date={data.date}
        name={data.userName}
        url={data.url}
        text={data.text}
        />,
        document.getElementById('extract')
      )

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

State组件私有

setState更新数据

promise

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

arguments是一个对应传递给函数的参数的类数组对象

function func1(a, b, c) {
  console.log(arguments[0]);// expected output: 1
  console.log(arguments[1]); // expected output: 2
  console.log(arguments[2]); // expected output: 3
}
func1(1, 2, 3);

构造方法constructor。在构造方法中可以用super关键字来调用一个父类的构造方法

creating an instance 创建axios实例。。

axios.create([config])

const instance = axios.create({

​ baseURL:’ ’

timeout:30e3//30second

headers:{‘content-type’:‘application/json’,‘X-Requested-With’: ‘XMLHttpRequest’}

})

请求拦截器:不会。。。。。

You can intercept requests or responses before they are handled by then or catch.

e.g:

instance.interceptors.response.use()

babel ：转码编辑器，es6转es5

_.defaultsDeep(object, [sources])

参数

1. object (Object): 目标对象。
2. [sources] (…Object): 来源对象。

实现路由跳转

router

routes array

const routes = [
  {
    name: 'test',//String命名路由
    path: '/',//String 绝对路径
    component: component.test//视图组件，要跳转到的组件
  },
  ]

router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link
        tag="li"
        v-for="(item, index) in scrm_menu"
        :to="item.path"
        :key="index"
        >{{ item.title }}</router-link
      >
      one item in array:{
            path: '/live-center-commission',
            title: '直播中心抽佣日表'
          },

导入components

legoflow 配置：https://legoflow.com/wiki/config.html

在不同环境下的domian域名配置

http api 构建

默认配置：

const httpDefaultConfig = {
  method: 'GET',//方法
  headers: {//headers
    'Content-Type': 'application/json'
  },
  params: {},//with params
  withCredentials: true,//允许跨域携带cookies

  timeout: 30e3
}

//XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request, regardless of Access-Control- header.

---

声明错误信息类：不会+1

_.get 根据object对象那个的path路径获取值

_.get(object, path, [defaultValue])

1. object (Object): 要检索的对象。
2. path (Array|string): 要获取属性的路径。
3. [defaultValue] (*): 如果解析值是 undefined ，这值会被返回

.d.ts typescript声明文件

why scss（css预处理器）

css，用编程语言来样式设计，再编译成正常的 css文件。

变量：

$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

　$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

可计算：

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

嵌套：

　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

混入：？？？？不懂+10086

导入：

@import "path/filename.scss"

判断：

循环

写一些校验规则…

0-100的小数或者正数

/^\d{1,2}+(.\d{1,2})?$/

转换成数字之后判断是否是正数**Number.isInteger()** 方法用来判断给定的参数是否为整数

表单校验：

dom与rules对应：通过prop同名

定义校验规则

:rules=“rules”

rules={

xxxx:[{

}]

}

提交的时候总体校验：

获取表格每行的index：prop.$index

<el-table-column
label="操作"
width="width">
<template slot-scope="prop">
<el-button type="danger" v-if="prop.$index!==0" @click="deleteRow(index)">删除</el-button>
</template>
</el-table-column>

删除某一行,同样要获得此行index

deleteRow(index){
        this.newForm.rebateProportionList.splice(index,1)
      },

方法用来判断给定的参数是否为整数

表单校验：

dom与rules对应：通过prop同名

定义校验规则

:rules=“rules”

rules={

xxxx:[{

}]

}

提交的时候总体校验：

获取表格每行的index：prop.$index

<el-table-column
label="操作"
width="width">
<template slot-scope="prop">
<el-button type="danger" v-if="prop.$index!==0" @click="deleteRow(index)">删除</el-button>
</template>
</el-table-column>

删除某一行,同样要获得此行index

deleteRow(index){
        this.newForm.rebateProportionList.splice(index,1)
      },