มูเทกิ
- การแนะนำ
- vue3.0 เป็นเทมเพลตการจัดการแบ็คเอนด์ที่ใช้ springboot และ vue ที่แยกส่วนหน้าและส่วนหลังออก นอกจากนี้ยังสามารถพัฒนาได้อย่างรวดเร็วเพื่อจัดเตรียมอินเทอร์เฟซ (Restfull API) ให้กับส่วนหน้า
- รหัสผ่าน 90% ของการสแกนแบบแผนการเข้ารหัสของอาลีบาบาและค้นหาจุดบกพร่อง
- ฝั่ง WEB รองรับการเข้าสู่ระบบหลายเทอร์มินัล และสามารถดูแลรักษาเทอร์มินัลแยกกันได้
- การจัดการผู้ใช้ การจัดการบทบาท การจัดการแผนก การจัดการสิทธิ์ การจัดการเมนู การจัดการบันทึก ฯลฯ
- มีเวอร์ชัน vue3 ant-design-vue และเวอร์ชันอิลิเมนต์ vue2
- โครงการนี้เป็นโอเพ่นซอร์ส MIT โดยสมบูรณ์
- เปล่งประกาย!
เอกสารการพัฒนา
- เอกสารมีการปรับปรุงอย่างต่อเนื่อง - -
ที่อยู่โครงการเดิม
คู่มือการเริ่มต้นใช้งาน
คำแนะนำต่อไปนี้จะช่วยคุณติดตั้งและรันโปรเจ็กต์บนเครื่องของคุณเพื่อการพัฒนาและการทดสอบ สำหรับข้อมูลเกี่ยวกับวิธีการปรับใช้โปรเจ็กต์นี้กับสภาพแวดล้อมออนไลน์ โปรดดูที่ส่วนการปรับใช้
ข้อกำหนดและขั้นตอนการติดตั้ง
- ติดตั้งและกำหนดค่าสภาพแวดล้อม Java JDK1.8
- ติดตั้ง mysql 8 สร้างฐานข้อมูล ( utf8mb4 , utf8mb4_general_ci ) และนำเข้า sql (ใต้ไดเร็กทอรี doc)
- หากต้องการติดตั้ง redis เพียงดาวน์โหลดและติดตั้ง
- เครื่องมือในการพัฒนาจำเป็นต้องติดตั้งปลั๊กอิน ลอมบอก (แนะนำให้ใช้ IDEA สำหรับเครื่องมือในการพัฒนา)
- --- การดำเนินการส่วนหลัง (หากมีปัญหา โดยปกติจะเป็นข้อผิดพลาดในการกำหนดค่าแหล่งข้อมูลในไฟล์การกำหนดค่า yml)
- ติดตั้งและกำหนดค่าสภาพแวดล้อม ของโหนด
- ติดตั้ง vue-cli ป้อนไดเร็กทอรี vue และดำเนินการ
npm install - ---เรียกใช้
npm run serve ที่ส่วนหน้า ( WebStorm หรือ IDEA สามารถคลิกสามเหลี่ยมสีเขียวทางด้านซ้ายของบรรทัด 6 ในไฟล์ package.json ได้โดยตรง)
ที่อยู่สาธิต
ปรับใช้
- รันคำสั่ง
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 หากไม่ได้กำหนดค่า ก็สามารถวางไว้ใต้ สแตติก ในไดเร็กทอรีเดียวกันกับแพ็กเกจ 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 ของคุณเอง
ด้านหลัง:
สปริงบูท, มายบาติส, เรดดิส
- การแนะนำ
- โครงการที่สร้างขึ้นตามเทมเพลต springboot
- การกำหนดค่าพื้นฐาน
- ไฟล์ .yml สามารถกำหนดค่าข้อมูลที่เกี่ยวข้องได้
- ไดเร็กทอรี config มีการกำหนดค่าโมดูลทั่วไป
- ตัวกรอง ได้รับการกำหนดค่าด้วย ข้ามโดเมน การกรองพารามิเตอร์ ฯลฯ
- คำขอ การกรองพารามิเตอร์ จะลบช่องว่างนำหน้าและต่อท้ายโดยอัตโนมัติ โดยใช้ Jsoup เพื่อกรอง แท็ก html (ระดับการกรองสามารถปรับแต่งได้)
- การจัดการสิทธิ์
- เชื่อมต่อกับคำอธิบายประกอบ
@AuthToken ส่วนหัวของคำขอต้องมี โทเค็น เพื่อเข้าถึง - ร่วมมือกับเพจส่วนหน้า vue เพื่อเรนเดอร์เส้นทางแบบไดนามิกและซ่อนปุ่มแสดงผล: ปุ่มจะถูกบันทึกไว้ใน
this.$globalFun.getSessionStorage('buttonMap') (ส่วนหน้า) - แม่นยำตามการอนุญาตระดับอินเทอร์เฟซ API ที่เกี่ยวข้อง ซึ่งสอดคล้องกับเมนูหรือปุ่มใน การจัดการฟังก์ชัน จะต้องได้รับการปรับปรุง ไม่เช่นนั้นจะได้รับอนุญาตตามค่าเริ่มต้นหลังจาก โทเค็น มีอยู่
- โรงงานบรรจุภัณฑ์ใช้ CURD และสืบทอด BaseService
-
baseInsert() และ baseUpdate() จะกรองฟิลด์ที่มีค่าว่างโดยอัตโนมัติ
- สร้างคลาสเอนทิตีโดยอัตโนมัติตามฐานข้อมูล
- เรียกใช้เมธอด org.mybatis.generator.plugin.MyBatisTest.main()
- รีซอร์สคอนฟิกูเรชันเฉพาะ/config/generator-config.xml
- บันทึกจะถูกจัดเก็บเป็นประจำทุกวัน การกำหนดค่าเฉพาะอยู่ใน resources/config/logback-spring.xml
- สร้างเอกสารฐานข้อมูลโดยอัตโนมัติตามฐานข้อมูล
- เรียกใช้เมธอด org.screw.ScrewTest.testScrew()
ส่วนหน้า:
วิว:
การแนะนำ
- โปรเจ็กต์ที่สร้างขึ้นจาก vue cli
- อินเทอร์เฟซ UI: องค์ประกอบ-ui
- คำขอเครือข่าย: axios
- วิธีการโทรทั่วโลก
this.$axios({ url: '', data: {}, success(data) {} });- url: ต้องใช้เฉพาะที่อยู่หลังชื่อโดเมนเท่านั้น
- สำเร็จ: การโทรกลับต้องจัดการเฉพาะกรณี ที่รหัสคือ 200 เท่านั้น
- ตัวแปรโกลบอลและวิธีการอยู่ในไดเร็กทอรี /src/utils
- แทนที่สไตล์ element-ui ในไฟล์ /src/assets/sass/element-variables.scss
- โครงการส่วนใหญ่มีความคิดเห็น
การกำหนดค่าพื้นฐาน
- ร่วมมือกับแบ็กเอนด์เพื่อใช้การกำหนดเส้นทางแบบไดนามิก: กรอกเส้นทางเส้นทางในแบบฟอร์มการจัดการฟังก์ชัน เส้นทางรูทเริ่มต้นคือ /src/views/main/**/*/Index.vue/
- ไฟล์ .env.production/development และ vue.config.js เป็นไฟล์คอนฟิกูเรชัน
ส่วนประกอบที่ใช้กันทั่วไปในแพ็คเกจ
- กล่องโต้ตอบ: กล่องป๊อปอัป
- รายละเอียด: แสดงข้อมูลในรูปแบบชื่อเรื่อง + เนื้อหา
- แบบฟอร์ม: การส่งแบบฟอร์ม
@submit จะต้องจัดการสถานการณ์หลังจากการตรวจสอบแบบฟอร์มเท่านั้น - ดัชนี: กล่องป๊อปอัปธรรมดา
- โต๊ะ: โต๊ะ
- ตัวอย่างการส่งคืนที่ยอมรับโดยแบบฟอร์ม:
{"list":[],"pageNum":1,"pageSize":10} - คำขอข้อมูลตาราง
tableDataRequest: { url: '', data: {} }- url: ที่อยู่ขอ
- ข้อมูล: พารามิเตอร์เพิ่มเติม ใช้กับการค้นหายอดนิยม
- ตารางแสดง
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] ยอมรับอาร์เรย์ --- อ้างถึงตาราง Layui- ฟอร์แมตเตอร์: จอแสดงผลที่ซับซ้อนสามารถส่งคืน dom ได้
รับทราบ
ก่อนอื่นเลย ต้องขอบคุณ springboot , vue , element-ui และโปรเจ็กต์โอเพ่นซอร์สที่ยอดเยี่ยมอื่นๆ ประการที่สอง โปรเจ็กต์นี้อ้างอิงถึงตัวอย่างออนไลน์มากมาย หากคุณเห็นโค้ดที่คล้ายกัน แสดงว่ามีเพียงคำตอบเดียวเท่านั้น
