【开源.NET】 分享一个前后端分离的轻量级内容管理框架

开发框架要考虑的面太多了:安全、稳定、性能、效率、扩展、整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作。网上很多开源的框架,为何还要自己开发?我是基于以下两点:

  1. 没找到合适的:安全、稳定、简单、易用、高效、免费;
  2. 想成为架构师;

于是就自己动手,参考网上开源的项目和借鉴网友的设计思路(特别是萧秦系列博文),结合自己的实践,开发了一个简单、易用、高效的的框架,虽然不完善,但也能解决现实中的问题。不过随着见识增广,发现没负责过千万级别的项目难以成为架构师,也不可能开发出一个完美的框架。那就先开源出来,后面慢慢维护和完善。

【开源.NET】 轻量级内容管理框架Grissom.CMS(第一篇分享一个前后端分离框架)
【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)
【开源.NET】 轻量级内容管理框架Grissom.CMS(第三篇解析配置文件和数据以转换成 sql)

一、框架结构图

二、分层

从框架图看出,按代码结构业务来分为 5 层:

  1. Web: 展示层
  2. WebApi: Http 接收与响应
  3. Service: 业务逻辑和数据处理
  4. EasyCore: 半ORM(Easy.DataProxy, Easy.Office, Easy.SqlConfiguration)
  5. Model: 实体

对应解决方案的项目结构:

按功能角度分为 3 层:

  1. 浅蓝色的: 展示层
  2. 深蓝色的: Http接收与响应层
  3. 浅橙色的: 业务逻辑和数据处理层

按业务分为 2 层:

  1. 浅蓝色的: 展示层
  2. 浅橙色的: 业务逻辑和数据处理层

也就是经典的 3 层架构, 我只是把后面的业务逻辑层和数据处理层合拼为 1 层。理论上把业务逻辑和数据处理分离是很合理的,但现实是数据处理往往就是写 Sql, 而 Sql 不只是简单获取数据,很多时候会耦合有大量的业务逻辑在里面, 导致程序员去处理业务时,把一个业务需求拆分到 2 层去处理,这样不能享受分层的好处,反而带来以下副作用:

  1. 破坏单一业务的内聚性;
  2. 分散程序员的注意力:一条很合理的线性思路,分离到 2 个项目去实现;
  3. 增加程序复杂度:看懂一个业务代码的实现,要同时看两个层的代码;

当然把业务和数据处理分层对规范化多人协作的大型项目是很好的方式,帮助解耦、降低复杂度,不过对没有严格规范分层代码的三少项目(钱少、人少、时间少),这就不是好事了;分层是一种技术工具而不是规则,要根据实际情况找到适合当前项目和团队的分层方式。对于中小型、注重写sql的项目,更适合把业务和数据处理放到同一层。

三、技术栈

前端用 mvvm 模式把页面呈现和js业务代码分离:

引用库:

  1. Easyui 1.4.0: 展示UI, 有做微小修改以适应框架;
  2. knockoutjs: 实现mvvm;
  3. profoundgrid: 页面布局;

工具:

  1. sass: 好爽的 css 语言;
  2. grunt: 前端构建工具, 结合compass 动态编译 sass 到 css, 合并以及压缩 css, js;

后端实现 RESTful Api:

引用库:

  1. Asp.net WebApi: 实现RESTful api;
  2. autofac: 依赖注入;
  3. JWT: 实现Oauth2, 用 token 授权,实现跨域;
  4. fluentData: 支持多数据库的数据持久,有改动以适应框架;
  5. log4net: 日志组件;

工具:

  1. .net4.5;
  2. vs2015;
  3. mariadb: mysql 数据库的一个分支;
  4. T4模板:代码生成器;

四、项目说明

后端


