基于 Microi 低代码框架构建 Vue 高效应用指南

基于 Microi 低代码框架构建 Vue 高效应用指南

引言

在当今快速发展的软件开发领域，低代码开发平台正逐渐崭露头角，为开发者们提供了更高效的应用构建途径。Microi 低代码框架结合 Vue 的强大前端能力，为打造高效应用提供了绝佳的组合。

一、安装指南

1. 系统要求

• 操作系统：支持 Windows、Linux 等主流操作系统。
• 数据库：需要安装并配置支持的数据库，如 MySQL5.5+、SqlServer2016+、Oracle11g+ 等。
• 其他软件：安装.NET 8 SDK、Redis，并且最好安装 Git 用于代码获取。对于一些高级功能，可能还需要安装 Docker、MinIO、MongoDB、RabbitMQ、ES 等软件。

2. 获取代码

使用 Git 克隆代码库（以 Gitee 为例）：

git clone https://gitee.com/ITdos/microi.net

这将在本地创建一个名为 microi.net 的文件夹，其中包含所有源代码。

3. 后端安装与配置

1. 打开解决方案文件：使用 Visual Studio Code 或者 Visual Studio 2022 打开克隆下来的 microi.net 文件夹中的解决方案文件（.sln 文件）。
2. 配置 appsettings.json 文件：在 Microi.net.Api 项目中找到 appsettings.json 文件，这是后端服务的主要配置文件。
   • 配置 AppSettings 部分的关键参数：
     • OsClient：自定义 SaaS 引擎 Key，要与数据库 sys_osclient 表的 OsClient 字段值对应。
     • OsClientType：自定义程序运行环境，如 Product（正式环境）、Dev（测试环境）等。
     • OsClientNetwork：自定义网络类型，如 Internet（公网）、Internal（内网）等。
     • OsClientDbConn：数据库连接字符串。如果使用 MySQL，格式大致为 server=your_server;user=your_user;password=your_password;database=your_database。
     • IS4SigningCredential：可以直接使用源码中的默认签名。
     • Redis 配置（可选）：如果配置项在表中不能匹配到数据，需要配置以下 Redis 参数。
       • OsClientRedisHost：Redis 主机地址。
       • OsClientRedisPort：Redis 端口，如 6379。
       • OsClientRedisPwd：Redis 密码。
   • 其他配置（如分布式存储、MQ 消息队列、ES 搜索引擎等）：可以在平台的【SaaS 引擎】中动态配置。

4. 前端安装与配置

1. 安装前端依赖：进入前端项目目录，如 microi.vue2.pc 或 microi.vue3。查看该目录下的 package.json 文件，然后在命令行中执行 npm install（如果使用 yarn 则执行 yarn install）来安装所有依赖的 JavaScript 库。
2. 配置接口地址：在前端项目的配置文件（通常是 src/config.js 或类似文件）中，找到与后端接口地址相关的配置项。将其修改为后端服务实际运行的地址和端口，例如 http://localhost:5000，确保前端能够正确地与后端进行通信。

5. 数据库初始化

1. 创建数据库：使用你选择的数据库管理工具创建 Microi 吾码所需的数据库。数据库名称等信息要与 appsettings.json 文件中配置的 OsClientDbConn 中的数据库名称一致。
2. 导入初始数据：在项目的源代码中找到数据库初始化脚本或相关的 SQL 文件。这些文件可能在 database 文件夹或者类似的目录下。在创建好的数据库中执行这些脚本，以创建必要的表结构、存储过程以及初始数据等。

6. 启动项目

1. 后端启动：在 Visual Studio Code 或 Visual Studio 2022 中，右键点击 Microi.net.Api 项目，选择调试 -> 启动新实例，启动后端服务。
2. 前端启动：在前端项目目录下，执行 npm run serve（如果使用 yarn 则执行 yarn serve）启动前端开发服务器。等待编译完成后，在浏览器中访问前端项目的地址（通常是 http://localhost:8080），就可以看到登录界面了。

注意：在安装过程中，如果缺少某些必要的软件环境（如没有 MongoDB 环境会影响系统日志功能，没有 MinIO 或阿里云 OSS 等分布式存储环境会影响文件/图片上传功能等），相关功能可能无法正常使用。

二、框架与 Vue 简介

Microi 低代码框架是一款旨在简化应用开发流程的工具，它通过可视化的界面设计、预制的组件库以及自动化的代码生成机制，让开发者能够快速搭建应用的基础架构。而 Vue 作为一款流行的前端 JavaScript 框架，以其简洁、灵活、高效的特点，在前端开发中占据重要地位。它采用组件化的开发模式，使得代码复用性极高，并且在数据绑定和响应式设计方面表现出色。

