How to analyze background open source projects

Analysis background open source project

1. Observe open source projects

2. Open source project download

After the download is complete, unzip it, and use the code cloud to download first!
Unzip, don’t rush to run and
observe:
1. Which technologies are used ([SpringBoot], [Vue], Redis)
2. Whether there is a database
3. Does your environment match ([Maven], [npm, nodejs], redis... )
passed, then figure out how to run!

3. Running is the first step

insert image description here
1. import mysql first
2. front-end installation dependencies, npm install [here to do it first to reduce time, generally the back-end projects are all running before installing, because the front-end depends on the back-end]
3. back-end projects open the project in the idea See if there is any error [As long as Swagger is found, the first step to run is to enter the Swagger-ui page first! Because there are interfaces!
And then look at the configuration file! The default port, what configurations are there, need to be changed to your own project and environment address! ]
4. Open the back-end redis service
5. The back-end AppRun runs, enter the swagger-ui.html page, and view the interface document
6. The front-end depends on the back-end, and npm run dev runs [The front-end is the installation dependency, start the test run to see if the interface is normal!
That is to say, the page display is the front end, and the data interface displayed by the swagger interface document is the back end

4. Fixed routine for front and rear section separation projects

1. Start the analysis from the front end. Open the console, click an interface, and analyze a wave of calling relationships!
2. Before and after port calls are inconsistent: 8013 and after: 8000, how to operate

  • Encapsulate the interface request [Ajax is generally used for front-end and back-end separation, and now, use axios in vue to encapsulate with request]
  • find configuration
    insert image description here
  • The key point of the front-end and back-end separation project: find the calling relationship of the interface
  • SpringBoot delivers! The front end calls the interface data! Vue takes care of rendering the page!
    insert image description here
  • Fixed routines for front-end projects
    insert image description here
  • By grabbing the front-end request, find the corresponding interface of the back-end
    Front-end request
    insert image description here
    The corresponding interface of the back-end ctrl+shift+f Search api/users directly
    insert image description here
  • Controller-Service-Dao: You can understand it
  • Now analyze from front to back! But how to render to the view? Look at the front end
    insert image description here
  • Vue standard routine
<template>
    视图层
</template>

<script>
js操作
接口的调用
  export default {
  双向绑定进行渲染
    name: 'test'
  }
</script>

<style scoped>
页面的样式
</style>
  • If you have your own project now or you want to learn a module, just extract this module independently! Delete method

5. How to find a good open source project

Use code cloud as a case:

  1. Find category JAVA
  2. Looking at collections, open source projects, if everyone thinks it is good, then it is good!
  3. look valuable
  4. Look at it based on your own understanding, staged results, step by step to make each step solid, you can't reach the sky in one step
  5. How to learn Java

–Knowledge source Mad God said JAVA

Guess you like

Origin blog.csdn.net/qq_55293923/article/details/124557544