5月学习【前端，接口，vue，dos,PPT，快捷键】

May-1

①视图更新的设置数值（数组）

this.$set(目标数组 , 索引 , 值);
<p>
    单纯的设置值也可以更新数值，但是无法更新视图
	因为ES5的限制，Vue.js不能检测对象属性的添加或者删除,因为Vue.js在初始化实例时将属性转为getter/setter，所以属性必须在data对象上才能让Vue.js转换他，才能它是响应的
</p>

②created函数在data后面，methods前面，使用this.方法去调用

③循环实现的card或者table操作列打开看不见

将dialog放在table循环的后面

May-2

①手贱关闭了资源管理器，黑屏了，win+r都打不开

解决方法：
	ctrl+shift+esc ----打开任务管理器
	新建 explorer.exe即可

②Error: Node Sass does not yet support your current environment: Windows 64-bit

npm install node-sass

③在typeora中，ctrl+/ 可以进入或退出 代码模式

④用cmd开启/关闭程序

打开：
	首先 win + r 打开cmd
	cd 首字母(tab)(有些不会显示出来)
关闭
	tasklist
	查询pid
	taskkill /pid pid值 -f

⑤弹出 USB Attached scsi(AS)大容量存储设备时出问题该设备正在使用中。请关闭可能

1.右键 此电脑----->管理
2.系统工具---->事件查看器----->自定义视图---->管理事件(查看是哪个停止删除或弹出设备  pid)
3.ctrl + shift + esc 打开任务管理器，找到对应的pid，结束(或者 打开cmd tasklist ----> taskkill /pid 之前找到的pid数 -f)

⑥查看Element源码

插件 vue-helper

May-4

①html中的(h , span)动态改变值

这里会用到一个叫做Mustache语法，也就是双大括号的写法"{{}}"

例如：
	<h1 style="text-align : center">{{Tasktitle}}</h1>
在script中
	<script>
export default {
  data() {
    return {
      Tasktitle:'这样就可以显示一个动态变化的标题了',
    }
  }
}
              

可借鉴网址

②在vue中 也存在 += 运算符(自己尝试的)

③截取字符串

let str = "abcdef"
一个参数：
str = str.slice(2) "cdef"
str = str.substring(2) "cdef"
str = str.substr(2)  "cdef"
两个参数：
str = str.slice(2 , 4) 从2-4"cd"
str = str.substring(2 , 4)从2-4 "cd"
str = str.substr(2 , 4)  从第三个开始往后数4位"cdef"

④包含字符串

ES6:语法
    contains()
    startWith()
    endsWith()
--------------
indexof
	const str = "1111"
	if(str.indexof("111") >= 0)
	{
	这个字符串包含字符串"111"
	}

⑤在方法中调用return中的数据要加 this，否则会报undefined

May-7

①.PPT遇到不可编辑文字

这一块使我们不可以修改的文字，进入幻灯片母版修改

进入之后，发现可以修改了，删除即可。

记得保存~~

关闭即可

这样我们就完成了~

②另存为快捷键

shift  + ctrl + s

May-8

①打印含有双引号的字符串(JS)

相关测试：
	console.log("Hello,"pig"");
	//报错Uncaught SyntaxError: missing ) after argument list。
//因为双引号里面只能是单引号

	console.log("Hello 'pig'");
//打印成功
	console.log("Hello \"pig\"");
//这样就打印出来了，我们想要的双引号！

②vue报警告

原因：

​ 当前存在同名的下一级，需要进入下一级才可

直接进入cd进入同名的下一级即可成功

③vs code 报错

报错截图

翻译英语，更新可能由于反病毒软件和或正在运行的进程。在你尝试去再次去更新时，请尝试重启你的机器

请阅读日志文件查看更多信息

	我现在没有上面说的反病毒软件和什么进程阻碍了它，就只能去它说的这个日志文档里面看看了

继续翻译，Code的路径似乎在这里面不存在

那我就尝试把之前安装的VS code 复制过来
	因为我之前网慢，所以直接是从另一个安装好VS code的拖过来的

结果发现OK了

总结：

​ 1.不要一遇到什么事情就去查，很多时候，软件的错误提示也要去看，就算是英文的，这样还可以增强你的英语水平呢

​ 2.能有安装包尽量拖安装包下载，不然可能会报很多莫名其妙的错误

④输入法自动变成繁体

ctrl +shift +f 就可以切换回来了

⑤vs code 格式化 快捷键

alt + shift + f(Format 格式)

May-9

①浏览器回退快捷键

alt + 方向键

②替换字符串中的undefined(可以更改的)

	开始，我一直在使用replace 但是一直没有渲染上去，于是我就尝试着打印一下，才发现原来其实它已经更改了，但是却并没有出现视图更新
	猜测可能是作用域的原因

