vue full stack project

0. Tulis di depan

Sebagai pemotong gambar, ini adalah proyek full-stack pertama saya :smile: Saya menonton beberapa video terkait node sebelumnya dan awalnya berencana menggunakan node asli untuk backend kebetulan saya bisa belajar framework lain, jadi saya belajar dan menjual koa2. Elemen, alasan mengapa saya ingin menulis proyek seperti itu adalah karena saya belum pernah menulis proyek vue lengkap dari awal hingga akhir sebelumnya. Itu semua kode yang diambil alih oleh pendahulunya. Menulis proyek ini hanya dapat mengkonsolidasikan teknologi yang saya pelajari sebelumnya.
Alamat pratinjau online: https://qietuzai.club/vue

1. Tumpukan teknologi

Front-end: vue2, vuex, vue-router, axios, webpack, ES6, stylus, elemen-ui

Bagian belakang: simpul, koa2, mysql

1.1 Perpustakaan komponen

Proyek ini berisi beberapa komponen yang dikembangkan sendiri yang dapat langsung diterapkan dalam pekerjaan sebenarnya.

• Daftar yang Harus Dilakukan
• Unggah komponen
• Komponen air terjun

2. Struktur proyek

2.1 Struktur proyek front-end

 ├──  build                               
├──  config                              
├──  node_modules                          
├──  src                                    ---核心代码目录
|   ├──  assets                            
|   |    ├── images                         ---静态资源存放目录
|   ├──  common                             ---字体图标存放目录
|   ├──  components                         ---组件存放目录
|   ├──  pages                              ---页面存放目录(可复用的则封装为组件，不可以的写为页面)
|   ├──  router                             ---路由
|   ├──  store                              ---vuex相关的文件
|   ├──  tools                              
|   |    ├── index.js                       ---封装了一些常用的函数
|   ├── App.vue                           
|   ├── main.js                          
├── .eslintrc                               ---自定义eslint配置文件
├── package.json     
......                                      ---其他一些vue脚手架生成的文件就不表述了

2.2 Struktur proyek backend

 ├──  api                                    ---接口目录
|   ├──  spider                             ---爬虫相关的接口(开发中...)
|   ├──  upload                             ---上传文件相关的接口
|   ├──  user                               ---用户相关的接口                 
├── common                                  
|   ├──  tool.js                            ---封装了一些常用的函数
|   ├──  mysql.js                           ---连接数据库的js(文件你们是看不到的，因为里面有线上数据库的账户密码，不过我给你们留了一个连接数据库示例哦，看在我这么贴心的份上还不快点个star:）)
|   ├──  mysqlDemo.js                       ---这就是连接数据库示例了(clone下来后，记得把文件名改为mysql.js哦), 2019年4月19日 16:16:59这个文件已经删除
├── upload                                  ---文件上传的路径
├── app.js                                  ---入口文件
├── test.sql                                ---数据库表的设计结构(里面数据全被截断了)
├── package.json                                

3. Penyebaran cepat

3.1 Pertama-tama kloning kode proyek

 git clone https://github.com/xypecho/vue-full-stack-project.git

3.2 Konfigurasikan lingkungan mysql

Pertama, jalankan perintah mysql di cmd dan lihat.
Jika muncul output di atas, lewati langkah ini dan langsung ke 3.2.2 . Jika ada konten lain yang ditampilkan, berarti komputer yang Anda gunakan belum terinstal mysql, dan Anda harus menginstal mysql terlebih dahulu.

3.2.1 Unduh dan konfigurasikan mysql

Pertama, buka Google atau Baidu untuk mendownload mysql 5.7 . Yang terbaik adalah mendownload versi 5.7, karena versi terbaru yang saya download sebelumnya tidak dapat terhubung... Setelah instalasi berhasil, buka cmd untuk menjalankan mysql , dan di sana akan ada tidak ada hasil yang tidak terduga

Hal ini karena variabel lingkungan tidak dikonfigurasi dan jalur bin di MySQL Server 5.7 ditambahkan ke variabel sistem . Lalu buka cmd untuk mengeksekusi mysql . Jika informasi yang ditunjukkan pada tangkapan layar di 3.2 ditampilkan, instalasi berhasil.

3.2.2 Menyambungkan ke basis data

Buka Google atau Baidu untuk mendownload Navicat , lalu klik untuk terhubung ke database dan masukkan konten pada gambar (jika kata sandi mysql Anda 123456)

Setelah koneksi berhasil, klik kanan新建数据库dan isi informasi seperti gambar di bawah ini.

Klik kanan pada database test yang baru dibuat dan pilih运行SQL文件, pilih test.sql di bawah vue-full-stack-projectbackend , dan koneksi database selesai.

3.3 Instal paket npm & jalankan proyek

 cd vue-full-stack-project
cd fontend
npm install     // 首先安装前端的依赖包
npm run dev     // 运行前端项目

cd ../          //回到根目录即vue-full-stack-project
cd backend
npm install     // 安装后端的依赖包
export NODE_ENV=development;           // 这个命令是为了区分不同的环境来读取不同的配置
node app.js     // 运行后端项目

Di atas adalah keseluruhan proses penerapan cepat. Proyek ini cocok untuk pendatang baru di node & vue. Jika proyek ini bermanfaat bagi Anda, silakan klik bintang: blush on: