1.頁面項目
以一個簡單的前端頁面為例。主要是利用vue和element-ui實現(xiàn)。
里面涉及的主要包括：新建vue項目、一行多個輸入框、頁面實現(xiàn)等。
?
2.項目流程
（1）新建項目
①首先安裝nodejs，這部分在此就不講啦。
②然后安裝vue-cli：
npm install -g @vue/cli查看是否安裝成功：
vue-V安裝成功之后就輸出vue的版本
③在cmd窗口新建一個vue2腳手架項目（目前用idea創(chuàng)建的話是默認vue3項目）。
?（2）用idea打開項目
項目文件是這樣：router主要是用來實現(xiàn)路由（頁面跳轉(zhuǎn)）、views文件夾下就是寫頁面的地方。
?（3）vue各部分基本介紹
①data
data中主要存放數(shù)據(jù)，在UI層面中的數(shù)據(jù)都是放在data中
data() { ? ? return { ? ? ? searchIndex: '', ? ? ? select: '', ? ? ? searchUnit: { ? ? ? ? pageIndex: 0 ? ? ? }, ? ? ? tableData: [], ? ? ? loading: false, ? ? ? totalpage: 0, ? ? ? currentPage: 1 ? ? } ? },②methods
所有的方法都是放在methods
?
③mounted
**模板渲染成html后調(diào)用**，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作。**通常在里面執(zhí)行dom操作**。
DOM操作：dom是一種文檔對象模型，同時也是用于html編程的接口，**通過dom來操作頁面中的元素**
與created的區(qū)別：
這里:通過id什么的去查找頁面元素是**找得到的**
④created
在**模板渲染成html前調(diào)用**，即通常初始化某些屬性值，然后再渲染成視圖。這里：通過id什么的去查找頁面元素是**找不到的**，created里面主要是**進行網(wǎng)絡(luò)請求**
這里就會執(zhí)行g(shù)etLogs方法
?created(){ ? ? ? this.getLogs() ? ? },⑤watched
監(jiān)聽數(shù)據(jù)變化
⑥v-model數(shù)據(jù)雙向綁定
當數(shù)據(jù)刷新時，UI視圖刷新；當UI視圖刷新時，數(shù)據(jù)可隨之刷新。
在這里選擇框select綁定了data中的selectWho，當UI中select選擇框中更改時，selectWho也更更改了
?
(4)Element-UI介紹
主要是運用了其中的表單元素、下拉框元素、Layout布局（一行兩個、一行三個）
①一行兩個
利用el-row和el-col進行控制
<el-row> <el-col span="12"> <el-form-item label="課程學(xué)時" > <el-input v-model="form.classHour" autocomplete="off" /> </el-form-item> </el-col> <el-col span="12"> <el-form-item label="課程學(xué)分" > <el-input v-model="form.credit" autocomplete="off" /> </el-form-item> </el-col> </el-row>②一行三個
<el-row> <el-col span="8"> <el-form-item label="學(xué)校" > <el-select v-model="form.school" placeholder="請選擇學(xué)校" @change="getBottomSchools" > <el-option v-for="item in schoolsFormData" :label="item.name" :value="item.name" :key="item.id"></el-option> </el-select> </el-form-item> </el-col> <el-col span="8"> <el-form-item label="學(xué)院" > <el-select v-model="form.organization" placeholder="請先選擇學(xué)校，后選擇學(xué)院" @change="getBottomOrgs"> <el-option v-for="item in organizationsFormData" :label="item.name" :value="item.name" :key="item.id"></el-option> </el-select> </el-form-item> </el-col> <el-col span="8"> <el-form-item label="系所" > <el-select v-model="form.departmentName" placeholder="請先選擇學(xué)院，后選擇系所"> <el-option v-for="item in departmentData" :label="item.name" :value="item.name" :key="item.id"></el-option> </el-select> </el-form-item> </el-col> </el-row>③下拉框
普通：其中l(wèi)abel是顯示在前端、vaule是傳給后端的值
<el-select v-model="form.isOpen" placeholder="選擇是否公開" size="medium"> <el-option label="公開" value="2" /> <el-option label="不公開" value="1" /> </el-select>從數(shù)組中循環(huán)獲得：文章來源：http://www.zghlxwxcb.cn/news/detail-602595.html
<el-select v-model="form.school" placeholder="請選擇學(xué)校" @change="getBottomSchools" > <el-option v-for="item in schoolsFormData" :label="item.name" :value="item.name" :key="item.id"></el-option> </el-select>
3.項目代碼
<template>
<div class="app-container">
<el-form ref="form" style="width:80%" :model="form" label-width="120px" :rules="rules">
<el-form-item label="課程名" >
<el-input v-model="form.name" />
</el-form-item>
<el-row>
<el-col span="12">
<el-form-item label="課程開始時間" >
<el-date-picker
v-model="form.startDate"
type="date"
size="small"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsBegin"
placeholder="選擇課程開始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="課程結(jié)束時間" >
<el-date-picker
v-model="form.endDate"
type="date"
size="small"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEnd"
placeholder="選擇課程結(jié)束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-form-item label="是否為公開課" >
<el-select v-model="form.isOpen" placeholder="選擇是否公開" size="medium">
<el-option label="公開" value="2" />
<el-option label="不公開" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="是否發(fā)布" >
<el-select v-model="form.isPublish" placeholder="選擇是否發(fā)布">
<el-option label="發(fā)布" value="1" />
<el-option label="不發(fā)布" value="0" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-form-item label="課程學(xué)時" >
<el-input v-model="form.classHour" autocomplete="off" />
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="課程學(xué)分" >
<el-input v-model="form.credit" autocomplete="off" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="8">
<el-form-item label="學(xué)校" >
<el-select v-model="form.school" placeholder="請選擇學(xué)校" @change="getBottomSchools" >
<el-option v-for="item in schoolsFormData"
:label="item.name"
:value="item.name"
:key="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="學(xué)院" >
<el-select v-model="form.organization" placeholder="請先選擇學(xué)校，后選擇學(xué)院" @change="getBottomOrgs">
<el-option v-for="item in organizationsFormData"
:label="item.name"
:value="item.name"
:key="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="系所" >
<el-select v-model="form.departmentName" placeholder="請先選擇學(xué)院，后選擇系所">
<el-option v-for="item in departmentData"
:label="item.name"
:value="item.name"
:key="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="課程簡介" >
<el-input type="textarea" :rows="4" v-model="form.introduction" autocomplete="off" />
</el-form-item>
<el-form-item>
<el-button
:loading="loading"
type="primary"
@click="onSubmit"
>創(chuàng)建課程</el-button>
<el-button @click="onCancel">清空信息</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "index",
data(){
return {
defalutForm: {},
form: {
id:'',
name: '',
startDate: '',
endDate: '',
isOpen: '',
classHour: '',
credit:'',
introduction: '',
isPublish:'',
school:'',
organization: '',
departmentName: '', //系名稱
department:'' //系組織id 后端需要
},
schoolsFormData:[],
organizationsFormData:[],
departmentData:[],
loading: false, // skeleton的loading
rules: {
name: [{ required: true, message: '請輸入課程名', trigger: 'blur' }],
},
}
},
created(){
this.getAllParentOrganizations()
},
computed: {
pickerOptionsBegin() {
return {
disabledDate: (time) => {
if (this.form.endDate) {
return time.getTime() < Date.now() || time.getTime() > new Date(this.form.endDate).getTime();
}else{
return time.getTime() < Date.now() - 8.64e7
}
}
}
},
pickerOptionsEnd() {
return {
disabledDate: (time) => {
if(this.form.startDate){
return time.getTime() < new Date(this.form.startDate).getTime()
}else {
return time.getTime() < Date.now() - 8.64e7
}
}
}
},
},
methods:{
getBottomSchools(item){
// console.log(item+"item")
for (let i = 0; i < this.schoolsFormData.length; i++) {
if(item==this.schoolsFormData[i].name){
// console.log("id"+this.organizationsFormData[i].id)
this.getAllBottomOrganizations(this.schoolsFormData[i].id)
}
}
},
getBottomOrgs(item) {
// console.log(item+"item")
for (let i = 0; i < this.organizationsFormData.length; i++) {
if(item==this.organizationsFormData[i].name){
// console.log("id"+this.organizationsFormData[i].id)
this.getAllBottomDeps(this.organizationsFormData[i].id)
}
}
},
getAllParentOrganizations(){
this.$store.dispatch('organizationctrl/getAllParentOrganizations').then((res) => {
this.schoolsFormData = []
for (let i = 0; i < res.length; i++) {
const schoolFormObj = {}
schoolFormObj.id = res[i].id
schoolFormObj.name = res[i].name
schoolFormObj.parentId = res[i].parentId
schoolFormObj.introduction=res[i].introduction
this.schoolsFormData[i] = schoolFormObj
}
})
},
getAllBottomOrganizations(parentID){
this.$store.dispatch('organizationctrl/getAllBottomOrganizations',parentID).then((res) => {
this.organizationsFormData = []
for (let i = 0; i < res.length; i++) {
const organizationDataObj = {}
organizationDataObj.id = res[i].id
organizationDataObj.name = res[i].name
organizationDataObj.parentId = res[i].parentId
organizationDataObj.introduction=res[i].introduction
this.organizationsFormData[i] = organizationDataObj
}
})
},
getAllBottomDeps(parentID){
this.$store.dispatch('organizationctrl/getAllBottomOrganizations',parentID).then((res) => {
this.departmentData = []
for (let i = 0; i < res.length; i++) {
const departmentDataObj = {}
departmentDataObj.id = res[i].id
departmentDataObj.name = res[i].name
departmentDataObj.parentId = res[i].parentId
departmentDataObj.introduction=res[i].introduction
this.departmentData[i] =departmentDataObj
}
})
},
onSubmit() {
this.loading = true
this.$store
.dispatch('coursectrl/addCourse',this.form)
.then(() => {
this.$message({
message: '已成功創(chuàng)建',
type: 'success'
})
this.loading = false
})
.catch((error) => {
this.loading = false
this.$message.error(error)
})
},
onCancel() {
this.$confirm('確定要清空所有信息嗎？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form = JSON.parse(JSON.stringify(this.defalutForm))
this.$refs.form.clearValidate()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
}
}
}
</script>?文章來源地址http://www.zghlxwxcb.cn/news/detail-602595.html
到了這里，關(guān)于Vue2 ＋Element-ui實現(xiàn)前端頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
