记录第一个web前端项目

大二上学期闲着没事儿干，便去了之前教我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做一个后端进行数据交互，这样的话，任务难度就超过了我的预期，耗时会大大加长，现在我的内心真的是绝望的，粗制滥造，意义何在？

原文地址：https://www.cnblogs.com/mu-ze/p/11617893.html

时间： 2024-11-20 09:49:21

记录第一个web前端项目的相关文章

第一个Web前端开发项目：天气应用

By Long Luo 最近几天学习了下网页开发,通过学习,完成了第一个Web前端开发项目:天气应用 数据源是Yahoo! Weather 使用了jQuery库开发,虽然现在啥都不会,也就到处copy. Created by Long Luo at 2014-09-07 11:36:20 @Shenzhen, China.

如何打造一个&quot;逼格&quot;的web前端项目

最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个"逼格"的web前端项目. 前端理论篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中,为了下一步实现前端工程化. 编码风格有很多.团队代码规范一定要统一.便于维护web项目.     接口文档规范:制定RESTful架构接口规范文档. PS:果断使用用apiDoc构建API文档.美观好看,易于维护. 还用Word或者Excel写文档,太low了. 前后端分离:简单理解为前端

Angular01 通过angular-cli来搭建web前端项目

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见三少的博客(开发基础分类) 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就是一个html文件 我们的应用会在app-root

如何自学成为一个WEB前端

WEB前端是做什么的? 那些什么高大上的介绍作者就略过了,简单来说就是做网页的,我们上网浏览的网站界面就是WEB前端工程师做的. 在互联网迅速发展的近几年,你上网冲浪的时候是不是感觉WEB网站越来越漂亮酷炫,功能越来越多,越来越复杂?各种类似桌面软件的Web应用大量出现,没错,WEB前端在其中有着很大的功劳. 发展方向 WEB前端的发展迅速导致其细分出了很多细分职业,我先来说一下我了解的WEB前端的分支,欢迎各位前辈补充: 1.网页设计方向(移动和PC):主要偏向html.css.js主要是做一

一个Web前端自学者的自述

想来想去还是写下这篇文章,先说明,我精通JAVA编程语言和web前端常见的技术,个人是做JAVA的多,但是更加喜欢前端.因为我从高一开始接触JAVA,家父是黑马的JAVA讲师,自己对编程很热爱,在大学的时候就选择了软件工程.距今接触开发能有十年的时间.本次文章不可以太短,显得我不太认真,也不可以太长,那样看的人很少. 我学习编程的主要优势是身边有个老司机,也就是我爸爸,做了开发近20年,有什么自己解决不了的问题可以问他,但是奇怪的是很多问题都在尝试自己解决,这就锻炼了我自己解决问题的能力,而且学

使用模板创建第一个Web API项目

软件环境 vs 2015 update3 本节将通过例子讲述创建Web API 项目的方法 第一步,打开vs ,依次通过[文件]菜单,[新建][项目]命令,大致步骤如下图 :   第2步,在弹出对话框中,选择左边C#模板下的Web ,然后选择第一个基于传统Framework4.5.2 第一个选择 ,大致如下图:     第3步,基于上一步确定后,选择 webAPI 模板,会自动引用mvc和WebAPI 的核心引用,大致如下:     创建成功后,大致的目录结构如下:   上面的目录结构和MVC组

作为一个web前端工程师，要不断的深入自己的技能

现在,前端工程师终于前所未有的在Web中占有了一席之地.随着多设备.浏览器和Web标准的演变革命,前端正在成为兼顾逻辑.性能.交互.体验的综合性岗位. 虽然现在互联网行业普遍缺少Web前端工程师,但是我们相信越来越多的人将会加入Web前端的大军.不仅是因为大多数Web前端工作提供的优渥薪水和办公环境,也是因为Web前端编程变得越来越有挑战和意义. 那么,如何成为一名Web前端开发者呢?想要成为一名专业的Web前端开发者,我们需要深入了解其职责.下面千锋重庆的老师给大家详细解读下成为一名Web前端

一个web前端工程师到底需要掌握哪些技能？有何晋升？

对于前端基础需要学习哪些内容,之前文章已经有写过不少了,本篇重在谈论: 作为一名前端想要晋升,需要什么条件?现在在用 React,要不要也学学 Vue?有必要学习 Node.js/Flutter/ 函数式吗?这几个问题看似毫无关联,但是其实它们本质上都是同一个问题,这个问题就是"一个前端工程师到底需要掌握哪些技能?" 其实在行业里面,对前端工程师的能力模型有一个基本的认知,不同公司的定义可能有细微差别,但是它的内核是一致的. 这里我给出一张图,是我自己理解的前端工程师的技能模型. 为了

【vue】创建一个vue前端项目，编译，发布

[一]mac检查是否安装node.js nvm --version =>0.33.9 node -v =>v10.7.0 [二]安装vue-cli cnpm install --global vue-cli [三]创建一个vue项目.基于 # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置,默认回车即可 原文地址:https://www.cnblogs.com/shangxiaofei/p/9429512.htm