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
BeetleX.FastHttpApi之Vuejs扩展相关推荐
- BeetleX.FastHttpApi之JWT和自定义访问验证
BeetleX.FastHttpApi.Jwt组件是BeetleX.FastHttpApi的JWT安全验证插件,通组件的简单配置即可以实现对webapi进行安全访问控制.接下来介绍如何使用这组件并和其 ...
- BeetleX.FastHttpApi之控制器调度设计
为了可以更灵活地在Webapi应用服务中分配线程资源,BeetleX.FastHttpApi在线程调度上直接细化到Action级别:组件不仅可以精准控制每个Action的最大RPS限制,还能精细到控制 ...
- 一站式Web开发套件BeetleX.WebFamily
BeetleX.WebFamily是一款前后端分离的Web开发套件,但它并不依赖于nodejs/npm/webpack等相关工具:而使用自身实现的方式来完成前后端分离的Web应用开发:套件以组件的方式 ...
- BeetleX之vue-autoui自匹配UI插件
vue-autoui 是一款基于vue和element扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-form和auto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的 ...
- BeetleX实现MessagePack和Protobuf消息控制器调用websocket服务详解
最近有用户问如何使用BeetleX封装一个基于Protobuf格式的websocket服务并支持控制器调用:其实BeetleX.FastHttpApi是支持Websocket服务和自定义数据格式的,但 ...
- BeetleX之Websocket服务使用
BeetleX.FastHttpApi不仅是一个Webapi服务组件,它同时也是一个Websocket服务组件.由于BeetleX.FastHttpApi的实现是直接支持Websocket Upgra ...
- BeetleX网关之请求聚合
在网关服务中请求聚合是允许把多个请求打包成一个响应给请求方,这样不仅可以节省请求方的请求数量,还可以根据需求的情况整合不同业务数据响应请求.BeetleX.Bumblebee虽然并没有内置这一功能,但 ...
- dotnet core高吞吐Http api服务组件FastHttpApi
简介 是dotNet core下基于Beetlex实现的一个高度精简化和高吞吐的HTTP API服务开源组件,它并没有完全实现HTTP SERVER的所有功能,而是只实现了在APP和WEB中提供数据服 ...
- 使用FastHttpApi构建多人Web聊天室
为什么80%的码农都做不了架构师?>>> 一般在dotnet core下构建使用web服务应用都使用asp.net core,但通过FastHttpApi组建也可以方便地构建w ...
最新文章
- 离散数学专业术语(continuous updating)
- 家用计算机内存最大是多少,电脑支持最大内存是多少?选用多大内存才合理?方法技巧要知道...
- python管理包管理工具pip和conda使用,及使用pip和conda创建虚拟环境
- linux修改mysql配置文件_Linux下PHP开发环境搭建(Apache2.4+PHP7.1+MySQL5.7)
- leetcode 319. Bulb Switcher | 319. 灯泡开关
- httpClient实现微信公众号消息群发
- 前端学习(2110):组件化得开发和实现步骤
- java socket 阻塞模式_(四) 如何将socket设置为非阻塞模式
- 子网与子网掩码的介绍
- 【深度学习系列】——深度学习简介
- SQL Server使用convert对datetime日期数据进行获取
- Java基础教程:Lambda表达式
- Wii 补充运动利器
- 计算机办公软件应用实训,办公软件office实训计划
- 批量删除多个 PDF 文档空白页
- java 7编程高级进阶_Java7编程高级进阶-积累(1)
- 乐固加固APP后无法启动
- HDU 6441 Find Integer(费马大定理)
- 二代旅游CMS网站管理系统使用手册(三)--计调线路团期录入
- 【医学成像】超声成像中的分辨率