一个类似股票看板的自刷新页面的制作

前一阵,有个基于JavaSwing的项目,由于使用不便利,需要移植到Web上。

这个项目的基本功能是这样的,启动一批线程,每个线程访问指定地址一定次数,将每次是否成功,耗时等信息显示出来,最后做个统计。这个任务最终分给了我。

我分析下,以下功能是可以直接拿来用的:

1.访问固定网址的Servlet,获得反馈,解析出成果的代码。

2.运行线程的代码。

3.进行结果统计的代码。

而以下功能是需要重新考虑的:

1.以前SwingApp是单用户环境,现在Web是多用户环境。

2.如果后台线程运行起来,前台该怎么取得后台的结果。

我是这样去考虑的:

用n个线程访问某网址m次是任务核心。

一个任务由一个用户启动,它对应task表的一条记录,主要字段有id,启动者,线程个数,访问次数等。

n个线程从属于一个任务,它对应thread表的一条记录,主要字段有id,pid(task表的id的外键),需要访问次数,已经访问次数,成功次数,失败次数,平均每次访问时间等。

用户在前台启动任务后,后台负责处理的函数先启动任务即创建task表的记录,然后根据线程个数创建n条thread表的记录,然后创建n个线程访问固定网址取得结果,每次访问结果更新到thread表里的对应记录里,这里创建线程的步骤也是新启线程实现的,为的是异步运行不影响前台页面响应速度。

前台页面进入新页面,新页面根据传来的值--一批线程id即thread表的id创建一个表格,表格里的行对应一条thread表的记录。

遍历表格,拿到每行id再启动Ajax访问后台Thread表记录取得结果,分析需要访问次数和已经访问次数是否相等,否则调用自身再次访问,是则退出函数。

为了提示用户进度,前台用一个定时函数取得表格里的需要访问次数和已经访问次数,统计后用进度条的方式提示用户。

再思基本没有问题后,就做了下来,页面截图如下:

 

### 如何使用 Vue 3 和 TypeScript 创建智慧看板项目 构建一个智慧看板项目涉及前端框架的选择、状态管理库以及样式系统的集成。以下是关于如何利用 Vue 3 和 TypeScript 来创建这样一个项目的详细解答。 #### 1. 初始化项目 首先,通过 Vite 工具快速初始化一个新的 Vue 3 + TypeScript 项目。运行以下命令安装并启动开发环境: ```bash pnpm create vite my-smart-board --template vue-ts cd my-smart-board pnpm install pnpm run dev ``` 这一步会为你搭建好基础的 Vue 3 和 TypeScript 开发环境[^5]。 #### 2. 设置全局状态管理系统 Pinia 为了更好地管理和共享应用中的数据流,推荐引入 `Pinia` 替代 Vuex。它更加轻量级且与 Composition API 更加契合。 安装 Pinia 并配置到项目中: ```bash pnpm add pinia @pinia/vue-plugin ``` 接着,在 `main.ts` 中注册 Pinia 插件: ```typescript import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from 'pinia'; const app = createApp(App); app.use(createPinia()); app.mount('#app'); ``` 这样就可以轻松地在组件间传递和更新任务列表的状态信息[^3]。 #### 3. 实现拖拽功能 对于 Trello 类似的卡片拖拽交互效果,可以借助第三方库如 `SortableJS` 或者直接使用原生 HTML5 Drag and Drop API 结合 Vue 的事件监听器来完成。 下面是一个简单的例子展示如何让任务项可以在不同列之间自由移动[^1]: ```html <template> <div class="kanban"> <draggable v-model="columns" group="people" :animation="200"> <transition-group> <div v-for="(column, index) in columns" :key="index" class="column"> {{ column.title }} <draggable v-model="column.tasks" group="tasks" :animation="200"> <transition-group> <div v-for="task in column.tasks" :key="task.id">{{ task.name }}</div> </transition-group> </draggable> </div> </transition-group> </draggable> </div> </template> <script setup lang="ts"> import draggable from 'vuedraggable'; import { ref } from 'vue'; interface Task { id: number; name: string; } interface Column { title: string; tasks: Task[]; } const columns = ref<Column[]>([ { title: '待办', tasks: [{ id: 1, name: '任务一' }] }, { title: '进行中', tasks: [] }, ]); </script> ``` #### 4. 添加样式支持 考虑到现代设计需求,可以选择 Tailwind CSS 或 UnoCSS 提供高效的原子化类名方案来进行页面布局优化。 如果偏好传统方式,则可以通过 SCSS 文件定义专属样式规则应用于各个模块之中。 例如给上面提到的任务卡加上基本外观修饰: ```scss .kanban .column { border: solid thin gray; padding: 8px; margin-bottom: 1em; div { background-color: lightblue; padding: 4px; cursor: grab; } } ``` #### 5. 数据可视化扩展(可选) 当需要向用户提供更多统计分析视角时,ECharts 可作为强大的图表渲染引擎加入进来处理复杂的数据呈现逻辑[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值