[JavaScript知识库]山东大学项目实训博客汇总

山东大学程序设计能力提升平台

丁心宜

2022.3.1 动效的实现

通过监听滚轮事件,判断组件距离最上层的距离判断是否应该将显现.
这里使用了animate动画库.
Dom结构如下:

<template>
  <div class="product" :style="{ top: divTop }">
    <div class="fareWall">
      <div
        :v-show="showFareWall"
        :class="{
          animate__animated: showFareWall,
          animate__fadeInRight: showFareWall,
          container: showFareWall,
          no_Display: !showFareWall,
        }"
      >
        <img
          src="../../assets/imgs/pc/wall.png"
          alt=""
          width="300"
          style="position: relative; display: inline-block; top: 100px"
        />

        <div class="text">
          <span class="title">{{ $t("digitalProductService.fareWall") }}</span>
          <span class="content">
            {{ $t("product.fareWall_detail1") }}
            <br />
            {{ $t("product.fareWall_detail2") }}
            <br />
            {{ $t("product.fareWall_detail3") }}
            <br />
            {{ $t("product.fareWall_detail4") }}
          </span>
        </div>
      </div>
    </div>
    <div class="notify">
      <div
        :v-show="showNotify"
        :class="{
          animate__animated: showNotify,
          animate__fadeInLeft: showNotify,
          container: showNotify,
          no_Display: !showNotify,
        }"
      >
        <div class="text">
          <span class="title">
            <a href="https://noti.sectoken.io" style="color: #0c4f6d">{{
              $t("product.transNotice")
            }}</a></span
          >
          <span class="content" style="text-align: left">
            {{ $t("product.transNotice_detail1") }}
            <br />
            {{ $t("product.transNotice_detail2") }}
          </span>
        </div>
        <a href="https://noti.sectoken.io" style="color: #0c4f6d">
          <img
            src="../../assets/imgs/pc/notify.png"
            alt=""
            width="190"
            style="position: relative; display: inline-block; top: 100px"
          />
        </a>
      </div>
    </div>
    <div class="wallet">
      <div
        :v-show="showWallet"
        :class="{
          animate__animated: showWallet,
          animate__fadeInRight: showWallet,
          container: showWallet,
          no_Display: !showWallet,
        }"
      >
        <img
          src="../../assets/imgs/pc/B.png"
          alt=""
          width="280"
          style="position: relative; display: inline-block; top: 120px"
        />

        <div class="text">
          <span class="title"> {{ $t("product.wallet") }}</span>
          <span class="content">
            {{ $t("product.wallet_detail1") }}
            <br />
            {{ $t("product.wallet_detail2") }}
            <br />
            {{ $t("product.wallet_detail3") }}
            <br />
            {{ $t("product.wallet_detail4") }}
            <br />
            {{ $t("product.wallet_detail5") }}
          </span>
        </div>
      </div>
    </div>
    <div class="digitalCurrentNode">
      <div
        :v-show="showNode"
        :class="{
          animate__animated: showNode,
          animate__fadeInLeft: showNode,
          container: showNode,
          no_Display: !showNode,
        }"
      >
        <div class="text">
          <span class="title"> {{ $t("product.node") }}</span>
          <span class="content">
            {{ $t("product.node_detail1") }}
            <br />
            {{ $t("product.node_detail2") }}
            <br />
            {{ $t("product.node_detail3") }}
            <br />
          </span>
        </div>
        <img
          src="../../assets/imgs/pc/node.png"
          alt=""
          width="300"
          style="position: relative; display: inline-block; top: 100px"
        />
      </div>
    </div>
  </div>
</template>

js:

<script>
export default {
  name: "Product",
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  data() {
    return {
      showFareWall: false,
      currentScroll: 0,
      showNotify: false,
      showWallet: false,
      showNode: false,
    };
  },
  computed: {
    divTop: function () {
      return document.documentElement.clientHeight + 1170 + "px";
    },
  },
  methods: {
    handleScroll() {
      this.currentScroll = window.pageYOffset; //表示当前滚动的位置
      if (this.currentScroll >= 1200) {
        this.showFareWall = true;
      }
      if (this.currentScroll >= 1700) {
        this.showNotify = true;
      }
      if (this.currentScroll >= 2200) {
        this.showWallet = true;
      }
      if (this.currentScroll >= 2700) {
        this.showNode = true;
      }
      // if (this.currentScroll >= this.$refs.test2ref.offsetTop - 100) {
      //   this.testShow2 = true;
      // }
      // if (this.currentScroll >= this.$refs.test3ref.offsetTop - 100) {
      //   this.testShow3 = true;
      //   setTimeout(() => {
      //     this.testShow3 = false;
      //   }, 400);
      // }
    },
  },
};
</script>

scss:

<style lang="scss" scoped>
.product {
  height: 2160px;
  position: absolute;
  left: 0;
  right: 0;
  /*width: 100%;*/
}

.fareWall {
  position: relative;
  left: 0;
  top: 0;
  height: 540px;
  right: 0;
  background: #f7feff;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .text {
    position: relative;
    width: 600px;
    text-align: left;
    top: 70px;
    margin-left: 15%;
    display: inline-block;
    .title {
      font-size: 26px;
      display: block;
      width: 100%;
      font-weight: bold;
      line-height: 37px;
      color: #0c4f6d;
      opacity: 1;
      margin-bottom: 40px;
    }
    .content {
      margin-top: 40px;
      width: 100%;
      height: 132px;
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;
      color: #0c4f6d;
      opacity: 1;
    }
  }
  .animate__animated.animate__fadeInRight {
    --animate-duration: 1s;
  }
  .no_Display {
    display: none;
  }
}

