基于Abp React前端的项目建立与运行

1 Abp项目配置

2 运行WebApi后端项目

2.1 创建C3D数据库,并且将数据库对应链接字符串替换

2.2 建立数据库进行数据迁移

主项目选择到StartUp所在的项目,C3D.Web.Host,nuget console窗口打到C3D.EntityFrameWork.Core项目;

然后输入数据迁移指令

Add-Migration first_init
Update-Database

2.3 运行WebApi项目

选择C3D.Web.Host,点击运行。

Swagger WebApi 接口页面如下:

3 运行React前端项目

3.1 利用yarn包安装工具

利用yarn包安装工具安装react客户端运行所需依赖包。

备注:会发现用npm无法安装成功,用yarn包安装时需要删除package-lock.json文件。

3.2 运行React项目

npm start

登录页面

  • 登录用户名:admin

    密码:123qwe

  • dashboard

3.3 使用React客户端的意义

有没有感觉3.2的UI很好看,是的,个人感觉UI的精细程度已经远远超过VUE的Element 跟Iview UI了。因为该项目使用的是ant-design UI。

而 github上直接搜索UI,按start排名。前两个UI 的都是react。这也就是我选择react的意义了。使用哪个框架其实都差不多,个人比较看重UI展示的精细化程度与美感。

这两个UI框架的贡献者与使用者规模已很大。

4 React 前端项目架构

4.1 技术栈

  • React 构建用户UI的js库;
  • Typescript 强类型语言,更适合后台编程人员;
  • Mobx 简单,可扩展的状态管理框架;
  • AntDesign 可为企业应用程序提供更好的用户体验;

4.2 设计原则

SOLID

简写 全拼 中文翻译
SRP The Single Responsibility Principle 单一责任原则
OCP The Open Closed Principle 开放封闭原则
LSP The Liskov Substitution Principle 里氏替换原则
ISP The Interface Segregation Principle 接口分离原则
DIP The Dependency Inversion Principle 依赖倒置原则
  • 单一责任原则:

    当需要修改某个类的时候原因有且只有一个(THERE SHOULD NEVER BE MORE THAN ONE REASON FOR A CLASS TO CHANGE)。换句话说就是让一个类只做一种类型责任,当这个类需要承当其他类型的责任的时候,就需要分解这个类。

  • 开放封闭原则:

    软件实体应该是可扩展,而不可修改的。也就是说,对扩展是开放的,而对修改是封闭的。这个原则是诸多面向对象编程原则中最抽象、最难理解的一个。

  • 里氏替换原则:

    当一个子类的实例应该能够替换任何其超类的实例时,它们之间才具有is-A关系。

  • 接口分离原则:

    不能强迫用户去依赖那些他们不使用的接口。换句话说,使用多个专门的接口比使用单一的总接口总要好。

  • 依赖倒置原则:

    1.高层模块不应该依赖于低层模块,二者都应该依赖于抽象

    2.抽象不应该依赖于细节,细节应该依赖于抽象

4.3 mobx架构

官方例子

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react" // Model the application state.
class Timer {
secondsPassed = 0 constructor() {
makeAutoObservable(this)
} increase() {
this.secondsPassed += 1
} reset() {
this.secondsPassed = 0
}
} const myTimer = new Timer() // Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
<button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
)) ReactDOM.render(<TimerView timer={myTimer} />, document.body) // Update the 'Seconds passed: X' text every second.
setInterval(() => {
myTimer.increase()
}, 1000)

每个UI 组件(TimerView)都可定义一个observer 观察者,无需强制绑定,一旦该组件值发生变化,则会对UI进行自动计算渲染。也即如下流程图,一旦值变化事件发生,则会更新observer的状态,进而计算,进而出发UI重新渲染,而定义好,这些都通过mobx自动完成。

4.4 React前端整体架构

  • 所有与后端通信都通过服务层完成;
  • 每个容器里的组件都会存在一个仓储与一个模型;
  • 所有的服务在仓储层被调用,而非组件层;组件会执行仓储的actions来获取最新状态;
  • 展示组件的属性可以直接存储到仓储中,也能直接去仓储中取出;
  • 容器或者展示组件可以调用仓储的actions,Mobx能直接将注册过的组件进行自动渲染。

5 小结

