自研国产零依赖前端UI框架实战015 学生上课记录系统

前言

前面我们已经做了两个项目了, 一个是用户管理系统, 一个是看板项目, 两个项目都非常的实用.

不过我们要的不只是这些, 还想要更多, 只有做更多的项目, 才能积累更多的东西.

在开始新的项目之前, 我绝对封装一些时间处理相关的方法, 因为时间处理太通用了.

获取当前时间字符串

function nowStr() {

  const now = new Date();

  const year = now.getFullYear();

  const month = String(now.getMonth() + 1).padStart(2, '0');

  const day = String(now.getDate()).padStart(2, '0');

  const hours = String(now.getHours()).padStart(2, '0');

  const minutes = String(now.getMinutes()).padStart(2, '0');

  const seconds = String(now.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

}

console.log(nowStr());

计算两个时间的差值

const diff = (startTime, endTime) => {

  const start = new Date(startTime);

  const end = new Date(endTime);

  if (isNaN(start.getTime()) || isNaN(end.getTime())) {

      throw new Error('无效的时间格式. 请使用格式 YYYY-MM-DD HH:mm:ss');

  }

  const difference = end - start;

  const milliseconds = difference % 1000;

  const seconds = Math.floor(difference / 1000);

  const minutes = Math.floor(seconds / 60);

  const hours = Math.floor(minutes / 60);

  const days = Math.floor(hours / 24);

  const remainingHours = hours % 24;

  const remainingMinutes = minutes % 60;

  const remainingSeconds = seconds % 60;

  return {

      days, hours: remainingHours, minutes: remainingMinutes, seconds: remainingSeconds, milliseconds

  };

}

const startTime = '2025-01-01 12:00:00';

const endTime = '2025-01-02 13:30:45';

try {

  const result = diff(startTime, endTime);

  console.log(result);

} catch (error) {

  console.error(error.message);

}

学生上课记录页面

在这里插入图片描述

当点击加号的时候就是增加了一节课, 点击减号的时候就是减少了一节课.

同时, 应该有一个后台页面可以看到学生的上课记录情况, 如果增加了一节课, 什么时候增加的? 如果减少了一节课, 什么时候减少的?

这里可以用我们之前的crud表格组件, 但是也要考虑到添加时间要自动获取当前时间, 正好用到我们的方法.

同时, 这里可能涉及到两个页面, 一个是前台记录页面, 一个是后台查看页面.

所以, 我们要引入vue-router作为路由.

整合vue-router

安装:

pnpm add vue-router

router/common.js中添加通用路由.

const routes = [

  {

      path: '/student/counter',

      component: ()=> import("@/zdpui/demo/counter/StudentCourseCounter.vue"),

  },

]

export default routes

router/index.js中添加路由器.

import {createRouter, createWebHashHistory} from "vue-router";

import commonRoutes from "./common.js"

const routes = [

  {

      path: '/',

      component: ()=> import("@/page/common/Index.vue"),

  },

  ...commonRoutes,

]

const router = createRouter({

  history: createWebHashHistory(),

  routes,

})

export default router;

main.js中使用路由器.

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

课程管理

利用之前的CRUD表格,我接着又快速的开发了一个课程管理的界面.

在这里插入图片描述

课程管理界面比较简单, 主要是展示学生的姓名, 已经上课的时间.

不过这种比较适合一节课一节课的记录,和真实情况下的按分钟计时还是有点差别.

所以, 我还打算继续开发一个基于分钟级别的计时器, 开始上课的时候点击开始计时, 结束上课的时候点击停止. 当停止的那一刻, 自动记录本次上课花了多少分钟, 剩余多少分钟.

课程管理页面的代码分享一下, 如下.

模板的代码.

在这里插入图片描述

js的代码.

在这里插入图片描述

整体而言, 确实有越开发越简单的感觉, 因为我们只需要借助crud表格, 快速的就能够实现数据页面.

总结

目前为止, 课时记录页面, 学生剩余课时页面都已经基本开发完毕了.

接下来, 还可以继续开发其他的东西, 不过要转向后端带动前端的方式了, zdpui算是基本走上道了.

人生苦短, 我用Python, 坚持每天学习, 坚持每天进步一点点...