│Grissom.CMS
│
├─1-Model -- 实体类
│  ├─generation -- T4模板生成
│
├─2-Services -- 业务逻辑和数据处理层
│  │
│  ├─custom -- 业务代码写在这里
│  │
│  ├─generation -- T4模板生成
│
├─3-WebAPI --
│  │
│  ├─AOP -- 横向切入:异常日志记录
│  │
│  ├─APIs -- 公开的 API 写这里
│  │
│  ├─App_Data
│  │      inital.sql -- 数据库脚本
│  │
│  ├─Auth -- 实现跨域和Token授权
│  │
│  ├─Log -- 日志
│  └─SqlConfigs -- 配置增删改查的 sql xml
│          SysRole.xml
│          SysUser.xml
│          VideoMain.xml
│
├─Core -- EasyCore 自动化增删改查
│  ├─Easy.DataProxy -- sql配置 解析器
│  │
│  ├─Easy.Office -- 导入导出 excel
│  │
│  ├─Easy.SqlConfig -- sql配置模型
│
│
├─Libs -- dll 库
│  

其中,Model, Service 都用 T4 模板实现代码自动生成, 前面说了 Service 就是业务和数据处理的核心项目。

前端

├─1-content -- js, css 系统通用文件
│  │  comData.js -- 公用库: 配置 api 服务器
│  │  config.rb -- compass 配置文件
│  │  Gruntfile.js -- grunt 配置文件
│  │  package.json -- nodejs 初始化配置文件
│  │
│  ├─asset -- 资源
│  │  ├─css
│  │  │
│  │  └─js
│  │    │
│  │    └──core
│  │
│  ├─icons -- easyui icons
│  │
│  ├─images -- 图片
│  │
│  └─node_modules -- nodejs 引用库
├─home -- 主页
│      index.html
│      index.js
│
├─sys -- 系统模块
│  ├─role -- 角色管理
│  │  │  edit.html -- 编辑页面
│  │  │  index.html -- 列表页面
│  │  │
│  │  └─viewModel -- 模型
│  │          edit.js
│  │          index.js
│  │
│  └─user -- 用户管理
│
└─video -- 视频模块

home 是容器,sys, video 是对应系统的业务模块,role, user 对应系统表:SysRole, SysUser。前端核心库是 1-content/asset/js/core 下面的js, 其实就实现的通用的数据绑定和也后台数据交互功能。
1-content 中只需修改 comData.js 的 api 服务器配置 com.apiDomain = "http://localhost:2717"; 其它都是通用的,所以我用grunt 把通用的库和css 分别合并成 all.js,all.css。当然要做修改,可安装 nodejs, grunt, 参考grunt

五、简单应用:

具体实现参考底部的 demo, 流程如下:

1) 修改数据库服务器: 有 4 个地方要改的, 其中 3 个是 T4 模板, 1-Model/generation/ModelTemplate.tt, 2-Services/generation/ModelTemplate.tt, 2-Services/custom/ModelTemplate.tt,3-WebAPI/web.config;
2) 重新执行 T4 代码生成器:修改或添加新表后,打开T4模板文件,然后保存一遍,就会自动生成了,有 3 个 T4 模板文件: 1-Model/generation/ModelTemplate.tt, 2-Services/generation/ModelTemplate.tt, 2-Services/custom/ModelTemplate.tt;

3) 添加API: 在 3-WebAPI 项目下添加对应的 api controller;
4) 添加sql 配置: 在 3-WebAPI 项目下的 SqlConfigs 文件夹添加对应表名的 sql xml 文件;

5) 转到前端: 在根目录下添加模块文件夹和对应的表文件夹,并添加 index.html 列表页面 和 edit.html 编辑页面, viewModel 文件夹添加模型js文件;

6) 运行 WebApi, 再浏览页面;

六、预览:

七、总结:

该框架有 3 个核心点,以后单独 blog 来详细展开描述,不然你看不到框架的强悍所在:

  1. 后端 EasyCore(Easy.SqlConfiguration, Easy.DataProxy, Easy.Office): 直接通过一个简洁的 xml 文件配出对表进行增删改查功能;
  2. 前端 viewModel.common, viewModel.search,viewMode.edit:结合 knockoutjs 和 jeasyui 实现 mvvm;
  3. 前后端交互的数据结构: {master:{inserted:[{data:{},children:{c1:{inserted:[],updated:[],deleted:[]}}}]}}, 该结构能标识出单表、多表、主从表的混合批量新增、修改、删除状态, 后台分析该json格式的数据结构,结合 sql 配置,就能实现自动化数据库操作;

框架并不完善,也不一定适用于你,但欢迎提意见,后续完善。PS: 该框架已经用到生产环境了。

