Preskoči na glavni sadržaj

Kako na lokalnom okruženju (macOS) pokrenuti izvorni kod projekta Codingmore (Spring Boot+Vue)?

Chenmo Wang ErJava enterprise razvojSpring BootVue1666 reči6 minuta

Priprema preduslova

  • Računar koji se može uključiti
  • JDK 8
  • Maven
  • IntelliJ IDEA (neobavezno, može Eclipse)
  • Visual Studio Code (neobavezno, može hbuilderx)
  • MySQL
  • Redis (neobavezno, prijaviće grešku, ali ne ometa pokretanje)
  • OSS (neobavezno, prijaviće grešku pri uploadu slika, ali ne ometa pokretanje)

Da, da bi se Codingmore 🐱 (projekat sa razdvojenim frontendom i backendom na Spring Boot+Vue) pokrenuo lokalno, potrebno je ovih 8 preduslova.

Prvi uslov - računar koji se može uključiti - sigurno svi imaju. Jer kako drugačije učiti programiranje, zar ne? Vidim da mnogo pričam.

U ovom tekstu prvo ćemo uzeti macOS kao primer, a za Windows ću napisati poseban tekst. Na slici je konfiguracija mog glavnog računara, iMac-a.

Drugi uslov, JDK 8, može se instalirati preko homebrew (menadžer paketa za macOS), vrlo je zgodan, a zatim koristi jenv za upravljanje Java verzijama.

Izvršavanjem brew -v možeš videti verziju homebrew-a

Izvršavanjem brew install java možeš instalirati najnoviju verziju JDK-a.

Izvršavanjem brew install adoptopenjdk/openjdk/adoptopenjdk8 --cask možeš instalirati JDK 8.

Izvršavanjem ls /Library/Java/JavaVirtualMachines/ možeš videti sve instalirane JDK pakete na mašini.

Pomoću jenv add adoptopenjdk-8.jdk/Contents/Home/ možeš dodati instalirani JDK u jenv skladište verzija.

Izvršavanjem jenv global openjdk64-1.8.0.292 možeš postaviti trenutnu JDK verziju. Nakon toga, izvršavanjem jenv versions možeš videti podrazumevanu JDK verziju (onu sa *)

Izvršavanjem java -version možeš videti trenutnu JDK verziju

Treći uslov, Maven, može se instalirati direktno pomoću brew install maven. Verziju proveravaš pomoću mvn -v.

Da bismo ubrzali preuzimanje zavisnih paketa projekta, potrebno je konfigurisati Maven-ovo domaće (u Kini lokalizovano) mirror izvorište.

Pronađi Maven Home (/Users/yourpath/save/apache-maven-3.8.3) i prekopiraj jedan primerak settings.xml.

u putanju /Users/you/.m2.

Pod čvorom mirrors dodaj adresu Aliyun mirror-a i sačuvaj.

<mirror>
  <id>alimaven</id>
  <name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
  <mirrorOf>central</mirrorOf>
</mirror>

Četvrti uslov, IntelliJ IDEA - neizostavan alat za Java backend razvoj; možeš instalirati Community ili Ultimate izdanje.

https://www.jetbrains.com/zh-cn/idea/download/#section=mac

Peti uslov, Visual Studio Code - pri pisanju frontend koda (vue, JavaScript, css i sl.) vredniji od poverenja od IntelliJ IDEA-e.

https://code.visualstudio.com/

Šesti uslov, MySQL - instalacioni paket se može preuzeti sa MySQL zvaničnog sajta.

Nakon završetka instalacije, u panelu za podešavanja možeš videti MySQL servis (zapamti korisničko ime i lozinku).

Klikom uđi i proveri status rada MySQL-a.

Sedmi uslov, Redis - može se instalirati direktno pomoću brew install redis.

Izvršavanjem redis-server pokrećeš Redis servis.

Osmi uslov, OSS - uglavnom služi za čuvanje slika; možeš kupiti uslugu na Alibaba Cloudu i kreirati Bucket.

Zatim konfiguriši AccessKey.

Preuzimanje izvornog koda Codingmore (codingmore)

Codingmore ukupno ima tri repozitorijuma:

Codingmore 🐱 je vrlo čist projekat sa razdvojenim frontendom i backendom; tehnologije koje se koriste na backendu obuhvataju:

  • Spring Boot kontejner + MVC framework
  • SpringSecurity framework za autentifikaciju i autorizaciju
  • MyBatis ORM framework
  • MyBatis-Plus alat za poboljšanje MyBatis-a
  • Nginx server za statičke resurse
  • Druid connection pool za bazu podataka
  • OSS skladište objekata
  • Redis keš middleware
  • MySQL relaciona baza podataka
  • Swagger-UI alat za generisanje dokumentacije
  • Knife4j alat za uljepšavanje i poboljšanje Swagger-a
  • Hibernator-Validator framework za validaciju
  • Logback framework za logove
  • Lombok alat za pojednostavljivanje enkapsulacije objekata
  • Hutool biblioteka Java alatki

Tehnologije koje se koriste na frontendu obuhvataju:

  • Vue frontend framework
  • Vue-router framework za rutiranje
  • Vuex framework za upravljanje globalnim stanjem
  • Element frontend UI framework
  • Axios frontend HTTP framework
  • Js-cookie alat za upravljanje kolačićima
  • nprogress kontrola trake napretka

Prvi korak: preuzmi izvorni kod coding-more - klikni na link 🔗 i uđi na stranicu.

Drugi korak: ako imaš instaliranu GitHub Desktop verziju, možeš kliknuti na „open with GitHub desktop", a ako nemaš, klikni na „download zip"

Klikom na „show in finder" vidiš izvorni kod Codingmore-a.

Treći korak: uvezi ga preko IntelliJ IDEA-e.

Pri prvom otvaranju treba sačekati koji trenutak da Maven preuzme zavisne pakete. Po završetku preuzimanja, struktura projekta izgleda kao na donjoj slici.

Četvrti korak: preuzmi izvorni kod codingmore-admin-web - klikni na link 🔗 i uđi na stranicu.

Nakon preuzimanja izvornog koda, preporučujem da projekat uvezeš pomoću VS Code-a, koji je za frontend projekte mnogo prijateljskiji od IntelliJ IDEA-e.

Deplojment izvornog koda Codingmore (codingmore)

01,MySQL

Prvi korak: instaliraj Navicat - alatku sa grafičkim interfejsom za upravljanje bazom.

Po završetku instalacije, unesi korisničko ime i lozinku MySQL baze i uspostavi lokalnu konekciju.

Drugi korak: otvori konekciju, kreiraj novu bazu codingmore i uvezi DB fajl Codingmore-a.

DB fajl se nalazi u direktorijumu coding-more/doc.

Nakon uspešnog uvoza, videćeš 27 fajlova baze koje Codingmore koristi; oni koji počinju sa qrtz su tabele za trajno pamćenje zakazanih zadataka, dok su preostali fajlovi tabela baze Codingmore-a.

Zatim izmeni spring.datasource.username, password, url i sl. u fajlu codingmore-admin/src/main/resources/application-dev.yml tako da odgovaraju tvom lokalnom korisničkom imenu, lozinci i adresi baze (Web admin stranica).

Izmeni spring.datasource.username, password, url i sl. u fajlu codingmore-web/src/main/resources/application-dev.yml tako da odgovaraju tvom lokalnom korisničkom imenu, lozinci i adresi baze (Web frontend).

02,Redis

Izvrši redis-server i pokreni Redis servis; nisu potrebne dodatne konfiguracije.

Zapamti PID; ako želiš da ga ugasiš, upotrebom komande kill -9 PID to možeš uraditi.

Zatim izmeni spring.redis.host, database, port, password, timeout i sl. u fajlu codingmore-admin/src/main/resources/application-dev.yml prema svojim lokalnim informacijama o Redis konekciji; obično su podrazumevane vrednosti sasvim dovoljne (Web admin stranica).

Izmeni spring.redis.host, database, port, password, timeout i sl. u fajlu codingmore-web/src/main/resources/application-dev.yml prema svojim lokalnim informacijama o Redis konekciji; obično su podrazumevane vrednosti sasvim dovoljne (Web frontend).

03,OSS

Potrebno je da samostalno kupiš Alibaba Cloud OSS i CDN usluge. accessKeyId i accessKeySecret pribavi zasebno, prema sopstvenoj usluzi.

Zatim izmeni aliyun.cdn, oss i sl. u fajlu codingmore-admin/src/main/resources/application-dev.yml.

04,codingmore-admin

U IntelliJ IDEA-i pokreni glavnu klasu CodingmoreAdminBootstrap i time startuj admin backend servis.

Ako startovanje ne uspe, pokušaj u Maven panelu da izabereš codingmore-admin i dvoklikom pokreneš clean, kako bi očistio keš.

05,codingmore-web

U IntelliJ IDEA-i pokreni glavnu klasu CodingmoreAdminBootstrap i time startuj admin backend servis.

Ako startovanje ne uspe, pokušaj u Maven panelu da izabereš codingmore-web i dvoklikom pokreneš clean, kako bi očistio keš.

Po startovanju, u adresnoj traci pregledača unesi http://localhost:8081 za pristup Web frontendu.

06,codingmore-admin-web

Otvori terminal i izvrši yarn install kako bi dodao zavisnosti projekta (yarn je alat za pakovanje softvera koji je Facebook razvio za node.js okruženje; predstavlja alternativu za npm menadžer paketa).

Zatim izvrši yarn run dev kako bi kompajlirao admin frontend.

U adresnoj traci pregledača unesi http://localhost:8080 i možeš mu pristupiti.

Možeš kliknuti na „Get an experience account" da dobiješ korisničko ime i lozinku za prijavu. Naravno, možeš i direktno na tabeli users nasilno probiti lozinku.

Po prijavi možeš videti listu članaka.

Ovo je stranica za uređivanje članaka - nije li vrlo pregledna?

Dobro, time smo završili deo o tome kako preuzeti izvorni kod Codingmore-a na Macu i kako ga pokrenuti lokalno; vidimo se kasnije!