.notify {
  position: relative;
  left: 0;
  top: 0;
  height: 540px;
  right: 0;
  background: #ecf7fc;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .text {
    position: relative;
    width: 702px;
    text-align: left;
    top: 30px;
    margin-right: 13%;
    display: inline-block;
    .title {
      font-size: 26px;
      display: block;
      width: 100%;
      font-weight: bold;
      line-height: 37px;
      color: #0c4f6d;
      opacity: 1;
      margin-bottom: 40px;
    }
    .content {
      margin-top: 40px;
      width: 612px;
      height: 132px;
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;
      color: #0c4f6d;
      opacity: 1;
    }
  }
  .animate__animated.animate__fadeInRight {
    --animate-duration: 2s;
  }
  .no_Display {
    display: none;
  }
}

.wallet {
  position: relative;
  left: 0;
  top: 0;
  height: 540px;
  right: 0;
  background: #f7feff;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .text {
    position: relative;
    width: 540px;
    text-align: left;
    top: 90px;
    margin-left: 10%;
    display: inline-block;
    .title {
      font-size: 26px;
      display: block;
      width: 100%;
      font-weight: bold;
      line-height: 37px;
      color: #0c4f6d;
      opacity: 1;
      margin-bottom: 40px;
    }
    .content {
      margin-top: 40px;
      width: 612px;
      height: 132px;
      font-size: 18px;
      font-weight: bold;
      line-height: 40px;
      color: #0c4f6d;
      opacity: 1;
    }
  }
  .animate__animated.animate__fadeInRight {
    --animate-duration: 1s;
  }
  .no_Display {
    display: none;
  }
}

.digitalCurrentNode {
  position: relative;
  left: 0;
  top: 0;
  height: 540px;
  right: 0;
  background: #ecf7fc;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .text {
    position: relative;
    width: 600px;
    text-align: left;
    top: 40px;
    margin-right: 10%;
    display: inline-block;
    .title {
      font-size: 26px;
      display: block;
      width: 100%;
      font-weight: bold;
      line-height: 37px;
      color: #0c4f6d;
      opacity: 1;
      margin-bottom: 40px;
    }
    .content {
      margin-top: 40px;
      width: 612px;
      height: 132px;
      font-size: 18px;
      font-weight: bold;
      line-height: 40px;
      color: #0c4f6d;
      opacity: 1;
    }
  }
  .animate__animated.animate__fadeInRight {
    --animate-duration: 2s;
  }
  .no_Display {
    display: none;
  }
}

/*img {*/
/*  display: inline-block;*/
/*  vertical-align: middle;*/
/*  -webkit-transform: perspective(1px) translateZ(0);*/
/*  transform: perspective(1px) translateZ(0);*/
/*  box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/
/*  -webkit-transition-duration: 0.3s;*/
/*  transition-duration: 0.3s;*/
/*  -webkit-transition-property: transform;*/
/*  transition-property: transform;*/
/*}*/
/*img:hover {*/
/*  -webkit-transform: scale(1.1);*/
/*  transform: scale(1.1);*/
/*}*/
</style>

2022.3.10 el-upload File转Blob

   <el-upload
            action=""
            :on-change="analyzeZip"          >
            <el-button
              slot="trigger"
              >上传测试数据</i
            ></el-button>
   </el-upload>
      <script>
       // file转blob
fileToBlob(file, callback) {
  const type = file.type;
  const reader = new FileReader();
  reader.onload = (evt) => {
    const blob = new Blob([evt.target.result], { type });
    if (typeof callback === "function") {
      callback(blob);
    } else {
      console.log("我是 blob:", blob);
    }
  };
  reader.readAsDataURL(file);
},
 
analyzeZip(file) {
  const _file = file.raw;
  this.fileToBlob(_file, async (blob) => {
    console.log(blob);
  
  });
      <script/>

虽然最后发现formdata.append("file",blob)还是会把blob转化成file，呵呵

2022.3.20 浏览器的适配

监听浏览器尺寸变化

1.实现监听浏览器长度,宽度的变化调整背景图的尺寸

<template>
  <div class="back" id="back3">
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2700258_8tioo1ql138.css"
    />
    <img src="../../assets/imgs/mobile/bg.png" id="img3" />
    <div class="titleTop">***</div>
    <div class="middle"></div>
    <div class="titleBottom">Protect digital assets</div>
    <div class="more">
      <i class="iconfont icon-jiantou_yemian_xiangxia_o" style="font-size: 20px" />
    </div>
  </div>
</template>

<script>
export default {
  name: "mbIndexPage",
  props: {
    Width: Number,
    Height: Number,
  },
  data() {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      props: ["Width", "Height"],
    };
  },
  mounted() {
    this.change();
  },
  // 实时监听页面宽高
  watch: {
    // eslint-disable-next-line no-unused-vars
    Width(newWidth, oldWidth) {
      this.width = newWidth;
      // console.log(newWidth);
      this.change();
    },
    // eslint-disable-next-line no-unused-vars
    Height(newHeight, oldHeight) {
      this.height = newHeight;
      // console.log(newHeight);
      this.change();
    },
  },
  methods: {
    change() {
      var pic = document.getElementById("img3");
      pic.width = this.width;
      // console.log(pic.width);
      pic.height = this.height + 3;
      var back = document.getElementById("back3");
      back.width = this.width;
      // console.log(pic.width);
      back.height = this.height + 3;
    },
  },
};
</script>

