【前端实习】第一周小节-随便轻松聊聊吧

第一周的(1028-1101)已经顺利结束了。

因为周六日搬家,搬到离公司近一点的地方(通勤比较来回方便)忙了两天。

今天周一下班返回才有时间进行一个小结,那就分以下三个点进行聊聊吧。

一、学习/工作方面

入职第一周,开始处理好正式入职办理、签名，行政大佬发了很多文件让我阅读查看确认。

(大佬人还是挺好的,而且我们都是同一个城市的,胶己人-猜一城市)

（一）入职当天

领导做了以下事情：

1、领我到了办公位置，带着我熟络办公环境。

2、带我认识了小组组长，方便后续的业务对接和交流。

组长做了以下事情：

1、发给我很多文件，包括：公司的办公软件，项目代码（因为我一开始没有拉代码的权限）

2、拉了我进项目群,方便后续业务对接。

PS：下载和安装的过程中遇到一些困难,我就先捣鼓一番，然后再带着问题问组长,最后成功解决.实习生就得主动积极。

“在已思考的情况下，带着问题去请求帮助”这个点贯穿我后面的前端实习时期。

（二）接下来的几天

组长首先让我做的事情就是熟悉项目(uniapp-h5项目),

技术栈（uniapp+vue2）不是熟悉，

所以我的行动就是一边学，一边敲代码案例。

期间在组长和项目成员的帮助下,为项目解决一两个BUG。

小组组长给我讲事情的时候，总是会扩展很多知识，比如我们作为前端,大多是负责技术方面内容。但是也要从一个宏观的角度来思考当下的问题,他当时讲了三个点:

为什么要做?(大致就是分析背景)

如何做?(多角度思考解决方法)

具体实现(维护性/迭代/优化等等)

 （三）代码部分

这里分享一个链接,有我第一周做的练习代码,知识测试和案例。

(当时学的vue3,但是目前的项目是vue2,所以利用这几天学习vue2,下面的链接是关于vue2的vuex)

https://gitee.com/kaimana/vue2_vuex_store.git

1、vue2知识点测试

2、uniapp的练习

做了一个简单版本的在线问答(uniapp-h5+vue2+express)

(我主页有使用手把手教程,自行查看)

做了一个分页列表功能(代码如下)

<template>
  <view class="container">
    <!-- 列表标题 -->
    <view class="student-header">
      <text>姓名</text>
      <text>年龄</text>
      <text>性别</text>
    </view>
    <!-- 列表项 -->
    <view
      v-for="student in displayedStudents"
      :key="student.id"
      class="student-item"
    >
      <text>{{ student.name }}</text>
      <text>{{ student.age }}</text>
      <text>{{ student.gender }}</text>
    </view>
    <!-- 分页组件 -->
    <view class="pagination">
      <button @click="prevPage">上一页</button>
      <button
        v-for="page in totalPages"
        :key="page"
        @click="goToPage(page)"
        :class="{ active: currentPage === page }"
      >
        {{ page }}
      </button>
      <button @click="nextPage">下一页</button>
    </view>
  </view>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      students: [
        { id: 1, name: "张三", age: 20, gender: "男" },
        { id: 2, name: "李四", age: 22, gender: "女" },
        { id: 3, name: "王五", age: 21, gender: "男" },
        { id: 4, name: "赵六", age: 23, gender: "女" },
        { id: 5, name: "孙七", age: 24, gender: "男" },
        { id: 6, name: "周八", age: 25, gender: "女" },
        { id: 7, name: "吴九", age: 26, gender: "男" },
        { id: 8, name: "郑十", age: 27, gender: "女" },
        { id: 9, name: "老六", age: 23, gender: "女" },
        { id: 10, name: "老七", age: 24, gender: "男" },
      ],
      pageSize: 4,
      // 当前页面展示的具体列表页
      currentPage: 1,
    };
  },
  computed: {
    // 从所有学生数据中提取当前页应该显示的学生数据
    displayedStudents() {
      // 以current为1,为2,分析一下就可以理解.
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.students.slice(start, end);
    },
    // 计算有多少个列表页面,=数组总长/定义的每页条数
    totalPages() {
      return Math.ceil(this.students.length / this.pageSize);
    },
  },
  methods: {
    goToPage(page) {
      if (page !== this.currentPage) {
        this.currentPage = page;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage += 1;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage -= 1;
      }
    }
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.student-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

.student-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007bff;
  color: white;
}
</style>

3、echarts基础测试

可能会用于在线问答的图表内容输出.

(我主页有使用echarts教程,自行查看)

二、生活方面

关于办公环境

• 办公区域还算挺大的而且很干净，保证上班的心情无压力，无压迫感。
• 公司楼下附近的肠粉很好吃而且还实惠。
• 认真看待通勤这件事！没搬家之前,通勤很麻烦,上班通勤来回两小时,搬家后，通勤20分钟。
• 煮方便面火锅丸等,吃多了会腻,还是炒菜比较香啊。
• 潮汕人爱喝茶，我比较喜欢喝“铁观音”每天上班必备一壶茶,提神抗疲劳。