6.6 消息

在我们系统研发过程中经常需要发送短信、邮件、站内信等,笔者在本文给大家介绍下如何使用Oinone的消息模块。

准备工作

如果通过我们工程脚手架工具生成的则已经引入了无需做更多的配置,如果不是则需要按以下步骤先配置依赖和增加启动模块

pamirs-demo-boot的pom文件中引入pamirs-message-core包依赖

<dependency>
  <groupId>pro.shushi.pamirs.core</groupId>
  <artifactId>pamirs-message-core</artifactId>
</dependency>

pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加message,即在启动应用中增加message模块

pamirs:
    boot:
    modules:
      - message

消息参数设置

发送邮件和短信需要设置对应的发送邮箱服务器和短信云,短信目前默认阿里云短信。我们通过代码示例来完成对应邮箱和短信的参数设置

Step1 增加pamirs-message-api依赖

pamirs-demo-core的pom文件中引入pamirs-message-api包依赖

<dependency>
  <groupId>pro.shushi.pamirs.core</groupId>
  <artifactId>pamirs-message-api</artifactId>
</dependency>

Step2 消息参数设置

请自行替换邮箱服务器和短信通道的账号信息

package pro.shushi.pamirs.demo.core.init;

import org.springframework.stereotype.Component;
import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand;
import pro.shushi.pamirs.boot.common.api.init.InstallDataInit;
import pro.shushi.pamirs.boot.common.api.init.UpgradeDataInit;
import pro.shushi.pamirs.demo.api.DemoModule;
import pro.shushi.pamirs.message.enmu.EmailSendSecurityEnum;
import pro.shushi.pamirs.message.enmu.MessageEngineTypeEnum;
import pro.shushi.pamirs.message.enmu.SMSChannelEnum;
import pro.shushi.pamirs.message.model.EmailSenderSource;
import pro.shushi.pamirs.message.model.SmsChannelConfig;

import java.util.Collections;
import java.util.List;

@Component
public class DemoMessageInit implements InstallDataInit, UpgradeDataInit {

    private void initEmail(){
        EmailSenderSource emailSenderSource = new EmailSenderSource();
        emailSenderSource.setName("邮件发送服务");
        emailSenderSource.setType(MessageEngineTypeEnum.EMAIL_SEND);
        //优先级
        emailSenderSource.setSequence(10);
        //发送账号 FIXME 自行替换
        emailSenderSource.setSmtpUser("");
        //发送密码 FIXME 自行替换
        emailSenderSource.setSmtpPassword("");
        //发送服务器地址和端口
        emailSenderSource.setSmtpHost("smtp.exmail.qq.com");
        emailSenderSource.setSmtpPort(465);
        //" None: SMTP 对话用明文完成。" +
        //" TLS (STARTTLS): SMTP对话的开始时要求TLS 加密 (建议)" +
        //" SSL/TLS: SMTP对话通过专用端口用 SSL/TLS 加密 (默认是: 465)")
        emailSenderSource.setSmtpSecurity(EmailSendSecurityEnum.SSL);
        emailSenderSource.createOrUpdate();
    }

    private void initSms(){
        SmsChannelConfig smsChannelConfig = new SmsChannelConfig();
        smsChannelConfig.setType(MessageEngineTypeEnum.SMS_SEND);
        smsChannelConfig.setChannel(SMSChannelEnum.ALIYUN);
        //短信签名名称
        smsChannelConfig.setSignName("oinone");
        //阿里云账号信息  FIXME 自行替换
        smsChannelConfig.setAccessKeyId("");
        smsChannelConfig.setAccessKeySecret("");
        smsChannelConfig.setEndpoint("https://dysmsapi.aliyuncs.com");
        smsChannelConfig.setRegionId("cn-hangzhou");
        smsChannelConfig.setTimeZone("GMT");
        smsChannelConfig.setSignatureMethod("HMAC-SHA1");
        smsChannelConfig.setSignatureVersion("1.0");
        smsChannelConfig.setVersion("2017-05-25");
        smsChannelConfig.createOrUpdate();

        //初始化短信模版
        //目前支持阿里云短信通道:获取短信模板,如没有短信模板,需要先创建模板,并审核通过
        SmsTemplate smsTemplate = new SmsTemplate();
        smsTemplate.setName("通知短信");
        smsTemplate.setTemplateType(SMSTemplateTypeEnum.NOTIFY);
        smsTemplate.setTemplateCode("SMS_244595482");//从阿里云获取,自行提供 FIXME
        smsTemplate.setTemplateContent("尊敬的&{name},你的&{itemName}库存为&{quantity}");
        smsTemplate.setChannel(SMSChannelEnum.ALIYUN);
        smsTemplate.setStatus(SMSTemplateStatusEnum.SUCCESS);
        smsTemplate.createOrUpdate();
    }