<style scoped>
.back {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.titleTop {
  width: 77px;
  height: 21px;
  font-size: 16px;
  position: absolute;
  text-align: left;
  top: 90px;
  left: 32px;
  font-weight: bold;
  line-height: 0;
  color: #ffc300;
  opacity: 1;
  z-index: 20;
}
.middle {
  width: 89.2px;
  height: 4px;
  position: absolute;
  top: 108px;
  left: 32px;
  z-index: 20;
  background-color: #ffc300;
  opacity: 1;
}
.titleBottom {
  width: 190px;
  height: 42px;
  font-size: 16px;
  font-weight: bold;
  line-height: 26px;
  color: #fff;
  opacity: 1;
  position: absolute;
  text-align: left;
  top: 117px;
  left: 32px;
  z-index: 20;
}
.more {
  position: relative;
  bottom: 30px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 55;
}
</style>

媒体查询

2.使用媒体查询来检测屏幕长宽来调整应该显示哪套界面,例如入口文件中:

.mbPopupCell {
  font-size: 16px;
  width: 100px;
  color: #fff;
  text-align: left;
  margin: 0 auto 0 auto;
  padding: 20px 0 23px 0;
}
.home {
  height: 100%;
  color: #f9f9f9;
  background: #F7FEFF;
}
.pc {
  height: 100px;
}
//pc端
@media only screen and (min-width: 1200px) {
  .pc {
    display: block !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
}
//pad端
@media only screen and (min-width: 768px) and(max-width: 1199px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
  .pad {
    display: block !important;
    touch-action: auto !important;
  }
}
// 手机端
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
    touch-action: auto !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
}

2022.3.30 发布文章添加标签

发布文章添加标签和分类,主要有创建标签,删除标签,添加分类等操作,含有对element原生组件的一些改动.
html:

<template>
  <div id="writeArticle" class="writeArticle">
    <div class="editor">
      <div class="title">
        <div class="gotoManage" @click="gotoManage()">
          <i class="iconfont icon-xiangzuo" style="font-size: 22px;position: relative;top: 2px;right: 3px"></i>
          <span>管理博文</span>
        </div>
        <div class="inputDiv">
          <input
            v-model="title"
            :style="{width:inputWidth}"
            class="titleInput"
            maxlength="50"
            placeholder="请输入文章标题"
            style="font-family: chen_ch"
            type="text">
        </div>
        <div v-show="!edit" class="draft" @click="publishArticle(1)">
          存草稿
        </div>
        <div v-show="!edit" class="publish" @click="publishArticle(2)">
          发布博文
        </div>
        <div v-show="edit"
             class="publish"
             @click="publishArticle(3)">
          更新博文
        </div>
      </div>
      <mavon-editor
        ref="md"
        v-model="value"
        :style="{height:divHeight}"
        :toolbars="markdownOption"
        class="mavon"
        codeStyle="tomorrow-night-blue"
        @change="changeInput"
        @imgAdd="imgAdd"
      />
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="publicFormVisible"
      class="publishArticleDialog"
      width="700px">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="分类">
          <div class="tag">
            <el-tag
              v-for="tag in Categories"
              :key="tag"
              :disable-transitions="false"
              closable
              @close="handleCategoriesClose(tag,Categories)">
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputCategoriesVisible"
              ref="saveCategoriesTagInput"
              v-model="inputCategoriesValue"
              class="input-new-tag"
              size="small"
              @blur="handleCategoriesInputConfirm(Categories)"
              @keyup.enter.native="handleCategoriesInputConfirm(Categories)"
            >
            </el-input>
            <el-button v-else v-show="showAddBtn" class="button-new-tag" size="small" @click="showCategoriesInput">+ 分类
            </el-button>
          </div>

          <div class="radio">
            <el-radio-group v-model="radio" @change="changeCategories">
              <el-radio v-for="Category in AllCategories"
                        :key="Category.categoryId"
                        :label="Category.categoryId"
                        class="Category"
              >
                {{ Category.categoryName }}
              </el-radio>

            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="标签">
          <div class="tag">
            <el-tag
              v-for="tag in Tags"
              :key="tag"
              :disable-transitions="false"
              closable
              style="float: left"
              @close="handleClose(tag,Tags)">
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @blur="handleInputConfirm(Tags)"
              @keyup.enter.native="handleInputConfirm(Tags)"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
          </div>
          <div class="radio">

            <el-checkbox-group v-model="checkedTags" @change="changeCheckedTags">
              <el-checkbox v-for="Tag in AllTags"
                           :key="Tag.tagId"
                           :label="Tag.tagId"
              >
                {{ Tag.tagName }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="cancel" @click="publicFormVisible = false">
          取消
        </div>
        <div class="confirm" @click="confirmPublish">
          {{ dialogTitle }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

js:

<script>
const lrz = require("lrz");
export default {
  name: "writeArticle",
  data() {
    return {
      md: "",
      lock: [],
      editCategoryTags: [],
      editCategoryId: null,
      render: "",
      title: "",
      value: "",
      dialogTitle: "",
      articleId: null,
      // object[]
      AllCategories: [],
      // names[]
      Categories: [],
      // object[]
      AllTags: [],
      // ids
      checkedTags: [],
      // name
      Tags: [],
      publicFormVisible: false,
      showAddBtn: true,
      edit: false,
      inputVisible: false,
      inputCategoriesVisible: false,
      inputValue: "",
      inputCategoriesValue: "",
      radio: 0,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "80px",
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        quote: true, // 引用
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  watch: {
    Categories(value) {
      if (value.length === 0) {
        this.radio = 0;
      }
      this.showAddBtn = value.length < 1;
    }
  },
  computed: {
    inputWidth: function() {
      return document.documentElement.clientWidth - 640 + "px";
    },
    divHeight: function() {
      return document.documentElement.clientHeight - 55 + "px";
    }
  },
  mounted() {
    // 如果是编辑页跳转过来的
    if (this.$route.params.id) {
      this.edit = true;
      this.articleId = this.$route.params.id;
      this.getOneArticle(this.$route.params.id);
    }
    this.getAllCategory();
    this.getAllTags();
  },
  methods: {
    gotoManage() {
      this.$router.push(
        {
          name: "blogManagement"
        }
      );
    },
    async getOneArticle(id) {
      let res = await this.$axios({
        method: "post",
        url: this.GLOBAL.url + "/article/getOne",
        data: {
          articleId: id
        }
      });
      if (res.data.code === 0) {
        this.value = res.data.result.md;
        this.title = res.data.result.title;
        this.md = res.data.result.md;
      } else {
        this.$message.error("原文章加载失败了哦~");
      }
    },
    async imgAdd(pos, $file) {
      let DateURL = "";
      this.lock.push(true);
      let len = this.lock.length;
      await lrz($file.miniurl, { quality: 0.95 }).then(res => {
        DateURL = res.base64;
      });
      let newFile = this.dataURLtoFile(DateURL);
      let url = await this.getURL(newFile);
      this.$refs.md.$img2Url(pos, url);
      this.lock[len - 1] = false;
    },
    dataURLtoFile(dateURL) {
      let filename = `${new Date().getTime()}.png`;
      let arr = dateURL.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async getURL(file) {
      let formData = new FormData();
      let url = "";
      formData.append("image", file);
      await this.$axios({
        url: "https://image.kieng.cn/upload.html?type=qq",
        method: "post",
        data: formData,
        headers: { "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundary7N5jgep6nLmUuWxd" }
      }).then((res) => {
        url = res.data.data.url;
      });
      return url;
    },
    async confirmPublish() {
      if (this.lock.indexOf(true) > -1) {
        this.$message.error("图片正在上传中,请稍等...");
        return;
      }
      if (this.dialogTitle === "更新博文") {
        await this.update();
      } else {
        await this.confirmPreserve();
        if (this.dialogTitle === "发布博文") {
          await this.publish();
        }
      }

      this.publicFormVisible = false;
    },
    // 更新博文
    async update() {
      let id = null;
      if (this.Categories.length !== 0) {
        let name = this.Categories[0];
        id = await this.AllCategories.filter((ele) => {
          if (ele.categoryName === name) {
            return true;
          }
        })[0].categoryId;
      }
      let res = await this.$axios({
        method: "post",
        url: this.GLOBAL.url + "/article/update",
        data: {
          articleId: this.articleId,
          categoryId: id,
          tagIds: this.checkedTags,
          title: this.title,
          content: this.render,
          md: this.md
        }
      });
      this.publicFormVisible = false;
      if (res.data.code === 0) {
        this.articleId = res.data.result.articleId;
        this.$message.success("更新成功");
      } else {
        this.$message.error(res.data.result);
      }
    },
    // 存草稿
    async confirmPreserve() {
      let id = null;
      if (this.Categories.length !== 0) {
        let name = this.Categories[0];
        id = await this.AllCategories.filter((ele) => {
          if (ele.categoryName === name) {
            return true;
          }
        })[0].categoryId;
      }
      let res = await this.$axios({
        method: "post",
        url: this.GLOBAL.url + "/article/create",
        data: {
          categoryId: id,
          tagIds: this.checkedTags,
          title: this.title,
          content: this.render,
          md: this.md
        }
      });
      this.publicFormVisible = false;
      if (res.data.code === 0) {
        this.articleId = res.data.result.articleId;
        this.$message.success("保存成功");

      } else {
        this.$message.error(res.data.result);
      }

    },
    // 发布
    async publish() {
      let res = await this.$axios({
        method: "post",
        url: this.GLOBAL.url + "/article/publish",
        data: {
          articleId: this.articleId
        }
      });

      if (res.data.code === 0) {
        this.articleId = res.data.result.articleId;
        this.$message.success("发送成功");
      } else {
        this.$message.error(res.data.result);
      }
    },
    changeCheckedTags(checkedTags) {
      let checkedTagName = this.AllTags.filter((ele) => {
        if (checkedTags.indexOf(ele.tagId) > -1) {
          return true;
        }
      }).map((ele) => {
        return ele.tagName;
      });
      let len = checkedTagName.length;
      let originalLen = this.Tags.length;
      if (len > originalLen) {
        checkedTagName.forEach((ele) => {
          if (this.Tags.indexOf(ele) === -1) {
            this.Tags.push(ele);
          }
        });
      } else {
        let newTags = [];
        this.Tags.forEach((ele) => {
          if (checkedTagName.indexOf(ele) !== -1) {
            newTags.push(ele);
          }
        });
        this.Tags = newTags;

      }
    },
    changeCategories(radio) {
      console.log(radio);
      this.Categories.length = 0;
      this.AllCategories.forEach((ele, index, arr) => {
        if (ele.categoryId === radio) {
          this.Categories.push(arr[index].categoryName);
        }
      });

    },
    getAllCategory() {
      let self = this;
      this.$axios({
        method: "post",
        url: this.GLOBAL.url + "/category/getAll"
      }).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          self.AllCategories = res.data.result.categorys;
        } else {
          this.$message.error(res.data.result);
        }
      }).catch(err => {
        self.$message.error("无法连接到服务器" + err);
      });
    },
    getAllTags() {
      let self = this;
      this.$axios({
        method: "post",
        url: this.GLOBAL.url + "/tag/getAll"
      }).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          self.AllTags = res.data.result.tags;
        } else {
          this.$message.error(res.data.result);
        }
      }).catch(err => {
        self.$message.error("无法连接到服务器" + err);
      });
    },
    handleClose(tag, Tags) {
      Tags.splice(Tags.indexOf(tag), 1);
      let id = null;
      for (let ele of this.AllTags) {
        if (ele.tagName === tag) {
          id = ele.tagId;
          break;
        }
      }
      this.checkedTags.splice(this.checkedTags.indexOf(id), 1);
    },
    handleCategoriesClose(tag, Tags) {
      Tags.splice(Tags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });

    },
    showCategoriesInput() {
      this.inputCategoriesVisible = true;
      this.$nextTick(() => {
        this.$refs.saveCategoriesTagInput.$refs.input.focus();
      });
    },
    async handleInputConfirm(Tags) {
      let inputValue = this.inputValue;
      let flag = true;
      this.AllTags.forEach((ele) => {
        if (inputValue.trim() === ele.tagName) {
          flag = false;
        }
      });
      if (inputValue && flag) {
        Tags.push(inputValue);
        let length = Tags.length;
        let res = await this.$axios({
          method: "post",
          url: this.GLOBAL.url + "/tag/create",
          data: {
            "tagName": this.Tags[length - 1]
          }
        });

        if (res.data.code === 0) {
          this.getAllTags();
          let id = res.data.result.tagId;
          this.checkedTags.push(id);
          this.$message.success("添加成功");
        } else {
          this.$message.error(res.data.result);
        }

      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    async handleCategoriesInputConfirm(Tags) {
      let inputValue = this.inputCategoriesValue;
      let flag = true;
      this.AllCategories.forEach((ele) => {
        if (inputValue.trim() === ele.categoryName) {
          flag = false;
        }
      });
      if (inputValue && flag) {
        Tags.push(inputValue);
        let res = await this.$axios({
          method: "post",
          url: this.GLOBAL.url + "/category/create",
          data: {
            "categoryName": this.Categories[0]
          }
        });
        if (res.data.code === 0) {
          this.getAllCategory();
          this.radio = res.data.result.categoryId;
          this.$message.success("添加成功");
        } else {
          this.$message.error(res.data.result);
        }

      }
      this.inputCategoriesVisible = false;
      this.inputCategoriesValue = "";

    },
    // autoSelect(id){
    //   this.AllCategories.forEach((ele,index)=>{
    //     // if(ele.categoryId===id){
    //
    //     }
    //   })
    // },
    publishArticle(flag) {
      if (this.article === "" || this.render === "") {
        this.$message.error("博客的题目或内容不能为空哦~");
      } else {
        if (flag === 1) {
          this.dialogTitle = "存草稿";
        } else if (flag === 2) {
          this.dialogTitle = "发布博文";
        } else {
          this.dialogTitle = "更新博文";
        }
        this.publicFormVisible = true;
      }
    },
    changeInput(value, render) {
      this.render = render;
      this.md = value;
    }
  }
};
</script>

scss:

<style lang="scss" scoped>
.writeArticle {
  /*background: red;*/
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;

  .editor {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    top: 0;

    .title {

      line-height: 55px;
      position: relative;
      height: 55px;
      top: 0;
      left: 0;
      right: 0;
      //background: red;
      //      background: red;
      //opacity: 0.5;
      background: rgba(255, 255, 255, 0.6);
      font-family: chen_ch;

      .gotoManage {
        width: 120px;
        height: 55px;
        position: relative;
        float: left;
        color: #757575;
        font-size: 20px;
        z-index: 66;
        //margin-right: 10px;
        margin-left: 10px;
        cursor: pointer !important;

      }

      .inputDiv {
        height: 55px;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        background: transparent;


        input:focus {
          border-color: #66afe9;
          outline: 0;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }


        .titleInput {
          background: transparent;
          border: 2px solid #ccc;
          outline-style: none;
          border-radius: 20px;
          top: 5px;
          line-height: 40px;
          height: 40px;
          padding-left: 20px;
          font-size: 20px;
          position: relative;
          //display: block;
          float: left;
          //overflow: hidden;
          transition-duration: 0.3s;
          //          transition-duration: fade-in();
        }
      }

      .draft {
        position: absolute;
        top: 4px;

        height: 43px;
        background: (255, 255, 255, 0.2);
        width: 120px;
        font-size: 20px;
        text-align: center;
        color: #545c64;
        right: 144px;
        border: 2px solid #545c64;
        //float: right;
        border-radius: 30px;
        line-height: 43px;
        transition-duration: 0.3s;
        cursor: pointer;
      }

      .draft:hover {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        background: #434A50;
        color: #fff;
        transition-duration: 0.3s;

      }

      .publish:hover {
        background: #fff;
        color: red;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        transition-duration: 0.3s;
      }

      .publish {
        transition-duration: 0.3s;
        position: absolute;
        //float: right;
        height: 43px;
        text-align: center;
        top: 4px;
        line-height: 43px;
        cursor: pointer;
        right: 10px;
        width: 120px;
        font-size: 18px;

        color: #fff;
        border-radius: 30px;
        background: red;
        border: 2px solid red;
      }
    }

    .mavon {

      position: relative;

    }
  }

  /deep/ .el-dialog__title {
    font-size: 24px !important;
    font-family: chen_ch;
  }

  /deep/ .el-form-item__label {
    font-size: 20px !important;
    font-family: chen_ch;
  }

  /deep/ .el-dialog {
    background: url("../../assets/imgs/little-monster-white.png") no-repeat;

    background-size: cover;
    margin-top: 7vh !important;
    border-radius: 20px !important;
    max-height: 820px;
    overflow-y: auto;
    transition-duration: 0.3s;

  }


  /deep/ .el-dialog:hover {

    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  }

  /deep/ .el-dialog__body {
    padding: 20px 40px 0 30px !important;
    background: rgba(255, 255, 255, 0.7) !important;
  }


  /deep/ .el-dialog__footer, /deep/ .el-dialog__header {
    background: rgba(255, 255, 255, 0.7) !important;

  }

  /deep/ .el-form-item {
    margin-bottom: 0 !important;
  }

  .publishArticleDialog {
    //background: url("../../assets/imgs/little-monster.png") no-repeat;
    //background-size: cover;
    overflow-y: auto;

    .dialog-footer {
      font-family: chen_ch;
      position: relative;
      bottom: 0;
      right: 20px;
      height: 70px;

      .cancel {
        position: absolute;
        top: 4px;

        height: 43px;
        background: (255, 255, 255, 0.2);
        width: 120px;
        font-size: 20px;
        text-align: center;
        color: #545c64;
        right: 144px;
        border: 2px solid #545c64;
        //float: right;
        border-radius: 30px;
        line-height: 43px;
        transition-duration: 0.3s;
        cursor: pointer;
      }

      .cancel:hover {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        background: #434A50;
        color: #fff;
        transition-duration: 0.3s;

      }

      .confirm:hover {
        background: #fff;
        color: red;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        transition-duration: 0.3s;
      }

      .confirm {
        transition-duration: 0.3s;
        position: absolute;
        //float: right;
        height: 43px;
        text-align: center;
        top: 4px;
        line-height: 43px;
        cursor: pointer;
        right: 10px;
        width: 120px;
        font-size: 18px;

        color: #fff;
        border-radius: 30px;
        background: red;
        border: 2px solid red;
      }
    }

    .tag {
      text-align: left;
      padding-left: 45px;
      width: 520px;

      .el-tag {
        margin: 10px;
        display: inline-block;

      }

      .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }

      .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }
    }

    .radio {
      border: 2px solid #cccccc;
      border-radius: 10px;
      height: 150px;
      width: 400px;
      overflow-y: auto;
      padding: 15px 20px 20px 50px;
      margin: 20px auto 20px auto;
      text-align: left;

      .Category {
        width: 70px;
        height: 35px;
        text-align: left;
        line-height: 35px;
        display: inline-block;
      }
    }


  }
}
</style>

