Vue + Spring Boot project actual combat: personnel management system - (2) employee management page and method implementation

Language 2023-07-12 12:40:56 views: null

Employee Information Management Directory

foreword

The project login method has been implemented, the layout has been planned, and now we are preparing for the employee management page

Tip: The following is the text of this article, and the following cases are for reference

1. Writing the front-end page

1. Write the employee management vue page

Project directory structure
insert image description here

vue-layout

/* 员工信息列表页面 */
<template>
  <!-- 主体div -->
  <div class="main">
    <!-- 上半部分主体div -->
    <div class="container">
      <!-- 搜索表单区域 -->
      <el-form
        :inline="true"
        :model="employeeList"
        class="demo-form-inline"
        ref="searchFormRef"
      >
        <!-- 表单项 prop的值要和input对象绑定的值一致 -->
        <el-form-item label="员工名称：" prop="name">
          <el-input
            v-model="employeeList.name"
            placeholder="请输入员工名称"
            @clear="searchEmployee"
            @keyup.enter.native="searchEmployee"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属部门：" prop="department">
          <!-- 选择菜单 -->
          <el-select
            v-model="employeeList.department"
            placeholder="请选择部门信息"
          >
            <el-option label="运营部" value="运营部"></el-option>
            <el-option label="技术部" value="技术部"></el-option>
          </el-select>
        </el-form-item>
        <!-- 日期选择 -->
        <!-- <el-form-item label="入职时间：" prop="value2">
          <el-date-picker
            v-model="value2"
            type="monthrange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="学历：" prop="degree">
          <el-select v-model="employeeList.degree" placeholder="请选择学历">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <!-- 设置两个功能栏，分别是搜索和重置功能 -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="searchEmployee"
            >搜索</el-button
          >
        </el-form-item>
        <!-- 实现对表单输入的数据进行重置 -->
        <el-form-item>
          <el-button
            type="info"
            icon="el-icon-refresh-left"
            size="mini"
            plain
            @click="resetserchForm"
            >重置</el-button
          >
        </el-form-item>

        <!-- 表单下方四个按钮控件，添加到div布局中，设置布局大小，边框 -->
        <div class="btn_form">
          <el-form-item class="btn">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              plain
              @click="addDialogVisible = true"
              >添加</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              plain
              disabled
              >修改</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              plain
              disabled
              >删除</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button type="warning" icon="el-icon-download" size="mini" plain
              >导出</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 员工列表 ,border为边框，stripe隔行变色,显示员工信息 -->
    <el-table
      :data="employeeList"
      style="width: 100%"
      :header-cell-style="{ background: '#5ab7c4', color: '#fff' }"
      ><!-- 给table表头设置背景颜色  backgorud:背景颜色 color：字体颜色-->
      <el-table-column type="selection" width="55"> </el-table-column
      ><!-- 在首列添加可选择的按钮 -->
      <el-table-column type="index" label="工号"></el-table-column>
      <el-table-column
        label="员工"
        prop="name"
        min-width="10%"
        align="center"
      ></el-table-column>
      <el-table-column label="性别" prop="sex" min-width="5%"></el-table-column>
      <el-table-column label="年龄" prop="age" min-width="5%"></el-table-column>
      <el-table-column
        label="生日"
        prop="birthday"
        min-width="10%"
        align="center"
        :formatter="dateFormat"
      >
      </el-table-column>
      <el-table-column
        label="部门"
        prop="department"
        min-width="10%"
        align="center"
      ></el-table-column>
      <el-table-column
        label="员工状态"
        prop="state"
        min-width="5%"
        align="center"
      >
        <!-- tag标签，采用嵌套三元表达式的方法，判断员工的状态，动态显示颜色 -->
        <template slot-scope="scope">
          <!-- 若状态为‘在职’，则显示success， 若不是则执行后面的嵌套层 -->
          <el-tag
            effect="light"
            :type="
              scope.row.state == '在职'
                ? 'success'
                : scope.row.state == '实习'
                ? 'primary'
                : 'danger'
            "
          >
            {
   
   { scope.row.state }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="学历"
        prop="degree"
        min-width="10%"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="20%" align="center">
        <template slot-scope="scope">
          <!-- 修改员工信息方法 参数为：row行数的id -->
          <el-tooltip
            effect="dark"
            content="修改信息"
            placement="top-start"
            :enterable="false"
            ><!--文字提示 enterable 隐藏-->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>
          </el-tooltip>

          <!-- 后期需要修改一下，将按钮disabled，演示模式下不能进行删除操作 -->
          <el-tooltip
            effect="dark"
            content="删除员工"
            placement="top-start"
            :enterable="false"
            ><!--文字提示 enterable 隐藏-->
            <!-- 删除员工信息方法 参数为行数row行数id，row行数 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDel(scope.row.id, scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 索引列 -->
    </el-table>

    <!-- 分页组件 size-change:每页最大变化 current-change：当前页数变化 layout：功能组件 
    之前不能实现切换的bug改好~！-->
    <div class="block" style="text-align: center; margin-top: 15px">
      <div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromData.pageIndex"
          :page-sizes="pageInfo.pageSizes"
          :page-size="fromData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
          <!-- @size-change：每页显示条数个数点击事件，当切换时动态的切换每页显示的条数
               @current-change：当前页数点击事件
               current-page:当前页码，默认为第一页
               page-sizes：在页面可选择的页码数[1,10,20,50] 
               page-size：每页显示的条数，可以动态的修改
               total：显示的是从后端获得数据的总数  -->
        </el-pagination>
      </div>
    </div>

    <!-- 新增员工区域 -->
    <el-dialog
      center
      title="添加员工"
      :visible.sync="addDialogVisible"
      width="40%"
      @close="addDialogClosed"
    >
      <!-- model:双向绑定模型， rules:绑定添加员工的规则 -->
      <el-form
        :model="addEmployeeInfo"
        :rules="AddFormRules"
        ref="addFormRef"
        label-width="80px"
      >
        <!-- 用户名 -->
        <el-form-item label="员工名" prop="name">
          <el-input v-model="addEmployeeInfo.name"></el-input>
        </el-form-item>
        <!-- 密码 -->

        <el-form-item label="年龄" prop="age">
          <el-input v-model="addEmployeeInfo.age"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-select v-model="addEmployeeInfo.sex">
            <el-option
              v-for="item in addEmployeeSexOptions"
              :label="item.sex"
              :key="item.gender"
              :value="item.sex"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="身份" prop="state">
          <el-select v-model="addEmployeeInfo.state">
            <el-option
              v-for="item in addEmployeeStateOptions"
              :label="item.state"
              :key="item.stateName"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="addEmployeeInfo.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="部门" prop="department">
          <el-select v-model="addEmployeeInfo.department">
            <el-option
              :label="item.dept"
              v-for="item in addEmployeeDepartOptions"
              :key="item.deptName"
              :value="item.dept"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学历" prop="degree">
          <el-select v-model="addEmployeeInfo.degree">
            <el-option
              :label="item.degree"
              v-for="item in addEmployeeDegreeOptions"
              :key="item.degreeName"
              :value="item.degree"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="薪水" prop="degree">
          <el-input v-model="addEmployeeInfo.salary"></el-input>
        </el-form-item>
      </el-form>

      <!-- 内容底部区域，两个按钮区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doAddEmployee">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改员工信息对话框区域 -->
    <el-dialog
      center
      title="修改员工信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <!-- 用户名 -->
        <el-form-item label="员工" prop="name">
          <el-input v-model="editForm.name" disabled></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="性别" prop="sex">
          <el-input v-model="editForm.sex"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="身份" prop="state">
          <el-input v-model="editForm.state"></el-input>
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item label="生日" prop="birthday">
          <el-input v-model="editForm.birthday"></el-input>
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item label="部门" prop="department">
          <el-input v-model="editForm.department" disabled></el-input>
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item label="学历" prop="degree">
          <el-input v-model="editForm.degree"></el-input>
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item label="薪水" prop="salary" disabled>
          <el-input v-model="editForm.salary" disabled></el-input>
        </el-form-item>
      </el-form>

      <!-- 内容底部区域，两个按钮区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doModifyEmployee">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

style style

<style Lang="less" scoped>
/* 设置主体布局样式 */
.container {
      
      
  font-size: 14px; /* 设置文字大小 */
  color: #606266; /* 设置颜色样式 */
}
/* 设置全局文字格式 */
textarea {
      
      
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
/* el-form表单三个按钮样式，缩小与表单之间的间隔 */
.btn_form {
      
      
  height: 34px; /* 设置div的高度 */
  padding: 5px 0px; /* 设置内边距 */
}

el-form {
      
      
  border-radius: 50px;
}
</style>

method implementation

 methods: {
    //获取所有员工信息，显示在列表中
    async getEmployeeList() {
      const { data: res } = await this.$http.get(
        "http://localhost:9005/sys/employee/list", //调用后端的接口方法
        {
          params: this.fromData,
        }
      );
      // const { data: res } = await this.$http.get(
      //   "http://localhost:9005/sys/employee/list"用9005端口放问
      //添加 params: this.fromData后，解决了切换数据失败
      // );
      if (res.code != 200) {
        this.$message.error("获取信息失败");
      }
      this.employeeList = res.data.list; //获取所有员工信息
      this.pageInfo.total = res.data.total; //获得统计后的员工总数
    },
    /* 重置表单信息，将数据置空 */
    resetserchForm() {
      this.$message.success("重置表单信息成功"); //显示重置成功的信息
      this.$refs.searchFormRef.resetFields(); //重置对话框数据
    },

    //时间进行格式化输出，格式化为xx-xx-xx-xx-xx-xx
    dateFormat: function (row) {
      const dateStr = row.birthday; //获得当前row的值
      if (dateStr != null) {
        let date = new Date(row.birthday); //实例化一个date对象
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m;
      }
    },

    //修改员工信息显示对话框，根据员工id的值获得修改信息
    async showEditDialog(id) {
      const { data: res } = await this.$http.get(
        "http://localhost:9005/sys/employee/getInfo?id=" + id
      );
      this.editForm = res.data; //查询到的员工信息存放在editform中
      this.editDialogVisible = true; //将对话框设为true
    },

    //修改员工信息方法,已实现--04.20
    doModifyEmployee() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.put(
          "http://localhost:9005/sys/employee/update",
          this.editForm
        );
        if (res.code != 200 && res.success != "success") {
          return this.$message.error("修改失败！！！");
        }
        this.$message.success("修改员工信息成功");
        this.editDialogVisible = false;
        this.getEmployeeList(); //重新获得员工列表信息
      });
    },
    //对数据修改后关闭对话框
    editDialogClosed() {
      this.$refs.editFormRef.resetFields(); //重置对框框区域信息
    },
 //模糊查询方法
    searchEmployee() {
      this.getEmployeeList(); //调用获得所有员工信息方法
      this.$message.success("查询成功");
    },

    //添加用户的方法 --04.21，bug改好！
    doAddEmployee() {
      var $that = this;
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "http://localhost:9005/sys/employee/add", //调用后端api接口
          this.addEmployeeInfo
        );
        if (res.code != 200 && res.success != "success") {
          //通过post请求调用后台addUser的api接口，并把参数存放在addForm里面
          return this.$message.error("添加员工失败"); //如果失败，则返回错误信息
        }
        this.$message.success("添加员工成功");
        this.addDialogVisible = false; //将对话框消失
        this.getEmployeeList(); //需要多次调用获取员工列表方法，显示数据
      });
    },

    //监听添加用户的操作，添加完成后退出对话框
    addDialogClosed() {
      this.$refs.addFormRef.resetFields(); //对新增员工对话框进行重置
    },

    //删除员工的方法，根据index索引进行删除 --04.20有个小bug，已改好！
    async handleDel(id, row) {
      //定义一个对话款信息，确认是否删除信息
      const confirmResult = await this.$confirm(
        "此操作将会删除员工 : " + row.name + " 是否继续", //获得row.name的值 */
        "提示",
        {
          confirmButtonText: "确定", // 确认则执行删除的方法 */
          confirmButtonText: "取消", // 取消则显示取消删除
          type: "warning",
          center: true, //将位置设置在中心
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除的操作"); //若点击取消删除的按钮，则显示message的提示信息
      }
      const { data: res } = await this.$http.delete(
        "http://localhost:9005/sys/employee/del?id=" + id //调用后端删除员工方法的api，idnex的值当前选择删除的行数，为并获得一个返回码
      );
      /* 如果后端返回的数据码不等于200或者状态为失败，则显示删除失败 */
      if (res.code != 200 && res.success != "success") {
        return this.$message.error("删除员工 : " + row.name + "操作失败");
      }
      this.$message.success("删除员工 : " + row.name + "操作成功");
      this.getEmployeeList(); //重新刷新数据
    },

    //每页显示的条目个数的1改变
    handleSizeChange(val) {
      this.fromData.pageSize = val; //重新对每页显示条数进行更改
      this.getEmployeeList(); //重新获得列表的值
    },
    //当前页数的改变
    handleCurrentChange(val) {
      this.fromData.pageIndex = val; //对当前页数进行更改
      this.getEmployeeList(); //重新获得员工列表的值
    },
  },
};

Second, the method implementation of the back-end interface

1. Write entity classes

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class Employee {
    
    
    private Integer id;//员工id
    private String name;//员工姓名
    private String sex;//性别
    private Date birthday;//员工生日
    private String department;//员工部门
    private Integer age;//员工年龄
    private String state;//员工工作状态
    private Integer salary;//员工薪水
    private String degree;//员工学历
    private String status;//考勤状态
    private Date worktime;//考勤时间

}

2. Control layer

/**
 * @author kk
 * @version 1.0
 * @date 2021/4/16 15:46
 * 员工管理服务控制层
 */
@RestController
@RequestMapping(value = "/sys/employee")//统一访问路径
public class EmployeeController {
    
    

    @Resource
    EmployeeService employeeService;

    @Resource
    private RedisManager redisManager;

    //获取所有的员工信息
    @RequestMapping(value = "/list")
    public ObjectResult <PageInfo<Employee>> getAllEmployee(@RequestParam(value = "name",required = false)String name,
                                       @RequestParam(value = "pageIndex",required = false,defaultValue = "1")Integer pageIndex,
                                       @RequestParam(value = "pageSize",required = false,defaultValue = "10") Integer pageSize){
    
    
        PageInfo<Employee> pageInfo = employeeService.list(name,pageIndex,pageSize);
        return ResultUtil.okObjectResult(pageInfo);
    }
    //在前端通过发送员工id查询到员工消息，并将查询到的数据返回给前端
    @RequestMapping(value = "/getInfo")
    public ObjectResult<Employee> getById(@RequestParam("id")Integer id) {
    
    
        Employee employee = employeeService.findById(id);
        return ResultUtil.okObjectResult(employee);
    }


