XanaduCompany

1. Mengadopsi solusi teknis

Teknologi utama yang digunakan dalam sistem ini adalah sebagai berikut:

Vue3

1. Vue.js
2. Elemen Ditambah
3. aksio
4. node.js
5. Sekuel
6. Koa
7. basis data MySQL

Pembaruan 2022.11.19

Cabang baru Vue3, sudah menjadi cabang default yang dikembangkan oleh zerotower69

• Diperbarui ke Vue3 + TS + Element Plus

Pembaruan 2023.03.15

vue3 adalah cabang utama. Untuk versi vue2, silakan merujuk ke cabang vue2. Cabang ini saat ini memiliki banyak kekurangan, silakan merujuk ke efek versi vue2.

2. Lingkungan pembangunan

1. Sistem operasi: Windows 10
2. Basis Data: MySQL (v5.7.7)
3. Server web: Nginx
4. Alat pengembangan: Webstorm
5. Lingkungan dasar sistem: Node.js
6. Peramban: Google Chrome

3. Deskripsi katalog

admin---manajemen backend

web---tampilan meja depan

server---layanan backend

4. Masuk ke proyek

Sistem sedang online untuk ditampilkan

1. Tampilan portal perusahaan (https://xanadu.aerowang.cn/)

2. Manajemen latar belakang sistem (https://xanadu.aerowang.cn/admin)

   • Akun: youke, kata sandi: a123456

   • Administrator: admin Kata sandi: 654321

     Anda juga dapat mendaftar di

5. Bagaimana menjalankannya secara lokal

Jika ada masalah, lihat skrip di package.json. Anda dapat melihat bahwa perintah dev dan running dibuat dari ketiadaan.

1. Mulai backend terlebih dahulu (di bawah direktori server)

npm install

npm run start(本地启动)

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

2. Mulai front end (direktori web atau admin)

 # 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 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

Silakan instal perintah pnpm secara global terlebih dahulu

npm i pnpm -g

6. buruh pelabuhan

Penerapan otomatis satu klik Docker

Memesan

 # 主目录下
docker compose up -d

# 即可访问

File-file berikut perlu diubah:

• ./admin/.env.production

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

• ./admin/vue.config.js

  baris.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

buruh pelabuhan tidak menggunakan versi go

7. Instruksi tambahan

Karena sistem ini telah mengoptimalkan sumber daya pemuatan CDN, Anda harus terhubung ke jaringan yang relatif cepat dan stabil untuk menjalankan sistem ini, jika tidak, beberapa kesalahan akan muncul di halaman sistem!

Pembaruan 2022.11.19

Beberapa referensi sumber daya berasal dari cdn.jsdelivr.net. Saat ini (2022.11.19) aksesnya mungkin agak lambat. Jika Anda tertarik, Anda dapat memodifikasi sendiri tautan referensi tersebut.

Pembaruan 2023.03.15

1. Pastikan untuk menjalankan cd ke direktori masing-masing. Tepatnya, sistem ini dibagi menjadi tiga proyek: manajemen front-end, back-end, dan front-end.

2. Harap periksa dengan teliti versi node Anda. Mengingat masalah yang ditemukan, di lingkungan Windows, disarankan untuk menggunakan versi node 14 yang lebih besar; selain itu, file grup grup QQ menyediakan paket terkompresi dari paket dependen, yang juga dapat digunakan sebagai coba; sistem mac 14 dan 16 keduanya OK (berjalan di APPLE di atas M1).

3. Jika dilaporkan kesalahan koneksi database, harap periksa terlebih dahulu apakah konfigurasi dbinfo.js di direktori config di bawah server (backend node) dan konfigurasi database Anda sendiri sudah benar.

4. Sebelum menjalankan proyek, pastikan untuk npm install untuk menginstal dependensi yang relevan, dan buka ujung pcweb, ujung manajemen, dan ujung belakang untuk melihat file package.json masing-masing, lihat bagian skrip , dan konfirmasikan bahwa perintah yang ingin Anda jalankan telah ditentukan. Tidak ada perintah dev yang ditentukan. Jika Anda ingin menjalankan npm run dev , kesalahan pasti akan dilaporkan, dan pesan kesalahan pertama berarti dev tidak ada dalam skrip . Baris pertama dalam laporan kesalahan Anda harus berupa perintah yang tidak ditentukan telah dijalankan.

5. Untuk skrip database (initial_data.sql), silakan merujuk ke grup QQ: 434063310 (pemilik grup ini bukan penulis asli, tetapi mengelolanya secara sukarela).

6. Node merekomendasikan penggunaan alat manajemen versi nvm. Pengguna Windows dapat langsung menggunakan .exe untuk menginstal tanpa khawatir, pengguna Mac dapat menggunakan brew untuk menginstal.

brew install nvm

Setelah menginstal nvm, Anda dapat menggunakannya untuk mengganti versi node. nvm install xxx adalah perintah instalasi. Ingatlah untuk menggunakan nvm use xxx untuk beralih ke versi yang ingin Anda gunakan setiap kali Anda beralih.

7. Proyek web menggunakan CDN. Jika Anda tidak ingin menggunakannya, silakan beri komentar pada logika konfigurasi eksternal; jika digunakan, harap periksa apakah tautan CDN yang relevan dapat diakses secara normal browser dan Anda dapat memeriksanya dan memperbaikinya.

8. Mengenai penggunaan proxy, pastikan untuk mengkonfigurasi reverse proxy di nginx di lingkungan produksi.

9. Saat ini tidak ada solusi pengemasan yang cocok untuk node back-end. Umumnya, server langsung menggunakan pm2 untuk memulai layanan node. Silakan instal pm2 di server dan gunakan:

npm i pm2 -g

Jika memang perlu mengemasnya, silakan baca artikel di Zhihu. Kualitas Baidu kurang bagus. Tetapi konsep pengemasan di sini berbeda dengan java. Bahkan jika Anda menggunakan webpack untuk pengemasan, kode Anda tetap js alih-alih diubah menjadi bytecode oleh compiler seperti java a Runtime JavaScript bukanlah bahasa baru. Hanya saja kernel V8 yang ditulis dalam C++ menyediakan API node ini. Bahasa sebenarnya yang bertanggung jawab untuk berinteraksi dengan sistem adalah C++.

10. Pemula harap mengetahui tujuan pengemasan front-end. Kode yang sedang kita tulis tidak dapat dijalankan langsung oleh browser. Kita perlu mengubah kode kita ke dalam format yang dapat dikenali dan dijalankan oleh browser adalah js ke js lainnya. Proses standardisasi benar-benar berbeda dari pengemasan dalam arti back-end.

11. Untuk masalah jalur gambar, silakan coba gunakan layanan CDN Anda sendiri atau letakkan sumber daya di server Anda sendiri untuk menggantikan jalur gambar yang sudah ada di database.

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

Sumber daya gambar tidak memerlukan proksi terbalik nginx. Anda dapat merujuk ke konfigurasi berikut:

 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. Saat menemui pesan error, jangan kesal jika melihatnya dalam bahasa Inggris. Misalnya jika ada "kunci asing" di kesalahan backend, pasti ada masalah dengan kunci asing. Silakan periksa definisi model atau definisi database atau data. Vue front-end tidak terdefinisi. Masalah ini sebagian besar terkait dengan penggunaan cdn yang salah. Komentar vue.config.js (vue3) sudah ada instruksinya. Jika terlalu banyak kesalahan dalam bahasa Inggris, jangan dibaca. Tidak sulit untuk membuka Youdao (lebih disarankan Google) dan menerjemahkannya.

13. Disarankan untuk menanyakan pertanyaan spesifik di grup. Jika ingin bertanya cara install nginx disarankan ke google atau bing.com terlebih dahulu (Jika terlalu kesal dengan nginx dan tidak mau ambil pusing, Anda juga dapat menggunakan penerapan pagoda bodoh, tetapi tetap disarankan agar Anda melihat nginx setelah konfigurasi, pelajari untuk mempelajarinya). Alasan mengapa Baidu tidak merekomendasikannya adalah karena sebagian besar konten yang diambil adalah CSDN, dan kualitas kontennya tidak merata, sehingga tidak baik untuk pemula. Hal-hal yang diposting di blog mungkin belum semuanya benar. Jika Anda seorang pemula, sebaiknya bersabar dan membaca dokumentasinya. Jika Anda tidak tahan, stasiun B juga merupakan tempat yang baik untuk belajar. Hal-hal yang terlibat dalam proyek ini masih sangat sederhana, dan dokumentasi serta Bilibili sebenarnya dapat menjawab sebagian besar pertanyaan Anda. Mungkin dalam hal ini, sebagian orang merasa kita tidak ingin orang bertanya. Tetapi jika pertanyaan Anda terlalu besar dan Anda bahkan tidak dapat lulus pengenalan instalasi, kebanyakan orang tidak akan mau menjawabnya, tetapi mereka benar-benar tidak tahu dari sudut mana harus menjawab Anda. jadi lebih baik abaikan saja.

14. Jika Anda perlu menambahkan fungsi baru, disarankan untuk membaca kodenya terlebih dahulu. Kode tersebut sebenarnya tidak sulit. Desain fungsional tidak memiliki fitur khusus. Tidak mungkin untuk menyalin bagian kode ini. Ini hanya dapat dibuat oleh Anda sendiri. Jika Anda tidak memahami bagian kodenya, Anda dapat memposting gambar untuk mengajukan pertanyaan ( pastikan untuk memposting gambar ). mengajukan pertanyaan dapat memastikan kebingungan Anda dapat terjawab tepat waktu.

Saya berharap semua orang tidak hanya mengetahui cara menggunakan proyek ini dari dokumentasi, tetapi juga memperoleh keterampilan yang relevan sehingga mereka dapat membuat kemajuan di front-end. Melihat ini, kenapa kamu tidak memberiku bintang? Tinggalkan bintangmu untuk pelacur lain (anjing.)

7. Yang terakhir dan terakhir

Ingatlah untuk memberi bintang ღ(´･ᴗ･`)~ Grup baru: 434063310. (Ketepatan waktu balasan tidak dijamin)

8. Deskripsi pembaruan terakhir Zerotower69

1. Tujuan awal dari proyek ini adalah agar setiap orang memiliki perbandingan sintaksis versi vue3, sehingga banyak fungsi yang konsisten dengan cabang vue2. Karena bug tidak bisa dihindari dalam pengembangan, silakan merujuk ke cabang vue2 atau terapkan modifikasi versi jika perlu. 2. Saya tidak bertanggung jawab atas pengalaman orang lain. Jika Anda memiliki bug, silakan bertanya kepada saya, tetapi saya bukan seorang guru. Guru yang Anda butuhkan mungkin:

• Tutorial Pemula
• bing
• bilibili
• vue3 berharap Anda akan membaca dokumen ini secara mendetail, merujuk pada sumber pembelajaran berkualitas lebih tinggi, dan membaca lebih sedikit csdn saat memulai!