2022.4.10 实现导入excel,上传文件和导出(1)

组件excelInport.vue

<template>
  <el-card>
    <div slot="header">
      <span style="float: left">学生信息上传</span>
      <el-upload ref="upload" :auto-upload="false" :headers="headers" :multiple="false" :on-change="onChange"
                 :show-file-list="false" action=''>
        <el-button slot="trigger" size="small" type="primary">
          选择文件<i :class="'el-icon-files'"></i>
        </el-button>
        <el-button :disabled="loading ||
        students.length==0"
                   size="small"
                   style="margin-left: 10px;" type="success"
                   @click="submitUpload">
          点击上传
          <i :class="loading?'el-icon-loading':'el-icon-upload'"></i>
        </el-button>
        <el-button :disabled="fileRes==''" size="small" style="float: right" type="text" @click="outExe">
          导出excel文件
          <i class="el-icon-download"></i>
        </el-button>
      </el-upload>
    </div>
    <el-table :data="students" border stripe style="width: 100%">
      <el-table-column label="学号" prop="id">
      </el-table-column>
      <el-table-column label="姓名" prop="name">
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
const XLSX = require("xlsx");

export default {
  name: "excelImport",

  data() {
    return {
      loading: false,
      formdata: {},
      students: [],
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      fileRes: "",
    };
  },
  props: {
    upload: {
      type: Function,
      default: () => {
        return Function;
      },
    },
  },
  methods: {
    onChange(file) {
      this.formdata = new FormData();
      this.formdata.append("file", file.raw);
      this.processFile(file);
    },
    getHeaderRow(sheet) {
      const headers = [];
      /* sheet['!ref']表示所有单元格的范围，例如从A1到F8则记录为 A1:F8*/
      const range = XLSX.utils.decode_range(sheet["!ref"]);
      let C,
          R = range.s.r; /* 从第一行开始 */
      /* 按列进行数据遍历 */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* 查找第一行中的单元格 */
        const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})];
        let hdr = "UNKNOWN " + C; // <-- 进行默认值设置
        if (cell && cell.t) {
          hdr = XLSX.utils.format_cell(cell);
        }
        headers.push(hdr);
      }
      return headers;
    },

    processFile(file) {
      this.students = [];
      const reader = new FileReader();
      reader.onload = (e) => {
        /* 解析数据 */
        const bstr = e.target.result;
        const wb = XLSX.read(bstr, {type: "binary"});
        /* 获取文件的第一个工作表（WorkSheet） */
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        /* 数组转换 */
        const data = XLSX.utils.sheet_to_json(ws, {header: 1});
        /* 进行表格数据更新 */
        for (let i = 1; i < data.length; i++) {
          let item = {
            id: String(data[i][0]),
            name: data[i][1],
          };
          this.students.push(item);
        }
        /* 进行表格表头数据更新 */
        this.cols = this.getHeaderRow(ws);
      };
      reader.readAsBinaryString(file.raw);
    },
    async submitUpload() {
      this.loading = true;
      this.fileRes = await this.upload(this.formdata);

      this.loading = false;
      this.$message({
        message: "上传成功！请点击最下方按钮导出xlsx文件",
        type: "success",
      });
    },
    outExe() {
      this.$prompt("此操作将导出excel文件, 是否继续?", "请输入文件名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(({value}) => {
            // this.excelData = this.dataList; //你要导出的数据list。
            this.saveExcel(value);
          })
          .catch(() => {
          });
    },
    saveExcel(name) {
      const content = this.fileRes.data;
      console.log(content);
      const blob = new Blob([content]); //构造一个blob对象来处理数据
      let fileName = "绑定码.xlsx";
      if (name) {
        fileName = name + ".xlsx";
      }
      //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
      //IE10以上支持blob但是依然不支持download
      if ("download" in document.createElement("a")) {
        //支持a标签download的浏览器
        const link = document.createElement("a"); //创建a标签
        link.download = fileName; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
      } else {
        //其他浏览器
        navigator.msSaveBlob(blob, fileName);
      }
    },
  },
};
</script>

