添加新页面操作-CSDN博客

本文链接：https://blog.csdn.net/weixin_63213632/article/details/140123784

首先在view视图里要把我们要新增的页面的文件夹创建好，这里我以同时添加两个页面为例子，基本逻辑就是先在导航栏中添加父亲级目录，为什么要这样添加呢看一下效果图你就知道了，当我们点开基础模块的时候就可以看见下面的文件夹了；

首先在view视图里要把我们要新增的页面的文件夹创建好，

接着在menu.js下把我们需要添加的页面先注册到导航栏，这样当我们点击对应的控件按钮的同时才会跳转的相应的界面，这里我们新增两个页面嘛，所以只需要注册两个页面，然后基础模块的父类导航，只需要在后端的导航栏渲染那里注册一下就可以了，不需要在这里添加；

上面添加完毕之后就需要在后端注册一下前端信息了，看注释后端文件路径如下

前端调用后端操作方法：

首先先在如图所示的文件夹下创建数据库对应的这个是api下的js文件，这里创建供应商表对应的js

当我们在api创建完成时候，还需要在moudles再重新写一个对应的js文件，像下面这样。这里面的参数都是一一对应的，复制粘贴一下吧；

上面这两步做完就到了index的js文件下，把我们刚刚的在modules下供应商js声明一下，也就是这里选择的这两个地方都需要声明一下；

现在终于到显示页面部分了，这里按照罗工的方法，先想一下前端要显示的数据，然后先吧js的脚本把data数据先传递好，再写前端的部分，但是我觉得先写前端再看一下后端会更好一些，因此让我们来先写一下前端的部分，再根据前端的部分，再让js给我们调用方法返回数据；

好的，终于到了前端部分，前端部分代码如下放在temple的容器中，可以看见我们需要的数据有哪些，首先就是v-model绑定的数据源我们肯定也是需要的，虽然我们是用它作为数据输入来查参的，大概我们是需要以下属性的数据ok吗？然后我们可以给这些数据先赋初始值嘛，有更改的时候就会被更改无伤大雅。所以根据我们需要的数据来写js脚本；

pageSize: 20,

pageIndex: 1,

total: 0,

supplierName: '',

supplierContact: '',

supplerList: [],

<template>
    <div class="app-container">
        <div>
            <div class="search-part">
                <el-input v-model="supplierName" placeholder="供应商名称" style="width: 250px;padding-right: 50px;" class="filter-item"
                    @keyup.enter.native="handleSearch" />
                <el-input v-model="supplierContact" placeholder="联系人" style="width: 250px;padding-right: 50px;"
                    class="filter-item" @keyup.enter.native="handleSearch" />
                <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">
                    查询
                </el-button>
                <el-button style="margin-left: 20px;" type="success" @click="handleAddSupplier()"
                    icon="el-icon-circle-plus">新增供应商</el-button>
            </div>
            <el-table :data="supplerList" border style="width: 100%;" highlight-current-row>
                <el-table-column prop="SupplierCode" label="供应商编号" width="130">
                </el-table-column>
                <el-table-column prop="SupplierName" label="供应商名称" width="160">
                </el-table-column>
                <el-table-column prop="SupplierAddress" label="供应商地址" width="160">
                </el-table-column>
                <el-table-column prop="Mobile" label="手机" width="160">
                </el-table-column>
                <el-table-column prop="Email" label="邮箱" width="160">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                            icon="el-icon-edit">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :page-size="pageSize" :current-page.sync="pageIndex" :page-sizes="[10, 20, 50, 100]"
                layout="prev, pager, next,sizes" :total="total" @size-change="handleSizeChange"
                @current-change="handleIndexChange">
            </el-pagination>
        </div>

    </div>
</template>

根据上面使用的数据和需要调用的方法，让我们来编辑对应的js脚本，以便赋值给html数据源和方法触发；

export default {
    data() {
        return {
            pageSize: 20,
            pageIndex: 1,
            total: 0,
            supplierName: '',
            supplierContact: '',
            supplerList: [],
        }
    },
    methods: {
        getSupplierPageList() {
            var param = {
                page: this.pageIndex,
                pageSize: this.pageSize,
                name: this.supplierName,
                contact: this.supplierContact
            }
            this.$store.dispatch('supplier/getSupplierPageList', param).then((res) => {
                this.supplerList = res.MsgContent //将查询出来的供应商list赋值给supplerList，这样在我们的前端语句就被赋值可以显示了；
                this.total = res.Total
            })
        },
        handleSearch(){
            this.pageIndex=1;
            this.getSupplierPageList();
        },
        handleAddSupplier(){

        },
        handleEdit(index,row){

        },
        handleSizeChange(val) {
            // 分页--size改变时触发 和 index改变是触发
            this.pageSize = val
            this.getSupplierPageList()
        },
        handleIndexChange(val) {
            this.getSupplierPageList()
        },
    },
    mounted() {
        this.getSupplierPageList()
    }

}

</script>

杂七杂八的解释，首先是model对应的userData这个是我们需要的单个对象嘛，然后第二个框框不用说啦，数据绑定，然后第三个prop对应的名字是用来做下面函数的功能使用的；

下面画大红圈的地方是把前端要传的参数赋值给后端数据发送信息的方法，左边是后端要被赋值的属性，名称要和后端接口的参数名称对应上，右边则是我们前端的值，跟前端对应好就可以了，然后再把整体被赋值的参数类型param发送给后端。

下面来解释一下这串js代码，因为我有时候会对字段属性的大小写混淆了自己，为什么有时候的字段属性是大写，有的字段属性是小写的，这里则详细解释了为什么，在这个项目里我们前端的字段名称都是小写的，但是接收的返回对象的字段名称则是后端数据的，因此字段名称就得和后端一样都是大写的，例如下面这个例子，这是编辑，编辑的时候我们需要调用后端的查询方法，

 handleEdit(index,row){
            var param = {
                customerCode: row.CustomerCode//读取当前编辑当前行的CustomerCode属性赋值给它；
            }
            this.$store.dispatch('customer/getCustomerByCode', param).then((res) => {
//将这个被赋值的参数直接发送给store的方法，
//然后等待then响应然后接收到响应数据res，res包含了各种数据，
//这里我们需要接收一个对象，所以把res中的对象属性赋值给我们，
//ok，所以这里customData中接收的属性对象是后端赋值给它的，
//而js语言是弱类型的别人赋值什么属性给//
//他，他就会对应有什么字段什么属性，因此这里就是大小的；
                this.customData = res.MsgContent
                this.dialogFormVisible = true
                this.isEdit = true
            })
        },

报错问题一：看不见导航栏没有更新，检查这个文件有没有写对，今天就多了一个双引号