    //添加员工方法，调用服务层的方法，使用工具类返回json格式，接口为/sys/employee/add
    @RequestMapping(value = "/add")
    public ObjectResult addEmployee(@RequestBody Employee employee,
                                    @RequestHeader(value = "token") String accessToken){
    
    
        if (redisManager.hasKey(accessToken)){
    
    
            //当前登录的人
            User user = (User) redisManager.get(accessToken);
        int count = employeeService.addEmployee(employee);
        return ResultUtil.okObjectResult(count);
    }
        //未认证
        return ResultUtil.unauthorizedResult();
    }

    //更新员工信息方法，接口为/sys/employee/update
    @RequestMapping(value = "/update")
    public ObjectResult updateEmployee(@RequestBody Employee employee,
                                       @RequestHeader(value = "token") String accessToken){
    
    
        if (redisManager.hasKey(accessToken)){
    
    
            //当前登录的人
            User user = (User) redisManager.get(accessToken);
        int count = employeeService.updateEmployee(employee);
        return ResultUtil.okObjectResult(count);
    }
        //未认证
        return ResultUtil.unauthorizedResult();
    }

    //删除员工方法，根据id号来执行删除,接口为/sys/employee/del
    @RequestMapping(value = "/del")
    public ObjectResult deleteEmployee(@RequestParam(value = "id") Integer id) {
    
    
        System.out.println("删除员工"+id+"成功");
        return ResultUtil.okObjectResult(employeeService.deleteEmployee(id));
    }
//
}

