记录第一个web前端项目

Posted 2023-01-01 mu-ze

大二上学期闲着没事儿干，便去了之前教我java的老师的项目组，去了之后才知道是做一个web前端的项目，但我对于这方面可以说完全是一个小白，但是老师催得也紧，简单学了学html,css,javascript跟vue,elementui便开始干活了。

在这个项目里，我的任务也挺简单的，就是画个几个设备管理界面。这里我就举一个界面的例子吧。

<!--模板-->
<template>
  
    
            <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row :gutter="20">
        <el-col :span="6"><el-input
    placeholder="请输入查询设备型号"
    v-model="search">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input></el-col>
        
        <el-col :span="6"><el-button  type="primary" style="margin:0 750px;  display: block;"
          @click="gotolink(‘/adddevicemodel‘)">添加</el-button></el-col>
        </el-row>
    

    
  </div>
  <div >
    <template>
    <el-table
      :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      
      style="width: 100%">
      <el-table-column
        prop="name"
        label="设备ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="model"
        label="设备型号">
      </el-table-column>
      <el-table-column
        prop="type"
        label="设备类型">
      </el-table-column>
      <el-table-column
        prop="brand"
        label="设备品牌">
      </el-table-column>
      <el-table-column
        prop="seris"
        label="设备系列">
      </el-table-column>
      
      <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

    </el-table>
  </template>
  </div>
  <div class="block" style="margin-top:15px;">
           <el-pagination 
            align=‘center‘ 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[1,2,10,20]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
            </el-pagination>
        </div>
</el-card>

        
  
  
</template>



<!--逻辑-->
<script>
export default 
    name:‘DeviceModel‘,
    data()
        return 
      search: ‘‘    ,    
        activeIndex: ‘1‘,
        activeIndex2: ‘1‘,
        isCollapse: true,
        tableData: [
            name: ‘32DVG4FON1‘,
            model:‘PEW-A-8.34‘,
            type:‘B0001‘,
            brand: ‘山特‘,
            seris:‘D0009‘,
          , 
           name: ‘30DVG4FON1‘,
            model:‘PEW-A-8.30‘,
            type:‘B0002‘,
            brand: ‘施耐德‘,
            seris:‘D0003‘,
          , 
           name: ‘35DVG4FON1‘,
            model:‘PEW-A-8.31‘,
            type:‘B0003‘,
            brand: ‘艾默生‘,
            seris:‘D0004‘,
          , 
            name: ‘31DVG4FON1‘,
            model:‘PEW-A-8.34‘,
            type:‘B0004‘,
            brand: ‘任达‘,
            seris:‘D0005‘,
          ],
         total: 0,
         currentPage:1,
         pageSize:2
        
    ,
    methods: 
    

      gotolink(inc)
        this.$router.replace(inc);

      ,
      handleRemove(file, fileList) 
        console.log(file, fileList);
      ,
      handlePictureCardPreview(file) 
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      ,
      resetDateFilter() 
        this.$refs.filterTable.clearFilter(‘date‘);
      ,
      clearFilter() 
        this.$refs.filterTable.clearFilter();
      ,
      formatter(row, column) 
        return row.address;
      ,
      filterTag(value, row) 
        return row.tag === value;
      ,
      filterHandler(value, row, column) 
        const property = column[‘property‘];
        return row[property] === value;
      ,
      handleSizeChange(val) 
            console.log(`每页 $val 条`);
            this.currentPage = 1;
            this.pageSize = val;
        ,
        handleCurrentChange(val) 
            console.log(`当前页: $val`);
            this.currentPage = val;
        ,
        handleEdit(index, row) 
        console.log(index, row);
      ,
      handleDelete(index, row) 
        this.tableData.splice(index, 1);
      
      

    ,computed: 
    // 前端过滤
    tables () 
      const search = this.search
      if (search) 
        return this.tableData.filter(dataNews => 
          return Object.keys(dataNews).some(key => 
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          )
        )
      
      return this.tableData
    ,
    // 总条数
    
  ,
  watch: 
   // 检测表格数据过滤变化，自动跳到第一页
    tables () 
      this.currentPage = 1
    
  
    

  

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--样式-->
<style >

 .text 
    font-size: 14px;
  

  .item 
    margin-bottom: 18px;
  

  .clearfix:before,
  .clearfix:after 
    display: table;
    content: "";
  
  .clearfix:after 
    clear: both
  

  .box-card 
    width: 100%;
  

  .el-row 
    margin-bottom: 20px;
    &:last-child 
      margin-bottom: 0;
    
  
  .el-col 
    border-radius: 4px;
  
  
  .row-bg 
    padding: 10px 0;
    background-color: #f9fafc;
  
  

</style>

这个就是界面的展示了,至于这个编辑功能我还没有来得及实现，如果我有时间实现的话，我会在以后的文章里说明的，搜索与分页的功能我也是参考了很多的资料才融合到一块的，再者就是这个点击“添加”按钮后的跳转界面