    @Override
    public boolean init(AppLifecycleCommand command, String version) {
        initEmail();
        initSms();
        return Boolean.TRUE;
    }

    @Override
    public boolean upgrade(AppLifecycleCommand command, String version, String existVersion) {
        initEmail();
        initSms();
        return Boolean.TRUE;
    }

    @Override
    public List<String> modules() {
        return Collections.singletonList(DemoModule.MODULE_MODULE);
    }

    @Override
    public int priority() {
        return 0;
    }
}

消息发送举例

该例子以各种站内信、邮件、短信方式发送宠物商品库存记录信息为例,构建宠物商品库存信息发送服务并在宠物商品库存模型的表格页面创建发送入口

Step1 创建宠物商品库存信息发送服务接口

在Api工程新建PetItemInventoryMessageService接口,并定义发送站内信、邮件、短信的三个Function

package pro.shushi.pamirs.demo.api.service;

import pro.shushi.pamirs.demo.api.model.PetItemInventroy;
import pro.shushi.pamirs.meta.annotation.Fun;
import pro.shushi.pamirs.meta.annotation.Function;

@Fun(PetItemInventoryMessageService.FUN_NAMESPACE)
public interface PetItemInventoryMessageService {

    String FUN_NAMESPACE = "demo.PetItemInventoryMessageService";
    @Function
    void sendMail(PetItemInventroy data);
    @Function
    void sendEmail(PetItemInventroy data);
    @Function
    void sendSms(PetItemInventroy data);

}

Step2 发送站内信

在Core工程新建PetItemInventoryMessageService接口的实现类

package pro.shushi.pamirs.demo.core.service;

import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;
import pro.shushi.pamirs.demo.api.enumeration.DemoExpEnumerate;
import pro.shushi.pamirs.demo.api.model.PetItemInventroy;
import pro.shushi.pamirs.demo.api.service.PetItemInventoryMessageService;
import pro.shushi.pamirs.demo.core.session.DemoSession;
import pro.shushi.pamirs.message.engine.MessageEngine;
import pro.shushi.pamirs.message.engine.email.EmailSender;
import pro.shushi.pamirs.message.engine.message.MessageSender;
import pro.shushi.pamirs.message.engine.sms.SMSSender;
import pro.shushi.pamirs.message.enmu.MessageEngineTypeEnum;
import pro.shushi.pamirs.message.enmu.MessageGroupTypeEnum;
import pro.shushi.pamirs.message.enmu.MessageTypeEnum;
import pro.shushi.pamirs.message.enmu.SMSTemplateTypeEnum;
import pro.shushi.pamirs.message.model.PamirsMessage;
import pro.shushi.pamirs.message.model.SmsTemplate;
import pro.shushi.pamirs.message.tmodel.EmailPoster;
import pro.shushi.pamirs.message.tmodel.SystemMessage;
import pro.shushi.pamirs.meta.annotation.Fun;
import pro.shushi.pamirs.meta.annotation.Function;
import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j;
import pro.shushi.pamirs.meta.common.exception.PamirsException;
import pro.shushi.pamirs.meta.util.JsonUtils;
import pro.shushi.pamirs.user.api.model.PamirsUser;

import javax.mail.MessagingException;
import javax.mail.SendFailedException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

@Fun(PetItemInventoryMessageService.FUN_NAMESPACE)
@Slf4j
@Component
public class PetItemInventoryMessageServiceImpl implements PetItemInventoryMessageService {

    public static final String INVALID_ADDRESSES_CODE = "Invalid Addresses";
    public static final String INVALID_ADDRESSES_MSG = "非法的邮箱地址";
    public static final String CAN_NO_CONNECT_TO_SMTP_CODE = "Could not connect to SMTP";
    public static final String CAN_NO_CONNECT_TO_SMTP_MSG = "连接邮件服务失败";

