• 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会传给ViewsViews就可以直接用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)

    概述 | SSCMS 7.1 文档中心

    [技巧]C#Razor框架与vue.js和ElementUI的融合 - SegmentFault 思否

    Asp.NET Core进阶 第三篇 Asp.Net Core Razor Pages介绍 - 高山流水学编程 - 博客园 (cnblogs.com)

  • 相关阅读:
    【ANT】时间戳
    【ANT】java项目生成文件示例
    【ANT】description元素和属性
    【ANT】一个简单的ANT生成文件build.xml
    JMeter循环控制器循环次数使用变量控制注意事项
    JMeter获取CSV文件行数
    JMeter执行顺序
    JMeter脚本java代码String数组要写成String[] args,不能写成String args[],否则报错。
    1-眼界与思维
    19-python 自己建立词库并实现文章汉语词频统计
  • 原文地址:https://www.cnblogs.com/xiongwei/p/16592217.html
Copyright © 2020-2023  润新知