Microi 吾码采用.NET8 + Redis + MySql/SqlServer/Oracle + Vue2/3 + Element-UI/Element-Plus 技术框架，于 2014 年开始创建，2018 年使用 Vue 重构，并在 2024 年 10 月 29 日开源。

三、项目初始化

我们需要创建一个基于 Microi 低代码框架的项目，并集成 Vue。假设我们已经安装好了 Microi 吾码的开发环境，在命令行中执行以下命令创建项目：

microi create my-app

这将创建一个名为 my-app 的项目目录，包含了项目的基本结构和配置文件。进入项目目录后，我们需要安装 Vue 相关的依赖：

cd my-app && npm install vue

四、创建 Vue 组件

在 Microi 低代码框架中，我们可以方便地创建 Vue 组件。例如，我们创建一个简单的 HelloWorld 组件。在项目的 src/components 目录下创建一个 HelloWorld.vue 文件，代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, Microi and Vue!'
    }
  }
}
</script>

<style scoped>
.hello-world {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}
</style>

这个组件非常简单，它在页面上显示一个带有指定消息的标题，并设置了一些基本的样式。

五、在页面中使用 Vue 组件

在 Microi 吾码的页面设计器中，我们可以像使用普通组件一样使用我们创建的 Vue 组件。打开项目中的页面文件（例如 src/pages/HomePage.vue），在 template 部分添加以下代码：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
  components: {
    HelloWorld
  }
}
</script>

这里我们首先导入了 HelloWorld 组件，然后在 components 选项中注册它，最后在 template 中使用它。这样，当我们运行应用时，就会在页面上看到 HelloWorld 组件显示的内容。

六、数据交互与绑定

Vue 的核心优势之一是数据绑定和响应式设计。在 Microi 低代码框架中，我们可以充分利用这一特性实现数据的动态交互。例如，假设我们有一个数据列表，我们希望在页面上动态显示并能够根据用户操作进行更新。

在 src/store 目录下创建一个 dataStore.js 文件，用于存储数据：

import Vue from 'vue';
export const dataStore = new Vue({
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1', description: 'Description of Item 1' },
        { id: 2, name: 'Item 2', description: 'Description of Item 2' },
        { id: 3, name: 'Item 3', description: 'Description of Item 3' }
      ]
    };
  }
});

然后，在我们的组件中（例如 src/components/ItemList.vue），我们可以使用 computed 属性来获取数据并进行绑定：

<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { dataStore } from '@/store/dataStore.js';
export default {
  name: 'ItemList',
  computed: {
    itemList() {
      return dataStore.itemList;
    }
  }
}
</script>

<style scoped>
.item-list {
  margin-top: 20px;
}
.item-list ul {
  list-style-type: none;
  padding: 0;
}
.item-list li {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
</style>

当 dataStore 中的 itemList 数据发生变化时，组件会自动更新显示。

七、事件处理

在 Vue 组件中，我们还可以处理各种用户事件。例如，我们为 ItemList 组件中的每个项目添加一个点击事件，当点击项目时弹出一个提示框显示项目的详细信息。修改 ItemList.vue 组件的代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id" @click="showItemDetails(item)">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { dataStore } from '@/store/dataStore.js';
export default {
  name: 'ItemList',
  computed: {
    itemList() {
      return dataStore.itemList;
    }
  },
  methods: {
    showItemDetails(item) {
      alert(`Item ID: ${item.id}\nName: ${item.name}\nDescription: ${item.description}`);
    }
  }
}
</script>

<style scoped>
.item-list {
  margin-top: 20px;
}
.item-list ul {
  list-style-type: none;
  padding: 0;
}
.item-list li {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
</style>

通过 @click 指令绑定 showItemDetails 方法，当用户点击项目时，就会触发该方法并弹出提示框。

八、总结

通过 Microi 低代码框架与 Vue 的结合，我们能够在应用开发中实现高效的开发流程。从项目初始化到创建 Vue 组件，再到数据交互、绑定和事件处理，每一个环节都展示了这种组合的强大之处。这种方式不仅提高了开发效率，还使得应用具有更好的可维护性和用户体验。在实际项目开发中，开发者可以根据具体需求进一步拓展和优化应用，充分发挥 Microi 低代码框架和 Vue 的优势，构建出更加复杂和功能强大的高效应用。