验证

我在函数中尝试修改，在循环外面打印，却发现根本没有修改成功

所以，这个问题应该出现在并没有真正更新

经过查找

w3shool的replace函数

才知道，原来这个方法实现的是替换，更新的字符串通过返回值更新，这也解释了为什么我做不到更改

另外，注意，这个replace后面如果不加东西，是无法替换的，需要一个替换的值和一个被替换的值

May-10

①手机热点链接电脑(有线):

如何手机网络连接电脑

May-13

①let是局部变量，var是全局变量

②实现动态改变数组内的值

<el-steps
          v-model="stepPost"
          :active="activeLength"
          style="margin: 50px"
          >
          <el-step
            v-for="item in stepPost"
            :key="item.key"
            :description="item.description"
            :title="item.title"
          >
            <el-button
              slot="icon"
              :icon="item.icon"
              circle
              @click="queryTextInfo(item)"
            ></el-button>
          </el-step>
        </el-steps>

这里我绑定了stepPost这个数组，但是数组内并没有写东西，通过接口修改数据

async queryCurrentWorkflow() {
      const data = await this.$api.queryWorkflowInstanceStatus(
        {},
        {
          params: {
            workflowInstanceId: "83da9b14-b3bb-11eb-9c4f-1c697a257759", //当前工作流实例ID
          },
        }
      );

      this.activeLength = data.data.length + 1;

      this.$set(this.fontData.form, 0, data.data[0].assignee);
      let checkCount = 0,
        reviewCount = 0;
      for (let i = 0; i < data.data.length; i++) {
        if (data.data[i].taskName === "填写稿件")
          data.data[i].title = "投稿人：" + data.data[i].assignee;
        else if (data.data[i].taskName === "校") {
          data.data[i].title =
            ++checkCount + "校稿人：" + data.data[i].assignee;
        } else {
          data.data[i].title =
            ++reviewCount + "审稿人：" + data.data[i].assignee;
        }
        console.log(data.data[i].title, "title");
        data.data[i].key = i;
        data.data[i].icon = "el-icon-s-custom";
          
        // this.stepPost[i].title += data.data[i].assignee;
        // if (i >= 1) {
        //   this.stepPost[i].title =
        //     data.data[i].taskName + "--校对人：" + data.data[i].assignee;
        // } else {
        //   this.stepPost[i].title += data.data[i].assignee;
        // } 
          /*
          如果我用上面这种被注释的方法去赋值的话，最后只能实现一个死的数据(不能动态修改审校状态)
          */

        data.data[i].description =
          "开始时间" +
          data.data[i].starTime +
          "结束时间" +
          data.data[i].endTime;
        if (data.data[i].endTime == undefined) {
          this.activeLength -= 1;
          console.log("进来了");
          data.data[i].description = data.data[i].description.replace(
            "undefined",
            "（未结束）"
          );
        }

        if (i == 0) {
          this.Tasktitle = data.data[0].taskName;
        }
      }
      this.stepPost = data.data;
    这里就实现了动态的改变stepPost的值！！！
    
    console.log(this.stepPost);
    },

​ 这里的思想就是，我的数组不够用，那我就直接拿后端传回来的数据，进行赋值，最后直接指向这个空间就行

③快速切换同个程序的多个界面

ctrl + tab

比如，有两个Tyopra的页面，通过这个关键字可以实现两个相互切换

④console打印两个东西

console.log("你想加的字符",var)

May-14

①查看接口返回数据

1.先进入 SwaggerUI中，点开需要查询的接口

2.点击 Try it out

输入需要填写的数据 Execute

这样就可以看到需要拿到的渲染的数据长什么样子了

May-15

①实现数组的动态赋值(另一种方法)

for(let i = 0 ; i < length ; i ++){
    let arr = {},//每次循环创建一个暂时的数组存放
    
   	arr.title = data.data.taskAssginee[i];
    arr.key = i ;
    
    this.stepPost.push(arr);
    //赋值完成之后，将这个arr 压近stepPost中，实现动态
 	
}

②浏览器切换标签页

命令	操作
ctrl + 数字	切换到对应标签页(右循环)
ctrl + tab	右循环切换界面
Ctrl+shift + tab	左循环切换界面

③截图右键的菜单

使用 键盘上的 （PrintScreen)，但是这样会截整个屏幕的图

alt+PrintScreen可以做到截图当前活动界面

真实截图

但是这样也就没办法做到截图右键的了，我觉得是因为触发了Alt

④出现DNS异常

出现以下异常，就是DNS异常了

1.可以登录QQ(因为QQ不需要DNS)

2.可以ping主机，但是无法访问网站(网站提示)

修改为这个就行

⑤清空console(控制台)

ctrl + l

⑥新建标签页

