本周学习总结

1.vue项目：

        这周又进行了一个新的项目。它和上次的考试项目内容差不多，存在许多重复的内容。不过在写项目的过程中发现自己对父子间的通信掌握的还是不熟练：比如如何通过子组件去改变父组件中的数据。我在项目中采用的方法如下：采用props和$emit进行单项数据绑定。部分代码如下：

父组件：设置更改自己数据的方法，将该方法传递给子组件。

<template>
  <div>
    <div class="task" v-show="check == '任务'">
      <div class="taskTop">
        <span>高等数学</span>
      </div>
      <div class="taskState">
        <span>未开始(3)</span>
      </div>
      <div class="zuo">
        <el-card class="box-card">
          <div
            v-for="o in 3"
            :key="o"
            class="text item"
            @click="check = '签到'"
          >
            <div class="name">
              <img
                :src="adatar ? adatar : require('@/assets/yxy/classPic.jpg')"
              />
            </div>
            <div class="name">
              <span> {{ "任务尚未开始 " + o }}</span>
              <span class="tasktime">开始时间：2023-1-20</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="taskState">
        <span>进行中(4)</span>
      </div>
      <div class="zuo">
        <el-card class="box-card">
          <div
            v-for="o in 4"
            :key="o"
            class="text item"
            @click="check = '签到'"
          >
            <div class="name">
              <img
                :src="adatar ? adatar : require('@/assets/yxy/classPic.jpg')"
              />
            </div>
            <div class="name">
              <span> {{ "任务进行中 " + o }}</span>
              <span class="tasktime">截至时间：2023-1-22</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="taskState">
        <span>已结束(5)</span>
      </div>
      <div class="zuo">
        <el-card class="box-card">
          <div
            v-for="o in 5"
            :key="o"
            class="text item"
            @click="check = '签到'"
          >
            <div class="name">
              <img
                :src="adatar ? adatar : require('@/assets/yxy/classPic.jpg')"
              />
            </div>
            <div class="name">
              <span> {{ "签到已结束 " + o }}</span>
              <span class="tasktime">截止时间：2023-1-12</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="qian">
        //子组件：通过父组件设置更改自己数据的方法，将该方法传递给子组件
      <SignIn v-show="check == '签到'" :check="check" @changeMsg="changeMsg" />
    </div>
  </div>
</template>

<script>
import { Card } from "element-ui";
import SignIn from "@/components/student/CourseInfo/SignIn";
export default {
  name: "ClassTask",
  data() {
    return {
      radio: "1",
      adatar: "",
      check: "任务",
    };
  },
  components: {
    [Card.name]: Card,
    SignIn,
  },
  methods: {
    //接受相应的数据更改父组件中的数据
    changeMsg(text, value) {
      console.log(text, value);
      this.check = value;
    },
  },
};
</script>

子组件：接受父组件传递的方法，通过props接受到相应的方法和数据，在组件实例上可以直接获取和触发。

<template>
  <div class="sign">
    <div class="signTop">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item 
          ><span @click="changeFatherData">返回</span></el-breadcrumb-item
        >
        <el-breadcrumb-item>课程任务</el-breadcrumb-item>
        <el-breadcrumb-item>签到</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="signTitle">
      <div class="name">
        <img :src="adatar ? adatar : require('@/assets/yxy/classPic.jpg')" />
      </div>
      <div class="name">
        <p style="margin-top: 12px">签到</p>
        <p class="nameTime">
          2022-12-21 09:59
          <span
            ><i
              class="el-icon-timer"
              style="font-size: 16px; margin-right: 6px"
            ></i
            >已结束</span
          >
        </p>
      </div>
    </div>
    <div class="signMain">
      <div class="detailed">
        <div class="she" v-show="meet == '未签到'">
          <div @click="meet = '已签到'">
            <i
              class="el-icon-timer"
              style="
                font-size: 60px;
                margin-right: 6px;
                color: #d29918;
                font-weight: bolder;
              "
            ></i>
          </div>
          <div style="margin-top: 15px">尚未签到</div>
          <div>截止时间：2023-1-15 12：00</div>
        </div>
        <div class="endq" v-show="meet == '已签到'">
          <div>
            <i
              class="el-icon-success"
              style="
                font-size: 60px;
                margin-right: 6px;
                color: rgb(24 103 210);
                font-weight: bolder;
              "
            ></i>
          </div>
          <div style="margin-top: 15px">按时签到</div>
          <div>签到时间：2023-1-14 12：00</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from "element-ui";
export default {
  name: "SignIn",
//通过props接受到方法和数据
  props: {
    check: String,
  },
  data() {
    return {
      adatar: "",
      meet: "未签到",
      text: "我是子组件传递的数据，我要发送给父组件",
      jiao: "任务",
    };
  },
  methods: {
    changeFatherData() {
    //'chanageMsg'与子组件中的命名相同,后面是传递的参数
      this.$emit('changeMsg', this.text, this.jiao);
    },
  },
  components: {
    [Breadcrumb.name]: Breadcrumb,
    [BreadcrumbItem.name]: BreadcrumbItem,
  },
};
</script>

2.算法方面

1）在写代码的时候，一般情况下：nextInt（）后面不能直接跟nextLine()否则会造成代码跳跃的现象与自己的预期效果不同。例子如下：

system. out.print("请输入学生总数: ");
n=reader.nextInt(）;
string[][ ]ren=new string[n][4];
for(int i=o;i<ren.length;i++){
system.out.println( "-----------");
system.out.println("请输入第"+(i+1)+"个学生的学号:");
ren[i][0]=reader.nextLine();
system.out.println("请输入第"+(i+1)+"个学生的姓名:");
ren[i][1]=reader.nextLine();
.......
}

        在上述代码中会出现输入完总人数，回车输入学生相关信息是跳过学号直接到输入姓名的步骤。原因如下：在nextInt后面跟的是nextLine时,当你输完总人数3之后会按回车键，接着for循环中的第一次nextLine()方法把3后面的换行符\n读取掉了，然后把光变换到下一行要输入的地方也就是你要输入姓名的时候。所以一般会在for循环的第一行加入temp=reader.nextLine;它的作用是读取掉输完人数之后的换行符。