<style scoped>
.head div {
  display: inline-block;
}
</style>

2022.4.20 实现导入excel,上传文件和导出(2)

组件的使用
html:

<excel :upload="upload" />

js:

import excel from "../../components/excelImport";
export default {
	name: "userListDetails",
	components: {
		excel,
	},,
	methods:{
			async upload(data) {
			data.append("id", this.id);
			let res = await this.$ajax.post("/usergroup/addStudent", data, {
				headers: {
					Authorization: "Bearer " + localStorage.getItem("token"),
					"Content-Type": "multipart/form-data",
				},
				responseType: "blob", //服务器返回的数据类型
			});

			await this.getInfo();
			return res;
		},}}

2022.5.15 ES6复习巩固

1.let变量声明及声明特性

1.1 变量声明

    let a;
    let b, c, d;
    let e = 100;
    let f = 1, g = 2, h = 3;

1.2 不能重复声明

     let star='a'
     let star='b'

报错，但是var可以

1.3 块级作用域

全局，函数，eval

{
let girl = '丁心宜'
}
console.log(girl)

let 打印不出,var 可以

1.4 不存在变量提升*

console.log(song)
let song = '小燕子穿花衣'

会报错
但是用var相当于

var song;
console.log(song)
let song='小燕子穿花衣'
//undefined

