BeetleX.FastHttpApi之Vuejs扩展

非常喜欢用vuejs,但又不想花时间去搞nodejs和webpack之类的,所以才有了BeetleX.FastHttpApi.VueExtend这样一个组件;组件的主要功能就是可以实现在vs.net中编写*.vue并直接引用到服务中,这样对于我这个习惯在vs.net写服务应的带来极大的方便性。

BeetleX的web项目结构

以上是Beetlex网关的管理插件,通过BeetleX.FastHttpApi.VueExtend插件只需要在项目的views->vue目录下编写相关的.vue文件即可以。当然这个vue的内容和平时在webpack中编写的有些差别,不过会相对简单一些:

<div class="admin-page-title"><h1><a href="http://beetlex.io" target="_blank"> Beetlex.io</a></h1><div class="page-menu"><a href="javascript:void(0)" :class="[active=='admin_home'?'active':'']" @click="onChange('admin_home')">主页</a><a href="javascript:void(0)" :class="[active=='admin_actions'?'active':'']" @click="onChange('admin_actions')">控制器管理</a><a href="javascript:void(0)" :class="[active=='admin_urlrewrite'?'active':'']" @click="onChange('admin_urlrewrite')">URL重写配置</a><a href="javascript:void(0)" :class="[active=='admin_folder'?'active':'']" @click="onChange('admin_folder')">虚拟目录</a><a href="javascript:void(0)" :class="[active=='admin_log'?'active':'']" @click="onChange('admin_log')">日志</a><a href="javascript:void(0)" :class="[active=='admin_setting'?'active':'']" @click="onChange('admin_setting')">配置</a><a href="http://beetlex.io" target="_blank">关于</a><a href="javascript:void(0)" :class="[active=='admin_login'?'active':'']" @click="onSignout">退出</a></div>
</div>
<script>{data(){return {active: 'admin_home',signout: new beetlexAction('/admin/Signout'),}},methods: {onChange(model){this.selected = model;this.$emit('change', model);},onSignout(){this.signout.asyncget().then(r => {page.OnSignout();});}},watch: {selected(val){this.active = val;},},props: ['selected']}
</script>

使用上相对会变得更简单,只定义一个vue的结构体,对应的import引入是不需要的,BeetleX.FastHttpApi.VueExtend插件最终会把这些文件生成并输出一个js文件。

插件使用

由于BeetleX.FastHttpApi.VueExtend是针对BeetleX.FastHttpApi而设计的,所以只能用到Beetlex的项目。

使用之前要到

https://www.nuget.org/packages/BeetleX.FastHttpApi.VueExtend/引用最新版本。引用这后只需要针对HttpApiServer调用Vue()创建相关资源引用即可

HttpApiServer.Vue().Debug();
HttpApiServe.Vue().AddScript(typeof(Program).Assembly,"vue.js", "axios.js", "beetlex4axios.js", "element.js", "autobase.js", "echarts.js");

debug:方法主要是用于把解释目录指向当前项目的views目录,这样就可以修相关VUE文件的时候无法编译即可刷新最新的结果。这个方法是基于[Conditional("DEBUG")],所以当编译发布后就无效。

AddScript:方法主要用于添加固定的公共js文件,这些文件在生成后会被放在生成js文件的最顶部分。

页面引用

BeetleX.FastHttpApi.VueExtend只负责vue生成最终js,需要自己建个控制器来进行页面引用输出:

public object GetScript(IHttpContext context)
{return context.Server.Vue().Response(context);
}

html页面引用

<script src="GetScript"></script>

组件会根据生成的js大小进行一个自动的gzip输出,无须开发人员自行处理。除了自动gzip外组件还引入了If-None-Match头来标记内容的变更情况,如果输出的内容没发生变化组件自动响应304。

实际应用效果

