2022年8月16日正式开发本项目,特此记录。
一、项目架构
MVVM(异步通信为主):Model、View、View Model
Model:模型层, 在这里表示JavaScript对象
View:视图层, 在这里表示DOM(HTML操作的元素)
ViewModel:连接视图和数据的中间件, Vue.js就是MVVM中的View Model层的实现者
Vue.js就是一个MV VM的实现者, 他的核心就是实现了DOM监听与数据绑定。
在MVVM架构中, 是不允许数据和视图直接通信的, 只能通过ViewModel来通信, 而View Model就是定义了一个Observer观察者。
ViewModel能够观察到数据的变化, 并对视图对应的内容进行更新。
ViewModel能够监听到视图的变化, 并能够通知数据发生改变
前端多变,后端多变,岂不美哉!
Vue.js + Web API前后端集成。这里的后端可以用各种语言实现.
====2022-08-17====================================================================
考虑到以后系统可能会非常庞大,用户量相对较多,使用MVVM架构不符合项目实际。为能够和原有项目有效衔接,沿用原项目相关架构。
使用 Razor风格的cshtml文件以及RESTful 风格的Controller地址。
========================================================================
在流行的 Dapper 框架以及 SqlKata 框架基础上开发,作为默认ORM 数据库操作框架。
二、数据库选择
采用高性能MYSQL集群数据库
四、目录结构
│ XXX.sln Visual Studio 项目文件
│
├─docker Docker 配置文件(暂时不用,删除)
├─src/Datory 数据库基础类
├─src/XXX 接口、基础类(Plugins命名空间下的 IPluginExtension接口)
├─src/XXX.Cli 命令行工具(暂时不用,删除)
├─src/XXX.Core 核心代码
├─src/XXX.Web 前端和后端服务器
五、数据库结构---MYSQL
六、服务器部署
数据库集群:MYSQL,前期部署单站点,后期扩展。
静态资源部署在云服务器OOS。老版本使用rsync同步。使用阿里云对象存储 OSS (opens new window),阿里云对象存储 OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务。
七、功能设计
增、删、改、查、导入、导出、上传、审核基础功能
貌似所有的管理系统最基础的无非增、删、改、查4个功能。
列表页面、新增页面、修改页面、删除页面
List、Add、Update、Delete
=======================================================
正式开始前,熟悉html\css\js,以及C#
=======================================================
第二部分
=============================================================================================================================================================================
Core下基本的Razor Pages框架目录如下,
页面默认在Pages文件夹里,
wwwroot文件夹存储Css和Js页面样式文件,
“appsettings.json”为生成部署文件,
“Program.cs”中的main函数是主程序的入口,
“Startup.cs”中配置Sql连接
====================
常用的几个NuGet数据包如下:
Microsoft.EntityFrameworkCore.SqlServer(选择版本:V3.0) ==> Sqlserver数据库连接使用
Microsoft.EntityFrameworkCore.Tool(选择版本:V3.0) ==> 完成Sqlserver数据CRUD
EntityFramework.SqlServerCompact (选择版本:V4.1) ==> Sqlserver数据库操作和交互
====================================================================
了解历史程序:
改造前:
- 第一步:问同事,查资料。得知这个项目基于C# Razor框架开发。
- 哦吼,刀锋,和摩托罗拉某款手机型号同名。
- 第二步:了解MVC工作原理(
Model+View+Controller
),现在大家喜欢吹的MVVM,早期就是由MVC演变而来,对于正经前端来说,MVC理解起来不难。 - 第三步:看框架,Views+Controllers两个文件夹是核心。
页面渲染的形式,比如 xxx.com/My/Index
通过My找到相应Controller
,然后再通过Index找到对应的方法及return View(Model)
,而这里的Model
会传给Views
,Views
就可以直接用Model
,可能也可以操作Controller
吧,这里就不多做介绍了,毕竟我只是前端。
- 到此,弄明白了完整的
M V C 模 型
!
========================================================================================================
项目通用
@section Styles{
<link href="/sitefiles/assets/css/menu.css" rel="stylesheet" type="text/css" />
}
================================================================
八、界面选择
Electron、Flutter、WinForm、Qt、Java、UWP、SwiftUI
参考和鸣谢:
Vue+ElementUI+.netcore前后端分离框架开发项目实战_吧主的博客-CSDN博客
ASP.NET Core Razor Pages 初探 - Agile.Zhou - 博客园 (cnblogs.com)
[技巧]C#Razor框架与vue.js和ElementUI的融合 - SegmentFault 思否
Asp.NET Core进阶 第三篇 Asp.Net Core Razor Pages介绍 - 高山流水学编程 - 博客园 (cnblogs.com)