WhiteJotter

---

นี่เป็นโปรเจ็กต์การแยกส่วนหน้าและส่วนหลังที่เรียบง่าย ซึ่งพัฒนาขึ้นโดยใช้เทคโนโลยี Vue.js + SpringBoot เป็นหลัก

นอกจากจะใช้เป็นแบบฝึกหัดเบื้องต้นแล้ว ฉันยังหวังว่าโปรเจ็กต์นี้จะสามารถใช้เป็นโครงสำหรับโปรเจ็กต์เว็บทั่วไปบางโปรเจ็กต์ได้ เพื่อช่วยให้คุณลดความซับซ้อนของกระบวนการสร้างเว็บไซต์ มันถูกเรียกว่าจอตเตอร์สีขาวเพราะมันเริ่มต้นที่ 0 และค่อยๆ ดีขึ้นเมื่อเวลาผ่านไป

Repo ส่วนหน้า：https://github.com/realdonald1994/WhiteJotter_Vue

ที่เก็บแบ็กเอนด์：https://github.com/realdonald1994/WhiteJotter

ยินดีต้อนรับสู่การเข้าร่วม White Jotter!

การแสดงโดยรวม

1. บ้าน

เป็นหน้าจอแสดงผล รวมถึงเอกสารอ้างอิงหลักสำหรับการพัฒนาโครงการนี้ การอัปเดตล่าสุด และสโลแกน

2. ห้องสมุด

มีฟังก์ชั่นแสดงข้อมูลหนังสือและภาพยนตร์

3. จอตเตอร์

จัดทำบันทึก ฟังก์ชั่นแสดงโพสต์ในบล็อก

4.การจัดการพื้นหลัง

รวมถึงแดชบอร์ด การจัดการเนื้อหา การจัดการผู้ใช้และสิทธิ์การใช้งาน ฯลฯ

5.เกี่ยวกับฉัน

การแนะนำตัวและลิงค์ที่เกี่ยวข้อง

สถาปัตยกรรม

• แอปพลิเคชัน

• เทคโนโลยี

กองเทคโนโลยี

1. กองเทคโนโลยีส่วนหน้า

1.Vue.js
2.องค์ประกอบ UI
3.แอกซิออส
4.วูเอ็กซ์

2. กองเทคโนโลยีแบ็กเอนด์

1. บู๊ทสปริง
2.ข้อมูลสปริง + JPA
3.MySQL
4.ชิโระ

3. ฐานข้อมูล

1.MySQL

4. เซิร์ฟเวอร์

1.เซนโตส7
2.งินซ์
3.FastDFS

5. ทดสอบ

1.จูน
2.ตลก

การปรับใช้

1.โครงการโคลนสู่ท้องถิ่น

ส่วนหน้า:

git clone https://github.com/realdonald1994/WhiteJotter_Vue

ส่วนหลัง:

git clone https://github.com/realdonald1994/WhiteJotter

2.สร้างฐานข้อมูล white_jotter ใน mysql รันโปรเจ็กต์ และข้อมูลจะถูกฉีดโดยอัตโนมัติ

พอร์ต Redis คือ 6379 (พอร์ตเริ่มต้น) และรหัสผ่านว่างเปล่า

3. ฐานข้อมูลได้รับการกำหนดค่าในไฟล์ application.properties ในไดเร็กทอรี src main resources ของโปรเจ็กต์แบ็กเอนด์ และเวอร์ชัน mysql คือ 8.0.15

4. รันโปรเจ็กต์แบ็กเอนด์ใน IntelliJ IDEA เพื่อให้แน่ใจว่าโปรเจ็กต์รันได้สำเร็จ คุณสามารถคลิกขวาที่ pom.xml แล้วเลือก maven-> นำเข้าอีกครั้งและรีสตาร์ทโปรเจ็กต์

ณ จุดนี้ เซิร์ฟเวอร์เริ่มต้นได้สำเร็จ ในเวลาเดียวกัน ให้รันโปรเจ็กต์ส่วนหน้า ไปที่ http: // localhost: 8080 คุณสามารถเข้าสู่หน้าเข้าสู่ระบบได้ บัญชีเริ่มต้นคือ admin รหัสผ่านคือ 123

หากคุณต้องการพัฒนาขั้นที่สอง โปรดดูขั้นตอนที่ห้าและหกต่อไป

5.ป้อนไดเร็กทอรีรากของโปรเจ็กต์ส่วนหน้า และป้อนคำสั่งต่อไปนี้ตามลำดับบนบรรทัดคำสั่ง:

# Install dependencies
  npm install

# Start the project at localhost: 8080
  npm run dev

เนื่องจากการส่งต่อพอร์ตได้รับการกำหนดค่าในโปรเจ็กต์ wj-front เพื่อส่งต่อข้อมูลไปยัง SpringBoot หลังจากที่โปรเจ็กต์เริ่มต้น ให้ป้อน http: // localhost: 8080 ในเบราว์เซอร์เพื่อเข้าถึงโปรเจ็กต์ส่วนหน้าของเรา คำขอทั้งหมดจะส่งต่อข้อมูลไปยัง SpringBoot ผ่านการส่งต่อพอร์ต (โปรดทราบว่าคุณไม่ควรปิดโครงการ SpringBoot ในขณะนี้)

6.สุดท้าย คุณสามารถใช้ WebStorm และเครื่องมืออื่นๆ เพื่อเปิดโปรเจ็กต์ wj-front และดำเนินการพัฒนาต่อไปได้ หลังจากการพัฒนาเสร็จสมบูรณ์ เมื่อโปรเจ็กต์กำลังจะออนไลน์ คุณยังคงเข้าสู่ไดเร็กทอรี wj-front จากนั้นดำเนินการคำสั่งต่อไปนี้:

 npm run build

หลังจากดำเนินการคำสั่งสำเร็จแล้ว โฟลเดอร์ dist จะถูกสร้างขึ้นภายใต้ไดเร็กทอรี wj-front และสามารถคัดลอกไฟล์ทั้งสองไฟล์และ assets ในโฟลเดอร์ไปยัง nginx ได้ index.html นั้นป้อนไดเร็กทอรีรากของแบ็กเอนด์และดำเนินการบรรทัดคำสั่ง：

 mvn clean install

สุดท้าย ให้ป้อนบรรทัดคำสั่ง java -jar xxx.jar ในไดเร็กทอรี target ที่สร้างขึ้นใหม่ เริ่มเซิร์ฟเวอร์ส่วนหลัง

ป้อนบรรทัดคำสั่งใต้ไฟล์ nginx: start nginx เริ่มเซิร์ฟเวอร์ส่วนหน้า

อัปเดต

2020

08-20 เพิ่มเรดดิส
06-09 เพิ่ม Unit Test ด้วย Vue test utils และ Jest
06-04 ใช้ gzip เพื่อแก้ปัญหาการโหลดหน้าเว็บช้า
06-02 โครงการถูกปรับใช้บนเซิร์ฟเวอร์คลาวด์และมีการเผยแพร่เว็บไซต์เป็นครั้งแรก ?
05-29 แยกโครงการส่วนหน้าและส่วนหลังออกจากกัน
04-20 ใช้โปรแกรมแก้ไขมาร์กดาวน์แบบโอเพ่นซอร์สเพื่อให้ได้การแสดงบทความและโมดูลการจัดการ

-