    @Override
    @Function
    public void sendMail(PetItemInventroy data) {
        //接收对象列表
        PamirsUser user = DemoSession.getUser();

        List<Long> userIds = new ArrayList<>();
        userIds.add(user.getId());

        String subject = "商品库存信息";
        String body = data.getItemName() + "_" + data.getQuantity();
        MessageSender mailSender = (MessageSender) MessageEngine.get(MessageEngineTypeEnum.MAIL_SEND).get(null);
        PamirsMessage message = new PamirsMessage()
                .setName(subject)
                .setSubject(subject)
                .setBody(body)
                .setMessageType(MessageTypeEnum.NOTIFICATION);

        List<PamirsMessage> messages = new ArrayList<>();
        messages.add(message);
        SystemMessage systemMessage = new SystemMessage();
        systemMessage.setPartners(userIds.stream().map(i -> (PamirsUser) new PamirsUser().setId(i)).collect(Collectors.toList()))
                .setType(MessageGroupTypeEnum.SYSTEM_MAIL)
                .setMessages(messages);
        try {
            mailSender.sendSystemMail(systemMessage);
        } catch (Exception e) {
            // TODO: 可增加失败业务处理
            throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR, e).appendMsg("站内信发送失败").errThrow();
        }
    }

    @Override
    @Function
    public void sendEmail(PetItemInventroy data) {
        //发送一个邮件
        List<String> receiveEmails = new ArrayList<>();
        receiveEmails.add("testhaha@shushi.pro");//收件人邮箱,自行替换 FIXME 
        EmailSender emailSender = null;
        EmailPoster emailPoster = null;

        emailSender = (EmailSender) MessageEngine.get(MessageEngineTypeEnum.EMAIL_SEND).get(null);

        String title = data.getItemName();//"邮件标题";
        String body = data.getItemName() + "_" + data.getQuantity();//"邮件内容";
        String sender = DemoSession.getUserName();//"发件人";
        String replyEmail = "回复邮箱";

        emailPoster = new EmailPoster().setSender(sender).setTitle(title).setBody(body).setReplyTo(replyEmail);

        EmailPoster finalEmailPoster = emailPoster;
        EmailSender finalEmailSender = emailSender;

        StringBuilder errorMessages = new StringBuilder();
        receiveEmails.stream().distinct().collect(Collectors.toList()).forEach(
                email -> {
                    try {
                        if (!finalEmailSender.send(finalEmailPoster.setSendTo(email))) {
                            log.error("发送邮件失败:emailPoster:{}", JsonUtils.toJSONString(finalEmailPoster));
                            String message = "发送邮件失败,错误信息:" + "系统异常" + ",邮箱:" + email + ";";
                            errorMessages.append(message);
                        }
                    } catch (Exception e) {
                        log.error("发送邮件失败:emailPoster:{},异常:{}", JsonUtils.toJSONString(finalEmailPoster), e);
                        String errorMsg = transferEmailThrowMessage(e);
                        String message = "发送邮件失败,错误信息:" + errorMsg + ",邮箱:" + email + ";";
                        errorMessages.append(message);
                    }
                }
        );

        if (StringUtils.isNotBlank(errorMessages.toString())) {
            // TODO: 可增加处理邮件发送失败的业务逻辑
        }
    }

    private String transferEmailThrowMessage(Exception e) {
        String errorMessage = e.getMessage();
        Throwable cause = e.getCause();
        if (cause != null) {
            if (cause instanceof SendFailedException) {
                String message = cause.getMessage();
                if (INVALID_ADDRESSES_CODE.equals(message)) {
                    errorMessage = INVALID_ADDRESSES_MSG;
                }
            } else if (cause instanceof MessagingException) {
                String message = cause.getMessage();
                if (StringUtils.isNotBlank(message) && message.contains(CAN_NO_CONNECT_TO_SMTP_CODE)) {
                    errorMessage = CAN_NO_CONNECT_TO_SMTP_MSG;
                }
            }
        }
        return errorMessage;
    }

    @Override
    @Function
    public void sendSms(PetItemInventroy data) {
        StringBuilder errorMessages = new StringBuilder();

        List<String> receivePhoneNumbers = new ArrayList<>();
        receivePhoneNumbers.add("13777899044");//接收手机号,自行提供 FIXME 

        //目前支持阿里云短信通道:获取短信模板,如没有短信模板,需要先创建模板,并审核通过
        //如以下示例
        SmsTemplate smsTemplate = new SmsTemplate().setTemplateType(SMSTemplateTypeEnum.NOTIFY).setTemplateCode("SMS_246455054").queryOne();//从阿里云获取

        // 占位符处理
        Map<String, String> vars = new HashMap<>();
        vars.put("name", DemoSession.getUserName());
        vars.put("itemName", data.getItemName());
        vars.put("quantity", data.getQuantity().toString());

        SMSSender smsSender = (SMSSender) MessageEngine.get(MessageEngineTypeEnum.SMS_SEND).get(null);
        receivePhoneNumbers.stream().distinct().forEach(it -> {
            try {
                if (!smsSender.smsSend(smsTemplate, it, vars)) {
                    String message = "发送短信失败,错误信息:" + "系统异常" + ",手机号:" + it + ";";
                    errorMessages.append(message);
                }
            } catch (Exception e) {
                String message = "发送短信失败,错误信息:" + e.getMessage() + ",手机号:" + it + ";";
                errorMessages.append(message);
            }
        });
        if (StringUtils.isNotBlank(errorMessages.toString())) {
            // TODO: 可增加失败业务处理
        }
    }
}

Step3 为宠物商品库存模型的表格页面新增发送入口

把以下代码复制到PetItemInventroyAction类中

@Autowired
private PetItemInventoryMessageService petItemInventoryMessageService;
@Action(displayName = "发送站内信",bindingType = ViewTypeEnum.TABLE,contextType = ActionContextTypeEnum.SINGLE)
public PetItemInventroy sendMail(PetItemInventroy data) {
    petItemInventoryMessageService.sendMail(data);
    return data;
}

/**
 * 发送邮件
 */
@Action(displayName = "发送邮件",bindingType = ViewTypeEnum.TABLE,contextType = ActionContextTypeEnum.SINGLE)
public PetItemInventroy sendEmail(PetItemInventroy data){
    petItemInventoryMessageService.sendEmail(data);
    return data;
}

/**
 * 发送短息
 */
@Action(displayName = "发送短信",bindingType = ViewTypeEnum.TABLE,contextType = ActionContextTypeEnum.SINGLE)
public PetItemInventroy sendSms(PetItemInventroy data){
    petItemInventoryMessageService.sendSms(data);
    return data;
}

Step4 重启看效果

请分别点击发送邮件、发送短信、发送站内信测试效果,自行测试效果

image.png

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9330.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年5月23日
Next 2024年5月23日

相关推荐

  • 4.1.13 Action之校验

    在3.5.3【Action的类型】一文中有涉及到“ServerAction之校验”部分,本文介绍一个特殊的写法,当内置函数和表达式不够用的时候,怎么扩展。还是拿PetShopProxyAction举例,修改如下: package pro.shushi.pamirs.demo.core.action; ……引依赖类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { ……其他代码 // @Validation(ruleWithTips = { // @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), // @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长,不能超过128位"), // }) @Validation(check = "checkName") @Action(displayName = "启用") @Action.Advanced(rule="activeRecord.code !== undefined && !IS_BLANK(activeRecord.code)") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } @Function public Boolean checkName(PetShopProxy data) { String field = "name"; String name = data.getShopName(); boolean success = true; if (StringUtils.isBlank(name)) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称为必填项")); success = false; } if (name.length() > 128) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称过长,不能超过128位")); success = false; } return success; } ……其他代码 } 图4-1-13-1 PetShopProxyAction扩展配置 注: check属性指定了校验函数名称,命名空间必须与服务器动作一致。 校验函数的入参必须与服务器动作一致 使用PamirsSession#getMessageHub方法可通知前端错误的属性及需要展示的提示信息,允许多个。

    Oinone 7天入门到精通 2024年5月23日
    2.1K00
  • 业务审计

    整体介绍 业务审计是指通过跟踪用户在平台业务应用中的各类行为操作以及关联的数据变化,支撑企业业务审计所需。平台提供可视化审计规则配置,根据审计规则记录行为日志,其中日志包括登录日志、应用日志; 登录日志:记录平台用户登录行为。 应用日志:针对已订阅的审计规则记录用户操作信息,是用户在各应用中操作行为留痕记录。 审计规则:业务审计中,数据变化订阅记录的规则,是记录应用日志的规则。 操作入口:应用中心——业务审计应用。

    Oinone 7天入门到精通 2024年6月20日
    2.5K00
  • 3.5.3 Action的类型

    各类动作我们都碰到过,但都没有展开讲过。这篇文章我们来系统介绍下oinone涉及到的所有Action类型。 一、动作类型 服务器动作ServerAction 类似于Spring MVC的控制器Controller,通过模型编码和动作名称路由,定义存储模型或代理模型将为该模型自动生成动作名称为consturct,queryOne,queryPage,create,update,delete,deleteWithFieldBatch的服务器动作。定义传输模型将为该模型自动生成动作名称为consturct的服务器动作 窗口动作ViewAction 站内跳转,通过模型编码和动作名称路由。系统将为存储模型和代理模型自动生成动作名称为redirectDetailPage的跳转详情页窗口动作,动作名称为redirectListPage的跳转列表页窗口动作,动作名称为redirectCreatePage的跳转新增页窗口动作,动作名称为redirectUpdatePage的跳转更新页窗口动作。 跳转动作UrlAction 外链跳转 客户端动作ClientAction 调用客户端函数 二、默认动作 如果在UI层级,有开放新增语义函数,则会默认生成新增的窗口动作ViewAction,跳转到新增页面 如果在UI层级,有开放更新语义函数,则会默认生成修改的窗口动作ViewAction,跳转到更新页面 如果在UI层级,有开放删除语义函数,则会默认生成删除的客户端动作ClientAction,弹出删除确认对话框 三、第一个服务器动作ServerAction 回顾第一个ServerAction 第一个ServerAction是在3.3.2【模型的类型】一文中的“代理模型”部分出现的,再来看下当时的定义代码 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-1 回顾第一个ServerAction @Action注解将创建服务器动作,并@Model.model绑定 自定义ServerAction请勿使用get、set、unset开头命名方法或toString命名方法。 ServerAction之校验(举例) Step1 为动作配置校验表达式 使用@Validation注解为PetShopProxyAction的dataStatusEnable服务端动作进行校验表达式配置 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长,不能超过128位"), }) @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-2 为动作配置校验表达式 注: ruleWithTips可以声明多个校验规则及错误提示; IS_BLANK和LEN为内置文本函数,更多内置函数详见4.1.12【函数之内置函数与表达式】一文; 当内置函数不满足时参考4.1.13【Action之校验】一文。 Step2 重启看效果 在商店管理页面点击【启用】得到了预期返回错误信息,显示"编码为必填项" 图3-5-3-3 在商店管理页面点击启用得到了预期返回错误信息 ServerAction之前端展示规则(举例) 既然后端对ServerAction发起提交做了校验,那能不能在前端就不展示呢?当然可以,我们现在就来试下。 Step1 配置PetShopProxyAction的dataStatusEnable的前端出现规则 用注解@Action.Advanced(invisible="!(activeRecord.code !== undefined && !IS_BLANK(activeRecord.code))")来表示,注意这里配对invisible是给前端识别的,所以写法上跟后端的校验有些不一样,但如内置函数IS_BLANK这些是前后端一致实现的,activeRecord在前端用于表示当前记录。 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.name) < 128", error = "名称过长,不能超过128位"), }) @Action(displayName = "启用") @Action.Advanced(invisible="!(activeRecord.code !== undefined…

    2024年5月23日
    1.8K00
  • 5.4 基础支撑之商业关系域

    PamirsPartner作为商业关系与商业行为的主体,那么PamirsPartner间的关系如何描述,本文将介绍两种常见的设计思路,从思维和实现两方面进行对比,给出oinone为啥选择关系设计模式的原因。 一、两种设计模式对比 设计模式思路介绍 角色设计模式思路介绍 从产品角度枚举所有商业角色,每个商业角色对应一个派生的商业主体,并把主体间的关系类型进行整理。 图5-4-1 角色设计模式 关系设计模式思路介绍 从产品角度枚举所有商业角色,每个商业角色对应一个派生的主体间商业关系 图5-4-2 关系设计模式 设计模式对应实现介绍 角色设计模式实现介绍 不单商业主体需要扩展,关系也要额外维护,可以是字段或是关系表。一般M2O和O2M字段维护,M2M关系表维护。 创建合同场景中甲方选择【商业主体A】,乙方必须是【商业主体A】有关联的经销商、分销商、零售商、供应商等,则在角色设计模式下就非常麻烦,因为关系都是独立维护的 图5-4-3 角色设计模式实现介绍 关系设计模式实现介绍 只需维护商业关系扩展 同时在设计上收敛了商业关系,统一管理应对不同场景都比较从容 图5-4-4 关系设计模式实现介绍 二、oinone商业关系的默认实现 首先oinone的商业关系选择关系设计模式 其次模型上采用多表继承模式,父模型上维护核心字段,子模型维护个性化字段。

    2024年5月23日
    2.3K00
  • 3.2.2 启动前端工程

    本节核心是带大家直观的感受下我们上节构建的demo模块,并搭建前端环境为后续学习打下基础 一、使用vue-cli构建工程 ##demo-front是项目名,可以替换成自己的 vue create –preset http://ss.gitlab.pamirs.top/:qilian/pamirs-archetype-front4 –clone demo-front –registry http://nexus.shushi.pro/repository/kunlun/ 图3-2-2-1 使用vue-cli构建工程 如果启动报错,清除node_modules后重新npm i mac清除命令:npm run cleanOs windows清除命令: npm run clean 若安装失败,检查本地node、npm、vue对应的版本 图3-2-2-2 检查本地的版本 或者下载前端工程本地运行[oinone-front.zip](oinone-front)(575 KB) 二、启动前端工程 找到README.MD文件,根据文件一步一步操作就行。 找到vue.config.js文件,修改devServer.proxy.pamirs.target为后端服务的地址和端口 const WidgetLoaderPlugin = require('@kunlun/widget-loader/dist/plugin.js').default; const Dotenv = require('dotenv-webpack'); module.exports = { lintOnSave: false, runtimeCompiler: true, configureWebpack: { module: { rules: [ { test: /\.widget$/, loader: '@kunlun/widget-loader' } ] }, plugins: [new WidgetLoaderPlugin(), new Dotenv()], resolveLoader: { alias: { '@kunlun/widget-loader': require.resolve('@kunlun/widget-loader') } } }, devServer: { port: 8080, disableHostCheck: true, progress: false, proxy: { pamirs: { // 支持跨域 changeOrigin: true, target: 'http://127.0.0.1:8090' } } } }; 图3-2-2-3 修改后端服务地址与端口 注:要用localhost域名访问,.env文件这里也要改成localhost。如果开发中一定要出现前后端域名不一致,老版本Chrome会有问题,修改可以请参考https://www.cnblogs.com/willingtolove/p/12350429.html 。或者下载新版本Chrome 进入前端工程demo-front文件目录下,执行 npm run dev,最后出现下图就代表启动成功 图3-2-2-4 前端启动成功提示 使用 http://127.0.0.1:8081/login 进行访问,并用admin账号登陆,默认密码为admin 图3-2-2-5 系统登陆页面 点击左上角进行应用切换,会进入App Finder页面,可以看到所有已经安装的应用,可以对照boot的yml配置文件看。但细心的小伙伴应该注意到了,在App Finder页面出现的应用跟我们启动工程yml配置文件中加载的启动模块数不是一一对应的,同时也没有看到我们demo模块。 图3-2-2-6 已安装应用界面 boot工作的yml文件中加载模块 App Finder的应用 说明 – base- common- sequence- expression 无 模块的application = false,为非应用类的模块 – resource – user – auth – business- message – apps- my_center(show=INACTIVE )- sys_setting (show=INACTIVE ) 有 模块的application = true,为应用类的模块但show=INACTIVE 的则不展示,通过以下方式定义:@Module(show = ActiveEnum.INACTIVE) – demo_core 无 刚建的oinoneDemo工程,默认为false 设计器:无 设计器:无 因为boot中没有加载设计器模块,所以App Finder中的设计器tab选项卡下没有应用 表3-2-2-1 boot工作的yml文件中加载模块及App Finder应用说明 只需要修改oinoneDemo工程的模块定义如下图,那么就可以在App Finder页面看见“oinoneDemo工程”。 图3-2-2-7 修改模块的application属性为true 图3-2-2-8 在App Finder 页面即可看见“OinoneDemo工程” 目前oinone的Demo模块还是一个全空的模块,所以我们点击后会进入一个空白页面。在后续的学习过程中我们会不断完善该模块。 至此恭喜您,前端工程已经启动完成。 三、前端工程结构介绍 ├── public 发布用的目录,index.html入口文件将在这里 │ ├── src 源代码…

    2024年5月23日
    1.9K00

Leave a Reply

Please Login to Comment