【山大智云项目日志】（二）Seahub+Seahub-Extra所用框架用法学习分析

2021SC@SDUSC
在环境配置和项目安装完成后，我们开始了代码分析的工作。我和团队里的王子安同学一起针对山大智云项目的前端源码进行分析。前端主要包括Seahub+proset+seahub-extra等内容，我负责seahub-extra的源码分析，但同时必须在Seahub的源码基础上进行分析。

Seahub简介

Seafile官方文档中给出的Seahub简介：Seahub is the web frontend for Seafile。即Seahub是seafile的Web前台。经分析Seahub是使用Django和React框架开发的。
Seahub的文件结构如下：关键代码集中在seahub和frontend包当中。
在进行代码分析之前，我觉得有必要先了解分析一下各个文件夹下面到底是一些什么文件，以及这些文件的作用。然后在针对关键文件的源码进行分析。

点击查看Seahub源码

bin
目录下有两个template类型的文件，作为Bash的脚本执行，用于启动和重启Seahub进程。
fabfile
目录下包含三个python文件，负责在网页端处理和判断用户上传文件的各种操作，并通过Fabric里的local函数在本地执行命令。
frontend、seahub
是seafile前端主要代码。
locale
文件夹里是LC_MESSAGES、语言文件po，它们的作用是用来指定程序用户界面语言，利用这些环境变量来设定库函数所使用的locale或者某个locale的 category。
media
是学长去年在Seahub基础上开发的山大智云的用户界面，主要是样式和图标部分。
sql
此文件夹包含SeaHub的数据库架构文件。
static
此文件夹下是静态的css文件和JQuery
tools
此文件夹下是封装的一些工具类用于更新、删除、迁移文件以及密钥相关。

code-check.sh
负责检查代码结构的shell脚本文件
CONTRIBUTORS
这是可以做出贡献的官方名单。
dev-requirement.txt 和 requirement.txt
包含项目运行所需要的依赖模块和库
HACKING
注册进程相关
i18n.sh
语言包相关检查文件
LICENSE.txt
开源许可证
LICENSE-thirdparty.txt
此文件描述所有第三方库的许可证和版权。
Makefile
编译规则。包含编译某部分内容所需要的所有源代码，以及该部分源代码的类型
manage.py
Django中创建一个project之后，就会创建一个以项目名称命名的文件中，文件夹中包含了一个同名文件夹和一个manage.py文件，之后如果要启动服务、同步数据库等操作，都是用python manage.py 开头的，因此manage.py程序显然是服务器操作的入口。
pytest.ini
pytest.ini文件是pytest的主配置文件，可以改变pytest的运行方式，它是一个固定的文件pytest.ini文件，读取配置信息，按指定的方式去运行。
run-seahub.sh.template
项目的启动文件 包含关键指令 ./manage.py runserver
send_user_notifications.sh.template
给用户发通知相关
包含指命令 python manage.py send_user_notifications
setenv.sh.template
环境配置相关文件

其余一些文件和文件夹下的内容在后续探索中会补充，这里没有确切找到它们的用处和用法。

Seahub-extra

Seahub-extra是学长去年基于Seahub为山大智云写的新功能。主要是针对山大智云的统一认证功能和搜索以及文件组织等新开发的功能。

这里暂时先不对extra文件夹下的内容进行分析。但整体来看项目前端主要是使用了Django和React框架进行的开发。在接下来的任务中，我首先要对这两个框架进行一下初步的了解。
Django
Django框架的设计模式借鉴了MVC框架的思想，把软件系统分为三个基本部分：Model（模型）、Template（模板）和View（视图），也就是MTV框架。

• Model(模型)：负责业务对象与数据库的对象(ORM)
• Template(模版)：负责如何把页面展示给用户
• View(视图)：负责业务逻辑，并在适当的时候调用Model和Template

此外，Django还有一个urls分发器，它的作用是将一个个URL的页面请求分发给不同的view处理，view再调用相应的Model和Template

Django框架图示

React框架

在山大智云项目前端中还运用了React框架，我之前接触过vue框架，而vue框架是有React框架衍生出的。React是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 特点

• 1.声明式设计 −React采用声明范式，可以轻松描述应用。

• 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活 −React可以与已知的库或框架很好地配合。

• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，

  但建议使用它。

• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

后续在代码分析和项目开发中我还会继续深入学习Django和React框架，并研究其工作模式。

以上是我对Seahub以及Seahub-extra项目以及两种框架的初步了解，接下来我将正式开始源码分析工作。由于工作重点是分析Seafile前端，所以这里只对Django和React框架的用法进行学习，并不会对其框架底层进行分析。接下来进行React和Django框架的学习和frontend和seahub目录下的源码的分析。

React框架学习

• 基本使用：

……
<div id="root"></div>
……
<script >

const title = React.createElement('h1',null,'hello react!')
//参与渲染react的元素
  ReactDOM.render(
    title,
    document.getElementById('root'),
    
  );
</script>

使用react 框架，首先创建react元素React的createElement方法中一般有三个参数
参数一：元素名称，这里用的是标h1
参数二：元素属性，可以设置元素的id，title等属性
参数三：元素及其元素子节点，这里只有一个根节点，内容就是‘hello react’
，在创建React元素之后要把元素渲染到网页上。使用ReactDOM的render方法：
参数一:要渲染的react元素，这里是上面创建的title
参数二：挂载点，将这个元素挂载到id叫root上dom元素上

这样就可以在网页上将“hello react”渲染出来了。
上文提到createElement方法中***一般***有三个参数，是因为在第三个参数之后还可以继续添加参数，这样的元素叫元素的子节点。

const title = React.createElement('h1',null,
'hello react!'，
React.createElement('span',null,'我是子节点')
)

• JSX的基本使用

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。它有以下优点：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它是类型安全的，在编译过程中就能发现错误。
3. 使用 JSX 编写模板更加简单快速。
   即JSX语法可以简化编码，不必再去写繁琐的creatElement方法。

对比两段同样效果的代码后者使用了JSX语法

const title = React.createElement('h1',null,'hello react!')

const element = <h1>hello，react!</h1>;

• 组件的封装
  以下代码封装了一个HelloMessage组件，可以直接在网页上渲染出Hello World！在frontend文件夹下的components中也封装了好多组件，这个会在以后的源码分析博客中提到。

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

• 组件状态（state和props）
  这部分内容在项目源码分析时针对实际情况进行分析说明， 现在仅区别state是可变的而props是不可变的。

简单对框架知识入门不至于对源码一窍不通，更多框架知识在后续会继续学习并更新在本篇博客中。未完待续……
下一篇转入正式的项目源码分析。