หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

vue2-ผู้ดูแลระบบ

ที่อยู่ประสบการณ์: vue2-admin
บัญชี: ผู้ดูแลระบบ รหัสผ่าน: ผู้ดูแลระบบ
หากคุณพบข้อบกพร่องหรือมีการใช้งานที่ดีขึ้น โปรดติดต่อฉัน (คุณสามารถส่งอีเมลถึงฉันเพื่อสอบถามหากคุณไม่เข้าใจโค้ด) อีเมล์: [email protected]

ที่อยู่ GitHub เวอร์ชัน vue2: vue2-admin
นอกจากนี้ยังมีคลังสินค้า gitee เพียงเปลี่ยน github ในลิงก์ด้านบนเป็น gitee

ประกอบด้วยคุณสมบัติ

1. แอนิเมชั่นการโหลดหน้าจอแรก
2.แพ็คเกจ axios
การควบคุมการอนุญาต 3.router
4. สร้างแถบนำทางด้านข้างแบบไดนามิกตามสิทธิ์
5. ตรรกะการเข้าสู่ระบบ
6. เค้าโครงหน้าแดชบอร์ด
8. ส่วนประกอบที่ยึดตามการห่อหุ้มรองของ el-tooltip จะแสดงคำแนะนำเครื่องมือเมื่อเกินความยาวเท่านั้น และสนับสนุนคุณลักษณะทั้งหมดของ el-tooltip -ตารางและการสนับสนุนเพจ 10. องค์ประกอบการเลือกไอคอนตามการห่อหุ้มรองของไอคอน el-icon 11. ฟังก์ชั่นการรีเฟรชแบบไร้สัมผัสของโทเค็น

เทมเพลตพื้นหลัง vue2+องค์ประกอบ+axios

มันไม่ได้ห่อหุ้มฟังก์ชันมากเกินไปและจัดเตรียมเฉพาะเฟรมเวิร์กเพจพื้นฐานและโครงสร้างการกำหนดเส้นทางเท่านั้น ฟังก์ชันที่เหลือจะปล่อยให้ผู้ใช้พัฒนาเองเท่านั้น

แนะนำการจำลองเพื่ออำนวยความสะดวกในการพัฒนาส่วนหน้าและส่วนหลังแยกจากกัน

เกี่ยวกับ mockjs

เพื่อแสดงให้เห็นถึงผลลัพธ์ ฉันยังใช้ mock.js เพื่อสร้างข้อมูลการทดสอบในสภาพแวดล้อมที่เป็นทางการ แต่จะไม่ใช้เวอร์ชันอย่างเป็นทางการ!

กรุณาดำเนินการให้หยุดชะงักในระหว่างการใช้งานอย่างเป็นทางการ 

 npm uninstall mockjs --save

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

 npm install mockjs -D

แค็ปซูล axios

ส่วนหัวของคำขอสามารถกำหนดค่าได้ใน utils/request.js และสามารถแก้ไขได้ตามสถานการณ์จริงของคุณ

กำหนดค่า URL พื้นฐานของคำขอใน API ใน utils/setting.js

สภาพแวดล้อมทั่วไปคือ .env

สภาพแวดล้อมการพัฒนาคือ .env.development

สภาพแวดล้อมการผลิตคือ .env.production

ลำดับความสำคัญของตัวแปรสภาพแวดล้อม .env.production = .env.development > .env

มีโฟลเดอร์ api ในไดเร็กทอรี src ของโปรเจ็กต์ จากนั้นสร้างไฟล์ user.js ใหม่อยู่ในนั้น ไฟล์นี้เป็นกระบวนการห่อหุ้มของการเขียน API

ขอแนะนำให้ใส่ประเภทของอินเทอร์เฟซไว้ในไฟล์เดียวกันเมื่อใช้งาน เพื่ออำนวยความสะดวกในการดีบักและการจัดการแบบรวมศูนย์

หากใช้รูปแบบ @/api/user.js รูปแบบนั้นจะถูกนำมาใช้ก่อนเมื่อใช้งาน ตัวอย่างเช่น ก่อนอื่นฉันแนะนำไฟล์ใน @/component/login.vue 

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
}

การควบคุมการอนุญาตของเราเตอร์

สร้างเส้นทางแบบไดนามิกตามข้อมูลที่ส่งคืนโดยอินเทอร์เฟซ และสร้างแถบนำทางตามข้อมูลอินเทอร์เฟซ

มีตัวป้องกันเส้นทางใน @/router/beforEach.js มีการเพิ่มตัวป้องกันเส้นทางพื้นฐานแล้ว หากคุณต้องการใช้ฟังก์ชันอื่น ๆ (เช่น: คุณสามารถเข้าสู่บางเพจได้หลังจากดำเนินการบางอย่างเท่านั้น) คุณสามารถเพิ่มได้ ในเราเตอร์/beforEach.js เพิ่มตรรกะที่เกี่ยวข้องให้กับฟังก์ชัน Selfexecution

ข้อความสร้างการนำทางด้านข้างตามเส้นทาง

กำหนดค่าไอคอน ชื่อ และการซ่อนแถบด้านข้างในแอตทริบิวต์ meta ใน @/router/beforEach.js เมื่อซ่อน:จริง แถบนำทางด้านข้างจะไม่แสดง

สีของแถบด้านข้างสามารถแก้ไขได้โดย aside_color และ aside_rext_color ของธีมใน utils/setting

วูเอ็กซ์

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

เพื่อป้องกันการสูญเสียการรีเฟรชข้อมูล vuex ให้แนะนำ vuex-persistedstate 

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

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

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ;

การควบคุมปริมาณปุ่ม

เพิ่มโค้ดควบคุมปริมาณปุ่มพื้นฐานแล้ว และสามารถผูก v-preventReClick เข้ากับปุ่มได้ 

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} )

หน้ารวมเริ่มต้น

หน้าเข้าสู่ระบบ

หน้าการดึงรหัสผ่าน

404 หน้า

หน้าแรก

การเตรียมการสำหรับการใช้งาน 

 npm uninstall mockjs --save

npm install mockjs -D

npm install

เริ่มโครงการ 

 npm run serve

บรรจุภัณฑ์โครงการ 

 npm run build

การจัดรูปแบบโค้ด 

 npm run lint

นักเทียบท่า 

 docker build -t vue-admin . --no-cache
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด