un7.12:如何在VSCode中实现列表功能？

最新推荐文章于 2024-05-14 15:13:11 发布

小格子衬衫

最新推荐文章于 2024-05-14 15:13:11 发布

阅读量1.5k

点赞数

分类专栏： ruoyi vue 文章标签：大数据

本文链接：https://blog.csdn.net/m0_64818669/article/details/125743899

版权

ruoyi 同时被 2 个专栏收录

7 篇文章 5 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

Visual Studio Code（简称VS Code ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台的源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对js和Node.js的内置支持，并具有丰富的其他语言和运行时扩展的生态系统。是专门用来写Web前端的。

如此便捷的一款软件，我们应该如何运用呢？今天我就来给大家分享一些自己的经验。

所需软件：README、REDIS、IDEA。

前提：打开IDEA，启动项目，打开REDIS，运行。

一、打开README，在api下新建一个basic文件夹，在文件夹下新建一个js文件，我的叫channel.js，这个页面是用来写网络请求的，写的时候需要注意两点。

1、导入请求。

2、查询列表。

需要注意的是：路径一定要写正确，否则获取不到页面。

//发送网络请求，相当于uni-app里的uni.request()
import request from '@/utils/request';
//查询channel列表
export function listChannel(query){
    return request({
        url: '/basic/channel/list', //请求的路径
        method: 'get',  //请求方式get、post
        params: query  //请求的参数
    });
}

二、在views中新建一个basic文件夹，在文件夹中再新建一个channel，在文件夹下新建一个vue文件，我的叫index.vue，最基础的vue文件写出来，这个以后也可以当做模板代码，建议保存下来，之后创建vue文件的时候用到，代码如下：

<!-- 视图层 -->
<template>
    <div>

    </div>
</template>
<!-- 业务层 -->
<script>
export default {
    //数据（变量的声明）
    data(){
        return{

        }
    },
    //页面初始化函数，相当于uniapp中的onShow
    created:{

    },
    //函数
    methods:{
        
    }
}
</script>

<!-- 样式表 -->
<style>

</style>

三、大概写一个表格，通过查api，发现标签由之前的uni换成了现在的el。

1、一定要写<div class="app-container">，这是软件里自带的样式，写上页面只见的边距会自动调整，不需要手动调整。

<div class="app-container">
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-form-item label="栏目名" prop="channelName">
        <el-input placeholder="请输入栏目名" v-model="queryParam.channelName" clearable></el-input>
    </el-form-item>
    <el-form-item label="显示" prop="isShow">
        <el-select placeholder="请选择" v-model="queryParam.isShow" size="small" clearable>
            <el-option v-for="s in showList" :label="s.label" :value="s.value" :key="s.value"></el-option>
        </el-select>
    </el-form-item>

2、添加一个显示的下拉框，然后用三元运算符判断。

<el-table :data="channelList" stripe>
            <el-table-column label="ID" prop="id" align="center"></el-table-column>
            <el-table-column label="栏目名称" prop="channelName" align="center"></el-table-column>
            <el-table-column label="显示" prop="isShow" align="center">
              <template slot-scope="scope">
                     {{scope.row.isShow == 0? '隐藏':'显示'}}
              </template>
            </el-table-column>
        </el-table>

3、下拉表中显示的内容。

           //下拉列表中显示的内容
            showList:[
                {label:'隐藏',value:0},
                {label:'显示',value:1}
            ]

四、完成分页。

1、先写样式。

<pagination :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize" layout="prev,pager,next" :total="queryParam.total" @pagination="getList"></pagination>

2、在queryParam中定义变量。

//数据（变量的声明）
    data(){
        return{
            channelList: null,
            queryParam: {  //查询的参数
                channelName: null,  //channel名称，和后台项目中channel实体类的属性对应，建议直接复制粘贴
                isShow: null, //是否显示，0=不显示；1显示
                //用于分页器的变量
                pageNum: 1,  //页码
                pageSize: 5,  //每页显示的条数
                total: 0  //总条数
            },

3、查询channel列表。

/*查询channel列表*/
        getList(){

            listChannel(this.queryParam).then(response => {
                console.log(response);//打印数据
                this.channelList = response.rows;//请求一个rows，得到一个集合
                this.queryParam.total = response.total;//请求一个总条数，得到一个变量函数
            });
        },

4、页面初始化函数。

//页面初始化函数，相当于uniapp中的onShow
    created(){
        this.getList();
    },

五、完成搜索和重置功能。

1、设置按钮，添加事件。

<el-button @click="handQuery" type="primary" size="mini" icon="el-icon-search">搜索</el-button>
<el-button @click="resetQuery" size="mini" icon="el-icon-refresh">重置</el-button>

2、根据条件搜索，重置搜索表单，代码如下：

        //表格数据条件搜索
        handQuery(){
                this.queryParam.pageNum = 1;//给分页器归位
                this.getList();
            },
        //重置搜索表单
        resetQuery(){
                this.resetForm("queryForm");//重置表单
                this.handQuery();//刷新请求
        }

六、测试。

1、在终端直接输入npm run dev运行，运行成功后自动跳转到登录页面，点击登录即可跳转到首页。

2、打开系统管理中的栏目管理，进入如下页面。

3、搜索功能实现。

4、重置功能实现。

5、显示功能实现。

如此，我们的功能便实现了，最后，附上完整代码。

<!-- 视图层 -->
<template>
    <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-form-item label="栏目名" prop="channelName">
        <el-input placeholder="请输入栏目名" v-model="queryParam.channelName" clearable></el-input>
    </el-form-item>
    <el-form-item label="显示" prop="isShow">
        <el-select placeholder="请选择" v-model="queryParam.isShow" size="small" clearable>
            <el-option v-for="s in showList" :label="s.label" :value="s.value" :key="s.value"></el-option>
        </el-select>
    </el-form-item>
    <el-button @click="handQuery" type="primary" size="mini" icon="el-icon-search">搜索</el-button>
    <el-button @click="resetQuery" size="mini" icon="el-icon-refresh">重置</el-button>
    </el-form>
        <el-table :data="channelList" stripe>
            <el-table-column label="ID" prop="id" align="center"></el-table-column>
            <el-table-column label="栏目名称" prop="channelName" align="center"></el-table-column>
            <el-table-column label="显示" prop="isShow" align="center">
              <template slot-scope="scope">
                     {{scope.row.isShow == 0? '隐藏':'显示'}}
              </template>
</el-table-column>
        </el-table>
        <pagination :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize" layout="prev,pager,next" :total="queryParam.total" @pagination="getList"></pagination>
    </div>
</template>
<!-- 业务层 -->
<script>
// 如果是导入多个文件，在花括号内用逗号隔开即可
import {listChannel} from '@/api/basic/channel';  //导入请求后台接口的js文件

export default {
    //数据（变量的声明）
    data(){
        return{
            channelList: null,
            queryParam: {  //查询的参数
                channelName: null,  //channel名称，和后台项目中channel实体类的属性对应，建议直接复制粘贴
                isShow: null, //是否显示，0=不显示；1显示
                //用于分页器的变量
                pageNum: 1,  //页码
                pageSize: 5,  //每页显示的条数
                total: 0  //总条数
            },
            //下拉列表中显示的内容
            showList:[
                {label:'隐藏',value:0},
                {label:'显示',value:1}
            ]
        }
    },
    //页面初始化函数，相当于uniapp中的onShow
    created(){
        this.getList();
    },  
    //函数
    methods:{
        /*查询channel列表*/
        getList(){

            listChannel(this.queryParam).then(response => {
                console.log(response);
                this.channelList = response.rows;
                this.queryParam.total = response.total;
            });
        },
        //表格数据条件搜索
        handQuery(){
                this.queryParam.pageNum = 1;//给分页器归位
                this.getList();
            },
        //重置搜索表单
        resetQuery(){
                this.resetForm("queryForm");//重置表单
                this.handQuery();//刷新请求
        }
    }
}
</script>

<!-- 样式表 -->
<style>

</style>