efwplusUI框架,支持在Liunx服务器运行的Web开发框架,C#开发

efwplusUI开发框架

这是一个简单Web框架,前台采用amaze UI +requireJS+handlebarsJS,后台采用WebApi+MongoDB,用Nginx做Http服务器,随着.Net Core的跨平台,所以此框架也是可以在Liunx下运行。

为了保持WebApi接口访问安全,每次请求都增加了Token验证。

为什么用amaze UI 而没有用bootstrap,主要还是考虑到移动端amaze UI效果更好点,但amaze UI很多地方都不是很好用,特别是哪些扩展插件。

为什么用requireJS+handlebarsJS 来解决前台代码模块化,而没有用Vue.JS、angularjs、React,还是由于自己对Jquery熟悉一点、对Jquery相关插件熟悉一点,不想浪费而已。

用了这么多UI框架,个人觉得最好用的还是JqueryEasyUI,用起来真的相当省心省时。

  • 下载程序

源代码下载github

MongoDB

  • 启动efwplusNginxHost.exe

  • PC端效果

  • 手机端效果

  • 代码工程结构

  • 相关配置
<configuration>
  <appSettings>
    <add key="WebApiUri" value="http://localhost:8021"></add>
    <add key="mongodb_binpath" value="C:\MongoDB\Server\3.2\bin"/>
    <add key="mongodb_conn" value="mongodb://localhost:27017"/>
  </appSettings>
</configuration>
  • 数据库MongoDB

快速开始

  • MenuController.cs

编写后台WebApi控制器代码,向前台提供接口数据

public class MenuController : ApiController
{
	[HttpGet]
	public object getmenu1()
	{
		return "菜单1";
	}

	[HttpGet]
	public object getmenu2()
	{
		return "菜单2";
	}

	[HttpGet]
	public object getmenu3()
	{
		return "菜单3";
	}

	[HttpGet]
	public object getmenu4()
	{
		return "菜单4";
	}
}
  • menu1.html

编写前台展示Html页面,主界面是通过require.js动态装载此页面

<script id="menu1-template" type="text/x-handlebars-template">
    <div class="am-u-sm-12 am-u-sm-centered">
        <pre>{{data}}</pre>
    </div>
</script>
  • menu1.js

编写前台页面对应的JS脚本代码,是采用AMD规范封装为一个模块

define(['jquery', 'common', "handlebars.min", "text!../../handlebars/menu1.html"], function ($, common, Handlebars, html_template) {

    //通用
    function show_common(menuId, para, urls, templates, callback, errorcallback) {
        if (!urls[menuId] || !templates[menuId]) {
            $('#content_body').html(html_template);//加载html模板文本
            //设置多个url和模板
            urls[menuId] =  para;

            templates[menuId] = Handlebars.compile($("#" + menuId + "-template").html());
        }

        common.simpleAjax(urls[menuId], {}, function (data) {
            var context = { data: common.toJson(data) };
            var html = templates[menuId](context);
            $('#content_body').html(html);

            if (callback) {
                callback(data);
            }
        }, errorcallback);
    }

    //
    function show_page(menuId, urls, templates) {
        show_common(menuId, "menu/getmenu1", urls, templates);
    }

    return {
        showpage: show_page
    };
});
posted @ 2017-03-24 17:03  kakake  阅读(1219)  评论(1编辑  收藏  举报