基于Abp React前端的项目建立与运行——React框架分析
<h1 id="基于abp-react前端的项目建立与运行">基于Abp React前端的项目建立与运行</h1><p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>基于Abp React前端的项目建立与运行<ul><li>1 Abp项目配置</li><li>2 运行WebApi后端项目<ul><li>2.1 创建C3D数据库，并且将数据库对应链接字符串替换</li><li>2.2 建立数据库进行数据迁移</li><li>2.3 运行WebApi项目</li></ul></li><li>3 运行React前端项目<ul><li>3.1 利用yarn包安装工具</li><li>3.2 运行React项目</li><li>3.3 使用React客户端的意义</li></ul></li><li>4 React 前端项目架构<ul><li>4.1 技术栈</li><li>4.2 设计原则</li><li>4.3 mobx架构</li><li>4.4 React前端整体架构</li></ul></li><li>5 小结</li></ul></li></ul></div><p></p>
<h2 id="1-abp项目配置">1 Abp项目配置</h2>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195702439-1504103473.png" alt="" loading="lazy"></p>
<h2 id="2-运行webapi后端项目">2 运行WebApi后端项目</h2>
<h3 id="21-创建c3d数据库并且将数据库对应链接字符串替换">2.1 创建C3D数据库，并且将数据库对应链接字符串替换</h3>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195710050-814496310.png" alt="" loading="lazy"></p>
<h3 id="22-建立数据库进行数据迁移">2.2 建立数据库进行数据迁移</h3>
<p>主项目选择到StartUp所在的项目，C3D.Web.Host,nuget console窗口打到C3D.EntityFrameWork.Core项目；</p>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195726200-377521765.png" alt="" loading="lazy"></p>
<p>然后输入数据迁移指令</p>
<pre><code class="language-cmd">Add-Migration first_init
Update-Database
</code></pre>
<h3 id="23-运行webapi项目">2.3 运行WebApi项目</h3>
<p>选择C3D.Web.Host，点击运行。</p>
<p>Swagger WebApi 接口页面如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195734394-2018478084.png" alt="" loading="lazy"></p>
<h2 id="3-运行react前端项目">3 运行React前端项目</h2>
<h3 id="31-利用yarn包安装工具">3.1 利用yarn包安装工具</h3>
<p>利用yarn包安装工具安装react客户端运行所需依赖包。<br>
<img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195741584-1057497388.png" alt="" loading="lazy"></p>
<p><strong>备注：会发现用npm无法安装成功，用yarn包安装时需要删除package-lock.json文件。</strong></p>
<h3 id="32-运行react项目">3.2 运行React项目</h3>
<pre><code class="language-sh">npm start
</code></pre>
<p>登录页面<br>
<img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195749346-207529277.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>登录用户名:admin<br>
密码：123qwe</p>
</li>
<li>
<p>dashboard</p>
</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195757175-1631768173.png" alt="" loading="lazy"></p>
<h3 id="33-使用react客户端的意义">3.3 使用React客户端的意义</h3>
<p>有没有感觉3.2的UI很好看，是的，个人感觉UI的精细程度已经远远超过VUE的Element 跟Iview UI了。因为该项目使用的是ant-design UI。</p>
<p>而 github上直接搜索UI，按start排名。前两个UI 的都是react。这也就是我选择react的意义了。使用哪个框架其实都差不多，个人比较看重UI展示的精细化程度与美感。</p>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195803930-253839400.png" alt="" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195810576-1979560945.png" alt="" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195816524-2123431553.png" alt="" loading="lazy"></p>
<p>这两个UI框架的贡献者与使用者规模已很大。</p>
<h2 id="4-react-前端项目架构">4 React 前端项目架构</h2>
<h3 id="41-技术栈">4.1 技术栈</h3>
<ul>
<li>React 构建用户UI的js库；</li>
<li>Typescript 强类型语言，更适合后台编程人员；</li>
<li>Mobx 简单，可扩展的状态管理框架；</li>
<li>AntDesign 可为企业应用程序提供更好的用户体验；</li>
</ul>
<h3 id="42-设计原则">4.2 设计原则</h3>
<p>SOLID</p>
<table>
<thead>
<tr>
<th>简写</th>
<th>全拼</th>
<th>中文翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>SRP</td>
<td>The Single Responsibility Principle</td>
<td>单一责任原则</td>
</tr>
<tr>
<td>OCP</td>
<td>The Open Closed Principle</td>
<td>开放封闭原则</td>
</tr>
<tr>
<td>LSP</td>
<td>The Liskov Substitution Principle</td>
<td>里氏替换原则</td>
</tr>
<tr>
<td>ISP</td>
<td>The Interface Segregation Principle</td>
<td>接口分离原则</td>
</tr>
<tr>
<td>DIP</td>
<td>The Dependency Inversion Principle</td>
<td>依赖倒置原则</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>单一责任原则：<br>
当需要修改某个类的时候原因有且只有一个（THERE SHOULD NEVER BE MORE THAN ONE REASON FOR A CLASS TO CHANGE）。换句话说就是让一个类只做一种类型责任，当这个类需要承当其他类型的责任的时候，就需要分解这个类。</p>
</li>
<li>
<p>开放封闭原则：<br>
软件实体应该是可扩展，而不可修改的。也就是说，对扩展是开放的，而对修改是封闭的。这个原则是诸多面向对象编程原则中最抽象、最难理解的一个。</p>
</li>
<li>
<p>里氏替换原则：<br>
当一个子类的实例应该能够替换任何其超类的实例时，它们之间才具有is-A关系。</p>
</li>
<li>
<p>接口分离原则：<br>
不能强迫用户去依赖那些他们不使用的接口。换句话说，使用多个专门的接口比使用单一的总接口总要好。</p>
</li>
<li>
<p>依赖倒置原则：<br>
1.高层模块不应该依赖于低层模块，二者都应该依赖于抽象<br>
2.抽象不应该依赖于细节，细节应该依赖于抽象</p>
</li>
</ul>
<h3 id="43-mobx架构">4.3 mobx架构</h3>
<p>官方例子</p>
<pre><code class="language-js">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)
</code></pre>
<p>每个UI 组件（TimerView）都可定义一个observer 观察者，无需强制绑定，一旦该组件值发生变化，则会对UI进行自动计算渲染。也即如下流程图，一旦值变化事件发生，则会更新observer的状态，进而计算，进而出发UI重新渲染，而定义好，这些都通过mobx自动完成。</p>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195831643-1246524691.png" alt="" loading="lazy"></p>
<h3 id="44-react前端整体架构">4.4 React前端整体架构</h3>
<p><img src="https://img2020.cnblogs.com/blog/1606616/202101/1606616-20210127195840463-1123849353.jpg" alt="" loading="lazy"></p>
<ul>
<li>所有与后端通信都通过服务层完成；</li>
<li>每个容器里的组件都会存在一个仓储与一个模型；</li>
<li>所有的服务在仓储层被调用，而非组件层；组件会执行仓储的actions来获取最新状态；</li>
<li>展示组件的属性可以直接存储到仓储中，也能直接去仓储中取出；</li>
<li>容器或者展示组件可以调用仓储的actions，Mobx能直接将注册过的组件进行自动渲染。</li>
</ul>
<h2 id="5-小结">5 小结</h2>
<p>这里为什么要用仓储层呢，笔者根据自己理解解释下，</p>
<ul>
<li>如果没加仓储，所有获取后台数据的服务都会泄漏到组件容器中，那样万一哪天需要改服务，则要到各组件中去改，会让人抓狂，而该框架中只需要在仓储层中改即可；</li>
<li>另外有了仓储层，比如vue的vuex与react的redux或者mobx，可以在仓储层中作区分，而业务层代码完全可以写成一样，这样更易于vue与react之间的移植；</li>
</ul>
<p>这应该是属于依赖倒置原则，组件调用依赖于仓储这个抽象并没有依赖于获取数据的对应服务，从而实现了易扩展，易复用，易维护的目的。</p>
<hr>
版权声明：本文为博主翻译文章+自己理解，部分代码自己写，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://www.cnblogs.com/JerryMouseLi/p/14336688.html
</div>
<div id="MySignature" role="contentinfo">
The Sky is the limit.<br><br>
来源：https://www.cnblogs.com/JerryMouseLi/p/14336688.html
頁:
[1]