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

野性酷女 2023-10-11 17:52 12阅读 0赞

Visual Studio Code（简称VS Code ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 [Mac OS X][]、[Windows][]和[ Linux][Linux] 之上的，针对于编写现代Web和云应用的跨平台的源代码编辑器 ，可在桌面上运行，并且可用于[Windows][Windows 1]，[macOS][]和[Linux][Linux 1]。它具有对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">，这是软件里自带的样式，写上页面只见的边距会自动调整，不需要手动调整。

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、先写样式。

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运行，运行成功后自动跳转到登录页面，点击登录即可跳转到首页。

![631c1cf40ce14ae0b38512a322fd8f14.png][]

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

![89086e8f878c46869526d016ada88f5b.png][]

3、搜索功能实现。

![5c14e30194df4ea5b8aeb735bb5f755b.png][]

4、重置功能实现。

![891290314be549128919178e726684a4.png][]

5、显示功能实现。

![04171c1e93ac439999c76d371cea0e3f.png][]

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

<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>

[Mac OS X]: https://baike.baidu.com/item/Mac%20OS%20X/470629
[Windows]: https://baike.baidu.com/item/Windows
[Linux]: https://baike.baidu.com/item/%20Linux/27050
[Windows 1]: https://baike.baidu.com/item/Windows/165458
[macOS]: https://baike.baidu.com/item/macOS/8654551
[Linux 1]: https://baike.baidu.com/item/Linux/27050
[Node.js]: https://baike.baidu.com/item/Node.js/7567977
[631c1cf40ce14ae0b38512a322fd8f14.png]: https://img-blog.csdnimg.cn/631c1cf40ce14ae0b38512a322fd8f14.png
[89086e8f878c46869526d016ada88f5b.png]: https://img-blog.csdnimg.cn/89086e8f878c46869526d016ada88f5b.png
[5c14e30194df4ea5b8aeb735bb5f755b.png]: https://img-blog.csdnimg.cn/5c14e30194df4ea5b8aeb735bb5f755b.png
[891290314be549128919178e726684a4.png]: https://img-blog.csdnimg.cn/891290314be549128919178e726684a4.png
[04171c1e93ac439999c76d371cea0e3f.png]: https://img-blog.csdnimg.cn/04171c1e93ac439999c76d371cea0e3f.png