十次方前端系統(tǒng)開發(fā)v1.第3章

第3章-使用ElementUI學習目標掌握lementUI的ilog組件和$message的使用，實現(xiàn)彈出窗口和消息提示功能掌握lementUI的slct組件的使用，實現(xiàn)下拉列表功能實現(xiàn)新增數(shù)據(jù)和修改數(shù)據(jù)的功掌握confirm的使用，實現(xiàn)詢問框，實現(xiàn)刪我們的十次方管理就采用ElementUI來進行搭建什么是Element餓了么前端的一套Vue.js組件庫快速搭官網(wǎng)上提供了非?；A的腳手架，如果我們使用官網(wǎng)的腳手架需要自己寫很多代碼比如登陸界面、主界面菜單等內容。課程已經(jīng)提供了功能完整的腳手架，我們可以拿過來在此基礎上開發(fā)，這樣可以極大節(jié)省我們開發(fā)的時間。解壓vueAdmin-template-在命令提示符進入 ，輸入命令cnpmcnpm這樣安裝所有的依賴，幾分鐘后完成輸入命令npmnpmrun運行后自動彈出瀏覽器了解工程結以下是主要 結構名內構建工程相配置相工程源靜態(tài)資后端工具頁路關閉語范性檢修改config/index.js，將useEslint的值改為false此配置作用:是否開啟語法檢查，語法檢查是通過ESLint來實現(xiàn)的我們現(xiàn)在科普一下,什么是ELint:ELnt是一個語則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統(tǒng)一的代碼。如果我們開啟了Eslit,也就意味著要接受它非?？量痰恼Z法檢查，包括空格不能少些或多些，必須單引不能雙引，語句后不可以寫分號等等，這些規(guī)則其實是可以設置的。我們作為前端的初學者，最好先關閉這種校驗，否則會浪費很多精力在語法的規(guī)范性上。如果以后做真正的企業(yè)級開發(fā)，建議開啟。設打開main.jsimportimportlocalefrom修改為importimportlocalefrom修改后組件都是按照中文的習慣與easy-mock對修改config下的dev.env.js中的BASE_API為easy-mock的BaseBASE_API:地址：/user/login{{"code":"data":"token":}}{{"code":"data":"roles":"role":"name":"admin","avatar":}}更改標題與修改index.html里的標題為"十次方管理系統(tǒng)，修改后瀏覽器自動刷新。這就是腳手架中已經(jīng)為我們添加了熱部署功能。修改src/router下的index.js中constantRouterMap的內exportconstconstantRouterMap={path:'/login',component:()=>import('@/views/login/index'),hidden:true},{path:'/404',component:()=>import('@/views/404'),hidden:true{path:'/',name:'Dashboard',hidden:true,children:[{path:component:()=>{path:'/example',Layout,redirect:'/example/table',name:metatitle基本信息管理icon'examplechildren:[{path:name:componentimport('@/views/table/index'),meta:{title:'城市管理',icon:'table'}{path:name:componentimport('@/views/tree/index'),meta:{title:' 管理',icon:'tree'}}]{path:'/form',name:metametatitle'活動管理'icon'example},children:[{path:name:componentimport('@/views/form/index'),meta:{title:'活動管理',icon:'form'}}]{path:'*',redirect:'/404',hidden:true]活動管理-實現(xiàn)活動管理的列表頁，包括分頁，條件我們在這一環(huán)節(jié)先實現(xiàn)一個簡單的列表，如下圖所準備工作：swaggerAPI同步到easyMock然后修改/gathering/gatheringGET方法）{{"code":"flag":true,"data|10":[{"id":"@string","summary":"sponsor":"@string","image":"@image","starttime":"@date","endtime":"@date","enrolltime":"@date","state":"@string","city":}代碼實現(xiàn)步驟在src/api創(chuàng)建importimportrequestfrom"@/utils/request"exportdefault{ering',method:'get'}}創(chuàng)建gathering.vue中，編寫部importgatheringApifrom'@/api/gathering'exportdefault{data(){return{}ponse=>{}}}修改gathering.vue，編寫html代碼部<el‐table:data="list"borderstyle="width:prop="id"label="活動prop="name"label="活動名稱"prop="sponsor"label="主辦方prop="address"label="活動地址prop="starttime"label="開始日期 table組件的屬參說類可選默認顯示的數(shù)——table-column參說類顯示的標——對應列內容的字段名，也可以使用屬——對應列的寬——以上屬性為我們代碼中使用到的屬性，其他屬性請查閱文檔

