BAI_SHOP

Proyek BAI_SHOP

1. Pengenalan Proyek

Pengenalan proyek: Proyek ini mengadopsi model pengembangan pemisahan front-end dan back-end. vue_api_server adalah file kode back-end, vue_shop adalah file kode pengembangan front-end, dan vue_shop_server adalah file kode produksi front-end , menjalankan vue_shop_server secara langsung akan jauh lebih mudah daripada vue_shop

Tumpukan teknologi proyek front-end	menjelaskan
Lihat	Kerangka kerja progresif untuk membangun antarmuka pengguna
Vue-router	vue-router adalah pengelola perutean resmi vue.js
Elemen-UI	ElementUI Element adalah pustaka komponen berbasis Vue 2.0 yang disiapkan untuk pengembang, desainer, dan manajer produk. Elemen ini menyediakan sumber daya desain pendukung untuk membantu situs web Anda terbentuk dengan cepat.
aksio	axios adalah pustaka Http berbasis Promise yang dapat digunakan di lingkungan node.js dan browser
grafik	Sederhananya, ECharts adalah plug-in yang digunakan oleh database backend untuk memetakan data ke grafik dalam proses program pengembangan Internet.

Tumpukan teknologi proyek backend	menjelaskan
Node.js	nodejs adalah bahasa yang dikembangkan dalam C++ yang berjalan di sisi server. Ia dapat menulis program latar belakang situs web dan melakukan pengembangan aplikasi sisi server.
Cepat	Express adalah kerangka pengembangan aplikasi web yang minimalis dan fleksibel berdasarkan platform Node.js. Ini menyediakan serangkaian fitur canggih untuk membantu Anda membuat berbagai aplikasi web dan perangkat seluler.
wxya	token web json adalah standar terbuka berbasis json yang diterapkan untuk menyampaikan klaim dalam lingkungan aplikasi web
MySQL	basis data
Sekuel	Sequelize.js menyediakan akses mudah ke database MySQL, MariaDB, SQLite dan PostgreSQL dengan memetakan entri database ke objek, atau objek ke entri database. Singkatnya, ini adalah ORM (Object-Relational-Mapper). Sequelize.js seluruhnya ditulis dalam JavaScript dan cocok untuk lingkungan Node.js.

2. Deskripsi dokumen

1.vue_api_server deskripsi file

• direktori file konfigurasi config
  • file konfigurasi default default.json (yang berisi konfigurasi database, konfigurasi jwt)
• lapisan akses data dao , yang menyimpan operasi penambahan, penghapusan, modifikasi dan kueri database
  • Metode akses database publik disediakan oleh DAO.js
• models menyimpan file model ORM database tertentu
• modulModul proyek modules
  • modul verifikasi izin API authorization.js
  • modul database database.js (pemuatan database didasarkan pada pemuatan perpustakaan nodejs-orm2)
  • passport.js dibangun berdasarkan modul login paspor
  • antarmuka hasil pengembalian terpadu API resextra.js
• Modul pihak ketiga yang menjadi sandaran proyek node_modules
• routes perutean terpadu
  • api menyediakan antarmuka api
  • mapp menyediakan antarmuka aplikasi seluler
  • mweb menyediakan situs web seluler
• lapisan layanan services , kode logika bisnis ditulis di lapisan ini, dan data yang diperoleh melalui antarmuka yang berbeda diubah menjadi data yang diperlukan oleh front-end terpadu
• file entri proyek utama app.js
• file konfigurasi proyek package.json

2.vue_shop deskripsi file

• folder dist Folder yang dihasilkan setelah pengemasan proyek (untuk lingkungan produksi)

  • Berisi css , fonts , img , js , favicon.ico dan index.html
  • Mulai saja server sederhana, pasang proyek, jalankan server, dan akses port default
  • Cara menjalankan proyek vue yang dikemas: https://www.cnblogs.com/zhujiabin/p/10557982.html

• Folder public menyimpan sumber daya statis.

  • Berisi file favicon.ico dan index.html

• Folder src adalah folder tempat penyimpanan program sumber.

  • assets : menyimpan beberapa file sumber daya proyek yang lebih besar, seperti gambar, font, dll.

  • components : menyimpan sub-komponen proyek vue

  • plugins : komponen element-ui yang diperkenalkan oleh proyek

  • router : perutean proyek index.js

  • tools : kelas alat proyek

  • App.vue : komponen root vue

  • main.js : pintu masuk web

• File konfigurasi lainnya

  • .browserslistrc : Konfigurasi ini dapat membagikan browser target dan versi nodejs di alat front-end yang berbeda. Alat ini dapat dikonfigurasi secara otomatis sesuai dengan browser target.
  • .editorconfig : Membantu pengembang menentukan dan memelihara gaya pengkodean yang konsisten di berbagai editor dan IDE
  • .eslintignore : Menyetel file yang tidak diverifikasi oleh eslint ( ESLint adalah alat pemeriksa gaya kode dan aturan tata bahasa JavaScript yang dapat dikonfigurasi dan dapat dikonfigurasi)
  • .eslintrc.js : file konfigurasi eslint
  • .gitignore : Mengatur file yang diabaikan oleh git
  • .prettierrc : Saat kita menggunakan pemformatan klik kanan, secara otomatis akan membantu kita melengkapi simbol. Namun, beberapa simbol akan melaporkan kesalahan sintaksis di eslint, jadi apa yang perlu kita lakukan? Anda dapat mengkonfigurasi file melalui .prettierrc
  • babel.config.js : File konfigurasi Babel ( Babel adalah rantai alat yang terutama digunakan untuk mengubah kode versi ECMAScript 2015+ menjadi sintaksis JavaScript yang kompatibel sehingga dapat berjalan di browser atau lingkungan lain versi saat ini dan yang lebih lama)

3.vue_shop_server deskripsi file

• File proyek lingkungan produksi dikemas oleh vue_shop di folder dist
• Berisi css , fonts , img , js , favicon.ico dan index.html
  • Saat menjalankan proyek, hapus dulu paket dependensi node_modules , lalu masuk ke direktori vue_shop_server dan jalankan npm install untuk mendownload ulang paket dependensi baru.
  • Setelah paket ketergantungan diunduh, jalankan perintah nodemon app.js di jendela dokumen dan kunjungi http://localhost:3000 untuk melihat halaman front-end proyek.
• Server file app.js menjalankan file entri, yang berisi beberapa konfigurasi dasar untuk server.

3. Tindakan pencegahan dalam pengoperasian proyek

1. Unduh dan unzip BAI_SHOP.zip

2. Masuk ke folder vue_api_server/db dan import file database mydb.sql di bawah folder db ke dalam database mysql

3. Setelah data berhasil diimpor, buka file default.json di folder config dan konfigurasikan db_config di dalamnya.

4. Buka jendela perintah doc, masuk ke direktori vue_api_server , dan jalankan perintah npm install untuk memuat dependensi yang diperlukan untuk proyek tersebut.

5. Setelah dependensi dimuat, jalankan nodemon app.js untuk menjalankannya

6. Buka jendela perintah doc baru, masuk ke direktori vue_shop, dan jalankan perintah npm install untuk memuat dependensi yang diperlukan untuk proyek tersebut.

7. Setelah dependensi dimuat, jalankan perintah npm run serve di jendela saat ini untuk menjalankan proyek. Ketika diminta Compiled successfully in xxxxms , buka browser dan kunjungi localhost:8080

8. Catatan Tambahan: Secara umum, proyek dalam mode pengembangan berjalan dengan sukses! Catatan: Anda harus memiliki lingkungan nodejs terlebih dahulu! Dan Anda perlu menginstal kode ketergantungan nodemon secara global: npm install nodemon -g

Jika Anda ingin me-mount suatu proyek dalam mode produksi, silakan lihat deskripsi file vue_shop dan deskripsi file vue_shop_server di atas. Folder dist adalah file setelah proyek vue dipaket.