ctrl + t
在本界面，新建标签页
ctrl + n 
新建页面

⑦刷新界面

F5
ctrl + r（快捷键）

May-16

①vs Code 隐藏侧边文件夹

ctrl + b

②仅使用键盘新建文件夹

1.点击	键盘右边 Windows图标右边的(相当于代替了鼠标右键 )
2.w ---> F

③实现一起修改

选中后，ctrl + D 按一次，增加一个

May-20

①从0开始写api接口

1.根据接口文档写api

import {post } from 'utils/http'

export default{
    /**
	 * @description 新增Api
	 */
     insertApi : post('/api/insert'),
     /**
	 * @description 修改Api
	 */
      updateApi: post('/api/update'),
      /**
	 * @description 删除Api
	 */
       deleteApi : post('/api/delete'),
}

上面的代码，按照后端接口写

2.在index中注册，并export出来

export

3.在所需文件中导入

import api from 'api'

4.使用

 async queryAllCharacter() {
      const data = await api.selectAllChara.selectAllChara({
          
      })
      console.log(data.data)
    },

我们导入了，所以不需要

this.$api.selectAllChara({
    
})

这里需要一一对应

②修改并查看接口请求地址

在修改完之后一定要记得重启！！

在TERMINAL（终端）----ctrl + c —y

重新运行 npm run dev

在这里查看请求的地址

May-21

①Popconfirm 选择"是"才执行操作

翻阅element的源码得知

      <el-button 
        size="mini" 
        :type="cancelButtonType" 
        @click="cancel"
      >
      </el-button>
      <el-button 
        size="mini" 
        :type="confirmButtonType" 
        @click="confirm"
      >
      </el-button>

<script>

export default {
 
  methods: {
    confirm() {
      this.visible = false;
      this.$emit('onConfirm');
    },
    cancel() {
      this.visible = false;
      this.$emit('onCancel');
    }
  }
};
</script>

我们直接@confirm即可达到目标

@onCancel 也可以做到选择否，执行操作

May-22

①typora设置高亮

ctrl + ,

打钩，重启typora就ok了

②打开控制面板

一、win+r---->control

二、win+i----->控制面板

③重置数据

一、赋值操作

resetData() {
       this.form.name = '';
       this.form.desc = '';
}

二、利用函数

$("form")[0].reset();
//"form"为form表单绑定的数据

三、利用js原生

 document.getElementById("demo").reset();

上面的form表单
	 <el-form ref="form" :model="form" label-width="80px" id="demo">

May-23

①保证唯一下拉

我在使用element里面的导航栏时，出现了

点击一个有下拉菜单的目录，所有都会展开

开始找到很多

:unique-opened="true"

:default-active="$route.path"

但是效果都没有实现

最后去console控制台才发现

可能在subMenu少了index

并且在menu中加上 :unique-opened="true"
<el-submenu index=1>
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item 
            v-for="user in userList"
            :index=" '/' +  user.path "
            :key="user.id"
          >
            <i :class="user.class"></i>
            <template slot="title">
              <span>{{user.userName}}</span>
            </template>

          </el-menu-item>

        </el-submenu>

          <el-submenu index=2 >
            <template slot="title">
              <i class="el-icon-finished"></i>
              <span>角色管理</span>
            </template>

            <el-menu-item
              v-for="chara in charaList"
              :index=" '/' + chara.path "
              :key="chara.id"
            >
              <i :class="chara.class"></i>
              <template slot="title">
                <span>{{chara.charaName}}</span>
              </template>          
            </el-menu-item>
          </el-submenu>

现在就行了

May-24

①点击导航栏—>没有东西

对比代码，才得知

加上router-view才能显示

因为在前面，我们在el-menu中使用了router，使用了vue-router模式，所以需要view才能显示
<router-view>
    <router-link></router-link>
</router-view>

May-25

①抽取input组件

拆出来的组件

<template>
  <div class="roleInput">
    <div>
       {{ inputName }}
    </div>

    <div class="inputArea">
      <el-input
        v-model="inputData"
        :type="inputType"
        :placeholder="placeholder"
      ></el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'roleInput',
  props: ['inputName', 'inputData', 'inputType', 'placeholder'],
  data() {
    return {}
  },
}
</script>

抽取出来的组件，基本都按照常规写法写，只是需要注意的是
下方的js

1.返回一个名字。这个名字就将作为，父组件中 import 进来的，和components 使用的
2.每一个输入的值都需要从父组件中传来，所以需要接收 ---->[props]

而在父组件中，则需要这么绑定

 <roleInput
          :inputName="label"
          :inputData="input"
          :inputType="inputType"
          :placeholder="placeholder"
        ></roleInput>

import roleInput from '@/adminPages/adminSystem/subUnit/input.vue'
export default {
    components:{
        roleInput,
    },