XanaduCompany

1. นำโซลูชั่นทางเทคนิคมาใช้

เทคโนโลยีหลักที่ใช้ในระบบนี้มีดังนี้:

วิว3

1. Vue.js
2. เอเลเมนท์ พลัส
3. axios
4. node.js
5. สืบเนื่อง
6. โคอา
7. ฐานข้อมูล MySQL

อัปเดต 11.19.2022

Vue3 สาขาใหม่ ซึ่งเป็นสาขาเริ่มต้นที่พัฒนาโดย zerotower69

• อัปเดตเป็น Vue3 + TS + Element Plus

อัปเดต 2023.03.15

vue3 เป็นสาขาหลัก สำหรับเวอร์ชัน vue2 โปรดดูที่สาขา vue2 ในปัจจุบันมีข้อผิดพลาดมากมาย สำหรับข้อบกพร่องบางประการ โปรดอ้างอิงถึงผลกระทบของเวอร์ชัน vue2

2. สภาพแวดล้อมการพัฒนา

1. ระบบปฏิบัติการ: วินโดวส์ 10
2. ฐานข้อมูล: MySQL (v5.7.7)
3. เว็บเซิร์ฟเวอร์: Nginx
4. เครื่องมือในการพัฒนา: Webstorm
5. สภาพแวดล้อมพื้นฐานของระบบ: Node.js
6. เบราว์เซอร์: Google Chrome

3. คำอธิบายแคตตาล็อก

ผู้ดูแลระบบ --- การจัดการแบ็กเอนด์

เว็บ --- จอแสดงผลแผนกต้อนรับ

เซิร์ฟเวอร์ --- บริการแบ็กเอนด์

4. เข้าโครงการ

ระบบออนไลน์เพื่อแสดง

