RadSystems 自定义页面全攻略：个性化任务管理系统的实战设计

系列文章目录

探索RadSystems：低代码开发的新选择（一）🚪
探索RadSystems：低代码开发的新选择（二）🚪
探索RadSystems：低代码开发的新选择（三）🚪
探索RadSystems：低代码开发的新选择（四）🚪
RadSystems自定义页面全攻略🚪

前言

RadSystems 是一款强大且直观的低代码开发平台，支持快速构建复杂的前后端应用。本文将详细介绍如何在RadSystems中从零开始搭建一个以TypeScript和Node.js为基础的项目，并添加自定义页面，以实现对任务数据的分类、展示和美观呈现。通过本文的步骤讲解，您将全面掌握在RadSystems中创建项目、设计前端页面、调用API接口以及进行数据展示美化的具体方法。

一、项目的创建与配置

1. 项目创建流程

在RadSystems中创建TypeScript项目，需要选择合适的前后端框架。以下是详细步骤：

1. 选择项目架构：打开RadSystems，选择 Node TS-Express 作为后端框架，Prime Vue 作为前端框架。
   

2. 项目命名与路径：将项目命名为 ts-primevue-hjy，选择本地的代码存储路径。

3. 语言与数据库配置：设置默认语言为中文，并启用多语言支持。选择MySQL作为项目的数据库，端口号设为3306，指定数据库名称为 hjy_task。
   

4. 项目发布：点击 Create Project 创建项目后，首先保存生成的 .rpf 文件，随后点击 Publish 按钮发布项目，此时系统将自动下载项目依赖。
   

2. 解决MySQL身份验证问题

在本项目中使用MySQL 8.4LTS版本的数据库。MySQL 8 默认的身份验证插件为 caching_sha2_password，然而Node.js中使用的 mysql 库不支持这一身份验证方法，导致无法连接到数据库。为了解决此兼容性问题，详见该篇博客🚪，我们卸载 mysql 依赖并替换为 mysql2，执行以下命令：

npm uninstall mysql
npm install mysql2

通过此替换，解决了数据库连接问题，使项目正常运行。

二、创建自定义页面以实现任务数据的展示

1. 创建页面

在项目创建完成并启动后，可以进入 Page Design 模块添加自定义页面。

1. 创建新页面：点击 Create New Page，新建一个页面，命名为 newTaskhjy，用于展示任务数据。
   

2. 生成API接口文档：为了方便获取项目API的调用信息，在RadSystems中点击 Publish Api Documentation 生成API接口文档。
   
   直到控制台效果如下，即可关闭当前控制台；在新弹出的窗口中先选择open in browser，会打开一个网页，接下来点击okay即可
   
   文档中列出了项目可用的接口，在该示例中，展示 Task 表数据的接口为 /tasks，使用 GET 方法获取数据。
   

2. 编写自定义页面的JS代码

在创建页面后，可以编写JavaScript代码以获取任务数据并将其分类展示。具体实现步骤如下：

1. 定义数据变量：在 Page Custom JS 中，定义 myApiData 变量用于存储任务数据。
   

2. 编写API数据获取函数：使用 ApiService.get() 方法访问项目API接口。通过调用 /tasks 获取任务数据，并在控制台打印数据确认。

const myApiData = ref(null);

async function getDataFromApi(){
  try{
    //fetch data from the api
    const response = await ApiService.get("/tasks");
    myApiData.value = response.data;
    
	console.log(myApiData.value);
  }
  catch(e){
    console.error(e); 
  }
}

3. 调用数据获取函数：在页面加载时自动调用 getDataFromApi 函数以获取数据。

await getDataFromApi();

三、数据的分类展示与页面美化

1. 新建Custom View

在newtaskshjy的Page Design页面内新建一个Section，拖拽左侧的Custom View组件在最下面

2. 创建数据展示的模板结构<template>