我們已經(jīng)通過表格組件完成了列表的展示，接下來需要使用分頁組件完成分頁準備工作：修改接口 {{"code":"flag":true,"data":{"rows|10":[{"id":"@string","summary":"sponsor":"@string","image":"@image","starttime":"@date","endtime":"@date","enrolltime":"@date","state":"1","city":}}代碼實現(xiàn)修改src/api/gathering.js，增加方法導 ap){returnrequest({url:`/gathering/gathering/search/${page}/${size}`,method:'post',data: }修改src/views/table/gathering.vue，編寫部importimportexportdefault{data(){retufrom } response}}}修改src/views/table/gathering.vue，增加分頁<el‐table:data="list"borderstyle="width:prop="id"label="活動prop="name"label="活動名稱"prop="sponsor"label="主辦方"prop="address"label="活動地址prop="starttime"label="開始日期 <el‐pagination:page‐sizes="[5,10,layout="total,sizes,prev,pager,next,currentPage為當前頁，total為錄注意：emplae里面要求必須有唯一的跟節(jié)點，我們這里用di將表格和分頁控件包起來。pagination的常用屬性參說類可選默認每頁顯示條目—個目——當頁支修—1符組sizes,prev,pager,next,jumper,>,total,-布局子件用號隔每頁顯示個數(shù)選擇器選項—[10,30,設pagination的常用事件事件名說回調參sizeSize改變時會觸每頁條current-currentPage當前屬性方法事件請查看文檔： 需求：在分頁列表的基礎上實現(xiàn)條件查詢代碼實現(xiàn)修改src/views/table/gathering.vue，增加查詢表<el‐form:inline="true"<el‐form‐itemlabel="活動名稱<el‐input placeholder="活動名稱<el‐form‐itemlabel="活動日期<el‐date‐pickertype="dateplaceholder="選擇開始日期 ap.starttime_1"<el‐date‐pickertype="dateplaceholder="選擇截止日期 ap.starttime_2"<el‐buttontype="primary@click="fetchData()">查詢form（表單）組件屬性詳見文檔： input（文本框）組件屬性詳見文檔： date-picker（日期框）組件屬性詳見文檔： 活動管理-界面中加入"新增"按鈕，點擊彈出編輯點擊“修改”按鈕，關閉窗口并刷新表格，彈出提示（成功或失敗修改src/api/gathering.js，在template中增加框組<el‐dialog<el‐dialogtitle="活動編輯:visible.sync="dialogFormVisible屬性title為框標題，visible為是否顯示變量dialogFormVisible用于控制框的顯示。我們在代碼中定returndialogFormVisiblefalse }}template中增加按鈕，用于打開<el‐button<el‐buttontype="primary@click="dialogFormVisibletrue">新增</el‐dialog屬性詳見文檔 修改src/views/table/gathering.vue，在彈<el‐dialogtitle="編輯<el‐form<el‐form‐itemlabel="活動名稱<el‐inputv‐model="placeholder="活動名稱<el‐form‐itemlabel="基本地址<el‐inputv‐model="pojo.address"placeholder="基本地址<el‐form‐itemlabel="開始日期<el‐date‐pickertype="date"<el‐form‐itemlabel="截至日期<el‐date‐pickertype="datev‐model="pojo.endtime"<el‐form‐itemlabel="報名截止<el‐date‐pickertype="datev‐model="pojo.enrolltime"<el‐form‐itemlabel="活動詳情<el‐inputv‐model="pojo.detailplaceholder="活動詳情"type="textarea":rows="2"></el‐input><el‐form‐itemlabel="是否可見<el‐switchactive‐value="1"inactive‐value="0"<el‐buttontype="primary保存<el‐button@click="dialogFormVisiblefalse關閉這里我們主要要掌握多行文本編輯框與開關組件switch的使需求：在新增窗口實現(xiàn)城市下拉選{"flag":"code":20000,'data|10':"id|+1":1,{"flag":"code":20000,'data|10':"id|+1":1,"ishot":}代碼實創(chuàng)建importimportrequestfrom'@/utils/request'exportdefault{request({url:method:'get'}cityListcityList:引入城市importimportcityApifrom修改created，增加對城市方createdcreated(){this.cityList=response.data}修改src/views/table/gathering.vue，增加城市下拉<el‐form‐item<el‐form‐itemlabel="城市<el‐selectv‐model="pojo.cityplaceholder="請選擇v‐for="itemin修改easymock中的/gathering/gathering（增加活動{{"flag":"code":'message'"執(zhí)行成功}修改src/api/gathering.js，增加方法導savesave(pojo){returnrequest({method:'post',data:}修改src/views/table/gathering.vue的js部分增加方法執(zhí)行保handleSavehandleSave(){}}修改彈出框中的“保存”按鈕，調用保存<el‐button<el‐buttontype="primary@click="handleSave()">保存活動管理-根據(jù)ID準備工作：修改easymock接口 {{"flag":"code":20000,'data':{"id":"name""測試活動"sponsor""主辦方"image":"@image","endtime":"@date","enrolltime":"@date","state":"1"}}代碼實現(xiàn)修改src/api/gathering.js，增加方法定findByIdfindById(id){returnrequest({method:'get'}gatheringApi.findById(id).then(response=>{}}在表格table中增加模板 ,模板列中防止修改按鈕，調用handleEdit方<template<el‐button@click="handleEdit(scope.row.id)"type="text"修改fixed="right"的作用是定義此列為slot-scope用于指定當前行的上下文。使用scope.row可以獲取行對gatheringApi.findById(id).then(response=>{if(respons}}}修改新增按鈕，調用handleEdit方法時傳遞空字符<el‐button<el‐buttontype="primary@click="handleEdit('')">新增準備工作：修改easymock接口/gathering/gathering/{id}{{"flag":"code":'message'"修改成功}代碼修改src/api/gathering.js，增加方法定updateupdate(id,pojo){returnrequest({method:'put',data:}datadata(){return{}}修改handleEdit,增修改方法handleSavehandleSave(){}}}}if(id==null||id==''){returnsave(pojo)}returnmethod:'put',data:}修改src/views/table/gathering.vue的}}js原生的alert簡直是丑爆了，有沒有更漂亮的彈出框呀！當然有，用了lementUI消息提示框，真是美呆了！lrtrsos.msse)可以替換為以下代碼：message:type:$message詳見文檔 你可以嘗試著參照文檔做出更豐富的效果哦活動管理-EasyMock Method:{{"flag":"code":'message'"執(zhí)行成功}修改src/api/gathering.js，增加方法定rnrequest({method:'delete'}嗎?''提示confirmButtonText'確定cancelButtonText'取消',type:'warning'}).then(()=>{message:type:hData()//刷新數(shù)據(jù)}}).catch(()=>}修改src/views/table/gathering.vue<el‐button<el‐but