现有BeetleX相关web插件都是使用这种方式来进行插件UI开发,对于只想用vs.net同时处理服务和前端工作的人来算是非常方便;这样可以把前端和服务端都集成在一个项目中,也不用考虑跨域调试的问题。以下是使用BeetleX.FastHttpApi.VueExtend开发两个插件的效果

BeetleX

开源跨平台通讯框架(支持TLS)
轻松实现高性能:tcp、http、websocket、redis、rpc和网关等服务应用

https://beetlex.io

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++的new、delete需要注意的一点:使用危险函数导致的越界CRT detected that the application wrote to memory after end of heap

new、delete需要注意的一个特性 正常情况new一个数组之后&#xff0c;用delete释放是没有问题的。但是当对new得到的堆区进行越界的写入操作&#xff08;读操作不会&#xff09;将会导致delete时出现段错误&#xff0c;无法进行删除。如下面的程序所示&#xff1a; 数组大小只…

算法:tips

ceil函数&#xff1a;返回大于或者等于指定表达式的最小整数 floor函数&#xff1a;返回计算不大于给定值的最大整数 #include<stdio.h> #include<math.h> int main(void) {double number123.45;double down,up;downfloor(number);upceil(number);printf("o…

数据结构与算法专题——第四题 字符串相似度

这篇我们看看 最长公共子序列 的另一个版本&#xff0c;求字符串相似度(编辑距离)&#xff0c;我也说过了&#xff0c;这是一个非常实用的算法&#xff0c;在DNA对比&#xff0c;网页聚类等方面都有用武之地。一&#xff1a;概念对于两个字符串 A 和 B&#xff0c;通过基本的增…

[数据结构-严蔚敏版]P71串的抽象数据类型的定义

代码如下: #include <iostream> #include <string> using namespace std;typedef struct {char *ch;int length; }String;bool initString(String &s) {s.ch nullptr;s.length 0;return true; }bool strAssign(String &s, const char *ch) {int len st…

三分钟学会.NET Core Jwt 策略授权认证

一.前言大家好我又回来了&#xff0c;前几天讲过一个关于Jwt的身份验证最简单的案例&#xff0c;但是功能还是不够强大&#xff0c;不适用于真正的项目&#xff0c;是的&#xff0c;在真正面对复杂而又苛刻的客户中&#xff0c;我们会不知所措&#xff0c;就现在需要将认证授权…

[数据结构-严蔚敏版]P65离散事件模拟(银行客户的离散事件驱动模拟程序)

写这个简单玩意&#xff0c;居然花费了我6小时&#xff0c;唉!!!&#xff0c;还是太菜了! 中间已经起了放弃的念头了&#xff0c;最后还是坚持下来了! 总结&#xff1a; (1)漏了p p->next (2)队列删除元素的时候&#xff0c;删除的是最后一个忘记特判。 (3)写的时候太急了…

[温故知新] 编程原则和模式

写了这么多年代码&#xff0c;依旧做不好一个项目做好一个项目是人力、产品、业务、技术、运营的结合&#xff0c;可能还叠加一点时机的因素&#xff0c;就我们码农而言&#xff0c;工作就是搬砖&#xff0c;实现产品&#xff0c; 给业务提供支撑。“给祖传代码加 BUG 修 BUG”…

[C语言] va_start和va_end详解

在C中&#xff0c;当无法列出传递函数的所有实参的类型和数目时&#xff0c;可以用省略号指定参数表。例如&#xff1a; void foo(...); void foo(parm_list,...);函数参数的传递原理 函数参数是以栈的形式存取&#xff0c;从右至左入栈。 参数的内存存放格式&#xff1a;参数…

IntelliJ IDEA中快捷键大全+出现的问题

参照 文章目录1.Ctrl2.Alt3.Shift4.Ctrl Alt5.Ctrl Shift6.Alt Shift7.Ctrl Shift Alt8.其他idea如何将设置包名展开当出现右键&#xff0c;没有创建包选项时idea没有maven图标安装mysql和idea配置idea查看代码的最近修改人及时间1.Ctrl 快捷键介绍Ctrl F在当前文件进行…

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(八)

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

