【前端实习】第三周小结

原创已于 2025-09-10 14:57:59 修改 · 1.1k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #经验分享

于 2024-11-17 22:30:57 首次发布

前端实习专栏收录该内容

7 篇文章

订阅专栏

第一次实习的第三周（11.10-11.15）已经结束。

分享最近的案例和感受。

一、未雨绸缪-探索更多的可能性

前段时间，小组组长让我接触AI问答项目，一开始就是熟悉项目代码。

在原有的基础上，有需求则改动；

进行功能复刻，更加熟悉业务和前端知识点；

或是进行功能扩展。（比如我在前面的实习小结提到增加问答的echarts图表和表格输出等等）

这三个点我都有去尝试，在练习和实践中不断成长...

学习的东西总需要检验才知道自己是否理解掌握。

碰巧刚好有一个机会...

我的领导和组长，交给我一个比较紧急（周四晚布置，周六就要上线）的需求。

简单地说，就是增加模拟用户输入的问题，匹配、输出问题的对应回答以及处理半匹配不匹配等的回答情况，以及模拟问答的逐字输出效果。

刚好我之前有练习过，而且有在组长的帮助下，因此较好较快地完成这个业务需求...

当完成了这个需求后，我不经在想：

一个正在开发的项目，往往会有不断的业务需求以及调整调试需要。

我们在处理现有需求的同时，有机会也要站在更高的角度和维度去思考问题，

并且作出一定的尝试，日后遇到类似需求，自己也可以更好地上手，完成好任务。

二、接触新项目的一些行动和感想

当项目A的业务需求完成得差不多的时候，领导让我准备去到另外项目并且让新的组长带我，一开始就是项目的下载包（由于内部账号还没批，只能通过这种方式）和安装依赖。

不得不说的是，nvm是非常有必要的，单纯安装某个具体版本node根本不够用，每次接触新的项目，项目的所需的node不同，使用nvm就方便多了，轻松切换。

这里介绍我常用的nvm指令（掌握这几条，基本够用了）

nvm ls   //查看已下载的node版本
nvm list available  //查看可使用的node版本
nvm install xx.xx.xx  //下载某个具体的node版本,如nvm install 18.16.0
nvm current //查看当前正在使用node版本
nvm use xx.xx.xx  //使用已下载的node版本的具体版本
//如 nvm use 18.17.1   //使用node的18.17.1版本

接触新项目要要有耐心和毅力，因为你根本不知道安装依赖时会发生什么错误...

而且当项目比较庞大的时候，一个“npm install”指令就可以运行大半天了...

遇到不懂的可以截图记录，常见的错误自己百度即可，实在不懂就及时请教你的组长...

（请教的时候尽可能附带上一些截图或者报错信息，组长也才能更好更快递定位错误，解决问题）

因为也有可能是需要内部账号登录系统，在特定vpn情况下才能正确安装依赖。

三、案例分享

这里就分享一个模拟真实聊天的在线问答案例。

（同之前的案例相比，多了“自动滚动到最新消息”“系统给出回答时的逐字打印”。

（案例后续整理后会上传到gitee仓库，有需要请可以私信，我更新好就回复。）

（11-18已更新代码仓库）

代码仓库：https://gitee.com/kaimana/online-chat.git

后端代码：https://gitee.com/kaimana/online-chat-server.git

使用流程：先建一个文件夹-克隆-执行

前端启动指令：npm run serve

后端服务启动指令:node serever.js

列举本次案例的一些常用知识点：

@keyup.enter="xx"

<input @keyup.enter="xx"  />
//按下回车键，执行xx函数

ref属性以及使用

ref属性，获取组件状态
<button ref="myButton">发送</button>

如何使用？如在vue2中
console.log(this.$refs.myButton)//打印ref属性值为myButton的组件状态

this.$nextTick(()=>{})

一个生命周期钩子。它允许你在下一次 DOM 更新循环结束后执行回调函数。Vue 在更新数据后会异步执行 DOM 更新。这意味着当你更改了一些响应式数据后，DOM 并不会立即更新，而是等到同一事件循环中所有数据变更都完成之后再统一进行更新。

//vue2演示
//html
<div id="app">
  <input type="text" ref="inputField" v-model="message">
  <button @click="changeMessage">Change Message</button>
</div>

// js
  data(){
  return{
   message: ''
  },
  methods: {
   changeMessage() {
     this.message = 'Hello World';
     this.$nextTick(() => {
       // 这个回调将在 DOM 更新后执行
       console.log('Input field width:', this.$refs.inputField.offsetWidth);
     });
   }
  }
});

当用户点击按钮时，changeMessage 方法被调用。这个方法首先改变 message 的值，然后使用 this.$nextTick() 注册一个回调函数，在这个回调函数内部，我们可以安全地访问到更新后的 DOM 元素，因为此时 Vue 已经完成了对 DOM 的更新。

setInterval定时器，以及清除定时器

//vue2案例演示
//html
<div id="app">
  <p>Count: {
  { count }}</p>
  <button @click="startTimer">定时器：每一秒+1</button>
  <button @click="stopTimer">清除定时器</button>
</div>


//js
data(){
return{
    count: 0,
    timer: null
}
},
methods: {
    startTimer() {
      // 清除已存在的定时器，防止重复启动
      if (this.timer) {
        clearInterval(this.timer);
      }

      // 启动新的定时器
      this.timer = setInterval(() => {
        this.count++;
        console.log('Count increased to:',          this.count);
      }, 1000); // 每秒增加一次计数
    },
    stopTimer() {
      // 清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  },
  beforeDestroy() {
    // 确保在组件销毁前清除定时器
    this.stopTimer();
  }
}