vue 实战 1 项目实现数据的获取展示及提交

1.项目结构

 

 2.根据后端api编写 super_cmdb/api/api.js

import axios from 'axios'

var boamp_api_address = 'http://127.0.0.1:8001';

export function getVersionList() {  //获取版本列表
    var versionlist_url = boamp_api_address + '/super_cmdb_api/api/version_list/';
    return axios.get(versionlist_url)
}

export function postVersionList(package_version,version,md5_number,remarks,b_project_id) {  //提交版本信息
    //console.log(package_version,version,md5_number,remarks,b_project_id);
    var url = boamp_api_address + '/super_cmdb_api/api/version_list/';
    return axios.post(url,{
        "package_version": package_version,
        "version": version,
        "md5_number": md5_number,
        "remarks": remarks,
        "b_project": b_project_id
    })
}

export default {getVersionList,postVersionList}

3.编写前端页面并调用api.js，vim super_cmdb/views/version_list.vue

<template>
    <div class="hello">
        <form action="">
            输入包名：<input type="text" placeholder="package_version" v-model="package_version"><br>
            输入版本：<input type="text" placeholder="version"  v-model="version"><br>
            输入MD5：<input type="text" placeholder="md5_number"  v-model="md5_number"><br>
            输入备注：<input type="text" placeholder="remarks"  v-model="remarks"><br>
            所属项目：<input type="number" placeholder="b_project_id"  v-model="b_project_id"><br>
        </form>
        <button type="submit" @click="VersionListSubmit()">submit</button>

        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <td style="text-align: center">ID</td>
                <td style="text-align: center">版本包</td>
                <td style="text-align: center">版本号</td>
                <td style="text-align: center">md5</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item of version_list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.package_version }}</td>
                <td style="text-align: center">{{ item.version }}</td>
                <td style="text-align: center">{{ item.md5_number }}</td>
            </tr>
            </tbody>
        </table>

    </div>
</template>


<script>
    import {getVersionList,postVersionList} from '../api/api.js'
    export default {
        name: 'version_list',
        components: {},
        data() {
            return {  //返回获取到的数据，渲染到页面
                version_list: '',
                package_version: '',
                version: '',
                md5_number: '',
                remarks: '',
                b_project_id: '',
            }
        },
        created() {     //created:html加载完成之前，执行。执行顺序：父组件-子组件

        },
        mounted(){  //mounted:html加载完成后执行。执行顺序：子组件-父组件
            getVersionList().then(response => {
                this.version_list = response.data
                console.log(this.version_list)
            })
        },
        methods: {  //methods：事件方法执行
            VersionListSubmit () {
                console.log(this.package_version,this.version,this.md5_number,this.remarks,this.b_project_id)
                postVersionList(this.package_version,this.version,this.md5_number,this.remarks,this.b_project_id).then(response => {
                    console.log(response)
                    alert("添加成功")
                })
            } // add a book to backend when click the button
        },
        watch:{ //watch：watch是去监听一个值的变化，然后执行相对应的函数。

        },
        computed:{  //computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

        }
    }
</script>

4.添加项目入口路由 super_cmdb/src/router/index.js

{
      path: '/version_list',
          name: 'axios get获取版本数据展示',
      component: () => import('../views/version_list')
}

5.项目自动重启，访问测试：http://10.200.202.137:8080/version_list