如何阅读开源项目源码
0 Views think with
本文字数:3.7k 字 | 阅读时长 ≈ 13 min

如何阅读开源项目源码

0 Views think with
本文字数:3.7k 字 | 阅读时长 ≈ 13 min

WeChat Template

一套基于SpringBoot & Shiro 以及 Uni-app构建的微信小程序脚手架

开源地址: https://github.com/TyCoding/wechat-template 欢迎Star、Fork支持作者。

前言

如何阅读开源项目源码?感觉这个项目写的很好但是我看不懂啊!我前端太差了学习这个项目有些吃力啊!

很多接触Java不久的同学都有遇到这样的困惑,那么今天我就想讲讲如何阅读开源项目源码?

诶,这时有人问道:你为什么要提开源项目?不能是其他的项目吗?

这里我仅仅是举例,对于接触Java不久的同学阅读开源项目是有必要的,并且要阅读高star的开源项目,如果你想要提高自己的项目开发能力、扩宽自己的思路、规范自己的代码格式,提高代码质量学习高star的开源项目就必不可少。

而无论是从别人那拿到的项目源码还是看培训班的项目源码,质量都参差不齐(当然低star的项目质量可能也不太好),而开源项目受大家监督,写的垃圾肯定会被喷。

这时,又有新同学问到,那你的Java学习方法是什么?你的学习步骤是怎样的?

我作为大三的学生,在我写了快三年的代码后我想我似乎也可以给大家提供一些学习思路了。

首先我要承认:我是个浮躁的人。体现在哪里?从我的GitHub:https://github.com/TyCoding 上便可看出,我写的大多都是Demo级别的CURD项目(虽然star也不少),但必须要承认,我没有写过技术含量很高的项目,也没有写过对Java框架底层源码、算法数据结构、计算机原理、网络原理等分析的文章,一味的写CRUD项目真实让我切身体会到早期规划自己的学习步骤很重要

如何规划Java学习?我认为应该遵循以下步骤:

  1. Java基础知识
  2. 大学基础课程(数据结构与算法、计算机原理、网络原理…)
  3. 项目实战:Spring、SpringMVC、Mybatis(前端:JavaScript、Vue、xxUI)
  4. 上述框架源码分析
  5. 其他企业级框架,按照 3 -> 4 的步骤依次进行

其中必须要提到的是基础知识是很枯燥的,也就是为什么我说自己很浮躁,因为我在学习初期会很想赶快往后学,快点把框架学完就能写项目了,那么就必然会逐渐忽略掉对基础知识的学习,这是很错误的。解决这种枯燥的方式也有:1.放平心态;2.把23并行学习,基础知识要结合实战才能更好的理解不然很快就忘了;3.多写文章。

如果你是在校生不是应届生,那么我建议你尽早规划自己的学习步骤,学习早期以基础知识为主项目为辅,后期以项目实战为主,基础思考为辅

如果你是应届生,那这种方式可能不太适合你,你更需要尽快扩展自己的项目实战能力,多看面试题,尽快尝试投简历面试在面试中提高自己


因为作者是Java后端开发者,那么本文将从前端项目前后端分离项目两个方面带你学习如何阅读项目源码。(注:项目涉及到了Vue、Vuex、Router、Axios、SpringBoot、Shiro…)

主题

开发环境准备

在GitHub上阅读开源项目:

运行项目也是个技术活。很多同学拿到项目源码却连怎么运行都不知道然后就想方设法联系作者咨询怎么运行,我经常遇到这种情况。对于一些懂礼貌,且提问方式恰当的人可能会回复,对那些话都不会说,提问又指发一些在吗?你这个项目我运行不起来啊你可以帮帮我吗?类似这种问题一概不理(建议这些同学仔细学习:提问的艺术),如果你付费了那作者有义务给你处理,如果你白嫖还一堆事,那作者又有什么义务要帮你?

所以拿到项目源码,首先要看仔细项目README中写的文档,如果你真的有问题非要提问,你应该这样提问:


回归正题,作为一个Java开发者,你的电脑最好有一下开发环境:

  1. JDK

官网地址:https://www.oracle.com/java/technologies/javase-downloads.html

建议大家安装jdk1.8,不要安装最新版容易出问题。

  1. Maven

官网地址:https://maven.apache.org/

项目源码中包含了pom.xml就证明是Maven项目,你需要在本地安装Maven环境,配置本地Maven仓库,在IDE上配置Maven环境。

  1. IDEA

官网地址:https://www.jetbrains.com/idea/ (开源项目可免费申请License)

大多开发者都在使用IDEA,而非Eclipse,如果你非要做异类,你要百度:IDEA项目与Eclipse项目如何相互导入。

  1. MYSQL

官网地址:https://www.mysql.com/cn/

建议大家使用MYSQL5.7,不要使用其他版本,除非项目介绍中提到了MYSQL版本。

  1. Node

一些前后端分离的项目,一般都要使用Nodenpm命令,所以在本地安装Node也是很有必要,其次看前端项目使用框架是Vue还是其他,再安装相应的环境。

  1. Git

官网地址:https://git-scm.com/downloads

做开源项目必备GIt工具

阅读前端项目

vue-element-admin项目源码:https://github.com/PanJiaChen/vue-element-admin

为什么要以这个项目举例?

首先这是个基于Vue的前端项目,作者在项目中做的封装对于我们后端开发者非常友好。而且我自己的项目:https://github.com/TyCoding/wechat-template 前端也是参考这种设计。下面我将以Login请求为例叫大家如何分步阅读项目源码。

1. 看README文档

README中清楚介绍了,此项目预览地址:https://panjiachen.github.io/vue-element-admin ,此项目的文档地址:https://panjiachen.github.io/vue-element-admin-site/ 。那么你首先需要先大致看下这两个东西。

但是需要注意,观察预览地址:https://panjiachen.github.io/vue-element-admin

打开项目在线预览地址,同时打开Chrome的F12控制台:

F12控制台上,Network选项卡是哪个找到:

点击登录按钮你会发现,Network中并没有包含username和password参数的XHR请求,也就证明在线预览地址上的项目登录并没有发送Request,从界面上显示的密码:随便填也能猜到预览地址部署的项目中登录功能作者为了方便测试没有发送Request校验。

因此,需要我们本地运行项目分析。

2. 本地运行项目

  1. 下载项目源码

git clone https://github.com/PanJiaChen/vue-element-admin.git

  1. install项目

因为这是基于Vue的项目,需要使用npm命令安装项目依赖:npm install

  1. 运行项目

作者README中也介绍了使用npm run dev开发环境运行项目:

Chrome将自动打开:http://localhost:9527/,到此项目本地运行成功。

3. 分析Login请求流程

访问http://localhost:9527,打开Chrome控制台,点击登录按钮,分析:

很明显,项目首先:

  1. 发送/user/login的请求校验用户名和密码,
  2. 发送/user/info获取当前用户账户信息,
  3. 发送/list请求。(这个是/dashboard页面显示的列表数据,不在我们分析的范畴请忽略)

也就是说该项目登录按钮首先触发请求/login,当用户名密码校验通过立即触发/info请求获取当前登录账户的完整信息。

那么我们先分析页面的登录按钮写在哪?

从该项目的文档中发现,作者介绍了该项目的所有页面都存放在/src/views目录下(如果作者没有写,就靠你自己分析了,一般规范点的代码都用viewspages等英文名称命名存放页面的目录),于是可以找到login文件夹:

并且在index.vue中发现,登录按钮是<el-button>Login</el-button>,并且该按钮上定义了@click触发事件,对应调用handleLogin方法。在该文件的下面找到handleLogin方法的定义:

// 登录按钮触发的事件方法
handleLogin() {
    // validate是用于校验Form表单数据
    this.$refs.loginForm.validate(valid => {
        // 如果校验成功说明输入框中输入的用户名和密码格式正确
        if (valid) {
            // 展示loading加载效果
            this.loading = true
            // 从Vuex中调用存储的`login`事件,传入`loginForm`参数,在`then`中获取事件响应结果
            this.$store.dispatch('user/login', this.loginForm)
                .then(() => {
                // 证明用户名密码输入正确,使用`router`路由跳转到`/`首页面
                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                // 关闭loading加载效果
                this.loading = false
            })
                .catch(() => {
                this.loading = false
            })
        } else {
            console.log('error submit!!')
            return false
        }
    })
},

