• Vue2 ＋Element-ui实现前端页面

    1.页面项目

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

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

     

    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中

    1. data() {
    2.     return {
    3.       searchIndex: '',
    4.       select: '',
    5.       searchUnit: {
    6.         pageIndex: 0
    7.       },
    8.       tableData: [],
    9.       loading: false,
    10.       totalpage: 0,
    11.       currentPage: 1
    12.     }
    13.   },

    ②methods

    所有的方法都是放在methods

     

    ③mounted

    **模板渲染成html后调用**，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。**通常在里面执行dom操作**。

    DOM操作：dom是一种文档对象模型，同时也是用于html编程的接口，**通过dom来操作页面中的元素**

    与created的区别：

    这里:通过id什么的去查找页面元素是**找得到的**

    ④created

    在**模板渲染成html前调用**，即通常初始化某些属性值，然后再渲染成视图。这里：通过id什么的去查找页面元素是**找不到的**，created里面主要是**进行网络请求**

    这里就会执行getLogs方法

    1.  created(){
    2.       this.getLogs()
    3.     },

    ⑤watched

    监听数据变化

    ⑥v-model数据双向绑定

    当数据刷新时，UI视图刷新；当UI视图刷新时，数据可随之刷新。

    在这里选择框select绑定了data中的selectWho，当UI中select选择框中更改时，selectWho也更更改了

     

    (4)Element-UI介绍

    主要是运用了其中的表单元素、下拉框元素、Layout布局（一行两个、一行三个）

    ①一行两个

    利用el-row和el-col进行控制

    1.  <el-row>
    2.         <el-col span="12">
    3.           <el-form-item label="课程学时" >
    4.             <el-input v-model="form.classHour" autocomplete="off" />
    5.           </el-form-item>
    6.         </el-col>
    7.         <el-col span="12">
    8.           <el-form-item label="课程学分" >
    9.             <el-input v-model="form.credit" autocomplete="off" />
    10.           </el-form-item>
    11.         </el-col>
    12.       </el-row>

    ②一行三个

    1. <el-row>
    2.         <el-col span="8">
    3.           <el-form-item label="学校"  >
    4.             <el-select v-model="form.school" placeholder="请选择学校" @change="getBottomSchools" >
    5.               <el-option v-for="item in schoolsFormData"
    6.                          :label="item.name"
    7.                          :value="item.name"
    8.                          :key="item.id"></el-option>
    9.             </el-select>
    10.           </el-form-item>
    11.         </el-col>
    12.         <el-col span="8">
    13.           <el-form-item label="学院"  >
    14.             <el-select v-model="form.organization" placeholder="请先选择学校，后选择学院" @change="getBottomOrgs">
    15.               <el-option v-for="item in organizationsFormData"
    16.                          :label="item.name"
    17.                          :value="item.name"
    18.                          :key="item.id"></el-option>
    19.             </el-select>
    20.           </el-form-item>
    21.         </el-col>
    22.         <el-col span="8">
    23.           <el-form-item label="系所"  >
    24.             <el-select v-model="form.departmentName" placeholder="请先选择学院，后选择系所">
    25.               <el-option v-for="item in departmentData"
    26.                          :label="item.name"
    27.                          :value="item.name"
    28.                          :key="item.id"></el-option>
    29.             </el-select>
    30.           </el-form-item>
    31.         </el-col>
    32.       </el-row>

    ③下拉框

    普通：其中label是显示在前端、vaule是传给后端的值

    1. <el-select v-model="form.isOpen"  placeholder="选择是否公开" size="medium">
    2.               <el-option label="公开" value="2" />
    3.               <el-option label="不公开" value="1" />
    4.             </el-select>

    从数组中循环获得：

    1.  <el-select v-model="form.school" placeholder="请选择学校" @change="getBottomSchools" >
    2.               <el-option v-for="item in schoolsFormData"
    3.                          :label="item.name"
    4.                          :value="item.name"
    5.                          :key="item.id"></el-option>
    6.             </el-select>

    3.项目代码

    1. <template>
    2.   <div class="app-container">
    3.     <el-form ref="form" style="width:80%" :model="form" label-width="120px" :rules="rules">
    4.       <el-form-item label="课程名" >
    5.         <el-input v-model="form.name" />
    6.       </el-form-item>
    7.       <el-row>
    8.         <el-col span="12">
    9.           <el-form-item label="课程开始时间" >
    10.             <el-date-picker
    11.               　　v-model="form.startDate"
    12.               　　type="date"
    13.               　　size="small"
    14.               　　format="yyyy-MM-dd HH:mm:ss"
    15.               　　value-format="yyyy-MM-dd HH:mm:ss"
    16.               　　:picker-options="pickerOptionsBegin"
    17.               　　placeholder="选择课程开始日期">
    18.             </el-date-picker>
    19.           </el-form-item>
    20.         </el-col>
    21.         <el-col span="12">
    22.           <el-form-item label="课程结束时间" >
    23.             <el-date-picker
    24.               　　v-model="form.endDate"
    25.               　　type="date"
    26.               　　size="small"
    27.               　　format="yyyy-MM-dd HH:mm:ss"
    28.               　　value-format="yyyy-MM-dd HH:mm:ss"
    29.               　　:picker-options="pickerOptionsEnd"
    30.               　　placeholder="选择课程结束日期">
    31.             </el-date-picker>
    32.           </el-form-item>
    33.         </el-col>
    34.       </el-row>
    35.       <el-row>
    36.         <el-col span="12">
    37.           <el-form-item label="是否为公开课" >
    38.             <el-select v-model="form.isOpen"  placeholder="选择是否公开" size="medium">
    39.               <el-option label="公开" value="2" />
    40.               <el-option label="不公开" value="1" />
    41.             </el-select>
    42.           </el-form-item>
    43.         </el-col>
    44.         <el-col span="12">
    45.           <el-form-item label="是否发布" >
    46.             <el-select v-model="form.isPublish"  placeholder="选择是否发布">
    47.               <el-option label="发布" value="1" />
    48.               <el-option label="不发布" value="0" />
    49.             </el-select>
    50.           </el-form-item>
    51.         </el-col>
    52.       </el-row>
    53.       <el-row>
    54.         <el-col span="12">
    55.           <el-form-item label="课程学时" >
    56.             <el-input v-model="form.classHour" autocomplete="off" />
    57.           </el-form-item>
    58.         </el-col>
    59.         <el-col span="12">
    60.           <el-form-item label="课程学分" >
    61.             <el-input v-model="form.credit" autocomplete="off" />
    62.           </el-form-item>
    63.         </el-col>
    64.       </el-row>
    65.       <el-row>
    66.         <el-col span="8">
    67.           <el-form-item label="学校"  >
    68.             <el-select v-model="form.school" placeholder="请选择学校" @change="getBottomSchools" >
    69.               <el-option v-for="item in schoolsFormData"
    70.                          :label="item.name"
    71.                          :value="item.name"
    72.                          :key="item.id"></el-option>
    73.             </el-select>
    74.           </el-form-item>
    75.         </el-col>
    76.         <el-col span="8">
    77.           <el-form-item label="学院"  >
    78.             <el-select v-model="form.organization" placeholder="请先选择学校，后选择学院" @change="getBottomOrgs">
    79.               <el-option v-for="item in organizationsFormData"
    80.                          :label="item.name"
    81.                          :value="item.name"
    82.                          :key="item.id"></el-option>
    83.             </el-select>
    84.           </el-form-item>
    85.         </el-col>
    86.         <el-col span="8">
    87.           <el-form-item label="系所"  >
    88.             <el-select v-model="form.departmentName" placeholder="请先选择学院，后选择系所">
    89.               <el-option v-for="item in departmentData"
    90.                          :label="item.name"
    91.                          :value="item.name"
    92.                          :key="item.id"></el-option>
    93.             </el-select>
    94.           </el-form-item>
    95.         </el-col>
    96.       </el-row>
    97.       <el-form-item label="课程简介" >
    98.         <el-input type="textarea" :rows="4" v-model="form.introduction" autocomplete="off" />
    99.       </el-form-item>
    100.       <el-form-item>
    101.         <el-button
    102.           :loading="loading"
    103.           type="primary"
    104.           @click="onSubmit"
    105.         >创建课程</el-button>
    106.         <el-button @click="onCancel">清空信息</el-button>
    107.       </el-form-item>
    108.     </el-form>
    109.   </div>
    110.  
    111.  
    112.  
    113. </template>
    114.  
    115. <script>
    116.     export default {
    117.         name: "index",
    118.         data(){
    119.             return {
    120.                 defalutForm: {},
    121.                 form: {
    122.                     id:'',
    123.                     name: '',
    124.                     startDate: '',
    125.                     endDate: '',
    126.                     isOpen: '',
    127.                     classHour: '',
    128.                     credit:'',
    129.                     introduction: '',
    130.                     isPublish:'',
    131.                     school:'',
    132.                     organization: '',
    133.                     departmentName: '', //系名称
    134.                     department:''  //系组织id 后端需要
    135.                 },
    136.                 schoolsFormData:[],
    137.                 organizationsFormData:[],
    138.                 departmentData:[],
    139.                 loading: false, // skeleton的loading
    140.                 rules: {
    141.                     name: [{ required: true, message: '请输入课程名', trigger: 'blur' }],
    142.                 },
    143.             }
    144.         },
    145.         created(){
    146.             this.getAllParentOrganizations()
    147.         },
    148.         computed: {
    149.             pickerOptionsBegin() {
    150.                 return {
    151.                     disabledDate: (time) => {
    152.                         if (this.form.endDate) {
    153.                             return   time.getTime() < Date.now() || time.getTime() > new Date(this.form.endDate).getTime();
    154.                         }else{
    155.                             return time.getTime() < Date.now() - 8.64e7
    156.                         }
    157.                     }
    158.                 }
    159.             },
    160.             pickerOptionsEnd() {
    161.                 return {
    162.                     disabledDate: (time) => {
    163.                         if(this.form.startDate){
    164.                             return time.getTime() < new Date(this.form.startDate).getTime()
    165.                         }else {
    166.                             return time.getTime() < Date.now() - 8.64e7
    167.                         }
    168.                     }
    169.                 }
    170.             },
    171.         },
    172.         methods:{
    173.             getBottomSchools(item){
    174.                 //  console.log(item+"item")
    175.                 for (let i = 0; i < this.schoolsFormData.length; i++) {
    176.                     if(item==this.schoolsFormData[i].name){
    177.                         //  console.log("id"+this.organizationsFormData[i].id)
    178.                         this.getAllBottomOrganizations(this.schoolsFormData[i].id)
    179.                     }
    180.                 }
    181.             },
    182.             getBottomOrgs(item) {
    183.                 //  console.log(item+"item")
    184.                 for (let i = 0; i < this.organizationsFormData.length; i++) {
    185.                     if(item==this.organizationsFormData[i].name){
    186.                         //  console.log("id"+this.organizationsFormData[i].id)
    187.                         this.getAllBottomDeps(this.organizationsFormData[i].id)
    188.                     }
    189.                 }
    190.  
    191.             },
    192.             getAllParentOrganizations(){
    193.                 this.$store.dispatch('organizationctrl/getAllParentOrganizations').then((res) => {
    194.                     this.schoolsFormData = []
    195.                     for (let i = 0; i < res.length; i++) {
    196.                         const schoolFormObj = {}
    197.                         schoolFormObj.id = res[i].id
    198.                         schoolFormObj.name = res[i].name
    199.                         schoolFormObj.parentId = res[i].parentId
    200.                         schoolFormObj.introduction=res[i].introduction
    201.                         this.schoolsFormData[i] = schoolFormObj
    202.                     }
    203.                 })
    204.             },
    205.             getAllBottomOrganizations(parentID){
    206.                 this.$store.dispatch('organizationctrl/getAllBottomOrganizations',parentID).then((res) => {
    207.                     this.organizationsFormData = []
    208.                     for (let i = 0; i < res.length; i++) {
    209.                         const organizationDataObj = {}
    210.                         organizationDataObj.id = res[i].id
    211.                         organizationDataObj.name = res[i].name
    212.                         organizationDataObj.parentId = res[i].parentId
    213.                         organizationDataObj.introduction=res[i].introduction
    214.                         this.organizationsFormData[i] = organizationDataObj
    215.                     }
    216.                 })
    217.             },
    218.             getAllBottomDeps(parentID){
    219.                 this.$store.dispatch('organizationctrl/getAllBottomOrganizations',parentID).then((res) => {
    220.                     this.departmentData = []
    221.                     for (let i = 0; i < res.length; i++) {
    222.                         const departmentDataObj = {}
    223.                         departmentDataObj.id = res[i].id
    224.                         departmentDataObj.name = res[i].name
    225.                         departmentDataObj.parentId = res[i].parentId
    226.                         departmentDataObj.introduction=res[i].introduction
    227.                         this.departmentData[i] =departmentDataObj
    228.                     }
    229.                 })
    230.             },
    231.             onSubmit() {
    232.                 this.loading = true
    233.                 this.$store
    234.                     .dispatch('coursectrl/addCourse',this.form)
    235.                     .then(() => {
    236.                         this.$message({
    237.                             message: '已成功创建',
    238.                             type: 'success'
    239.                         })
    240.                         this.loading = false
    241.                     })
    242.                     .catch((error) => {
    243.                         this.loading = false
    244.                         this.$message.error(error)
    245.                     })
    246.             },
    247.             onCancel() {
    248.                 this.$confirm('确定要清空所有信息吗？', '提示', {
    249.                     confirmButtonText: '确定',
    250.                     cancelButtonText: '取消',
    251.                     type: 'warning'
    252.                 }).then(() => {
    253.                     this.form = JSON.parse(JSON.stringify(this.defalutForm))
    254.                     this.$refs.form.clearValidate()
    255.                 }).catch(() => {
    256.                     this.$message({
    257.                         type: 'info',
    258.                         message: '已取消'
    259.                     })
    260.                 })
    261.             }
    262.         }
    263.     }
    264.  
    265. </script>

     

  • 相关阅读:
    【C#进阶】C#语法中一些常用知识点总结
    GBase 8a MPP Cluster 硬件规划参考
    vue3 el-form中嵌套el-tabale 对输入动态校验
    2022山东健康展，健康产业展，DJK中国健博会，睡眠健康展
    小米面试——案例总结
    IntelliJ IDEA 介绍、安装、配置优化与快捷键大全
    idea 类注释模板和方法注释模板设置
    RNA 25. SCI文章中估计组织浸润免疫细胞和基质细胞群的群体丰度(MCP-counter)
    【无标题】
    2022年湖北省住建厅特种作业操作证怎么报考？甘建二
  • 原文地址：https://blog.csdn.net/m0_57098080/article/details/126820209