一站式Web开发套件BeetleX.WebFamily

BeetleX.WebFamily是一款前后端分离的Web开发套件，但它并不依赖于nodejs/npm/webpack等相关工具；而使用自身实现的方式来完成前后端分离的Web应用开发；套件以组件的方式发布，只需要在项目引用相关组件即可实现前后端分离开发，开发出来的项目可直接部署在装用.NetCore的Linux和Windows系统上。

BeetleX.WebFamily整合了前后端两方面的应用技术；后端使用BeetlX.FastHttpApi作为基础服务支持http/https/ws/wss服务，集成了JWT验证方案可以实现相关服务安全性调用；在数据库访问上集成了EFCore组件，外置缓冲上集成了BeetleX.Redis。前端则使用了Vue,默认集成了ElementUI作为基UI库；在Ajax上集成了axios库，为了方便和BeetleX通讯同样集成了基于axios扩展的BeetleXjs实现无缝兼容http/ws的控制器调用。

创建服务

首先需要创建一个控制台项目(winform也可以，作为服务的宿主)，创建项目后引用BeetleX.WebFamily组件，并在Main函数定义以下代码.

    WebHost host = new WebHost();host.Setting(o =>{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;}).Run();

以上是在80上启用一个http/websocket服务，接下来在项目中增加一个views目录，然后添加index.html文件。

接下来就可以运行它并用浏览器访问它了。

这样迈出了使用BeetleX.WebFamily编写web应用的第一步，接下来就是WebApi,EFCore和VUE等相关的使用。

API编写

BeetleX.WebFamily的服务由BeetleX.FastHttpApi提供，在编写Webappi需要定义相关的控制器.

    [Controller]public class WebApiController{public object Hello(){return DateTime.Now;}}

以上是一个简单的Hello方法，访问路径是/Hello.在服务启动的时候需要注册一下它。

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;
})
.Run();

通过WebHost.RegisterController方法进行注册控制器，该方法在注册这个类的同时也把相关程序集中所有控制器也注册完成;注册完成即可访问这个方法.

JWT验证

组件默认是开始JWT验证处理，在这情况所有接口的访问都是没有限制的；可以以下方式开启JWT

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;
})
.UseJWT()
.Run();

开启了JWT后，所有方法在没有凭证的情况都会返回401错误。

如果希望某些控制器或方法有接受验证处理，可以通过AuthMark来实现

    [Controller][AuthMark(AuthMarkType.NoValidation)]public class WebApiController{public object Hello(){return DateTime.Now;}}

以上标记WebApiController的所有方法不用验证即可访问。针对JWT的使用可以查看BeetleX之webapi验证插件JWT集成

数据库访问

BeetleX.WebFamily默认集成EFCore作为数据库访问组件，可以通过以下代码加入数据库。

static void Main(string[] args)
{WebHost host = new WebHost();host.RegisterController<WebApiController>().Setting(o =>{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;}).UseJWT().UseEFCore<NorthwindContext>().Run();
}

以上是引用了NorthwindContext数据库，实际可以根据需要来引用多个数据库。当开启了数据库后，控制器方法即可定义相关数据库对象来进行数据库访问。

public DBObjectList<Customer> Customers(EFCoreDB<NorthwindContext> db)
{return (db.DBContext, "select * from customers");
}

可以通过EFCoreDB<T>来引用数据库，由于组件需要管控相关参数的一些生合周期和信息所以无法直接用DBContext来处理。

BeetleX.EFCore.Extension之SQL对象详解

Redis访问

在高并发服务中往往需要缓存作为其并发的支撑点，BeetleX.WebFamily默认集成了BeetleX.Redis作为其内置的缓存服务。可以通过以下方法开启Redis访问，首先定义一个对应需求的Redis对象

    public class NorthwindRedis : RedisDB{public NorthwindRedis() : base(0, new JsonFormater()){}}

接下来就可以在WebHost中使用它

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;
})
.UseJWT()
.UseEFCore<NorthwindContext>()
.UseRedis<NorthwindRedis>(redis =>{var host = redis.Host.AddWriteHost("127.0.0.1");host.MaxConnections = 50;})
.Run();

给相关Redis库添加一个可写的服务地址，然后设置最大连接数是50。开启后就可以在控制器中方法定义相关参数了。

public async Task SetRedis(EFCoreDB<NorthwindContext> db, NorthwindRedis redis)
{var item = await db.DBContext.Customers.FirstAsync();await redis.Set(item.CustomerID, item);
}public async Task<Customer> GetRedis(NorthwindRedis redis)
{var item = await redis.Get<Customer>("ALFKI");return item;
}

Vue使用

在BeetleX.WebFamily的支持上无须使用nodejs/npm/webpack等相关工具即可编写Vue模块；组件默认嵌入了Vue,axios和element包，所以在开发过程中无须导入，如果需要其他则需要自行导入。为了方便修改刷后即得结果需要在服务启动时添加以下代码

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;
})
.UseJWT()
.UseEFCore<NorthwindContext>()
.UseRedis<NorthwindRedis>(redis =>
{var host = redis.Host.AddWriteHost("127.0.0.1");host.MaxConnections = 50;
})
.Initialize(s =>
{//添加第三方css和javascript文件//s.GetWebFamily().AddCss("site.css");//s.GetWebFamily().Addscript("xxx.js");s.Vue().Debug();
}).Run();

