天龙八部搭建mysql教程_天龙八部架设mysql数据库

在早期版本BeetleX.WebFamily只提供了vuejs+element的集成，由于element只适合PC管理应用开发相对于移动应用适配则没这么方便。在新版本组件集成了bootstrap5可以更好地适配移动Web应用；同时也集成了Fontawesome和bootstrapIcons,这样在开发过程中使用字体图标就更方便了。在开发时以上组件并不会打包到一起，而是根据实际需要选择element或bootstrap作为当前应用的样式主题，而基础开发框架还是基于vuejs，ajax数据交互则使用axios。

使用
在使用之前还是选了解一下BeetleX.WebFamily是如何开发SPA应用，并有那些基础功能BeetleX.WebFamily针对Web SPA应用的改进。第一步使用vs或vscode创建控台项目，引用BeetleX.WebFamily后在main方法中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Program
{
static void Main(string[] args)
{
WebHost host = new WebHost();
host.RegisterController()
.Setting(o =>
{
o.SetDebug();
o.Port = 80;
o.LogLevel = EventArgs.LogType.Info;
o.LogToConsole = true;
})
.UseFontawesome()//加入Fontawesome
.UseBootstrap(PageStyle.Bootstrap)//设置使用bootstrap
.Initialize((http, vue, resoure) =>
{
vue.Debug();
}).Run();
}
}
启动项目后，可以从浏览器访问得到以下结果：

以上是基于bootstrap的SPA应用默认主页，当然这并不是你所需要的。

定义功能
接下来在Main方法修改SPA应用的内容，通过修改这些配置可以让你马上把主页更换成实际应用的功能。

复制代码
class Program
{
static void Main(string[] args)
{
//更改应用标题
WebHost.Title = “beetlex & bootstrap!”;
//更新应用Logo
WebHost.LogoImg = “/images/icons-hero.png”;
//设置头部组件
WebHost.HeaderModel = “custom-header”;
//设置需要登陆
WebHost.MustLogin = true;
//定义页面的功能菜单
WebHost.GetMenus = (usr, role, http) =>
{
List

result = new List

();
var item = new Menu();
item.ID = “home”;
item.Img = “fas fa-home”;
item.Name = “主页”;
item.Model = “webfamily-home”;
result.Add(item);
//…
return Task.FromResult(result);
};
WebHost host = new WebHost();
host.RegisterController()
.Setting(o =>
{
o.SetDebug();
o.Port = 80;
o.LogLevel = EventArgs.LogType.Info;
o.LogToConsole = true;
})
.UseJWT()//开启jwt验证
.UseFontawesome()//开启Fontawesome
.UseBootstrap(PageStyle.Bootstrap)//开启bootstrap
.Initialize((http, vue, resoure) =>
{
resoure.AddCss(“website.css”);//加入本项目的CSS
resoure.AddScript(“echarts.js”);//加入本项目的js
vue.Debug();
}).Run();
}
}
复制代码
由于开启了登陆和验证，所以这一次访问页面会默认是一个登陆窗体

登陆后就可以进行主页面了，这里并没有定义登陆过程，任意用户密码都能登陆成功能。

自动适配手机端下的效果。

组件针对bootstrap提供两种菜单布局方式，上面设置的是顶部菜单，可以通过配置来实现右边菜单显示；只需要调整以下代码即可:

.UseBootstrap(PageStyle.BootstrapDashboard)

以上BeetleX.WebFamily使用bootstrap5开发SPA应用的效果，组件现有已经提升为开源项目,了解项目和示例可访问:

https://github.com/beetlex-io/WebFamily

天龙八部搭建mysql教程_天龙八部架设mysql数据库相关推荐

天龙八部搭建mysql教程_天龙八部私服架设mysql数据库安装
前面进行旳都正常.到了初始化数据库那一步好像就出了问题.提示代码:InstallingMySQLsystemtables...OKFillinghelptables...OKTostartmysqld ...
[Mysql教程系列]介绍一下MySQL语句设计规范以及其他规范
点击上方"Coder编程",选择"置顶公众号" 技术文章第一时间送达! mysql.jpg 语句设计规范 1.使用预编译语句只传参数,比传递SQL语句更高效 ...
mysql5 workbench教程_详解MySQL Workbench使用教程
MySQL Workbench 是一款专为 MySQL 设计的集成化桌面软件,也是下一代的可视化数据库设计.管理的工具,它同时有开源和商业化两个版本.该软件支持 Windows 和 Linux 系统, ...
php7.2 mysql 教程_如何在PHP7中扩展mysql,先安装php7.2。后安装mysql
相对与PHP5,PHP7的最大变化之一是移除了mysql扩展,推荐使用mysqli或者pdo_mysql,实际上在PHP5.5开始,PHP就着手开始准备弃用mysql扩展,如果你使用mysql扩展,可 ...
eclipse配置mysql教程_在Eclipse连接mysql-----配置jbdc_MySQL
1. 安装mysql这里就不详述了,详细可以参考我的博客: http://blog.csdn.net/u014487509/article/details/26340741 2.下载jdbc:http ...
mysql猎豹_猎豹网校MySQL数据库
该楼层疑似违规已被系统折叠隐藏此楼查看此楼猎豹网校MySQL数据库链接:http://pan.baidu.com/s/1i3wyPjn 密码:qxhm 教程目录第1章了解SQL 1.1 数据 ...
linux搭建cdn教程_网站搭建新手教程：一步一步教你拥有一个属于自己WordPress网站...
应网友要求,今天知识吧为大家分享一篇新手建站教程,本来是打算做一个视频教程的,毕竟大家看的会直观一些,但是由于我的个人电脑在并不在身边,在公司电脑录新手建站视频又不太合适,所以就为大家写一篇图文教程吧 ...
mysql 全局变量_详细讲解mysql全局变量与局部变量
通常在服务器启动时,会将每个全局变量初始化为其默认值(我们可以通过命令行或选项文件中指定的选项更改这些默认值),然后服务器还为每个连接的客户端维护一组会话变量,客户端的会话变量在连接时使用相应全局变量 ...
c mysql安装教程视频_MySQL安装教程 - Windows安装MySQL教程 - 小白式安装MySQL教程 - 青衫慧博客...
版权声明本文转发自旧站点萧瑟云日志,近期考虑准备将旧站进行关闭(没有精力维护),部分文章将会迁移至本站.文章发表于:2017-10-28 12:32:03 前言上次给大家带来了SQL Server ...

天龙八部搭建mysql教程_天龙八部架设mysql数据库

天龙八部搭建mysql教程_天龙八部架设mysql数据库相关推荐

最新文章

热门文章