以一个简单的前端页面为例。主要是利用vue和element-ui实现。
里面涉及的主要包括：新建vue项目、一行多个输入框、页面实现等。
（1）新建项目
①首先安装nodejs，这部分在此就不讲啦。
②然后安装vue-cli：
npm install -g @vue/cli查看是否安装成功：
vue-V安装成功之后就输出vue的版本
③在cmd窗口新建一个vue2脚手架项目（目前用idea创建的话是默认vue3项目）。
（2）用idea打开项目
项目文件是这样：router主要是用来实现路由（页面跳转）、views文件夹下就是写页面的地方。
（3）vue各部分基本介绍
①data
data中主要存放数据，在UI层面中的数据都是放在data中
data() { return { searchIndex: '', select: '', searchUnit: { pageIndex: 0 }, tableData: [], loading: false, totalpage: 0, currentPage: 1 } },②methods
所有的方法都是放在methods
③mounted
**模板渲染成html后调用**，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。**通常在里面执行dom操作**。
DOM操作：dom是一种文档对象模型，同时也是用于html编程的接口，**通过dom来操作页面中的元素**
与created的区别：
这里:通过id什么的去查找页面元素是**找得到的**
④created
在**模板渲染成html前调用**，即通常初始化某些属性值，然后再渲染成视图。这里：通过id什么的去查找页面元素是**找不到的**，created里面主要是**进行网络请求**
这里就会执行getLogs方法
created(){ this.getLogs() },⑤watched
监听数据变化
⑥v-model数据双向绑定
当数据刷新时，UI视图刷新；当UI视图刷新时，数据可随之刷新。
在这里选择框select绑定了data中的selectWho，当UI中select选择框中更改时，selectWho也更更改了
(4)Element-UI介绍
主要是运用了其中的表单元素、下拉框元素、Layout布局（一行两个、一行三个）
①一行两个
利用el-row和el-col进行控制
<el-row> <el-col span="12"> <el-form-item label="课程学时" > <el-input v-model="form.classHour" autocomplete="off" /> </el-form-item> </el-col> <el-col span="12"> <el-form-item label="课程学分" > <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="学校" > <el-select v-model="form.school" placeholder="请选择学校" @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="学院" > <el-select v-model="form.organization" placeholder="请先选择学校，后选择学院" @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="请先选择学院，后选择系所"> <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>③下拉框
普通：其中label是显示在前端、vaule是传给后端的值
<el-select v-model="form.isOpen" placeholder="选择是否公开" size="medium"> <el-option label="公开" value="2" /> <el-option label="不公开" value="1" /> </el-select>从数组中循环获得：
<el-select v-model="form.school" placeholder="请选择学校" @change="getBottomSchools" > <el-option v-for="item in schoolsFormData" :label="item.name" :value="item.name" :key="item.id"></el-option> </el-select>
<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="课程结束时间" >
<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="选择课程结束日期">
</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="是否发布" >
<el-select v-model="form.isPublish" placeholder="选择是否发布">
<el-option label="发布" value="1" />
<el-option label="不发布" value="0" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-form-item label="课程学时" >
<el-input v-model="form.classHour" autocomplete="off" />
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="课程学分" >
<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="学校" >
<el-select v-model="form.school" placeholder="请选择学校" @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="学院" >
<el-select v-model="form.organization" placeholder="请先选择学校，后选择学院" @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="请先选择学院，后选择系所">
<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"
>创建课程</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: '已成功创建',
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>