通过Initialize方法里设置一下Vue.Debug(),这样确保程序在运行时修改模块文件也可以即时刷新查看。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>BeetleX.WebFamily</title><link href="/css/beetlex.css" rel="stylesheet" /><script src="/js/beetlex.js"></script>
</head>
<body><div id="app"><h1></h1></div><script>var page = new Vue({el: '#app',data: {title: 'BeetleX.WebFamily Vue',}});
</script>
</body>
</html>

在这里需要注意的是css和javascript引用，引用方式是固定的

<link href="/css/beetlex.css" rel="stylesheet" />
<script src="/js/beetlex.js"></script>

组件打包的css和 javascript通过这两个路径输出。

Vue组件

作为一个模块化设计理念的组件，在实际应用更多是单页面集成模块为主；组件支持组件编写，编写方式和传统es6下有所不同，以下是mypanel.vue模块

<h1>{{title}}
</h1>
<script>{data(){return { title: 'BeetleX.WebFamily Vue module' }}}
</script>

其编写方法主要是以vuejs为主，组件分为两大块一块是html模块，另一块是则是以script的方式描述Vue组件信息。在index.html中引用组件:

<body><div id="app"><mypanel></mypanel></div><script>var page = new Vue({el: '#app',data: {}});
</script>
</body>

使用element控件

组件集成了ElementUI可以直接在组件中使用相关组件。下面实现一个customers.vue来显示客户信息。

<div><el-table :data="getCustomers.result"style="width: 100%" size="mini"><el-table-column prop="CustomerID"label="CustomerID"width="180"></el-table-column><el-table-column prop="CompanyName"label="CompanyName"width="180"></el-table-column><el-table-column prop="ContactName"label="ContactName"></el-table-column><el-table-column prop="ContactTitle"label="ContactTitle"></el-table-column><el-table-column prop="Country"label="Country"></el-table-column><el-table-column prop="Address"label="Address"></el-table-column></el-table>
</div>
<script>{data(){return {getCustomers: new beetlexAction("/Customers", null, []),};},methods: {},mounted(){this.getCustomers.get();}}
</script>

在这里并没有使用axios进行数据请求，而是使用在它基础上封装的beetlexjs功能。通过beetlexAction来定义一个请求，并在el-table上直接绑定对应的result对象。

<body><div id="app"><customers></customers></div><script>var page = new Vue({el: '#app',data: {}});
</script>
</body>

更改一下页面引用customer组件.

下载

链接：https://pan.baidu.com/s/18VEArcgZSJw_COHzesK-6w

提取码：g4kk

【BeetleX通讯框架代码详解】
【WebApi示例扩展】
BeetleX

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

https://beetlex.io

如果你想了解某方面的知识或文章可以把想法发送到

henryfan@msn.com|admin@beetlex.io

一站式Web开发套件BeetleX.WebFamily相关推荐

初学Java Web（2）——搭建Java Web开发环境
虽然说 html 和 css 等前端技术,是对于 Web 来说不可或缺的技术,但是毕竟更为简单一些,所以就不详细介绍了,没有基础的同学可以去菜鸟教程或者W3school进行自主学习,最好的方式还是做一 ...
BeetleX.WebFamily针对Web SPA应用的改进
BeetleX.WebFamily1.0在集成vue+element+axios的基础上添加应用页.窗体布局和登陆验证等功能.通过以上功能开发Web SPA应用时只需要编写vue控件和配置菜单即可实现 ...
Ambrosus宣布推出用于Web Apps、iOS、Android的源代码开发套件
伦敦2018年6月14日电 /美通社/ -- Ambrosus今天在伦敦举办的CogX大会上,宣布推出用于公司GitHub资源库的Web Apps (Javascript/Node.js).iOS(原 ...
【华为云技术分享】鲲鹏开发套件：让应用软件迁移调优So Easy
鲲鹏开发套件是提供给开发者面向鲲鹏处理器进行应用软件迁移与调优的系列化工具.通过鲲鹏开发套件可实现对海量代码进行快速扫描和分析,并提供专业的代码移植指导,以及移植后全面的系统性能分析与可视化呈现,从而 ...
案例分享 | 基于Linkis+DSS构建合合信息一站式数据开发平台
目录指引 1. IDS 的简介 2. IDS 的诞生背景 3. IDS--合数据工坊的实践之路 3.1 用户权限 3.2 引擎增强 3.3 作业调度 3.4 数据治理 3.5 IDS 中一些小的功能改 ...
现代 Web 开发的现状与未来
作者:Dexter.Yy 原文:https://zhuanlan.zhihu.com/p/88616149 本文是我受邀在台北的 JSDC 2019 活动中做的一次分享,从内容上来说已经可以算的上我的 ...
现代 Web 开发的现状与未来（JSDC 2019 演讲全文）
作者:杨杨 - 字节跳动前端工程师 JS黑客,GUI大法师,WebApp工匠,虚拟世界建筑师,奇幻科幻PC游戏动漫宅本文是我受邀在台北的 JSDC 2019 活动中做的一次分享,从内容上来说已经可以 ...
腾讯云开放DevOps敏捷开发套件，助开发者驶入开发快车道
更多腾讯海量技术文章,尽在腾讯云技术社区:https://cloud.tencent.com/community 开发者如何在云计算时代更好的提升开发效率?8月23日,在腾讯"云+未来&qu ...
超全的web开发工具和资源(留着以后慢慢学)
前端开发资源鉴于第一次写博客,也不知道从哪开始写起...想了半天,就先来点学习前端的干货吧(本人作为一名前端小白,也在努力的学习中). 本文也是从别的地方搬运过来的,原文地址100+超全的web开发 ...

一站式Web开发套件BeetleX.WebFamily

一站式Web开发套件BeetleX.WebFamily相关推荐

最新文章

热门文章