不报错

1.5 不影响作用域链

虽然是块级作用域，但不影响作用域链

作用域链(Scoped chain):由子级作用域返回父级作用域中寻找变量，就叫做作用域链。

    {
      let score = '120'
      function fn1() {
        let school = '山东大学'
        function fn() {
          console.log(school);
          console.log(score)
        }
        fn();
      }
      fn1()
    }

两个变量都能打印出来。这里为了说明问题，用了两层，其实多少层都能寻找到变量。

2. const声明常量及其特性

声明方法

const 变量名 = 值

注意事项：

1. 声明的时候要赋初值
2. 一般常量名全部大写(潜规则)
3. 常量不能重新赋值
4. 块级作用域

{
    const PLATER='DXY'
}
console.log(PLAYER)
//ERROR:not defined

5. 对于数组和对象的元素修改，因为地址没有发生改变，因此不算做对常量的修改，不会报错*

const ARR = [1,2,3,4]
ARR.push(5)
// 不报错

3. 变量的解构赋值

3.1 数组的解构

const F4=['迪丽热巴','古力娜扎','杨幂','刘诗诗'];
let [di,gu,yang,liu] = F4;
console.log(di)
//迪丽热巴

3.2 对象的解构

const zhao = {
    name: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log('我可以演小品')
    }
}
let {name,age,xiaopin} = zhao
xiaopin()
// 或者
let {xiaopin} = zhao
xiaopin()

