Vue2 ＋Element-ui实现前端页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2 ＋Element-ui实现前端页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.页面项目

以一个简单的前端页面为例。主要是利用vue和element-ui实现。

里面涉及的主要包括：新建vue项目、一行多个输入框、页面实现等。

使用vue2项目写一个页面,VUE,vue.js,前端,ui

2.项目流程

（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>

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="课程结束时间" >
            <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>

文章来源地址https://www.toymoban.com/news/detail-602595.html

到了这里，关于Vue2 ＋Element-ui实现前端页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！