到此为止,对登录按钮的分析结束,在handleLogin()方法中考虑两个问题:

  1. this.$store.dispatch()在哪里调用的user/login事件?

这个你需要先学习Vuex官方文档,这里我直接告诉你,作者在该项目中对Vuex的封装是放在项目src/store文件夹下的,经过一番浏览,发现对user/login的定义是在/src/store/modules/user.js中的:

可以看到该事件返回了一个Promise对象,其中调用了login传入了用户名和密码,那么这个login定义在哪?

在该文件顶部可以看到:

import { login, logout, getInfo } from '@/api/user'也就是此处的login是来自/api/user文件,找到该文件便找到最终登录请求的定义:

也就是登录按钮发送了login请求,请求URL:/vue-element/user/login,请求参数:data,请求方法:post

  1. this.$router.push()跳转到了哪个页面?

作者使用的是vue-router.js,所以你需要先阅读vue-router的文档,这里明确告诉你,作者对项目全局vue-router的封装是放在/src/router文件夹下:

以上是对该项目页面全局封装的路由表,遵循的是vue-router规定的格式(这个不是重点),可以看到/路由最终是对应了组件component:@/views/dashboard/index,也就是进入/路由浏览器是哪个显示的是dashboard/index.vue中的页面。

  1. Tips

介绍到这里,整个登录请求就已经分析完毕。你可能还有很多疑惑,这些疑惑无非就是你不是很熟悉vue-routervuexaxios,作者对这三样东西都进行了全局封装,其中目录对应:

这里我简单画图解释此项目请求流程:

4. 其他请求流程

上面画图分析了Login请求流程,其实项目中其他请求也是类似的,因为作者已经友好封装了全局的router、request、store,开发者使用这个项目仅需要按照这种思路即可。下面我在上图基础上解释其他请求流程:

想要学习一个Web项目,首先你要从页面开始分析,从HTML的click事件中找到对应的method,然后找到api地址,最后分析api请求响应结果,判断method返回router还是渲染response data。

阅读前后端分离项目

从对上面前端项目的分析,你应该大致了解了如何分析项目前端代码,那么接下来我们结合Java后端,分析前后端分离项目如何交互的。

项目源码:https://github.com/TyCoding/wechat-template (为了方便学习,我以自己的项目为例)

可以看到作者已经解释了此仓库中包含的是两个项目,一个前端项目一个后端项目(也有很多前后端分离项目是讲前端和后端分别放在两个仓库的)。

因为这个项目前端我是参考vue-element-admin项目设计,所以我们直接分析页面请求。

如果你运行了这个小程序,将看到Index页面我示例了一些请求:

我们在该页面源码中找到HTTP POST Request按钮。观察项目源码不难发现,index页面是定义在wechat-app/pages/index下:

index.vue的下方代码找到postRequest方法:

到这里可以看到,作者这个按钮实际上模拟的是一个添加用户的请求,于是往上翻代码找打save()方法在哪定义:

可以看到save方法来自wechat/api/user.js,找到这个文件并打开:

可以看到save方法发送的是/user请求,格式是post,参数是data

因为该项目的服务端接口由Java SpringBoot构建,那么我们直接分析wechat-api后端代码,根据惯例找到controller文件夹。这里我直接说明了是在wechat-api/src/main/java/cn/tycoding/biz/controller/,按照惯例找到UserController

可以看到该方法使用了@PostMapping注解也规定了此接口只能用POST方式请求,最终是调用UserService去添加用户数据,后面的我就不再详细讲解了。

其实,到此为止,你应该明白了,分析一个Java Web项目,首先你需要从HTML页面开始分析,找到事件对应请求的接口,在后端Controller中找到接口方法,于是整个请求流程就结束了。而对于一个Java Web项目,我们只要弄懂了项目前后端是如何交互的,也就基本知道了该项目的设计。

交流

QQGroup:671017003

WeChatGroup: 关注公众号查看

联系

如果这篇文章帮助到了你,你可以请作者喝一杯咖啡