4. 模板字符串

数据类型：String

声明:

let str=`模板字符串`

内容中可以出现换行符

变量拼接

let lovest = 'AngelaBaby';
let out = `${lovest} is the BEST actress in my heart!`

5. 对象的简化写法

ES6允许在大括号里面直接写入变量和函数，作为对象的属性和方法。方法的写法也可以省略。

    let name = 'dxy'
    let age = 21
    let speak = function () {
      console.log('我爱说废话');
    }
    const person = {
      name, // 即：name:name
      age, // 即：age:age
      speak // 即：speak.speak
      improve(){
          console.log(111)
      }
      /*
      等同于：
      improve:functon(){
         console.log(111)
      }
      **/
    }
    person.speak()

6. 箭头函数及其声明特点

6.1 声明方法

声明一个函数：

// 一般
let fn = function(a,b){
   //代码体 
}
// 箭头函数
let fn = (a,b) => {
    //代码体
}

6.2 特性

6.2.1 静态this

箭头函数的this是静态的，时钟指向函数声明时所在作用域下this的值。

  function getName() {
      console.log(this.name)
    }
    let getName2 = () => {
      console.log(this.name)
    }
    window.name = '窗体对象name'
    const obj = {
      name: "一个对象的名字"
    }
    // getName(); 
    // getName2();
    // 都会返回window.name
     
    // call方法调用
    getName.call(obj)
    // this被动态的改为对象
    getName2.call(obj)
    // this还是原来的窗体

另外一个例子：
需求，点击方块立刻变成粉色。
普通写法，需要将this存起来，因为function的this指向会发生改变

    let ad = document.getElementById('ad')
    ad.addEventListener("click", function () {
      let _this = this
      let changeColor = function () {
        _this.style.background = 'pink'
      }
      changeColor()
    })