<!--模板-->
<template>
  <div>
      <el-card class="box-card" style="width:100%">
  <div slot="header" class="clearfix">
    <span style="font-size: 20px">添加设备</span>
  </div>
  <div>
  <el-row :gutter="20">
  <el-col :span="4">设备ID:</el-col>
  <el-col :span="6"><el-input v-model="input" placeholder="请输入设备ID"></el-input></el-col>
  
</el-row>
<el-row :gutter="20">
  <el-col :span="4">设备型号:</el-col>
  <el-col :span="6"><el-input v-model="input" placeholder="请输入设备型号"></el-input></el-col>
  
</el-row>
<el-row :gutter="20">
  <el-col :span="4">设备类型:</el-col>
  <el-col :span="6"><el-select v-model="value_1" placeholder="请选择设备类型" style="width: 100%;">
    <el-option
      v-for="item in options_1"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select></el-col>
  
</el-row>
<el-row :gutter="20">
  <el-col :span="4">设备品牌:</el-col>
  <el-col :span="6"><el-select v-model="value_2" placeholder="请选择设备品牌" style="width: 100%;">
    <el-option
      v-for="item in options_2"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select></el-col>
  
</el-row>

<el-row :gutter="20">
  <el-col :span="4">设备系列:</el-col>
  <el-col :span="6"><el-select v-model="value_3" placeholder="请选择设备系列" style="width: 100%;">
    <el-option
      v-for="item in options_3"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select></el-col>
  
</el-row>
     <el-button plain @click="open1" type="primary" style="margin:0 auto;display:block;width:200px;">确定</el-button>

  </div>
</el-card>
    
  </div>
  
</template>



<!--逻辑-->
<script>
export default 
    name:‘AddDeviceModel‘,
    data()
        return 
            input: ‘‘,
      options_1: [
          value: ‘选项1‘,
          label: ‘黄金糕‘
        , 
          value: ‘选项2‘,
          label: ‘双皮奶‘
        , 
          value: ‘选项3‘,
          label: ‘蚵仔煎‘
        , 
          value: ‘选项4‘,
          label: ‘龙须面‘
        , 
          value: ‘选项5‘,
          label: ‘北京烤鸭‘
        ],
        options_2: [
          value: ‘选项1‘,
          label: ‘封丘卷尖‘
        , 
          value: ‘选项2‘,
          label: ‘双皮奶‘
        , 
          value: ‘选项3‘,
          label: ‘蚵仔煎‘
        , 
          value: ‘选项4‘,
          label: ‘龙须面‘
        , 
          value: ‘选项5‘,
          label: ‘北京烤鸭‘
        ],
        options_3: [
          value: ‘选项1‘,
          label: ‘封丘卷尖‘
        , 
          value: ‘选项2‘,
          label: ‘双皮奶‘
        , 
          value: ‘选项3‘,
          label: ‘蚵仔煎‘
        , 
          value: ‘选项4‘,
          label: ‘龙须面‘
        , 
          value: ‘选项5‘,
          label: ‘北京烤鸭‘
        ],
        value_1: ‘‘,
        value_2:‘‘,
        value_3:‘‘
        
    ,
  methods:
    open1() 
        this.$notify(
          title: ‘成功‘,
          message: ‘添加设备型号成功‘,
          type: ‘success‘
        );
      
  
  

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--样式-->
<style >
.text 
    font-size: 14px;
  

  .item 
    margin-bottom: 18px;
  

  .clearfix:before,
  .clearfix:after 
    display: table;
    content: "";
  
  .clearfix:after 
    clear: both
  

  .box-card 
    width: 480px;
  

  .el-row 
    margin-bottom: 20px;
    &:last-child 
      margin-bottom: 0;
    
  
  .el-col 
    border-radius: 4px;
  
  .bg-purple-dark 
    background: #99a9bf;
  
  .bg-purple 
    background: #d3dce6;
  
  .bg-purple-light 
    background: #e5e9f2;
  
  .grid-content 
    border-radius: 4px;
    min-height: 36px;
  
  .row-bg 
    padding: 10px 0;
    background-color: #f9fafc;
  

</style>

 这一模块里，还有一些不足，比如说没有做一个排空检查。

事实上，做项目的过程中，我曾多次怀疑做项目的意义何在，因为在这个工程中，我不是特别的懂代码的内部原理，糊里糊涂的，我觉得原因还是学的时候节奏较快，囫囵吞枣所致，在我初步构建完界面的时候，我内心还是非常高兴的，然而在我开完项目会议时，老师跟我讲想让我连上数据库，我起初一听，合情合理，这样网页的数据存储就好办了，功能也可以更加的完善了，我就觉得还行，因为我没学过数据库，我天真的以为网页前端的数据可以直接存储在mysql里，在我开始学习数据库时，我突然发现，我的想法太天真了，我需要用java做一个后端进行数据交互，这样的话，任务难度就超过了我的预期，耗时会大大加长，现在我的内心真的是绝望的，粗制滥造，意义何在？