[数据结构-严蔚敏版]P95矩阵压缩-特殊矩阵的存储(对称矩阵,三角矩阵)

对称矩阵的存储&#xff1a; 代码如下: #include <iostream> using namespace std;int main() {int n;cin >> n;int *a;a new int[(n*(n 1)) / 2];for (int i 0; i < (n*(n 1)) / 2; i){cin >> a[i];}for (int i 1; i < n; i){for (int j 1; j…

Java Properties 类

Properties 继承于 Hashtable。表示一个持久的属性集.属性列表中每个键及其对应值都是一个字符串。 Properties 类被许多 Java 类使用。例如&#xff0c;在获取环境变量时它就作为 System.getProperties() 方法的返回值。 Properties 定义如下实例变量.这个变量持有一个 Prop…

微前端与项目实施方案研究

一、前言微前端(micro-frontends)是近几年在前端领域出现的一个新概念&#xff0c;主要内容是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块&#xff0c;而在用户看来仍然是内聚的单个产品。微前端的理念源于微服务&#xff0c;是将庞大的整体拆成可控的小…

ASP.NET Core分布式项目实战(集成ASP.NETCore Identity)--学习笔记

任务24&#xff1a;集成ASP.NETCore Identity之前在 Index 页面写了一个 strong 标签&#xff0c;需要加个判断再显示&#xff0c;不然为空没有错误的时候也会显示if (!ViewContext.ModelState.IsValid) {<strong>Error""</strong><div asp-validatio…

[数据结构]链表中销毁和清空的区别

链表是一个很基本的数据结构&#xff0c;其他的数据结构&#xff08;如&#xff1a;栈、队列、二叉树等&#xff09;都可以用链表来实现。 销毁&#xff1a;是先销毁了链表的头&#xff0c;然后接着一个一个的把后面的销毁了&#xff0c;这样这个链表就不能再使用了&#xff0…

java——泛型

文章目录Java 泛型泛型方法实例有界的类型参数:实例泛型类实例类型通配符1、类型通配符一般是使用?代替具体的类型参数。例如 List<?> 在逻辑上是List,List 等所有List<具体类型实参>的父类。实例2、类型通配符上限通过形如List来定义&#xff0c;如此定义就是通…

Dotnet core基于ML.net的销售数据预测实践

ML.net已经进到了1.5版本。作为Microsoft官方的机器学习模型&#xff0c;你不打算用用&#xff1f;一、前言ML.net可以让我们很容易地在各种应用场景中将机器学习加入到应用程序中。这是这个框架很重要的一点。通过ML.net&#xff0c;我们可以使用手中的可用数据&#xff0c;进…

Java中关于省略作用域报错问题分析

这个是很典型的作用域问题&#xff0c;if后如果省略那么if只作用于其后面的第一行代码 这时候如果这行代码只是个变量声明语句的话&#xff0c;这个变量是没有其他任何逻辑可以访问到的&#xff0c;因为作用域问题(如果有/&#xff0c;那么声明语句中声明的变量只在这个个内可用…

java进阶之注解篇

文章目录注解基本语法定义注解元注解编写注解处理器注解元素默认值限制生成外部文件替代方案注解不支持继承实现处理器注解 注解&#xff08;也被称为元数据&#xff09;为我们在代码中添加信息提供了一种形式化的方式&#xff0c;使我们可以在稍后的某个时刻更容易的使用这些…

C#9就这么来了,.NET开发者该做点什么?

就在上周三10号&#xff0c;.NET5.0发布了第5个预览版&#xff0c;同时支持了C#9-preview&#xff01;是的&#xff0c;你没看错&#xff0c;虽然C# 8.0还未正式发布&#xff0c;但是通往C&#xff03;9的漫长道路却已经开始&#xff0c;这发展速度简直了&#xff01;C#语言的快…