实战-新手入门篇-html+vue+axios+bootstrap

最新推荐文章于 2024-06-18 09:01:21 发布

原创最新推荐文章于 2024-06-18 09:01:21 发布 · 403 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue #bootstrap

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Vue.js和Bootstrap构建一个类似Excel的表单输入界面，支持数据自动计算和保存功能。涵盖前端框架应用及接口交互示例。

实战-新手入门篇-前端

一、前言
二、代码部分

一、前言

功能描述：仿excel表格输入数据后保存表单
新建：使用location.reload()刷新页面
保存：将表格数据添加到数据库（需结合后端接口）
其中，小计和总计两项数据是数量和参考价格自动得出。
使用工具：HBuilder X
网址：Vue官网、bootstrap官网、jquery-菜鸟教程

二、代码部分

1、引入在线的css和js库

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

说明：

引入bootstrap.min.css的同时要引入jquery.js，因为bootstrap组件依赖jquery库。
使用在线的网址引入是觉得会更方便新手学习。上面的src网址并不是绝对的，如果在控制台看到加载不成功的报错信息，请更换src网址。

2、bootstrap部分

 <div class="row">
        <div class="col-md-12">
            <p>
                <span style="float: left">此表一式二份，申购实验室、院办各一份</span>
                <button style="float:right;" type="button" class="btn btn-default" @click="save()">保存</button>
                <button style="float:right;" type="button" class="btn btn-default" onclick="location.reload()">新建</button>
            </p>
            <h3 style="padding:12px;">计算机科学与工程学院实验室物品申购单</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1">实验室</div>
        <div class="col-md-2"><input class="inputStyle" type="text" v-model="laboratory" placeholder="例如：5-326"/></div>
        <div class="col-md-1">使用日期</div>
        <div class="col-md-3"><input class="inputStyle" type="text" v-model="useDate" placeholder="例如：2020-01-01"/></div>
        <div class="col-md-1">申购日期</div>
        <div class="col-md-4"><input class="inputStyle" type="text" v-model="applyDate" placeholder="例如：2020-01-01"/></div>
    </div>
    <div class="row instruction">
        <div class="col-md-1">申购说明</div>
        <div class="col-md-11" ><input class="inputStyle" type="text" v-model="instruction"/></div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p style="text-align: left">附表： 物品申购单</p>
        </div>
    </div>
    <div class="row thead">
        <div class="col-md-1">序号</div>
        <div class="col-md-2">品名</div>
        <div class="col-md-2">型号（规格）</div>
        <div class="col-md-1">单位</div>
        <div class="col-md-1">数量</div>
        <div class="col-md-1">参考价格（元）</div>
        <div class="col-md-1">小计</div>
        <div class="col-md-1">签领</div>
        <div class="col-md-2">日期</div>
    </div>
    <div class="tbody">
        <div class="row" v-for="item in material" :key="item.materialId" >
            <div class="col-md-1">{{ item.materialId}}</div>
            <div class="col-md-2"><input class="inputStyle" type="text" v-model="item.materialName" /></div>
            <div class="col-md-2"><input class="inputStyle" type="text" v-model="item.materialType" /></div>
            <div class="col-md-1"><input class="inputStyle" type="text" v-model="item.unit" /></div>
            <div class="col-md-1"><input class="inputStyle" type="text" v-model="item.materialNumber" /></div>
            <div class="col-md-1"><input class="inputStyle" type="text" v-model="item.price" /></div>
            <div class="col-md-1">{{ item.price && item.materialNumber ? item.price * item.materialNumber : '&nbsp;' }}</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-2">&nbsp;</div>
        </div>
    </div>
    <div class="footer">
        <div class="row" >
            <div class="col-md-8">总计</div>
            <div class="col-md-1">{{sum}}</div>
            <div class="col-md-3">&nbsp;</div>
        </div>
    </div>

