Vue+ElementUI+.netcore前后端分离框架开发项目——项目开发记录20220816——使用 ASP.NET Core MVC 生成 Web API 和 Web UI

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吧，这里就不多做介绍了，毕竟我只是前端。