old springboot vue

springboot2-vue3

เทมเพลตพื้นหลังทั่วไปที่ใช้ springboot2 และ vue3 โดยไม่มีฟังก์ชันซ้ำซ้อน มีเพียง การจัดการสิทธิ์ และฟังก์ชันทั่วไปเท่านั้น โครงการแยกส่วนหน้าและส่วนหลัง รหัสผ่าน การสแกนแบบแผนการเข้ารหัสของอาลีบาบา 90% และ ค้นหาข้อบกพร่อง

ที่อยู่เวอร์ชันใหม่

 * 本项目不再维护，请关注新版 

คู่มือการเริ่มต้นใช้งาน

คำแนะนำต่อไปนี้จะช่วยคุณติดตั้งและรันโปรเจ็กต์บนเครื่องของคุณเพื่อการพัฒนาและการทดสอบ สำหรับข้อมูลเกี่ยวกับวิธีการปรับใช้โปรเจ็กต์นี้กับสภาพแวดล้อมออนไลน์ โปรดดูที่ส่วนการปรับใช้

ข้อกำหนดและขั้นตอนการติดตั้ง

• ติดตั้งและกำหนดค่าสภาพแวดล้อม Java JDK1.8
• ติดตั้ง mysql 8 สร้างฐานข้อมูล (utf8mb4) และนำเข้า sql (ในไดเรกทอรี doc)
• หากต้องการติดตั้ง redis เพียงดาวน์โหลดและติดตั้ง
• เครื่องมือในการพัฒนาจำเป็นต้องติดตั้งปลั๊กอิน ลอมบอก (แนะนำให้ใช้ IDEA สำหรับเครื่องมือในการพัฒนา)
• --- การดำเนินการส่วนหลัง (หากมีปัญหา โดยปกติจะเป็นข้อผิดพลาดในการกำหนดค่าแหล่งข้อมูลในไฟล์การกำหนดค่า yml)
• ติดตั้งและกำหนดค่าสภาพแวดล้อม ของโหนด
• ติดตั้ง vue-cli3 ป้อนไดเร็กทอรี vue และดำเนินการ npm install
• ---เรียกใช้ npm run serve ที่ส่วนหน้า ( WebStorm หรือ IDEA สามารถคลิกสามเหลี่ยมสีเขียวทางด้านซ้ายของบรรทัด 6 ในไฟล์ package.json ได้โดยตรง)

ที่อยู่สาธิต

• ที่อยู่การสาธิตออนไลน์
  • ชื่อผู้ใช้:superadmin
  • รหัสผ่าน:111111
  • เคล็ดลับ: ผู้ใช้หลายคนที่เข้าสู่ระบบพร้อมกันอาจถูกไล่ออก
  • เคล็ดลับ: สภาพแวดล้อมสาธิตห้ามการเพิ่ม ลบ และแก้ไข เพียงเพิกเฉยต่อข้อผิดพลาด
  • เคล็ดลับ: หากมีข้อยกเว้นอื่นๆ โปรดบังคับให้รีเฟรชหน้า (อาจเป็นปัญหาแคช)
• เอกสารประกอบอินเทอร์เฟซ
  • กร่าง-bootstrap
  • เคล็ดลับ: คำขอจะแจ้ง 404 โปรดเพิ่ม /github ไว้ข้างหน้าคำขอด้วยตนเอง

ปรับใช้

• รันคำสั่ง mvn clean package ในไดเร็กทอรี springboot ไปยังแพ็กเกจ หลังจากทำแพ็กเกจแล้ว ไฟล์ที่สร้างขึ้นจะอยู่ในไดเร็กทอรี /target/build
  • ไดเร็กทอรี config เก็บไฟล์การกำหนดค่า
  • ไดเร็กทอรี lib คือแพ็คเกจ jar ที่ maven ขึ้นอยู่กับ
  • ไดเร็กทอรีแบบคงที่เก็บไฟล์แบบคงที่
  • ไฟล์ jar เป็นแพ็คเกจ jar ที่สร้างขึ้น (หากการพึ่งพา pom ยังคงไม่เปลี่ยนแปลงในอนาคต คุณสามารถแทนที่แพ็คเกจ jar ได้เท่านั้น)
• รันคำสั่ง npm run build ในไดเร็กทอรี vue เพื่อจัดทำแพ็กเกจ หลังจากทำแพ็กเกจ ไฟล์ที่สร้างขึ้นจะอยู่ในไดเร็กทอรี /dist
  • คอนฟิกูเรชันการทำแพ็กเกจอยู่ในไฟล์ .env และไฟล์ vue.config.js
• เซิร์ฟเวอร์การปรับใช้จำเป็นต้องกำหนดค่าสภาพแวดล้อม JDK1.8 , mysql 8 และ redis
• แพ็คเกจ jar รัน nohup java -jar springboot.jar & สามารถทำงานในพื้นหลังและส่งออกบันทึกไปยังไฟล์ nohup.out ในไดเร็กทอรีปัจจุบัน
• ขอแนะนำให้กำหนดค่า nginx สำหรับเซิร์ฟเวอร์การปรับใช้ Vue ได้รับการจัดทำแพ็กเกจและวางไว้ภายใต้ nginx หากไม่ได้กำหนดค่า ก็สามารถวางไว้ใต้ static ในไดเร็กทอรีเดียวกันของแพ็กเก จ jar

ข้อผิดพลาดทั่วไป

• java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
  • ข้อผิดพลาด: สร้างคลาสเอนทิตีตามฐานข้อมูล
  • วิธีแก้ไข: เปลี่ยนพาธแพ็กเกจ jar ในบรรทัดที่ 6 ของ resources/config/generator-config.xml เป็นพาธแพ็กเกจ jar ของคุณเอง
• npm install
  • ข้อผิดพลาด: ข้อผิดพลาดการพึ่งพาการติดตั้ง vue ซึ่งมักจะเป็น node-sass
  • วิธีแก้ไข: เปลี่ยนอิมเมจ Taobao หรือ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
• /login ------请求失败-----error: Error: Cannot find module './q/Index'
  • ข้อผิดพลาด: หลังจากสร้างเมนูใหม่ในพื้นหลัง (เมนูไม่มีรายการย่อย) และได้รับอนุญาตให้เพิ่มเมนู ข้อผิดพลาดนี้เกิดขึ้นเมื่อเข้าสู่ระบบอีกครั้ง
  • วิธีแก้ไข: เพิ่มไดเร็กทอรีเมนูและไฟล์ Index.vue ให้กับพาธ /src/views/index/ ในโปรเจ็กต์ vue

ด้านหลัง:

สปริงบูท, มายบาติส, เรดดิส

1. การแนะนำ
   • โครงการที่สร้างขึ้นตามเทมเพลต springboot
2. การกำหนดค่าพื้นฐาน
   • ไฟล์ .yml สามารถกำหนดค่าข้อมูลที่เกี่ยวข้องได้
   • ไดเร็กทอรี config มีการกำหนดค่าโมดูลทั่วไป
   • ตัวกรอง ได้รับการกำหนดค่าด้วย ข้ามโดเมน , การกรอง IP , การกรองพารามิเตอร์ ฯลฯ
     • คำขอ การกรองพารามิเตอร์ จะลบช่องว่างนำหน้าและต่อท้ายโดยอัตโนมัติ โดยใช้ Jsoup เพื่อกรอง แท็ก html (ระดับการกรองสามารถปรับแต่งได้)
3. การจัดการสิทธิ์
   • เชื่อมต่อกับคำอธิบายประกอบ @AdminAuthToken ส่วนหัวของคำขอต้องมี โทเค็น เพื่อเข้าถึง
   • ร่วมมือกับเพจส่วนหน้า vue เพื่อเรนเดอร์เส้นทางแบบไดนามิกและซ่อนปุ่มแสดงผล: ปุ่มจะถูกบันทึกใน $store.state.role['buttons'] (ส่วนหน้า)
   • แม่นยำตามการอนุญาตระดับอินเทอร์เฟซ API ที่เกี่ยวข้อง ซึ่งสอดคล้องกับเมนูหรือปุ่มใน การจัดการฟังก์ชัน จะต้องได้รับการปรับปรุง มิฉะนั้น จะได้รับอนุญาตตามค่าเริ่มต้นหลังจาก โทเค็น มีอยู่
4. โรงงานบรรจุภัณฑ์ใช้ CURD และเพียงสืบทอด BaseService
   • baseInsert() และ baseUpdate() จะกรองฟิลด์ที่มีค่าว่างโดยอัตโนมัติ
   • โปรดกรองพารามิเตอร์ baseUpdate() หรือสร้างคลาสเอนทิตี ใหม่ สำหรับการดำเนินการมอบหมาย
5. สร้างคลาสเอนทิตีโดยอัตโนมัติตามฐานข้อมูล
   • เรียกใช้เมธอด org.mybatis.generator.plugin.MyBatisTest.main()
   • รีซอร์สคอนฟิกูเรชันเฉพาะ/config/generator-config.xml
6. บันทึกจะถูกจัดเก็บในแต่ละวัน และการกำหนดค่าเฉพาะจะอยู่ใน resources/config/logback-spring.xml
7. บันทึกบันทึกผู้ใช้ ของผู้ดูแลระบบ โดยอัตโนมัติ สามารถใส่คำอธิบายประกอบ @SystemLog บน คอนโทรลเลอร์ ได้

ส่วนหน้า:

วิว:

1. การแนะนำ

   • โปรเจ็กต์ที่สร้างขึ้นจาก vue cli3
   • อินเทอร์เฟซ UI: องค์ประกอบ-ui
   • คำขอเครือข่าย: axios
     • วิธีการโทรทั่วโลก this.$axios({ url: '', data: {}, success(data) {} });
       • url: ต้องใช้เฉพาะที่อยู่หลังชื่อโดเมนเท่านั้น
       • สำเร็จ: การโทรกลับต้องจัดการเฉพาะกรณี ที่รหัสคือ 200
   • ตัวแปรโกลบอลและวิธีการอยู่ในไดเร็กทอรี /src/utils
   • แทนที่สไตล์ element-ui ในไฟล์ /src/assets/sass/element-variables.scss
   • แนะนำไลบรารี่ฟอนต์ iconfont
     • เพียงเขียนทับไฟล์ในไดเร็กทอรี /src/assets/font/iconfont
     • อ้างอิง <i class="iconfont iconfont-address"></i>
   • โครงการส่วนใหญ่มีความคิดเห็น

2. การกำหนดค่าพื้นฐาน

   • ร่วมมือกับแบ็กเอนด์เพื่อใช้การกำหนดเส้นทางแบบไดนามิก: กรอกเส้นทางในแบบฟอร์มการจัดการฟังก์ชัน เส้นทางรูทเริ่มต้นคือ /src/views/index/
   • ไฟล์ .env.production/development และ vue.config.js เป็นไฟล์คอนฟิกูเรชัน

3. ส่วนประกอบที่ใช้กันทั่วไปที่ห่อหุ้ม ( สำหรับรายละเอียด โปรดดูที่ /src/views/index/system/sysUser/ สำหรับความคิดเห็นโดยละเอียด )

   • กล่องโต้ตอบ: กล่องป๊อปอัป
     • รายละเอียด: แสดงข้อมูลในรูปแบบชื่อเรื่อง + เนื้อหา
     • แบบฟอร์ม: การส่งแบบฟอร์ม @submit จะต้องจัดการสถานการณ์หลังจากการตรวจสอบแบบฟอร์มเท่านั้น
     • ดัชนี: กล่องป๊อปอัปธรรมดา
   • โต๊ะ: โต๊ะ
     • ตัวอย่างการส่งคืนที่ยอมรับโดยแบบฟอร์ม: {"list":[],"pageNum":1,"pageSize":10}
     • คำขอข้อมูลตาราง tableDataRequest: { url: '', data: {} }
       • url: ที่อยู่ขอ
       • ข้อมูล: พารามิเตอร์เพิ่มเติม ใช้กับการค้นหายอดนิยม
     • ตารางแสดง tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] ยอมรับอาร์เรย์ --- อ้างถึงตาราง laui
       • ฟอร์แมตเตอร์: จอแสดงผลที่ซับซ้อนสามารถส่งคืน dom ได้

รับทราบ

ก่อนอื่นเลย ต้องขอบคุณ springboot , vue , element-ui และโปรเจ็กต์โอเพ่นซอร์สที่ยอดเยี่ยมอื่นๆ ประการที่สอง โปรเจ็กต์นี้อ้างอิงถึงตัวอย่างออนไลน์มากมาย หากคุณเห็นโค้ดที่คล้ายกัน แสดงว่ามีเพียงคำตอบเดียวเท่านั้น