正文 

当前位置： 首页 > java > java教程

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

网络蚂蚁 网络蚂蚁     2022-08-31     402

关键词：

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

  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

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

本文版权归博客园 萧秦 所有，此处为技术收藏，如有再转，请于篇头明显位置标明原创作者及出处，以示尊重！作者：萧秦原文：http://www.cnblogs.com/xqin/p/4862849.html一、前言   半年前左右折腾了一个前后端分离... 查看详情

推荐9个yyds前后端分离项目

...少沟通时的信息损失的目的。本文推荐九个前后端分离的开源项目，都是采用最流行的技术栈。本文推荐的开源项目已经收录到AwesomeGitHubRepo。AwesomeGitHubRepo是逛逛GitHub创建的开源项目，会收集整理GitHub上高质量、有趣的开源项... 查看详情

漂亮！一个前后端分离权限管理系统撸完了！(代码片段)

哈喽，大家好，我是开源君，一个资深的互联网玩家，致力于为大家分享各领域优质开源项目。最近开源君在知乎上回答了一些Golang相关的问题，发现关注Go语言开发者特别多，说明一个问题，目前很... 查看详情

.netcore通用后端框架(前后端分离)

...thub.com/SkylerSkr/BaseFrameworkCore项目介绍写在README中，此项目开源，请大家签入到dev分支。接下来一段时间也会潜水，下一个开源项目会是微服务的。为了.Net社区一起加油吧！ 查看详情

vue3+.net6+c#10，最近优质前后端分离项目汇总

据说80%的WEB开发都是管理后台，一套开源的优秀管理后台开发模板堪称福音！分享一套Vue3+Axios+TS+Vite+ElementPlus+.NET6WebAPI+JWT+SqlSugar的前后端分离架构的通用管理后台源码+数据库脚本，还有与之... 查看详情

laravel9+vue的前后端分离开源项目

项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情

八个开源的springboot前后端分离项目，一定要收藏！

八个开源的SpringBoot前后端分离项目最近前后端分离已经在慢慢走进各公司的技术栈，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，我们也非常建议大家学习一下前后端分离开发，以免在... 查看详情

八个开源的springboot前后端分离项目，一定要收藏！

八个开源的SpringBoot前后端分离项目最近前后端分离已经在慢慢走进各公司的技术栈，不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面，我们也非常建议大家学习一下前后端分离开发，以免在... 查看详情

七个开源的springboot前后端分离项目，一定要收藏！

...做出来的产品不伦不类，因此松哥这里给大家整理了几个开源的前后端分离项目，帮助大家快速掌握前后端分离开发技术栈。美人鱼star数3499项目地址： https://gitee.com/mumu-osc/NiceFish听名字就知道这是个不错的项目，事实上确... 查看详情

分享两款智慧物业系统源码，前后端分离，前端vue，uni-app框架

分享两款智慧物业管理系统源码，源码免费分享，需要源码学习参考的小伙伴可以私信我。▶▶▶1：Java智慧物业管理系统源码(App+业主端微信小程序+物业端H5)智慧物业介绍：一、技术架构基于SpringCloud微服... 查看详情

推荐一个前后端分离.netcore+angular快速开发框架

今天给大家推荐一个开源项目，基于.NetCore开发的、前后端分离、前端有Vue、Angular、MVC多个版本的快速开发框架。项目简介这是一个基于.NetCore开发的快速开发框架，项目采用模块化架构、最新的技术栈、项目高度封装了... 查看详情

基于admin.net框架的前端的一些改进和代码生成处理(代码片段)

...限管理、字典等管理模块，以及一些Vue3的Demo案例，框架前后端分离。后端基于基于Furion/.NET6实现，底层集成SqlSugar；前端则是采用Vue-Next-Admin的前端框架，整体是一套非常不错的框架。本人比较喜欢研究一些技术框架，最近对该... 查看详情

项目讲解之火爆全网的开源后台管理系统ruoyi(代码片段)

...、快速了解RuoYi项目是一个基于SpringBoot+Mybatis+Shiro开发的轻量级Java快速开发框架，它包含基础的后台管理功能以及权限控制。项目作者对于RuoYi项目的定调是这样的：RuoYi是一款基于SpringBoot+Bootstrap的极速后台开发框架。RuoYi是一... 查看详情

关于前后端分离的开发模式

...不推荐学习，第一个原因就是框架太过沉重，现在都讲究轻量级开发，更何况框架过于陈旧。再来说vue1x，这个框架其实和angular很相似，本地没有server，客户端渲染比较方便，用起来也比较方便，直接通过scriptsrc=“”引入库文... 查看详情

ruoyi(若依开源框架)-前后端分离版-前端流程简单分析(代码片段)

RuoYi(若依开源框架)-前后端分离版-前端流程简单分析项目结构├──build//构建相关├──bin//执行脚本├──public//公共文件│├──favicon.ico//favicon图标│└──index.html//html模板├──src//源代码│├──api//所有请求│├──... 查看详情

springboot+vue+antdesign前后端分离通用后台管理系统

...ot2.x、MybatisPlus、Vue、AntDesign、MySQL等框架精心打造的一款前后端分离框架，致力于实现模块化、组件化、可插拔的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效... 查看详情

推荐一个开源商城

...ll4j」，一个基于springboot、springoauth2.0、mybatis、redis的轻量级、前后端分离、防范xss攻击、拥有分布式锁，为生产环境多实例完全准备，数据库为b2b2c设计，拥有完整sku和下单流程的完全开源商城。Mall4j项目致力于... 查看详情

ruoyi(若依开源框架)-前后台分离版-后端流程简单分析(代码片段)

RuoYi(若依开源框架)-前后台分离-后端流程简单分析【项目结构】├──common//工具类│└──annotation//自定义注解│└──config//全局配置│└──constant//通用常量│└──core//核心控制│└──enums//通用枚举│└──exception//... 查看详情