箭头函数写法,不用存this，因为箭头函数的this是静态的，它的this就指向function的this，即名为ad的变量。

    let ad = document.getElementById('ad')
       ad.addEventListener("click", function () {
       changeColor = () => {
         this.style.background = 'pink'
       }
      changeColor()
    })

6.2.2 不能作为构造函数实例化对象

个人理解是，既然this在声明时已经指向函数所在作用域下this的值，那么this就不能再重新赋值，作为一个新的对象了。(不能把窗体作为一个刚new的Person对象)
错误示例：

    let Person = (name, age) => {
      this.name = name
      this.age = age
    }
    let me = new Person('xiao', 30)
    console.log(me)
    //Uncaught TypeError: Person is not a constructor

6.2.3 不能使用arguments对象

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);

但是箭头函数没有这个对象

    let fn = () => {
      console.log(arguments);
    }
    fn()
    //Uncaught ReferenceError: arguments is not defined

6.2.4 箭头函数的简写

6.2.4.1 省略小括号

当形参有且只有一个时。

let add = n =>{
   return n+n
}
console.log(add(9))
//18

6.2.4.2 省略花括号

当代码体只有1条语句时，此时return也必须省略，而且语句的执行结果就是函数的返回值。

let pow = n => n * n
console.log(pow(9))

6.2.4.3 案例

const arr=[1,6,9,10,100,25]
const result=arr.filter(function(item){
    if(item%2===0){return true}
    else{return false}
})

箭头函数简写：

const result = arr.filter(item=>item%2===0)

结果都是[6,10,100]，都是对的。

6.2.5 箭头函数的应用场景

• 适合于this无关的回调，定时器，数组的方法回调
• 不适合与this有关的回调，事件回调，对象的方法
  比如：

{
    name:'Sabina',
    getName:function(){
        return this.name;
        //可以拿到这个对象name
    }
    getName1:()=>{
        return this.name
        //这个时候的this指向的是外层作用域的this值
    }
}

7. 函数参数的默认值

如果不赋值，即为undefined

或者，与解构赋值结合：

function connect({host='127.0.0.1',username,pswd,port}){
    
}
connect({
    host:'baidu.com',
    username:'root',
    pswd:'123456',
    port:3306
})

8. rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

• ES5获取实参的方式：

function date(){
    console.log(arguments)
}
date('丁小宜','丁心宜','dxy')

打印出来的arguments是一个对象

• ES6通过rest参数获取实参：

function date(...args){
    console.log(args)
}
date('丁小宜','丁心宜','dxy')

打印出来的是一个数组。注意，如果方法有多个参数，要把arguments放在最后。

function fn(a,b,...args){
    console.log(a)//1
    console.log(b)//2
    console.log(args)//[3,4,5,6]
}
fn(1,2,3,4,5,6)

9. 扩展运算符

…运算符可以将数组转换成逗号分隔的参数序列（实参）

const tfboys = ['易烊千玺'，'王源','王俊凯']
function chunwan(){
    console.log(arguments)
}
chunwan(...tfboys)
//相当于传了三个参数，而不是一个数组

9.1 扩展运算符的应用

9.1.1 数组的合并

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr = [...arr1,arr2]

9.1.2 数组的拷贝

浅拷贝

const arr1 = [1,2,3]
const arr2 = [...arr1]

9.1.3 将维数组转换为真正的数组

const divs = document.querySelectorAll('div')
let divArr = [...divs]
console.log(divArr)

10. Symbol数据类型

一种类似于string的数据类型，但是又不同。

JS一共有7种数据类型，分别为USONB：

• U：undefined
• S:String Symbol
• O:Object
• N:Number Null
• B:boolean

10.1 Symbol的创建

// 构造函数
let s0 = Symbol()
let s1 = Symbol('1')
let s2 = Symbol('1')
console.log(s1===s2)//false
// Symbol.for创建
let s3 = Symbol.for('1')
let s4 = Symbol.for('1')
console.log(s3===s4);//true

10.2 向对象中添加Symbol类型的属性

    let game = {
      name: "狼人杀",
      [Symbol('say')]: function () {
        console.log('我可以发言')
      },
      [Symbol('explotion')]: function () {
        console.log('我可以自爆')
      }
    }
    console.log(game);

打印的game：

或者添加同名方法：

    let game = {
      name: "俄罗斯方块",
      up: function () {

      },
      down: function () { }
    }
    let methods = {
      up: Symbol(),
      down: Symbol()
    }
    game[methods.up] = function () {
      console.log('我可以改变形状');
    }
    game[methods.down] = function () {
      console.log('我可以快速下降');
    }
    console.log(game);

打印结果：

10.3 Symbol的内置属性

这些内置属性是Symbol的属性，同时Symbol.xx又作为对象的属性存在，目的是为了扩展对象的功能。

10.3.1 Symbol.hasInstance 对象类型检测

用于类型检测，检测某个对象是否是某个自定义类的实例，以此来控制instanceof的值。下面这个例子可以判断某个参数是否为非空数组：

    class Arr1 {
      static [Symbol.hasInstance](instance) {
        return Array.isArray(instance) && instance.length > 0
      }
    }
    console.log([] instanceof Arr1)

10.3.2 Symbol.isConcatSpreadable

Symbol.isConcatSpreadable是一个布尔值属性，表示该对象用于Array.prototype.concat()时,是否可以展开。

    const arr1 = [1, 2, 3]
    const arr2 = [4, 5, 6]
    arr2[Symbol.isConcatSpreadable] = false
    console.log(arr1.concat(arr2));
    // expected [1,2,3,[4,5,6]]