3. Service layer

/**
 * @author kk
 * @version 1.0
 * @date 2021/4/16 15:30
 */
@Service
public interface EmployeeService {
    
    
    /**
     * 条件查询
     * @param name
     * @param pageIndex 页码
     * @param pageSize 每页条数
     * @return
     */
    PageInfo<Employee> list(String name, Integer pageIndex, Integer pageSize);
    int addEmployee(Employee employee);
    int updateEmployee(Employee employee);
    int deleteEmployee(Integer id);
    Employee findById(Integer id);
}

4. Dao layer

/**
 * @author kk
 * @version 1.0
 * @date 2021/4/16 15:22
 */
@Mapper
@Repository
public interface EmployeeMapper {
    
    
    List<Employee> getAllEmployee(@Param("name") String name);//获得所有员工信息
    int updateEmployee(Employee employee);//修改员工信息方法
    int addEmployee(Employee employee);//添加员工信息方法
    int deleteEmployee(@Param("id") Integer id);//根据员工id删除
    Employee getById(@Param("id")Integer id);//根据员工id查询信息，并将数据返回给前端

}

5.xml writing

The id value corresponding to each method is the method name of the mapper layer, which is mapped one-to-one

<mapper namespace="com.jk4.employeeserver.dao.EmployeeMapper">

    <select id="getAllEmployee" resultType="Employee">
        SELECT * FROM employee_info
        <trim prefix="WHERE" prefixOverrides="and|or">
            <if test="name!=null and name!=''">
                where name LIKE #{name}
            </if>
        </trim>
    </select>


    <!--添加员工方法-->
    <insert id="addEmployee" parameterType="Employee">
        INSERT INTO `employee_info`(`name`, `sex`,`birthday`,`age`,`department`,`state`,`salary`,`degree`)
        VALUES (#{name},#{sex},#{birthday},#{age},#{department},#{state},#{salary},#{degree})
    </insert>

    <!--根据员工id删除信息-->
    <delete id="deleteEmployee">
        delete from employee_info where id=#{id}
    </delete>

    <!--根据员工id更改信息-->
    <update id="updateEmployee" parameterType="Employee">
        UPDATE
        `employee_info`
        <trim prefix="SET" suffixOverrides=",">
            <if test="name!=null and name!=''">
                `name` = #{name},
            </if>
            <if test="sex!=null and sex!=''">
                `sex` = #{sex},
            </if>
            <if test="birthday!=null">
                `birthday` = #{birthday},
            </if>
            <if test="age!=null and age!=''">
                `age` = #{age},
            </if>
            <if test="department!=null and department!=''">
                `department` = #{department},
            </if>
            <if test="state!=null and state!=''">
                `state` = #{state},
            </if>
            <if test="salary!=null and salary!=''">
                `salary` = #{salary},
            </if>
            <if test="degree!=null and degree!=''">
                `degree` = #{degree},
            </if>
        </trim>
        WHERE id = #{id}
    </update>

    <select id="getById" resultType="Employee">
        SELECT * FROM employee_info WHERE id=#{id}
    </select>
</mapper>

6. Page realization

insert image description here

Summarize

The function has basically been realized, but some small details still need to be optimized, come on!
In addition, the search function has not yet been implemented, and this detail needs to be improved.

Guess you like

Origin blog.csdn.net/weixin_45331887/article/details/116724564
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com