<style>
    .row div{
        border: 1px solid #333333;
        text-align: center;
    }
    .instruction div{
        line-height: 50px;
        height: 50px;
    }
    .btn{
        margin: 5px;
        background-color: blue;
        color: aliceblue;
    }
    .tbody .row div{
        height: 30px;
        line-height: 30px;
    }
    .thead div{
        height: 40px;
    }
    .col-md-1,.col-md-2,.col-md-3,.col-md-4 {
        padding: 0;
        margin: 0;
    }
    .inputStyle{
        border: none;
        width: 100%;
        height: 100%;
        padding-left: 5px;
        outline: none;
    }
</style>

说明：

v-model、@click、{{ }}、v-for等，这些都是vue的内容
上面的代码仅仅使用了bootstrap的网格系统这个样式。我个人接触bootstrap不深，更多的是把它作为css样式库使用，想更深层次学习的童鞋，可以到官网学习。

3、vue部分

<!-- vue 根据 id 获取绑定元素,相当于绑定了 id 为 container 的作用域 -->
<div id="container">
	<!-- 其他标签内容--->
</div>
<script>
	// 定义一个 Vue 实例
   let vue = new Vue({
        el:'#container',  // vue根据id绑定元素
        created(){        // 生命周期函数
            this.initMaterial()
        },
        data:{
        // 数据要在data里面定义
            material:[],
            laboratory:'',
            useDate: '',
            applyDate: '',
            instruction: ''
        },
        computed:{
        // vue的计算属性
          sum:function () {
              let total = 0
             if(this.material){
                 for(let i=0;i<this.material.length;i++)
                 {
                     total += this.material[i].materialNumber*this.material[i].price
                 }
             }
              return total
          }
        },
        methods:{
        // 在这里定义方法
            initMaterial(){
                let material = []
                for(let i = 1 ; i <= 15 ; ++i){
                    let temp = {
                        materialId:i,
                        materialName: '',
                        materialType: '',
                        unit: '',
                        materialNumber: '',
                        price: ''
                    }
                    material.push(temp)
                }
                this.material = material
            },
            save(){
                if(this.laboratory && this.useDate && this.applyDate && this.material ){
                	// axios 部分
                    axios.post('/addMaterial',JSON.stringify(
                        {
                            laboratory: this.laboratory,
                            useDate: this.useDate,
                            applyDate: this.applyDate,
                            instruction: this.instruction,
                            material:this.material
                        }),{headers: {'Content-Type': 'application/json'}}).then(res=>{
                        console.log('res',res)
                        if(res.data === 'success'){
                            alert("保存成功")
                        }
                        else{
                            alert("保存失败，请重试！")
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                else{
                    alert("保存失败，请确保表格数据填入完整！")

                }
            }
        }
    });
</script>

说明：

{headers: {‘Content-Type’: ‘application/json’}}定义接口发送的是json数据，这里的数据类型必须前后端统一，不然后端在接收数据的时候会出现数据错误。
JSON.stringify将对象转化为JSON字符串。
Vue有8个生命周期函数，beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 。具体的作用可以网上自行搜索，一般是在created或者mounted中调用页面初始化函数，渲染界面的数据。

附加

// 基于jquery的ajax
<script>
  function ajaxExample(){
          $.ajax({
              type:'post', 
              url:'/addMaterial',
              contentType: "application/json; charset=utf-8",  // 前后端接口数据类型为json数据
              data:JSON.stringify({
                  laboratory:"ss",
                  useDate:'2020-02-02',
                  applyDate:'2020-12-22',
                  instruction:'说明',
                  material:[{
                      materialId:1,
                      materialName: '测试1',
                      materialType: '类型1',
                      unit: '单位',
                      materialNumber: 1,
                      price: 1.2
                  }]}),
              success:function(res){ // 成功返回
                  console.log(res)
              },
              error:function (err) {  // 失败返回
                  console.log(err)
              }

          })
</script>