【Microi 吾码】基于 Microi 吾码低代码框架构建 Vue 高效应用之道

优质文章学习记录

— 10 min read
【Microi 吾码】基于 Microi 吾码低代码框架构建 Vue 高效应用之道
在这里插入图片描述
在这里插入图片描述

我的个人主页
文章专栏：Microi吾码

引言

在当今快速发展的软件开发领域，低代码开发平台正逐渐崭露头角，为开发者们提供了更高效的应用构建途径。Microi 吾码低代码框架结合 Vue的强大前端能力，更是为打造高效应用提供了绝佳的组合。在这里，我将深入探讨如何基于 Microi 吾码低代码框架构建 Vue 高效应用。
Microi吾码官网： https://microi.net
GitEE开源地址： microi.net:
在这里插入图片描述

一：Microi吾码安装指南

1、系统要求

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

2、获取Microi吾码代码

  1. 使用Git克隆代码库
    • 打开命令行工具（如Windows的CMD或Linux的Terminal）。
    • 输入以下命令来克隆Microi吾码的代码仓库（以Gitee为例）：
      • git clone https://gitee.com/ITdos/microi.net
    • 这将在本地创建一个名为microi.net的文件夹，其中包含Microi吾码的所有源代码。

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字段值对应，例如可以设置为iTdos。
      • OsClientType：自定义程序运行环境，如Product（正式环境）、Dev（测试环境）等。
      • OsClientNetwork：自定义网络类型，如Internet（公网）、Internal（内网）等。
      • OsClientDbConn：数据库连接字符串。如果使用MySQL，格式大致为server=your_server;user=your_user;password=your_password;database=your_database。对于SqlServer和Oracle，也有相应的格式要求。
      • IS4SigningCredential：可以直接使用源码中的默认签名。
      • Redis配置（可选）：
        • 如果【OsClient + OsClientType + OsClientNetwork】在【sys_osclient】表中不能匹配到数据（或者匹配的数据中没有Redis相关配置），需要配置以下Redis参数。
        • OsClientRedisHost：Redis主机地址，例如119.31.116.88。
        • OsClientRedisPort：Redis端口，如6379。
        • OsClientRedisPwd：Redis密码，如123456。
      • 其他配置（如分布式存储、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（假设后端服务在本地的5000端口运行），确保前端能够正确地与后端进行通信。

5、数据库初始化

  1. 创建数据库
    • 使用你选择的数据库管理工具（如MySQL Workbench对于MySQL数据库）创建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），就可以看到Microi吾码的登录界面了。
注意，在安装过程中，如果缺少某些必要的软件环境（如没有MongoDB环境会影响系统日志功能，没有MinIO或阿里云OSS等分布式存储环境会影响文件/图片上传功能等），相关功能可能无法正常使用。

二、Microi 吾码低代码框架与 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 npminstall 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>

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

四、在 Microi 吾码页面中使用 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';exportconst dataStore =newVue({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 的优势，构建出更加复杂和功能强大的高效应用。

Read more

A / B测试太慢？AI帮你实时优化实验策略

A / B测试太慢？AI帮你实时优化实验策略

👋 大家好，欢迎来到我的技术博客！ 📚 在这里，我会分享学习笔记、实战经验与技术思考，力求用简单的方式讲清楚复杂的问题。 🎯 本文将围绕AI这个话题展开，希望能为你带来一些启发或实用的参考。 🌱 无论你是刚入门的新手，还是正在进阶的开发者，希望你都能有所收获！ 文章目录 * A/B测试太慢？AI帮你实时优化实验策略 🚀 * 为什么传统A/B测试成了效率黑洞？ * AI驱动的实时优化：从“被动等待”到“主动决策” * 贝叶斯优化：AI决策的数学引擎 * 代理模型：预测点击率 * 采集函数：决定下一步策略 * 代码实战：用Python实现AI优化A/B测试 * 代码执行结果示例 * 实时决策流程：AI如何动态调整实验？ * 实际业务场景：电商大促的AI优化案例 * 贝叶斯优化 vs 其他AI方法 * 如何在你的系统中落地AI优化？ * 步骤1：构建基础数据层 * 步骤2：集成AI优化引擎 * 步骤3：设置停止条件 * 为什么AI优化能避免“实验陷阱”？

玩转Llama Factory：打造你的第一个角色扮演AI

玩转Llama Factory：打造你的第一个角色扮演AI 你是否想过为游戏中的NPC赋予智能对话能力，却苦于没有机器学习背景？Llama Factory正是为解决这类问题而生的开源工具。它能让你无需编写复杂代码，就能快速训练和部署角色扮演AI。本文将带你从零开始，使用Llama Factory为游戏NPC创建个性化的对话系统。 这类任务通常需要GPU环境支持，目前ZEEKLOG算力平台提供了包含该镜像的预置环境，可快速部署验证。下面我们就来详细探索如何用最简单的方法实现这一目标。 什么是Llama Factory？ Llama Factory是一个专注于大模型训练、微调和部署的开源框架。它的核心优势在于： * 低门槛：提供可视化Web界面，无需编程基础也能操作 * 多功能：支持角色设定、对话训练、模型量化等完整流程 * 兼容性强：适配LLaMA、Mistral、Qwen等多种主流大模型 对于游戏开发者来说，这意味着可以快速为NPC添加符合角色设定的对话能力，而不必从零开始学习深度学习。 快速部署Llama Factory环境 1. 在支持GPU的环境中启动
【愚公系列】《AI短视频创作一本通》012-AI 短视频分镜头设计（AI绘画提示词入门）

【愚公系列】《AI短视频创作一本通》012-AI 短视频分镜头设计（AI绘画提示词入门）

💎【行业认证·权威头衔】 ✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家 ✔ 开发者社区全满贯：ZEEKLOG博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主 ✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者 🏆【荣誉殿堂】 🎖 连续三年蝉联"华为云十佳博主"（2022-2024） 🎖 双冠加冕ZEEKLOG"年度博客之星TOP2"（2022&2023） 🎖 十余个技术社区年度杰出贡献奖得主 📚【知识宝库】 覆盖全栈技术矩阵： ◾ 编程语言：.NET/Java/Python/Go/Node… ◾ 移动生态：HarmonyOS/iOS/Android/小程序 ◾ 前沿领域：
探索云开发Copilot，AI如何重塑开发流程？

探索云开发Copilot，AI如何重塑开发流程？

文章目录 * 1 AI与低代码 * 2 Copilot功能 * 3 案例解析 * 4 Copilot不足 * 5 改进建议 刚接触 Copilot 时， Copilot 的 AI 低代码生成功能让我眼前一亮，使得我开发变得更简洁高效。 以前，我总是依赖手写代码，从搭建环境到实现功能，每一步都非常耗时。 虽然这个过程有助于技术成长，但在面对复杂需求时，常常觉得费时费力。 1 AI与低代码 低代码平台通过拖拽组件和模块化开发，极大地降低了技术门槛，让没有开发背景的人也能轻松实现自己的创意。 这种方式不仅快速，而且灵活，适合那些想要快速搭建应用的用户。再加上人工智能在自然语言理解和代码生成方面的突破，开发效率也得到了极大的提升。 云开发 Copilot 正好是这种结合的典型代表。它不仅利用低代码技术简化开发过程，还融合了AI智能生成和优化的功能，帮助开发者更高效地从需求到最终实现。 通过这种方式，不管是技术新手还是有一定开发经验的人，都能更轻松地完成项目，云开发 Copilot 体验地址：https://tcb.