八、源码 https://github.com/grissomlau/Grissom.CMS

初始化登录名:admin, 密码: 123

时间: 2024-10-06 09:52:59

【开源.NET】 分享一个前后端分离的轻量级内容管理框架的相关文章

分享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它火,而是因它的模块化.双向数据绑定.注入.指令等都是非常适合架构较复杂的前端应用,而且文档是相当的全,碰到问题基本上可以在网上都找到答案.所以前端基本思路就以angularjs为主.代码模块化,通过requir

[开源] angularjs + Asp.net 前后端分离解决方案

本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849.html 一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年angularjs和reactjs算是比较火的项目了,而我选择angularjs并不是因为它

七个开源的 Spring Boot 前后端分离项目,一定要收藏!

前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年,SSH 框架用的滚瓜烂熟,出来却发现自己依然没有任何优势! 其实前后端分离本身并不难,后段提供接口,前端做数据展示,关键是这种思想.很多人做惯了前后端不分的开发,在做前后端分离的时候,很容易带进来一些前后端不分时候的开发思路,结果做出来的产品不伦不类,因此松哥这里给大家整理了几个开源的前后端分离项

一个前后端分离方案[转载]

项目背景 背景:后端是用java,后端服务已经开发的差不多了,现在要通过web的方式对外提供服务,也就是B/S架构.后端专注做业务逻辑,不想在后端做页面渲染的事情,只向前端提供数据接口.于是协商后打算将前后端完全分离,页面上的所有数据都通过ajax向后端取,页面渲染的事情完全由前端来做.另外还有一个紧急的情况,项目要紧急上线,整个web站点的开发时间只有两周,两周啊!于是在这样的背景下,决定开始一次前后端完全分离的尝试. 之前开发都是同步渲染和异步渲染混搭的,有些东西可以有后端PHP帮你编译好,

《Spring Boot 入门及前后端分离项目实践》系列介绍

课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发.Spring Boot 介绍.前后端分离.API 规范等内容旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力:这最后的项目实战为课程的主要部分,我会带着大家实际的开发一个前后端分离的 Spring Boot 实践项目,

Docker环境下的前后端分离项目部署与运维(一)项目简介及环境要求

项目简介 本教程将从零开始部署一个前后端分离的开源项目,利用docker虚拟机的容器技术,采用分布式集群部署,将项目转换成为高性能.高负载.高可用的部署方案.包括了MySQL集群.Redis集群.负载均衡.双机热备等等. 部署图 所用到的主流技术 Docker容器.前后端集群.MySQL集群.Redis集群.Haproxy负载均衡.Nginx负载均衡.Keepalived实现双机热备 前后端分离项目部署图 前后端分离项目开源框架介绍 本次教程所采用的前后端分离的项目开源框架是人人网的renren

前后端分离开发与跨域问题

前后端分离 传统开发方式 曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服务的要求发生了巨大的变化; 传统的项目开发与交互流程: 在传统的web开发中,页面展示的内容以及页面之间的跳转逻辑,全都由后台来控制,这导致了前后端耦合度非常高,耦合度高则意味着,扩展性差,维护性差,等等问题 传统开发的问题如下: 耦合度高 调试麻烦,出现问题时往往需要前后台一起检查 开发效率低,前

利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境

前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有2个问题不可避免:第一是前端调用后台接口时的跨域问题(因为前后端分开部署):第二是前端脱离后台服务后无法独立运行.本文总结最近一个项目的工作经验,介绍利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境的实践过程,希望能对你有所帮助. 注:

前后端分离及React的一些研究

前言 在对英才网企业线前端不断的完善过程中,我们尝试进行了前后端分离,引入Node环境.以及在使用React的过程中,自行开发DOM渲染框架,解决React兼容低版本IE的问题,在这个过程中,我们有了一些经验和体会,希望本文对您有所帮助. 为什么前后端分离 原有架构下,后端系统基于Java语言实现,通过Velocity模板实现服务器端渲染,前端同学维护静态资源,在维护页面状态时,还需要模板和脚本互传参数,模板中还会有很多UI逻辑,等等,前后端耦合很深,这种模式下开发效率非常低,联调成本非常高,同