为使任务数据清晰可见，可按任务状态将任务分为四类：待办（to_do）、进行中（in_progress）、已完成（done）和搁置（on_hold）。选中Custom View组件，把下面模板代码放入CustomCode中：

<!-- Task Sections -->
  <div v-for="(tasks, category) in categorizedTasks" :key="category" class="col comp-grid">
    <div :class="['task-category', category]">
      <div class="text-lg font-bold text-primary">
        {{ category.replace('_', ' ').toUpperCase() }}
      </div>
      <div class="task-cards">
        <div v-for="task in tasks" :key="task.task_id" class="task-card">
          <h3>{{ task.title }}</h3>
          <p>{{ task.description }}</p>
        </div>
      </div>
    </div>
  </div>

3. 分类与获取数据的JS脚本部分<script setup>

在页面加载后，按任务状态对数据进行分类展示。以下是详细代码结构：

1. 定义数据结构和钩子：在Vue的 <script setup> 部分，定义一个对象 categorizedTasks 存储分类后的任务，并将 getDataFromApi 函数加入 onMounted 钩子。
   

2. 数据分类与调用：将数据按状态存储到 categorizedTasks 中，利用 v-for 循环分别展示每个分类的任务。
   
   

import { toRaw } from 'vue';

const myApiData = ref(null);

// 分类后的任务
const categorizedTasks = ref({
    to_do: [],
    in_progress: [],
    done: [],
    on_hold: []
});

async function getDataFromApi(){
    try{
        //fetch data from the api
        const response = await ApiService.get("/tasks");
        myApiData.value = toRaw(response.data);
        
        console.log(myApiData.value.records)
        
        const tasks = myApiData.value.records || [];
        categorizedTasks.value = {
            to_do: tasks.filter(task => task.status === 'to_do'),
            in_progress: tasks.filter(task => task.status === 'in_progress'),
            done: tasks.filter(task => task.status === 'done'),
            on_hold: tasks.filter(task => task.status === 'on_hold')
        };
        console.log(categorizedTasks.value);
        
        
    }
    catch(e){
        console.error(e); 
    }
}

onMounted(getDataFromApi);

4. 页面样式美化<style scoped>

在 <style scoped> 中，为任务卡片设计不同颜色样式，方便用户快速区分任务状态，此外添加了鼠标悬停效果以提升交互体验。样式代码如下：

<style scoped>
/* 基础样式 */
.task-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.task-card {
  padding: 15px;
  border-radius: 8px;
  background-color: #f3f4f6;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.task-card:hover {
  transform: scale(1.02);
}

/* 分类样式 */
.task-category {
  margin-bottom: 20px;
}
.to_do .task-card {
  border-left: 5px solid #f87171;
  background-color: #fef2f2;
}
.in_progress .task-card {
  border-left: 5px solid #fbbf24;
  background-color: #fffbeb;
}
.done .task-card {
  border-left: 5px solid #34d399;
  background-color: #ecfdf5;
}
.on_hold .task-card {
  border-left: 5px solid #60a5fa;
  background-color: #eff6ff;
}

/* 文字样式 */
.text-lg {
  font-size: 1.25rem;
  color: #1f2937;
}

.text-primary {
  color: #1d4ed8;
}

.text-section {
  margin-top: 15px;
}
</style>

在此代码中，任务卡片根据任务状态展示不同的边框颜色，从视觉上区分了任务状态。此外，鼠标悬停时的卡片放大效果使页面更加生动。

总结

在本文中，我们深入探讨了如何在RadSystems中快速搭建并美化一个TypeScript项目，从项目创建、配置数据库，到设计前端页面并进行数据分类展示。我们不仅详细讲解了RadSystems的设置流程，还分享了如何解决MySQL身份验证问题，展示了自定义页面的JS代码编写方法以及美观的任务展示样式。希望这篇文章能帮助你在低代码开发领域迈出坚实的一步，让更多人感受到RadSystems带来的开发效率提升。如果你有任何疑问或建议，欢迎在评论区交流！🌹