这里为什么要用仓储层呢,笔者根据自己理解解释下,

  • 如果没加仓储,所有获取后台数据的服务都会泄漏到组件容器中,那样万一哪天需要改服务,则要到各组件中去改,会让人抓狂,而该框架中只需要在仓储层中改即可;
  • 另外有了仓储层,比如vue的vuex与react的redux或者mobx,可以在仓储层中作区分,而业务层代码完全可以写成一样,这样更易于vue与react之间的移植;

这应该是属于依赖倒置原则,组件调用依赖于仓储这个抽象并没有依赖于获取数据的对应服务,从而实现了易扩展,易复用,易维护的目的。


版权声明:本文为博主翻译文章+自己理解,部分代码自己写,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://www.cnblogs.com/JerryMouseLi/p/14336688.html

基于Abp React前端的项目建立与运行——React框架分析的更多相关文章

  1. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  2. React前端有钱途吗?《React+Redux前端开发实战》学起来

    再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...

  3. React Native新项目启动报错&#39;React/RCTBridgeDelegate.h&#39; file not found

    React Native版本:0.60.4 解决方法: cd ios pod deintegrate pod install 然后重新启动就好了(示例页面变样了( ⊙ o ⊙ )) END------ ...

  4. 基于“事件”驱动的领域驱动设计(DDD)框架分析

    摘抄自 从去年10月份开始,学了几个月的领域驱动设计(Domain Driven Design,简称DDD).主要是学习领域驱动设计之父Eric Evans的名著:<Domain-driven ...

  5. 基于ABP模块组件与依赖注入组件的项目插件开发

    注意,阅读本文,需要先阅读以下两篇文章,并且对依赖注入有一定的基础. 模块系统:http://www.cnblogs.com/mienreal/p/4537522.html 依赖注入:http://w ...

  6. React躬行记(16)——React源码分析

    React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...

  7. 在基于ABP框架的前端项目Vue&amp;Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  8. 在基于ABP框架的前端项目Vue&amp;Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  9. 在基于ABP框架的前端项目Vue&amp;Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

随机推荐

  1. &quot;NHibernate.Exceptions.GenericADOException: could not load an entity&quot; 解决方案

     今天,测试一个项目的时候,抛出了这个莫名其妙的异常,然后就开始了一天的调试之旅... 花了很长时间,没有从代码找出任何问题... 那么到底哪里出问题呢? 根据下面那段长长的错误日志: -- ::, ...

  2. 《你不知道的JavaScript》整理(三)——对象

    一.语法 两种形式定义:文字形式和构造形式. //文字形式 var myObj = { key: value }; //构造形式 var myObj = new Object(); myObj.key ...

  3. PyCharm创建virtualenv方法

    Python的版本众多,在加上适用不同版本的Python Package.这导致在同时进行几个项目时,对库的依赖存在很大的问题.这个时候就牵涉到对Python以及依赖库的版本管理,方便进行开发,vir ...

  4. HSLA颜色

    CSS2中色彩模式只有RGB色彩模式(RGB即RED.Green.BLue)和十六进制模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED.Gree ...

  5. iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath(汇总)

    iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath 首先分析有几种原因,以及相应的解决方法 1.UITableViewCell的userInterac ...

  6. 无U盘安装Linux openSUSE(通过硬盘安装Linux)

    一.说明 为什么会想着用硬盘安装Linux?只是因为我陆陆续续买了两个U盘,然后它们都丢了,就没再买了.然而现在又想装个openSUSE,没有U盘,只能想办法通过硬盘安装. 记录自己走过的弯路,同时也 ...

  7. JavaScript链式调用

    1.什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return thi ...

  8. requests-代理设置

    import requests proxies={ 'http':'http://192.168.1.1:88' 'https':'https://192.168.1.1:88' #如果代理ip需要用 ...

  9. linux下查找某文件关键字(grep 函数)

    -e表示罗列出与关键字有关的行,“ABC”表示查找的关键字,/XXX/4.assoc.linear表示该路径下的文件 .assoc.linear

  10. Navicat远程连接不上mysql解决方案(已测试过)

    内容参考网上的文章,此处只做记录. 一.can‘t connect to MySql server on ‘192.168.X.X’ 这是因为mysql端口被防火墙拦截,需用linux执行如下指令:( ...