practise vue shop front
1.0.0
Sebuah proyek kode untuk dipelajari dari kursus Elemen Front-End Dark Horse 2019.
Sebelum menggunakan proyek ini, disarankan untuk mempelajari vue.js terlebih dahulu. Hal ini merupakan ambang batas pembelajaran kerangka elemen UI. Jangan bersemangat untuk sukses dengan cepat
Indeks proyek Server back-end yang mendukung proyek ini: learnVue_shop mendukung proyek API server
Antarmuka API backend yang digunakan dalam proyek ini adalah antarmuka API backend publik yang disediakan oleh Asosiasi Konservasi Luo Tianyi
Alamat Kursus Resmi Front-End Dark Horse:
Alamat proyek front-end: http://shop.liulongbin.top/
Alamat antarmuka backend: https://www.liulongbin.top:8888/api/private/v1/
Dokumen antarmuka API: Tautan: https://pan.baidu.com/s/1KJPfaFaPadW4JdGjCt54NQ Kode ekstraksi: mgbr
Unduh kursus lengkap: Tautan: https://pan.baidu.com/s/1hBwZLR-Wbjt28YSEzVi6AQ Kode ekstraksi: 2urn
Catatan: Alamat antarmuka backend harus memiliki token untuk mengirim dan menerima permintaan secara normal. Silakan ikuti kursus proyek untuk mempelajari lebih lanjut.
Mohon jangan menghapus data secara acak. Jika Anda menghapusnya, harap tambahkan kembali. Saat Anda menghapusnya, harap tinggalkan satu atau dua di daftar. Khusus untuk bagian izin peran, jika semua data izin dihapus maka siswa yang telah melakukan bagian ini tidak dapat melanjutkan. Tips lainnya, jika tidak ada data, Anda dapat masuk ke situs proyek dan menambahkan beberapa data.
Pengguna stasiun b: Antarmuka API backend publik disediakan oleh Asosiasi Konservasi Luo Tianyi
Nama pengguna: admin Kata sandi: 123456
Alamat contoh proyek Asosiasi Konservasi Luo Tianyi: http://gl.timemeetyou.com
Jika antarmuka gagal atau pengguna dihapus, Anda dapat mengobrol secara pribadi dengannya untuk memulihkan database.
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve
# 克隆项目
git clone https://github.com/wangxinleo/learnVue_shop.git
# 进入项目目录
cd learnVue_shop
# 切换到server分支
git checkout -b server origin/server
# 拉取server分支代码
git pull
# 安装依赖
npm install
# 源码部署
node ./app.js
- src //开发目录
- asset // 存放静态文件
- css
- font
- img
- common // 公用js文件
- network // api请求文件
- goodsCom
- home
- login
- order
- report
- rightsAndRoles
- users
- request . js // 封装axios请求
- router // 动态路由
- store // Vuex
- view // 视图文件
- App . vue
- main - dev . js //用于开发环境的入口文件
- main - prod . js //用于生产环境的入口文件
- main . js // main模板文件
- . browserslistrc // 指定打包的代码对哪些浏览器支持
- . editorconfig // 代码规范
- . eslintrc . js // eslint配置文件
- babel . config . js // 插件配置
- package . json //项目信息文件
- vue . config . js //用户自定义webpack配置文件 // 以login.vue 为例
执行 login ( ) 方法
--> 到network/login下找到login请求
--> 引用 request.js 封装的axios 方法
--> 请求到数据返回到login.vue 中继续处理
--> 登陆成功Mengapa menggunakannya dengan cara ini? Misalnya, jika antarmuka API latar belakang berubah sementara, kita hanya perlu memodifikasi variabel url dari file request.js di folder jaringan untuk mengubah antarmuka API secara global, yang sejalan dengan gagasan modularisasi dan lebih nyaman untuk manajemen kode. Juga lebih mudah untuk menggunakan kembali metode API.
// 加入了$bus的应用，用于跨组件通信
// main.js
Vue . prototype . $bus = new Vue ( )
// usersChildren/usersFunc/addUserDialog.vue
this . $bus . $emit ( 'freshClick' ) //很像父子之间传值的方法
// Users.vue
this . $bus . $on ( 'freshClick' , ( ) => {
console . log ( this )
this . getUsersList ( )
} )
// 父子组件通信
// 子组件代码实例
< template >
< div @ click = "open" > </ div >
< / template>
methods : {
open ( ) {
this . $emit ( 'showbox' , 'the msg' ) ; //触发showbox方法，'the msg'为向父组件传递的数据
}
}
// 父组件代码实例
< child @ showbox = "toshow" : msg = "msg" > < / child > //监听子组件触发的showbox事件,然后调用toshow方法
methods: {
toshow ( msg ) {
this . msg = msg ;
}
}Alamat pengunduhan: vscode
Alat ini akan secara otomatis memformat dan mengatur kode untuk Anda. vscode, buka toko plugin untuk mengunduh plugin [Prettier - Code formatter] Setelah instalasi selesai, buka vscode [File]-->[Preferences] -->[Pengaturan] dan temukan json di Ada ikon kecil di sudut kanan atas halaman pengaturan. Klik untuk beralih ke mode konfigurasi json. Jika Anda memiliki konfigurasi eslint proyek lain dan tidak ingin mengganti aturan ini, Anda dapat menyalinnya ke file konfigurasi [Workspace], Anda tidak perlu menggantinya dengan konfigurasi [User]) Salin json di bawah ini ke file konfigurasi
{
"[vue]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"editor.quickSuggestions" : {
"strings" : true
},
"workbench.colorTheme" : " One Monokai " ,
"editor.tabSize" : 2 ,
"editor.detectIndentation" : false ,
"emmet.triggerExpansionOnTab" : true ,
"editor.formatOnSave" : true ,
"javascript.format.enable" : true ,
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true ,
"git.enableSmartCommit" : true ,
"git.autofetch" : true ,
"git.confirmSync" : false ,
"[json]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"liveServer.settings.donotShowInfoMsg" : true ,
"explorer.confirmDelete" : false ,
"javascript.updateImportsOnFileMove.enabled" : " always " ,
"typescript.updateImportsOnFileMove.enabled" : " always " ,
"files.exclude" : {
"**/.idea" : true
},
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
},
"[javascript]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[scss]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
},
"[jsonc]" : {
"editor.defaultFormatter" : " esbenp.prettier-vscode "
}
}Alat ini akan secara otomatis memformat dan mengatur kode CSS, sass, dan less, dan secara otomatis mengurutkan urutan vscode CSS. Anda perlu pergi ke toko plugin untuk mengunduh [stylelint-plus]. di adalah sebagai berikut
{
"stylelint.enable" : true ,
"css.validate" : false ,
"less.validate" : false ,
"scss.validate" : false ,
"stylelint.autoFixOnSave" : true
}[Biaya Impor] Periksa ukuran modul dependen yang Anda perkenalkan
[Tag Tutup Otomatis] Secara otomatis melengkapi tag html. Jika Anda memasukkan <a> maka secara otomatis akan selesai </a>
[Auto Rename Tag] Secara otomatis mengganti nama tag html. Jika <a> diubah menjadi <b> , tag akhir </a> akan otomatis diubah menjadi </b>
