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

ที่อยู่อาศัยในฤดูใบไม้ผลิ

บทนำสั้น ๆ

โครงการนี้เป็นโครงการส่วนหน้าตามโต๊ะจัดการที่สร้างขึ้นโดย Vue, Elementui ซึ่งใช้กับแบ็กเอนด์สปริงที่อยู่อาศัย ส่วนใหญ่เพิ่มประสิทธิภาพฟังก์ชั่นการจัดการอำนาจ คลิกที่นี่เพื่อป้อนการสาธิตออนไลน์

การเพิ่มประสิทธิภาพ

  • สิทธิ์เมนูจะถูกสร้างขึ้นโดยอัตโนมัติตามการกำหนดค่าการกำหนดเส้นทางและผู้ดูแลระบบจะถูกซิงโครไนซ์กับฐานข้อมูลพื้นหลัง

  • คุณสามารถเพิ่มแก้ไขและลบการอนุญาตปุ่มภายใต้การอนุญาตของเมนูซิงโครนัส

  • นอกเหนือจากการอนุญาตปุ่มข้อมูลเมตาของการอนุญาตเมนูและการอนุญาตอินเตอร์เฟสจะถูกสร้างขึ้นโดยอัตโนมัติโดยด้านหน้าและด้านหลัง -สิ้นสุด ;

  • เมื่อเพิ่มการอนุญาตปุ่มคำนำหน้าจะถูกสร้างขึ้นโดยอัตโนมัติเฉพาะชิ้นส่วนที่จำเป็นเพื่อป้องกันรูปแบบจากความวุ่นวาย

  • เพิ่มฟังก์ชั่นของการอนุญาตของมารดาและการอนุญาตปุ่มที่เกี่ยวข้องกับการอนุญาตอินเตอร์เฟสที่เกี่ยวข้อง

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

  • กำหนดระดับของคลาสการโทรอินเตอร์เฟส API ซึ่งสอดคล้องกับระดับของหมวดหมู่อินเตอร์เฟสพื้นหลังกำจัดความซ้ำซ้อนและปรับปรุงการใช้รหัสซ้ำ

  • เมื่อซ่อมแซมข้อผิดพลาดของส่วนประกอบ el-scrollbar : เมื่อเบราว์เซอร์ลดลงในระดับหนึ่งแถบม้วนดั้งเดิมที่ซ่อนอยู่เดิมจะถูกเปิดเผย

การเตรียมสภาพแวดล้อมการพัฒนา

การเตรียมสภาพแวดล้อม node.js

แนะนำให้ใช้เวอร์ชัน Node.js ให้ใช้ V112 และรุ่นอื่น ๆ ดูเหมือนจะดี

ภายใต้ Linux และ MacOS ขอแนะนำให้ใช้ NVM สำหรับการจัดการเวอร์ชัน Node.js

ใช้ NVM-Windows เป็นตัวอย่าง (Git Bash) ภายใต้ Windows: Run) :: 

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

การตรวจจับและดำเนินการโครงการ

หมายเหตุ: ก่อนที่จะเรียกใช้ส่วนหน้าของแพลตฟอร์มการจัดการควรใช้พื้นหลังของการสิ้นสุดบริการก่อน 

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

หมายเหตุ: หากมีข้อผิดพลาดเมื่อดำเนินการคำสั่ง npm install และข้อมูลข้อผิดพลาดคือ npm install npm ERR! Failed at the [email protected] install script. 

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

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

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

หาก npm install ดำเนินการเรียบร้อยแล้วจะไม่มีข้อผิดพลาดและคุณสามารถรันต่อไปได้ 

$ npm run serve

หลังจากนั้นครู่หนึ่งเบราว์เซอร์จะเปิดโดยอัตโนมัติและข้ามไปที่ที่อยู่ http://localhost:9527/login

หมายเหตุ: พื้นหลังของเซิร์ฟเวอร์จะต้องเริ่มต้นก่อนที่จะเข้าสู่ระบบ

ไฟล์การกำหนดค่าสภาพแวดล้อม

Vue-Element-Admin รองรับการกำหนดค่าหลายด้านและรูปแบบชื่อไฟล์การ git ค่าสิ่งแวดล้อมคือ .env.[环境名] .local

หมายเหตุ: นอกเหนือจากการกำหนดค่าสภาพแวดล้อมการพัฒนา ENV .env.development และ .env.development.local ไฟล์การกำหนดค่าสภาพแวดล้อมอื่น ๆ จำเป็นต้องตั้งค่า NODE_ENV = production .env VUE_APP_BASE_API .local ในสภาพแวดล้อม

หมายเหตุ: หากคุณต้องการกำหนดตัวแปรสภาพแวดล้อมอื่น ๆ ในไฟล์การกำหนดค่าคุณต้องเริ่มต้นด้วย VUE_APP_ และรับในรหัสผ่าน process.env.VUE_APP_xxxx ในรหัส

การปรับใช้แพ็คเก็ต

หมายเหตุ: ก่อนการบรรจุโปรดยืนยันว่า npm install และ npm run serve สามารถใช้งานได้ตามปกติ

คำสั่ง Packing คือ: npm run build -- --mode <环境名> 

$ npm run build -- --mode vm-centos7

หลังจากดำเนินการคำสั่งเรียบร้อยแล้วไฟล์ผลลัพธ์แพ็คเกจจะอยู่ในไดเรกทอรี DIST

หมายเหตุ: การบีบอัดรหัส compression-webpack-plugin สามารถใช้เวอร์ชันก่อนหน้า V6 เท่านั้นและไม่สามารถใช้เวอร์ชัน V7 ล่าสุดได้มิฉะนั้นดูเหมือนว่าจะรายงานข้อผิดพลาด

นอกจากนี้โหมดการกำหนดเส้นทางของโครงการนี้ได้รับการกำหนดค่าเป็นโหมด history.pushState ในเวลาเดียวกันเพิ่มการกำหนดค่าที่เกี่ยวข้องกับ GZIP (สามารถกำหนดค่าการกำหนดค่าได้เท่านั้น): 

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด