หลังจากอ่านบทความของ Nuggets ฉันได้สร้างระบบการจัดการแบ็กเอนด์ Vue ตามการสาธิตของผู้อื่น
ที่อยู่บทความต้นฉบับของนักเก็ต
สแต็กเทคโนโลยีที่เกี่ยวข้องในโครงการนี้ ได้แก่ vue vue-cli vue-Router axios Echarts element-ui fastmock webpack
ที่อยู่ GitHub ของโปรเจ็กต์นี้ vue-admin-webapp
ที่อยู่ดำเนินโครงการ
vue-admin-webapp เป็นระบบการจัดการแบ็กเอนด์ที่ใช้ vuecli และ element-ui โดยใช้ fastmock เพื่อจำลองข้อมูล รวมถึงแผนภูมิ ตาราง การอนุญาต Excel ฯลฯ คุณสามารถเพิ่มเส้นทางได้ตามความต้องการของคุณ
# 克隆项目
git clone [email protected]:yqxshiki/vue-admin-webapp.git
# 进入项目目录
cd vue-admin-webapp
# 安装依赖
npm install
# 启动服务
npm run serve
หลังจากเริ่มต้น เบราว์เซอร์ http://localhost:8080 จะเปิดขึ้นโดยอัตโนมัติ และคุณจะเห็นเอฟเฟกต์ของโปรเจ็กต์
ไปที่หน้าเข้าสู่ระบบ หน้านี้ส่วนใหญ่ประกอบด้วยสามส่วน: หน้าแสดงแถบด้านข้างส่วนหัว คุณสามารถคลิกที่แถบด้านข้างเพื่อข้ามไปยังเส้นทาง
รับโทเค็นจาก fastmock เก็บไว้ใน localStorage เมื่อเข้าสู่ระบบ ตั้งค่า global front guard เมื่อเข้าสู่หน้าอื่น คุณสามารถป้อนได้เมื่อมีโทเค็นเท่านั้น ไม่เช่นนั้นจะข้ามไปที่หน้าเข้าสู่ระบบ
router . beforeEach ( ( to , from , next ) => {
const isLogin = localStorage . loginToken ? true : false ;
if ( to . path == "/login" ) {
next ( ) ;
} else {
isLogin ? next ( ) : next ( '/login' )
}
} )
axios . interceptors . request . use ( config => {
// 判断是否有token
if ( localStorage . loginToken ) {
config . headers . Authorization = localStorage . loginToken ;
}
return config ;
} , err => {
// 请求错误
return Promise . reject ( err ) ;
} )
axios . interceptors . response . use ( res => {
return res ;
} ,
err => {
const { status } = err . response ;
if ( status == 401 ) {
// 后台定义401为过期
alert ( "token过期,请重新登录!" )
// 清楚token
localStorage . removeItem ( "loginToken" ) ;
router . push ( "/login" ) ;
} else {
alert ( err . response . data )
}
return Promise . reject ( err ) ;
} ) ;
มีความชำนาญในการใช้ Echart แผนภูมิเส้น แผนภูมิวงกลม แผนภูมิแท่ง แผนภูมิข้อมูลไดนามิก ฯลฯ ดังภาพด้านล่าง
ในโครงการจริง Excel จะทำที่ส่วนหลังเป็นหลัก แน่นอนว่าส่วนหน้าก็สามารถทำได้ แต่ตอนนี้ฉันไม่คิดว่ามันจำเป็น ดังนั้นฉันจึงไม่ได้ทำ หากคุณต้องการทราบข้อมูลเพิ่มเติมคุณสามารถค้นหาได้
นี่คือคำพูดจากการแนะนำอย่างเป็นทางการ
Fastmock ช่วยให้คุณสามารถจำลองคำขอ ajax ออนไลน์ได้อย่างแท้จริงโดยไม่ต้องใช้โปรแกรมแบ็คเอนด์ คุณสามารถใช้ fatmock เพื่อให้บรรลุการสาธิตเอฟเฟกต์ส่วนหน้าอย่างแท้จริงในระยะแรกของโครงการ หรือคุณสามารถใช้ fastmock เพื่อใช้การจำลองข้อมูลระหว่างการพัฒนาเพื่อให้ได้ส่วนหน้า - การแยกส่วนท้ายและส่วนหลัง ก่อนที่จะใช้ fastmock ทีมของคุณอาจใช้โซลูชันต่อไปนี้อย่างน้อยหนึ่งรายการเพื่อใช้การจำลองข้อมูล:
- การจำลองข้อมูลที่เขียนด้วยลายมือในเครื่องจะสร้างโค้ดจำลองจำนวนมากในโค้ดส่วนหน้า
- ใช้ can-fixture ของ mockjs หรือ canjs เพื่อใช้การสกัดกั้น ajax และกำหนดค่ากฎ json ที่จำเป็นในเครื่อง
- แบ็กเอนด์สร้างข้อมูลที่เลเยอร์คอนโทรลเลอร์และส่งคืนไปยังฟรอนต์เอนด์
พอร์ตโครงการ fastmock ของฉัน