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 <span class="hljs-title function_">getmenu2</span><span class="hljs-params">()</span>
{
	<span class="hljs-keyword">return</span> <span class="hljs-string">"菜单2"</span>;
}

[HttpGet]
public object <span class="hljs-title function_">getmenu3</span><span class="hljs-params">()</span>
{
	<span class="hljs-keyword">return</span> <span class="hljs-string">"菜单3"</span>;
}

[HttpGet]
public object <span class="hljs-title function_">getmenu4</span><span class="hljs-params">()</span>
{
	<span class="hljs-keyword">return</span> <span class="hljs-string">"菜单4"</span>;
}

}

• 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) {
<span class="hljs-comment">//通用</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">show_common</span>(<span class="hljs-params">menuId, para, urls, templates, callback, errorcallback</span>) {
    <span class="hljs-keyword">if</span> (!urls[menuId] || !templates[menuId]) {
        $(<span class="hljs-string">'#content_body'</span>).<span class="hljs-title function_">html</span>(html_template);<span class="hljs-comment">//加载html模板文本</span>
        <span class="hljs-comment">//设置多个url和模板</span>
        urls[menuId] =  para;

        templates[menuId] = <span class="hljs-title class_">Handlebars</span>.<span class="hljs-title function_">compile</span>($(<span class="hljs-string">"#"</span> + menuId + <span class="hljs-string">"-template"</span>).<span class="hljs-title function_">html</span>());
    }

    common.<span class="hljs-title function_">simpleAjax</span>(urls[menuId], {}, <span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) {
        <span class="hljs-keyword">var</span> context = { <span class="hljs-attr">data</span>: common.<span class="hljs-title function_">toJson</span>(data) };
        <span class="hljs-keyword">var</span> html = templates[menuId](context);
        $(<span class="hljs-string">'#content_body'</span>).<span class="hljs-title function_">html</span>(html);

        <span class="hljs-keyword">if</span> (callback) {
            <span class="hljs-title function_">callback</span>(data);
        }
    }, errorcallback);
}

<span class="hljs-comment">//</span>
<span class="hljs-keyword">function</span> <span class="hljs-title function_">show_page</span>(<span class="hljs-params">menuId, urls, templates</span>) {
    <span class="hljs-title function_">show_common</span>(menuId, <span class="hljs-string">"menu/getmenu1"</span>, urls, templates);
}

<span class="hljs-keyword">return</span> {
    <span class="hljs-attr">showpage</span>: show_page
};

});