1. การแสดงผลพอร์ทัลองค์กร (https://xanadu.aerowang.cn/)

2. การจัดการพื้นหลังของระบบ (https://xanadu.aerowang.cn/admin)

   • บัญชี: youke รหัสผ่าน: a123456

   • ผู้ดูแลระบบ: ผู้ดูแลระบบ รหัสผ่าน: 654321

     ยังสามารถลงทะเบียนได้ที่

5. วิธีการรันในเครื่อง

หากมีปัญหา โปรดดูที่สคริปต์ใน package.json คุณจะเห็นว่าคำสั่ง dev และที่กำลังรันอยู่ถูกสร้างขึ้นโดยไม่มีอะไรเลย หากไม่สามารถดำเนินการคำสั่งนั้นได้ จะต้องไม่ถูกกำหนดไว้!

1. เริ่มแบ็กเอนด์ก่อน (ใต้ไดเร็กทอรีเซิร์ฟเวอร์)

npm install

npm run start(本地启动)

或者 npm run dev(实时监听改动重启，边改边跑) 需要全局安装 nodemon（任何说不是xxx命令的错误都是没有全局安装，请先安装后再运行）

2. เริ่มต้นส่วนหน้า (เว็บหรือไดเร็กทอรีผู้ดูแลระบบ)

 # 1.安装
npm install
   #又或者
pnpm install
# 2.启动
npm run serve 
   #又或者
pnpm serve
# 3.打包
npm run build 
 #又或者
pnpm build
# 4.清除 node_modules
npm run clear 
  # 又或者
pnpm clear #由于rmdir 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

โปรดติดตั้งคำสั่ง pnpm ทั่วโลกล่วงหน้า

npm i pnpm -g

6. นักเทียบท่า

Docker ปรับใช้งานอัตโนมัติเพียงคลิกเดียว

คำสั่ง

 # 主目录下
docker compose up -d

# 即可访问

จำเป็นต้องเปลี่ยนไฟล์ต่อไปนี้:

• ./admin/.env.production

  VUE_APP_BASE_API = '你自己的域名:3000/api/v1'

• ./admin/vue.config.js

  line.27 publicPath: '/', => publicPath: '/admin/',

• ./server/config/dbinfo.js

  host: "localhost", => host: "xanadu-db",

• ./web/.env.production

  VUE_APP_PRODURL = "你自己的域名/admin/#/login"

• ./web/src/utils/request.ts

  baseURL: '/api' =>你自己的域名:3000/api

นักเทียบท่าไม่ได้ใช้เวอร์ชัน go

7. คำแนะนำเพิ่มเติม

เนื่องจากระบบนี้ได้ปรับทรัพยากรการโหลด CDN ให้เหมาะสมแล้ว คุณต้องเชื่อมต่อกับเครือข่ายที่ค่อนข้างรวดเร็วและเสถียรเพื่อรันระบบนี้ ไม่เช่นนั้นข้อผิดพลาดบางอย่างจะปรากฏบนหน้าระบบ!

อัปเดต 11.19.2022

การอ้างอิงทรัพยากรบางส่วนมาจาก cdn.jsdelivr.net การเข้าถึงในปัจจุบัน (11.19.2022) อาจช้าเล็กน้อย หากคุณสนใจ คุณสามารถแก้ไขลิงก์อ้างอิงได้ด้วยตนเอง

อัปเดต 2023.03.15

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

2. โปรดตรวจสอบเวอร์ชันโหนดของคุณอย่างเคร่งครัด จากปัญหาที่ถูกค้นพบ ในสภาพแวดล้อม Windows ขอแนะนำให้ใช้โหนด 14 เวอร์ชันที่ใหญ่กว่า นอกจากนี้ ไฟล์กลุ่มของกลุ่ม QQ ยังมีแพ็คเกจที่บีบอัดของแพ็คเกจที่ต้องพึ่งพา ซึ่งสามารถใช้เป็นได้ ลองดู ระบบ mac 14 และ 16 ใช้ได้ทั้งคู่ (ทำงานบน APPLE ที่สูงกว่า M1)

3. หากมีการรายงานข้อผิดพลาดในการเชื่อมต่อฐานข้อมูล โปรดตรวจสอบก่อนว่าการกำหนดค่าของ dbinfo.js ในไดเร็กทอรีการกำหนดค่าภายใต้เซิร์ฟเวอร์ (โหนดแบ็กเอนด์) และการกำหนดค่าฐานข้อมูลของคุณเองนั้นถูกต้องหรือไม่

4. ก่อนที่จะรันโปรเจ็กต์ โปรดตรวจสอบให้แน่ใจว่าได้ติดตั้ง npm เพื่อติดตั้งการขึ้นต่อกันที่เกี่ยวข้อง และไปที่ pcweb end, management end และ backend เพื่อดูไฟล์ package.json ที่เกี่ยวข้อง ดูที่ส่วน สคริปต์ และยืนยันว่า คำสั่งที่คุณต้องการเรียกใช้ถูกกำหนดไว้แล้ว ไม่มีการกำหนดคำสั่ง dev หากคุณต้องการดำเนินการ npm run dev ข้อผิดพลาดจะถูกรายงานอย่างแน่นอน และข้อความแสดงข้อผิดพลาดแรกหมายความว่า dev ไม่ได้อยู่ในสคริปต์ อย่างไรก็ตาม คุณจะเห็นคำหลักสองคำ package.json และสคริปต์ปรากฏขึ้น บรรทัดแรกในรายงานข้อผิดพลาดของคุณต้องเป็นคำสั่งที่ไม่ได้กำหนดไว้ถูกดำเนินการ

5. สำหรับสคริปต์ฐานข้อมูล (initial_data.sql) โปรดดูกลุ่ม QQ: 434063310 (เจ้าของกลุ่มนี้ไม่ใช่ผู้เขียนต้นฉบับ แต่เก็บรักษาไว้โดยสมัครใจ)

6. โหนดแนะนำให้ใช้เครื่องมือการจัดการเวอร์ชัน nvm ผู้ใช้ Windows สามารถใช้ .exe เพื่อติดตั้งได้โดยตรงโดยไม่ต้องกังวล

brew install nvm

หลังจากติดตั้ง nvm คุณสามารถใช้มันเพื่อสลับเวอร์ชันของโหนดได้ nvm install xxx คือคำสั่งการติดตั้ง อย่าลืมใช้ nvm ใช้ xxx เพื่อสลับเป็นเวอร์ชันที่คุณต้องการใช้ทุกครั้งที่คุณสลับ

7. โครงการเว็บใช้ CDN หากคุณไม่ต้องการใช้ โปรดแสดงความคิดเห็นในการกำหนดค่าภายนอก หากใช้ โปรดตรวจสอบว่าลิงก์ CDN ที่เกี่ยวข้องสามารถเข้าถึงได้ตามปกติหรือไม่ เบราว์เซอร์และคุณสามารถตรวจสอบและกำหนดค่าภายนอกของคุณได้

8. เกี่ยวกับการใช้พรอกซี โปรดตรวจสอบให้แน่ใจว่าได้กำหนดค่าพร็อกซีย้อนกลับใน nginx ในสภาพแวดล้อมการใช้งานจริง

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

npm i pm2 -g

หากคุณต้องการจัดแพ็คเกจจริงๆ โปรดตรวจสอบบทความเกี่ยวกับ Zhihu คุณภาพของ Baidu ไม่ดี แต่แนวคิดของการบรรจุที่นี่แตกต่างจากของ java แม้ว่าคุณจะใช้ webpack สำหรับการบรรจุโค้ดของคุณยังคงเป็น js แทนที่จะถูกแปลงเป็น bytecode โดยคอมไพเลอร์เช่น java สาระสำคัญของโหนดคือ c ++ (เพราะโหนดพูดอย่างเคร่งครัด รันไทม์ JavaScript ไม่ใช่ภาษาใหม่ เพียงแต่ว่าเคอร์เนล V8 ที่เขียนด้วยภาษา C++ จัดเตรียม API ของโหนดเหล่านี้ไว้ ภาษาจริงที่รับผิดชอบในการโต้ตอบกับระบบคือ C++ ภาษาที่คุณใช้ยังคงเป็น JavaScript

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

11. สำหรับปัญหาเส้นทางรูปภาพ โปรดลองใช้บริการ CDN ของคุณเองหรือวางทรัพยากรบนเซิร์ฟเวอร์ของคุณเองเพื่อแทนที่เส้นทางรูปภาพที่มีอยู่แล้วในฐานข้อมูล คุณสามารถใช้คำสั่ง SQL ต่อไปนี้:

 UPDATE [tablename] SET [fieldname] = REPLACE([fieldname], ' locolhost:3000 ' , ' [yourHOST] ' )

ทรัพยากรรูปภาพไม่จำเป็นต้องใช้พร็อกซีย้อนกลับ nginx คุณสามารถอ้างอิงถึงการกำหนดค่าต่อไปนี้:

 location ~ .*.(gif|jpg|jpeg|png|bmp|swf|webp|jfif)$
    {
        #图片在server/static里，改写root路径就可以了！
        root /www/wwwroot/zero/company/server/static;
        expires      30d ;
        error_log /dev/null;
        access_log /dev/null;
    }

12. เมื่อคุณพบข้อความแสดงข้อผิดพลาด อย่าอารมณ์เสียหากเห็นเป็นภาษาอังกฤษ ดูที่ประโยคแรกและประโยคสุดท้าย ตัวอย่างเช่น หากมี "คีย์ต่างประเทศ" ในข้อผิดพลาดแบ็กเอนด์ จะต้องมีปัญหากับคีย์ต่างประเทศ โปรดตรวจสอบคำจำกัดความของโมเดลหรือคำจำกัดความของฐานข้อมูลหรือข้อมูล ไม่ได้กำหนด Front-end Vue ปัญหานี้ส่วนใหญ่เกี่ยวข้องกับการใช้ cdn ที่ไม่ถูกต้อง ความคิดเห็น vue.config.js (vue3) มีแง่ดีอยู่แล้ว หากมีข้อผิดพลาดในภาษาอังกฤษมากเกินไป อย่าอ่าน การเปิด Youdao และแปลได้ไม่ใช่เรื่องยาก

13. แนะนำให้ถามคำถามเฉพาะในกลุ่ม หากต้องการถามวิธีติดตั้ง nginx แนะนำให้ไปที่ google หรือ bing.com ก่อน (หากคุณรำคาญ nginx เกินไปและไม่อยากยุ่งกับมัน คุณยังสามารถใช้เจดีย์หลอกได้ แต่ขอแนะนำให้คุณดู nginx หลังจากการปรับใช้ เรียนรู้ที่จะเรียนรู้) เหตุผลที่ Baidu ไม่แนะนำก็คือเนื้อหาส่วนใหญ่ที่ดึงมานั้นเป็น CSDN และคุณภาพของเนื้อหานั้นไม่สม่ำเสมอ ซึ่งไม่ดีสำหรับผู้เริ่มต้น สิ่งที่โพสต์ในบล็อกอาจไม่ถูกต้องทั้งหมด หากคุณเป็นมือใหม่ ควรอดทนและอ่านเอกสาร หากคุณทนไม่ไหว สถานี B ก็เป็นสถานที่เรียนรู้ที่ดีเช่นกัน สิ่งที่เกี่ยวข้องในโครงการนี้ยังคงเรียบง่ายมาก และเอกสารประกอบและ Bilibili สามารถตอบคำถามส่วนใหญ่ของคุณได้จริง บางทีเมื่อพูดถึงเรื่องนี้ บางคนรู้สึกว่าเราไม่ต้องการให้ใครถามคำถาม แต่หากคำถามของคุณใหญ่เกินไปและคุณไม่สามารถผ่านการแนะนำการติดตั้งได้ ผู้คนส่วนใหญ่จะไม่อยากตอบ แต่พวกเขาไม่รู้ว่าจะตอบคุณจากมุมไหน มีหลายสิ่งที่เกินกว่าจะอธิบายได้ ดังนั้นจึงเป็นการดีกว่าที่จะเพิกเฉยต่อมัน

14. หากคุณต้องการเพิ่มฟังก์ชั่นใหม่ แนะนำให้อ่านโค้ดก่อน จริงๆ แล้วโค้ดนั้นไม่ยากเลย การออกแบบฟังก์ชั่นไม่มีคุณสมบัติพิเศษ ไม่สามารถคัดลอกส่วนนี้ของโค้ดได้ แต่เป็นเพียงการสร้างต้นฉบับของคุณเองเท่านั้น หากคุณไม่เข้าใจส่วนของโค้ดคุณสามารถโพสต์รูปภาพเพื่อถามคำถามได้ ( อย่าลืมโพสต์รูปภาพ ) หากคุณไม่ดูโค้ดสักพักคุณจะลืมการโพสต์รูปภาพบางส่วน การถามคำถามสามารถมั่นใจได้ว่าความสับสนของคุณจะได้รับคำตอบทันเวลา

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

7. สุดท้ายและสุดท้าย

อย่าลืมให้ดาว ☺(´･ᴗ･`)~ กลุ่มใหม่: 434063310. (ไม่รับประกันการตอบกลับทันเวลา)

8. คำอธิบายการอัปเดตล่าสุดของ Zerotower69

1. ความตั้งใจดั้งเดิมของโปรเจ็กต์คือการให้ทุกคนมีการเปรียบเทียบไวยากรณ์ของเวอร์ชัน vue3 ดังนั้นฟังก์ชันมากมายจึงสอดคล้องกับสาขา vue2 เนื่องจากข้อบกพร่องเป็นสิ่งที่หลีกเลี่ยงไม่ได้ในการพัฒนา โปรดอ้างอิงถึงสาขา vue2 หรือปรับใช้การแก้ไขเวอร์ชันหากจำเป็น 2. ฉันไม่รับผิดชอบต่อประสบการณ์ของผู้อื่น หากคุณมีข้อบกพร่องใดๆ คุณสามารถถามคำถามฉันได้ แต่ฉันไม่ใช่ครู ครูที่คุณต้องการอาจเป็น:

• บทช่วยสอนสามเณร
• ปิง
• บิลิบิลิ
• vue3 หวังว่าคุณจะอ่านเอกสารนี้โดยละเอียด อ้างอิงถึงแหล่งการเรียนรู้คุณภาพสูงกว่า และอ่าน csdn น้อยลงเมื่อเริ่มต้น!