Laravel dhe Vue: Krijimi i një uebsajti Portofoli me një panel administratori CRUD - Kapitulli 16
Përzgjedhës i CV-së
Ne duhet të ndërtojmë një komponent CVSelector dhe ta kemi atë si një komponent fëmijësh të AboutEditor.
Modeli i AboutEditor.vue: 👇
<template>
<section id="about-editor">
<h1>About Editor</h1>
<form enctype="multipart/form-data" id="about-form">
<input type="file" @change="selectFile" name="cv" accept=".doc, .docx, .pdf" id="cv_upload">
<button @click.prevent="onSubmit">Submit</button>
</form>
<CVSelector/>
</section>
</template>
importoni komponentin CVSelector dhe vendoseni në bllokun e komponentëve
<script>
import CVSelector from './CVSelector';
export default {
name: 'AboutEditor',
components: {
CVSelector
},
....
</script>
Komponenti CVSelector mund të përfshijë një tabelë që ka një lak v-for në të. Titujt e kolonave të tabelës janë CV, Zgjidh dhe Fshi. Kolona CV do të ketë cv_pathnga cikli v-for. Kolona e zgjedhjes do të ketë butonat "zgjidh cv"dhe kolona e fshirjes do të ketë butonat "fshij cv".
Modeli i CVSelector.vue: 👇
<template>
<table>
<thead>
<tr>
<th>CV</th>
<th>Select</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="cv in cvlist">
<td>{{cv.cv_path}}</td>
<td>
<button @click="selectCVPopup(cv)">SELECT CV</button>
</td>
<td>
<button @click="deleteCVPopup(cv)">DELETE CV</button>
</td>
</tr>
</tbody>
</table>
</template>
cvlist duhet të jetë në kthimin e të dhënave(){}
data() {
return {
cvlist: '',
}
},
Metoda për të marrë cvlist
getCVList() {
axios.get('/api/cvlist').then(
response => this.cvlist = response.data
)
},
Ekzekutimi i metodës kur montohet
mounted() {
this.getCVList();
},
Rruga api për të marrë cvlist
Route::get('/cvlist', 'AboutController@getCVList');
Funksioni getCVList() në AboutController duhet të marrë të gjithë tabelën Rreth
public function getCVList() {
return About::all();
}
Tani nëse vizitojmë faqen dhe ngarkojmë disa CV, do të marrim diçka të tillë:
Tani është koha për të ndërtuar një SelectCVModal.
ZgjidhniCVModal
Nën tabelën, mund të kemi një komponent selectCVModal. Duhet të kujtojmë se mund të kemi vetëm një element rrënjë. Kjo do të thotë që ne duhet të vendosim tabelën tonë dhe të zgjedhim komponentin CVModal në një element si ky:
<template>
<div id="cv-selector">
<table>
...
</table>
<selectCVModal v-if="selectCVModal" :cv="cv"/>
</div>
</template>
Ngjashëm me modalet e tjera, kjo gjithashtu varet nga një që veçoria e të dhënave është e vërtetëdhe një propozim i kaluar. Në këtë rast, vetia e të dhënave është selectCVModaldhe mbështetja e kaluar është cv.
data() {
return {
cvlist: '',
cv: '',
selectCVModal: false,
}
},
SelectCVModal duhet të ketë një pyetje po/jo. Një tjetër modal, ne kemi një pyetje po/jo është konfirmoDeleteModal. Ne thjesht mund ta kopjojmë atë komponent dhe ta modifikojmë për t'iu përshtatur kësaj situate.
Modifikimi është më poshtë me të theksuara
<template>
<transition name="fade">
<div id="my-modal" class="modal">
<div class="modal-body">
<h1>Select <b style="color:red">{{cv.cv_path}}</b>?</h1>
<div class="btn-row">
<button @click="confirm">Yes</button>
<button @click="cancel">No</button>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'selectCVPopup',
props: {
cv: ''
},
methods: {
confirm() {
axios.post(`api/selectcv/${this.cv.id}`).then(
this.$parent.selectCVModal = false
).then(
this.$parent.getCVList()
)
},
cancel() {
this.$parent.selectCVModal = false;
},
}
}
</script>
Rruga api për të zgjedhur një cv duhet të përfshijë /{id} në të
Route::post('/selectcv/{id}', 'AboutController@selectCV');
Zgjedhja e një CV në bazën e të dhënave
- Mënyra se si mund të zgjidhni një CV është që të keni diçka unike të ndryshme në lidhje me regjistrimin e bazës së të dhënave
- rekordi me ndryshimin unikmund të vihet në dispozicion në një itinerar.
cv_pathi atij regjistrimi të veçantë do të përdoret në skenarin dhe shabllonin e About.vue.
Dallimi unik
Mund të shtojmë një kolonëcv_active. Lloji i kolonës është boolean(në vend të kolonës së zakonshme të vargut).
Një kolonë Boolean përmban ose 1 ose 0.
Kollona Boolean e cv-së së zgjedhur do të ketë vlerën 1.
Kollona Boolean e cv-ve të tjera do të ketë vlerën 0.
Le të bëjmë një migrim për të shtuar kolonën Boolean.
php artisan make:migration AddCVActiveColumn
Brenda funksionit up() të migrimit AddCVActiveColumn:
Schema::table('about', function (Blueprint $table) {
$table->boolean('cv_active');
});
Le të migrojmë:
php artisan migrate
Tani që kemi kolonën Boolean, duhet të shkruajmë funksionin e kontrolluesit.
public function selectCV() {
$id = request()->id;
About::where('id', $id)->update(['cv_active' => 1]);
About::where('id', '!=',$id)->update(['cv_active' => 0]);
}
Shpjegimi i kodit: Kur
idvlera e kolonës përputhet meidtë cv-së së zgjedhur, kthejeni kolonëncv_activenë1. Kudo që nuk përputhet, kthejeni kolonën cv_active në0.
Duke dhënë lidhjen aktive të CV-së
Tani duhet të modifikojmë funksionin getCVPath() të AboutController për të marrë cv-në ku vlera e cv_active është 1:
public function getCVPath() {
return About::all()
->where('cv_active', 1)
->first()
->cv_path;
}
Tani do të merrni lidhjen aktive të CV-së të dhënë në komponentin about.vue.
Po sikur thjesht të dëshironit të shfaqnit CV-në e fundit të ngarkuar si lidhje në vend që të kaloni nëpër përzgjedhës.
Shfaqja e CV-së më të fundit pa përzgjedhësin e CV-së
Mund të përdorim kolonën cv_active në funksionin postAboutForm() në mënyrë që kur ngarkojmë një cv, kolona cv_active e cv-së të thotë 1.
Kolonat e tjera mund të kthehen në 0 duke përdorur $about-›id(pasi një id gjenerohet automatikisht kur futni një rresht në tabelën e bazës së të dhënave).
public function postAboutForm(){
$file = request()->file('cv');
$originalName = $file->getClientOriginalName();
$file->storeAs('public/cvs', $originalName);
$about = new About();
$about->cv_path = $originalName;
$about->cv_active = 1;
About::where('id', '!=',$about->id)->update(['cv_active' => 0]);
$about->save();
}
fshini CVModal
Gjëja e fundit që duhet bërë në këtë kapitull është fshirja e CVModal. Mund të vendoset nën SelectCVModal si kjo:
<selectCVModal v-if="selectCVModal" :cv="cv"/> <deleteCVModal v-if="deleteCVModal" :cv="cv"/>
Le të shtojmë deleteCVModal në kthimin e të dhënave() {}
data() {
return {
cvlist: '',
cv: '',
selectCVModal: false,
deleteCVModal: false,
}
},
Importojeni atë si një komponent fëmijësh në CVSelector.vue
import deleteCVModal from './deleteCVModal';
Vendoseni atë në bllokun e komponentëve
components: {
selectCVModal,
deleteCVModal
},
Shumë e ngjashme me selectCVModal. Me një ndryshim për tu theksuar
NDRYSHIMET PËR TË VËREJNË: Ne po përdorim cv_pathnë vend të id. Ne do të fshijmë duke përdorur cv_path.
<template>
<transition name="fade">
<div id="my-modal" style="border: solid; z-index: 1" class="modal">
<div class="modal-body">
<h1>Delete <b style="color:red">{{cv.cv_path}}</b> from the cv list?</h1>
<div class="btn-row">
<button @click="confirm">Yes</button>
<button @click="cancel">No</button>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
cv: ''
},
methods: {
confirm() {
axios.delete(`api/cv/${this.cv.cv_path}`).then(
this.$parent.deleteCVModal = false
).then(
this.$parent.getCVList()
)
},
cancel() {
this.$parent.confirmDeleteModal = false;
},
},
}
</script>
Fshije cv duke përdorur rrugën cv_path
Route::delete('/cv/{cv_path}', 'AboutController@destroy');
Funksioni i shkatërrimit në AboutController.php mund të përdoret për të fshirë si rekordin e bazës së të dhënave ashtu edhe skedarin.
Storage::delete është fshirja e skedarit duke përdorur cv_path.
public function destroy($cv_path) {
About::where('cv_path', $cv_path)->delete();
Storage::delete('public/cvs/' . $cv_path);
}
Në kapitullin 17, ne do të krijojmë një formular kontakti.
