vue框架从前端到后台的流程

一、vue页面书写：

<template>
    <div>
        <!-- 终端表格-->
        <tp-table ref="itemTab" :all_params="item_params" @add-btn="addItem"  @del-btn="delItem"></tp-table>
        <!-- 增加/编辑终端model-->
        <Modal v-model="itemModelShow" width="580px"
               :title="title"
               @on-ok="submitItem"
               @on-cancel="cancelItem">
            <slot name="content">
                <Form ref="itemItem" :model="itemItem" :rules="item_ruleValidate" label-position="left" :label-width="100">
                    <FormItem :label="$t('名称：')" prop="itemName">
                        <Input v-model="itemItem.itemName" clearable placeholder="Enter something..."/>
                    </FormItem>
                    <FormItem :label="$t('模板名称：')" prop="type">
                        <Select v-model="itemItem.type">
                            <Option :value="0" :key="0">{
  {$t('客户端')}}</Option>
                            <Option :value="7" :key="7">{
  {$t('客户端（主动）')}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem :label="$t('类型：')" prop="type">
                        <Select v-model="itemItem.type">
                            <Option :value="0" :key="0">{
  {$t('客户端')}}</Option>
                            <Option :value="7" :key="7">{
  {$t('客户端（主动）')}}</Option>
                            <Option :value="12" :key="12">{
  {$t('ipmi客户端')}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem :label="$t('键值：')" prop="itemKey" >
                        <Input v-model="itemItem.itemKey"  placeholder="Enter something..." clearable/>
                    </FormItem>
                    <FormItem :label="$t('信息类型：')" prop="value_type">
                        <Select v-model="itemItem.value_type">
                            <Option :value="3" :key="3">{
  {$t('数字')}}</Option>
                            <Option :value="1" :key="1">{
  {$t('字符')}}</Option>
                            <Option :value="0" :key="0">{
  {$t('浮点')}}</Option>
                            <Option :value="2" :key="2">{
  {$t('日志')}}</Option>
                            <Option :value="4" :key="4">{
  {$t('文本')}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem :label="$t('单位：')" prop="units" >
                        <Input v-model="itemItem.units"  placeholder="Enter something..." clearable/>
                    </FormItem>
                    <FormItem :label="$t('数据更新间隔(秒)：')" prop="delay" >
                        <Input v-model="itemItem.delay"  placeholder="Enter something..." clearable/>
                    </FormItem>
                    <FormItem :label="$t('历史数据保留时长（单位天)：')" prop="history" >
                        <Input v-model="itemItem.history"  placeholder="Enter something..." clearable/>
                    </FormItem>
                    <FormItem :label="$t('趋势数据存储周期(单位天)：')" prop="trends" >
                        <Input v-model="itemItem.trends"  placeholder="Enter something..." clearable/>
                    </FormItem>
                    <FormItem :label="$t('描述：')" prop="description" >
                        <Input v-model="itemItem.description" :autosize="true" type="textarea" placeholder="Enter something..."/>
                    </FormItem>

                </Form>
            </slot>
        </Modal>
    </div>
</template>

<script>
    import TpTable from "../../../components/locale-components/tp-table/tp-table";
    export default {
        name: "check_item",
        components: {TpTable},
        data:function(){
            return {

                //==================终端显示start==================
                title:'',
                itemModelShow :false,
                itemItem: {
                    id:'',
                    itemIp: '',
                    itemName: '',
                    type: '',
                    itemKey: '',
                    value_type: '',
                    units: '',
                    delay: '',
                    history: '',
                    trends: '',
                    description: '',
                    createTime: '',
                    uuid:''
                },
                item_params:{
                    id: 'item_tab',
                    index: true,
                    loading:true,
                    checkBox: true,
                    url: '/ssa/java/asset/vm/itemList',
                    type:'table',
                    ajaxType:'get',
                    data:{},
                    add_btn:true,
                    del_btn:true,
                    cols: [
                        {
                            title: '模板名称',
                            key: 'applicationName'
                        },
                        {
                            title: '检查项名称',
                            key: 'itemName'
                        },
                        {
                            title: '键值',
                            key: 'itemKey'
                        },
                        {
                            title: '类型',
                            key: 'type',
                            render: (h, params) => {
                                return h('div', params.row.type == 0 ? '被动' : '主动');
                            }
                        },
                        {
                            title: '信息类型',
                            key: 'value_type',
                            render: (h, params) => {
                                if(params.row.value_type == "1"){
                                    return h('div', '字符');
                                }else if(params.row.value_type == "2"){
                                    return h('div', '日志');
                                }else if(params.row.value_type == "3"){
                                    return h('div', '数字');
                                }else if(params.row.value_type == "4"){
                                    return h('div', '文本');
                                }else if(params.row.value_type == "0"){
                                    return h('div', '浮点');
                                }
                            }
                        },
                        {
                            title: '单位',
                            key: 'units'
                        },
                        {
                            title: '数据更新间隔',
                            key: 'delay',
                            render: (h, params) => {
                                return h('div', params.row.delay +"（秒）");
                            }
                        },
                        {
                            title: '历史数据保留时长',
                            key: 'history',
                            render: (h, params) => {
                                return h('div', params.row.history +"（天）");
                            }
                        },
                        {
                            title: '趋势数据存储周期',
                            key: 'trends',
                            render: (h, params) => {
                                return h('div', params.row.trends +"（天）");
                            }
                        },
                        {
                            title: '描述',
                            key: 'description'
                        },
                        {
                            title: '操作',
                            key: '操作',
                            width: 200,
                            align: 'center',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.show(params.index)
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                /*this.itemItem= {
                                                    id: params.row.id,
                                                    itemIp: params.row.itemIp,
                                                    itemName: params.row.itemName,
                                                    admin: params.row.admin,
                                                    type: params.row.type,
                                                    remark:params.row.remark,
                                                    createTime:params.row.createTime,
                                                    uuid:params.row.uuid
                                                };
                                                this.title="修改";
                                                this.itemModelShow =true;*/
                                            }
                                        }
                                    }, '修改')
                                ]);
                            }
                        }
                    ]
                },
                item_ruleValidate: {
                    itemIp: [
                        { required: true, message: '终端IP不能为空', trigger: 'blur' }
                    ]
                },
                //==================终端显示end==================


            }
        },
        methods: {

            //=========