仿写练习树形目录

已于 2024-06-28 08:48:03 修改
阅读量146 收藏
点赞数 1
文章标签： vue.js javascript 前端
于 2024-06-28 03:10:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/affasda/article/details/140029678
版权

半成功

<template>
    <div>
        <el-tree  ref="tree" :load="loadNode" :props="defaultProps" current-node-key="1" node-key="id" lazy

            @node-click="nodeClick" :default-expand-all = false>
            <div class="custom-tree-node" slot-scope="{ node, data}">
                <div>
                    <!-- 没有子元素时显示的图标 (即是最后一层) -->
                    <span v-if="!data.children || data.id == '0'">
                        <i class="el-icon-document" style="color: #fd7575"></i>
                    </span>
                    <!-- 有子元素显示的图标 -->
                    <span v-else>
                        <!-- 这里的展开的显示隐藏即是 [+] [-] 因为这个是图片所以可能会报错  可以随意使用一个icon这图标替换 -->
                        <img :src="data.open ? defaultOpen : defaultClose" alt />
                        <!-- 这里文件打开和关闭图标的切换  -->
                        <i :class="data.open ? 'el-icon-folder-opened' : 'el-icon-folder'" style="color: #448ac4"></i>
                    </span>
                    <!-- 名称 -->
                    <span>{{ node.label }}</span>
                </div>
            </div>
        </el-tree>
        <div>B结束</div>
    </div>
</template>

<script>
export default {
    name: 'MyItem',

    data() {
        return {
            defaultOpen: require("@/assets/common_images/20200713152347772.png"),
            defaultClose: require("@/assets/common_images/20200713152347785.png"),
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            props: {
                label: 'label',
            },
            allTreeData:  [
                {
                    level: 0,
                    id: 1,
                    label: "我的调研",
                    open: true,
                    leaf: false,
                    children: [
                        {
                            id: 2,
                            level: 1,
                            label: "基础信息",
                        }
                    ]
                },
                {
                    id: 3,
                    level: 0,
                    label: "一级 3",
                    open: true,
                    children: [
                        {
                            id: 4,
                            level: 1,
                            label: "二级 3-1"
                        },
                        {
                            id: 5,
                            level: 1,
                            label: "二级 3-2"
                        }
                    ]
                },
                {
                    id: 6,
                    level: 0,
                    label: "我的调研",
                    open: true,
                    children: [
                        {
                            id: 7,
                            level: 1,
                            label: "基础信息xx",
                            open: true,
                            children: [
                                {
                                    id: 8,
                                    level: 2,
                                    label: "基础信息hh",
                                    open: true,
                                    children: [
                                        {
                                            id: 9,
                                            level: 3,
                                            label: "基础信息cc",
                                            open: true,
                                            children: [

                                                { id: 10, level: 4, label: "基础信息uux" }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ], // 用来存储后端返回的全部树节点数据
            treeData:[]
        }
    },
    methods: {
        nodeClick(data) {
            data.open = !data.open;
        },
        test() {
            console.log(this.data);
        },
        loadNode(node, resolve) {

            if (node.level === 0) {
                let temp = this.filterNodesByLevel(this.allTreeData, 0);
                return resolve(temp);
            }
            console.log(!node.data.children);
            if (!node.data.children) {
                return resolve([]);
            }
            setTimeout(() => {
                console.log("=-=-");
                let temp = this.filterNodesByLevel(node.data.children, node.level);
                console.log(temp);
                const data = temp;

                resolve(data);
            }, 500);
        },
        filterNodesByLevel(nodes, level, result = []) {
            for (const node of nodes) {
                if (node.level === level) {
                    result.push(node);
                }
                if (node.children && node.children.length > 0) {
                    this.filterNodesByLevel(node.children, level, result);
                }
            }
            return result;
        }
    }
}
</script>

<style>
.el-tree-node {
    position: relative;
    padding-left: 10px;
}

.el-tree-node__children {
    padding-left: 10px;
}

.el-tree-node:last-child:before {
    height: 40px;
}

.el-tree>.el-tree-node:before {
    border-left: none;
}

.el-tree>.el-tree-node:after {
    border-top: none;
}

.el-tree-node:before,
.el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree:first-child .el-tree-node:before {
    border-left: none;
}

.el-tree-node:before {
    border-left: 1px solid #e3e3e3;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
}

.el-tree-node:after {
    border-top: 1px solid #e3e3e3;
    height: 20px;
    top: 14px;
    width: 24px;
}

.el-tree-node__expand-icon.is-leaf {
    width: 8px;
}

.el-tree-node__content>.el-tree-node__expand-icon {
    display: none;
}

.el-tree-node__content {
    line-height: 30px;
    height: 30px;
}

.el-tree>div {
    &::before {
        display: none;
    }

    &::after {
        display: none;
    }
}
</style>

其他记录

<template>
    <div>
        <recycle-scroller class="virtual-list" :buffer="1000" :prerender="200" style="height: 800px" :item-size="100"
            key-field="id" :items="tree">
            <template>
                <MyItem :data="tableData"></MyItem>
            </template>
        </recycle-scroller>
    </div>
</template>

<script>
import MyItem from './MyItem.vue';
export default {
    name: "MyComponentPage",
    components: {
        MyItem: MyItem
    },
    data() {
        return {
            tableData: [],
            tree: [{id:1,name:"xxx"}],
            num: 1,
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
        setIdToData(data) {
            // 辅助函数，用于递归设置ID
            function setIDs(item, currentId) {
                item.id = currentId++; // 设置当前项的ID
                if (item.children && item.children.length > 0) {
                    // 如果存在子项，递归调用设置子项的ID
                    item.children.forEach((child, index) => {
                        setIDs(child, currentId);
                        if (index < item.children.length - 1) {
                            currentId++; // 为下一个子项递增ID
                        }
                    });
                }
            }

            let startingId = this.num; // 传入的起始ID
            data.forEach((item, index) => {
                setIDs(item, startingId);
                if (index < data.length - 1) {
                    startingId++; // 为下一个顶层项递增ID
                }
            });
            this.num = startingId

        }
    },
    created() {
        const temp = [
            {
                id: 0 + this.num,
                label: "我的调研"+Date.now().toString(36),
                open: true,
                children: [
                    {
                        id: 9 + this.num,
                        label: "基础信息"+Date.now().toString(36)
                    }
                ]
            },
            {
                id: 1 + this.num,
                label: "一级 3"+Date.now().toString(36),
                open: true,
                children: [
                    {
                        id: 2 + this.num,
                        label: "二级 3-1"+Date.now().toString(36)
                    },
                    {
                        id: 3 + this.num,
                        label: "二级 3-2"+Date.now().toString(36)
                    }
                ]
            },
            {
                id: 4 + this.num,
                label: "我的调研"+Date.now().toString(36),
                open: true,
                children: [
                    {
                        id: 5 + this.num,
                        label: "基础信息"+Date.now().toString(36),
                        open: true,
                        children: [
                            {
                                id: 6 + this.num,
                                label: "基础信息"+Date.now().toString(36),
                                open: true,
                                children: [
                                    {
                                        id: 7 + this.num,
                                        label: "基础信息"+Date.now().toString(36),
                                        open: true,
                                        children: [
                                            { id: 8 + this.num, label: "基础信息"+Date.now().toString(36) }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
        for (let i = 0; i < 1; i++) {
            this.num = i * 10
            //遍历添加
            temp.forEach(item => {
                this.tableData.push(item)
            })
        }
        console.log(this.tableData);

    }
}
</script>

<style></style>

<template>
    <div>
        <!-- <button @click="test">测试</button> -->
        <el-tree :data="data1" ref="tree" :load="loadNode" :props="defaultProps" current-node-key="1" node-key="id" lazy

            @node-click="nodeClick" default-expand-all>
            <div class="custom-tree-node" slot-scope="{ node, data}">
                <div>
                    <!-- 没有子元素时显示的图标 (即是最后一层) -->
                    <span v-if="!data.children || data.id == '0'">
                        <i class="el-icon-document" style="color: #fd7575"></i>
                    </span>
                    <!-- 有子元素显示的图标 -->
                    <span v-else>
                        <!-- 这里的展开的显示隐藏即是 [+] [-] 因为这个是图片所以可能会报错  可以随意使用一个icon这图标替换 -->
                        <img :src="data.open ? defaultOpen : defaultClose" alt />
                        <!-- 这里文件打开和关闭图标的切换  -->
                        <i :class="data.open ? 'el-icon-folder-opened' : 'el-icon-folder'" style="color: #448ac4"></i>
                    </span>
                    <!-- 名称 -->
                    <span>{{ node.label }}</span>
                </div>
            </div>
        </el-tree>
        <div>结束展示</div>
    </div>
</template>

<script>
export default {
    name: 'MyItem',

    data() {
        return {
            defaultOpen: require("@/assets/common_images/20200713152347772.png"),
            defaultClose: require("@/assets/common_images/20200713152347785.png"),
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            data1: [
                {
                    "id": 1,
                    "label": "我的调研lxxgobc5",
                    "open": true,
                    "children": [
                        {
                            "id": 10,
                            "label": "基础信息lxxgobc5"
                        }
                    ]
                },
                {
                    "id": 2,
                    "label": "一级 3lxxgobc5",
                    "open": true,
                    "children": [
                        {
                            "id": 3,
                            "label": "二级 3-1lxxgobc5"
                        },
                        {
                            "id": 4,
                            "label": "二级 3-2lxxgobc5"
                        }
                    ]
                },
                {
                    "id": 5,
                    "label": "我的调研lxxgobc5",
                    "open": true,
                    "children": [
                        {
                            "id": 6,
                            "label": "基础信息lxxgobc5",
                            "open": true,
                            "children": [
                                {
                                    "id": 7,
                                    "label": "基础信息lxxgobc5",
                                    "open": true,
                                    "children": [
                                        {
                                            "id": 8,
                                            "label": "基础信息lxxgobc5",
                                            "open": true,
                                            "children": [
                                                {
                                                    "id": 9,
                                                    "label": "基础信息lxxgobc5"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    props: {
        data: {
            type: Array,
            default: () => { }
        }
    },
    methods: {
        nodeClick(data) {
            data.open = !data.open;
        },
        test() {
            console.log(this.data);
        },
        // loadNode(node, resolve) {
        //     console.log("触发了");
        //     if (node && node.data) {
        //         console.log(node);
        //         // 查找当前节点在allTreeData中的信息
        //         const currentNodeInAllData = this.allTreeData.find(item => item.id === node.data.id);
        //         console.log(currentNodeInAllData + "currentNodeInAllData");
        //         if (!currentNodeInAllData || currentNodeInAllData.leaf) {
        //             console.log("到这了lllllll");
        //             // 如果找不到节点或已经是叶子节点，则不加载更多
        //             resolve([]);
        //         } else {
        //             // 筛选当前节点的子节点
        //             console.log("到这了00000");
        //             const children = currentNodeInAllData.children || [];
        //             // 将子节点数据添加到当前显示的树数据中，并通知树组件更新
        //             this.treeData.push(...children);
        //             resolve(children);
        //         }
        //     } else {
        //         //说明是首次加载
        //         console.log("为空");
        //         console.log(this.filterNodesByLevel(this.allTreeData, 0));
        //         resolve(this.treeData);
        //     }


        // },
        loadNode(node, resolve) {
            if (node.level === 0) {
                let temp = this.filterNodesByLevel(this.allTreeData, 0);
                return resolve(temp);
            }
            console.log(!node.data.children);
            if (!node.data.children) {
                return resolve([]);
            }
            setTimeout(() => {
                console.log("=-=-");
                let temp = this.filterNodesByLevel(node.data.children, node.level);
                console.log(temp);
                const data = temp;

                resolve(data);
            }, 500);
        },

        // fetchAllTreeData() {
        //     // 假设这是从后端获取所有数据的方法
        //     // axios.get('/api/getAllTreeNodes')
        //     //     .then(response => {
        //     //         this.allTreeData = response.data;
        //     //         // 初始化时，可以先加载第一级节点
        //     //         this.treeData = this.filterNodesByLevel(this.allTreeData, 0);
        //     //     });
        //     // this.allTreeData = this.temp;
        //     // 初始化时，可以先加载第一级节点
        //     this.treeData = this.filterNodesByLevel(this.allTreeData, 0);
        // },
        filterNodesByLevel(nodes, level, result = []) {
            for (const node of nodes) {
                if (node.level === level) {
                    result.push(node);
                }
                if (node.children && node.children.length > 0) {
                    this.filterNodesByLevel(node.children, level, result);
                }
            }
            return result;
        }
    }
}
</script>

<style>
.el-tree-node {
    position: relative;
    padding-left: 10px;
}

.el-tree-node__children {
    padding-left: 10px;
}

.el-tree-node:last-child:before {
    height: 40px;
}

.el-tree>.el-tree-node:before {
    border-left: none;
}

.el-tree>.el-tree-node:after {
    border-top: none;
}

.el-tree-node:before,
.el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree:first-child .el-tree-node:before {
    border-left: none;
}

.el-tree-node:before {
    border-left: 1px solid #e3e3e3;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
}

.el-tree-node:after {
    border-top: 1px solid #e3e3e3;
    height: 20px;
    top: 14px;
    width: 24px;
}

.el-tree-node__expand-icon.is-leaf {
    width: 8px;
}

.el-tree-node__content>.el-tree-node__expand-icon {
    display: none;
}

.el-tree-node__content {
    line-height: 30px;
    height: 30px;
}

.el-tree>div {
    &::before {
        display: none;
    }

    &::after {
        display: none;
    }
}
</style>

<template>
    <el-tree :props="props" :load="loadNode" lazy show-checkbox>
    </el-tree>
</template>

<script>
export default {
    data() {
        return {
            props: {
                label: 'label',
                // children: 'zones',
                // isLeaf: 'leaf'
            },
            allTreeData: [
                {
                    level: 0,
                    id: 1,
                    label: "我的调研",
                    open: true,
                    leaf: false,
                    children: [
                        {
                            id: 2,
                            level: 1,
                            label: "基础信息",
                            children: []
                        }
                    ]
                },
                {
                    id: 3,
                    level: 0,
                    label: "一级 3",
                    open: true,
                    children: [
                        {
                            id: 4,
                            level: 1,
                            label: "二级 3-1"
                        },
                        {
                            id: 5,
                            level: 1,
                            label: "二级 3-2"
                        }
                    ]
                },
                {
                    id: 6,
                    level: 0,
                    label: "我的调研",
                    open: true,
                    children: [
                        {
                            id: 7,
                            level: 1,
                            label: "基础信息xx",
                            open: true,
                            children: [
                                {
                                    id: 8,
                                    level: 2,
                                    label: "基础信息hh",
                                    open: true,
                                    children: [
                                        {
                                            id: 9,
                                            level: 3,
                                            label: "基础信息cc",
                                            open: true,
                                            children: [

                                                { id: 10, level: 4, label: "基础信息uux" }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ], // 用来存储后端返回的全部树节点数据
            treeData: [], // 用来存储当前显示的树节点数据（初始为空）
        };
    },
    methods: {
        // loadNode(node, resolve) {
        //     console.log("触发了");
        //     if (node && node.data) {
        //         console.log(node);
        //         // 查找当前节点在allTreeData中的信息
        //         const currentNodeInAllData = this.allTreeData.find(item => item.id === node.data.id);
        //         console.log(currentNodeInAllData + "currentNodeInAllData");
        //         if (!currentNodeInAllData || currentNodeInAllData.leaf) {
        //             console.log("到这了lllllll");
        //             // 如果找不到节点或已经是叶子节点，则不加载更多
        //             resolve([]);
        //         } else {
        //             // 筛选当前节点的子节点
        //             console.log("到这了00000");
        //             const children = currentNodeInAllData.children || [];
        //             // 将子节点数据添加到当前显示的树数据中，并通知树组件更新
        //             this.treeData.push(...children);
        //             resolve(children);
        //         }
        //     } else {
        //         //说明是首次加载
        //         console.log("为空");
        //         console.log(this.filterNodesByLevel(this.allTreeData, 0));
        //         resolve(this.treeData);
        //     }


        // },
        loadNode(node, resolve) {
            if (node.level === 0) {
                let temp = this.filterNodesByLevel(this.allTreeData, 0);
                return resolve(temp);
            }
            console.log(!node.data.children);
            if (!node.data.children) {
                return resolve([]);
            }
            setTimeout(() => {
                console.log("=-=-");
                let temp = this.filterNodesByLevel(node.data.children, node.level);
                console.log(temp);
                const data = temp;

                resolve(data);
            }, 500);
        },

        // fetchAllTreeData() {
        //     // 假设这是从后端获取所有数据的方法
        //     // axios.get('/api/getAllTreeNodes')
        //     //     .then(response => {
        //     //         this.allTreeData = response.data;
        //     //         // 初始化时，可以先加载第一级节点
        //     //         this.treeData = this.filterNodesByLevel(this.allTreeData, 0);
        //     //     });
        //     // this.allTreeData = this.temp;
        //     // 初始化时，可以先加载第一级节点
        //     this.treeData = this.filterNodesByLevel(this.allTreeData, 0);
        // },
        filterNodesByLevel(nodes, level, result = []) {
            for (const node of nodes) {
                if (node.level === level) {
                    result.push(node);
                }
                if (node.children && node.children.length > 0) {
                    this.filterNodesByLevel(node.children, level, result);
                }
            }
            return result;
        }

    },
    mounted() {
        // this.fetchAllTreeData()
    }
};
</script>

<style></style>
小飞弟
关注
第一单元练习题.doc
12-10
【第一单元练习题.doc】是一份综合性的语文练习题，主要涵盖了汉字拼写、形近字辨析、词语模仿、句子改写与扩展、错别字修正、词语搭配以及关联词应用等多个知识点。 1. 汉字拼写是基础语文能力的体现，题目给出了...
三年级语文上册4幽默秀才砍树第1课时课时练习长春版
08-06
这种练习可以帮助学生区分形近字，避免混淆，并锻炼他们的词汇量。 4. **词语仿写**：在“照样子，写一写”环节，提供了两个类型的词语模版，让学生仿写ABAC式和AABB式的词语，例如“一心一意”、“人山人海”、...
《燕子》的课后练习.pdf
10-20
《燕子》这篇课后练习主要涵盖了汉字书写、多音字组词、选择正确读音、形近字组词、词语搭配、修辞手法辨识、句子变换、阅读理解等多个方面的知识点。 一、汉字书写与拼音 练习要求学生根据拼音写出对应的汉字，如...
谈生命练习题及答案解析精选.doc
09-26
- 错别字是语言应用中的常见问题，题目中提到了“砂—沙”和“缈—渺”的纠正，强调了对形近字的辨别和正确书写的重要性。 3. **词语运用**： - 这部分考察了词语在具体语境中的应用，如“怒吼、回旋、奔腾、冲倒...
人教版语文五年级上册每课练习题.doc
10-11
3. 词语仿写：练习要求学生按照给出的词语格式，如AABB（舒舒服服）、ABB（急匆匆）进行仿写，锻炼学生的语言组织和表达能力。 4. 字义选择：这部分测试学生对常用词汇中关键字的理解，如"顾"在不同语境下的意思...
vue使用自定义指令实现一键复制
Zing_ing的博客
09-09 610
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 921
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1204
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
Vue Router push方法的使用
ithongchou的博客
09-13 421
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
vue组件通信，点击传值，动态传值（父传子，子传父）
爱敲代码的卡拉米的博客
09-12 480
通过上面的例子，你应该对Vue中如何使用按钮来传递值（通过内部方法或组件间通信）有了基本的了解。记得Vue的数据绑定和组件通信机制是构建Vue应用的关键。
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 464
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
大文件切片上传-vue3.0
m0_56416159的博客
09-12 370
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
从`v-model`到显式绑定：掌控Vue组件中的数据流动20240910
Narutolxy的博客
09-10 557
v-model
vue axios 如何读取项目下的json文件
战族狼魂的博客
09-10 460
在 Vue 项目中，使用axios读取本地的 JSON 文件可以通过将 JSON 文件放置在public目录中，然后通过axios发起请求读取。
Vue的slot插槽(默认插槽、具名插槽、作用域插槽)
Bulut0907
09-09 619
App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上。理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据。App.vue：slot的使用者接收数据，然后将数据以不同的html结构插入到slot插槽。Category.vue：给slot定义name属性，区分不同的插槽。
服装|基于Java+vue的服装定制系统(源码+数据库+文档)
weixin_66413741的博客
09-10 630
服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻烦需要解决,我们可以发现服装定制方面的系统并不是相当普及,在服装定制方面的可以有许多改进。即服装定制系统慢慢的被人们关注。服装定制管理方面的任务繁琐,以至于每年都在服装定制管理这方面投入较多的精力却效果甚微,
[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 4 搭建项目] 01 安装 nodejs 环境
好久不见的流星
09-09 599
和我们安装的版本一致，至此我们就把 nodejs 安装好了。点击 下载 Node.js (LTS) 开始下载。打开 cmd 窗口，然后输入下面命令进行测试。这样，node.js 就安装好了。下载完成之后，双击进行安装。看到了 v20.17.0。通过官网进行下载安装包。
SprinBoot+Vue网络商城海鲜市场的设计与实现
赵广陆
09-08 2557
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
vue3 动态 svg 图标使用
最新发布
小白小白从不日别的博客
09-13 197
在做后台管理系统中，我们经常会用到很多图标，比如左侧菜单栏的图标当然这里element-ui或者组件库都会提供图标但是在有些情况下 element-ui 或者 element-plus 组件库提供的图标满足不了我们的需求时，这个时候我们就需要自己去网上找一些素材或者UI给我们一些.svg的图标文件那么这个时候我们如何像使用组件一样很方便地去使用？只需要在需要的地方引入组件、传入图标名字就可以了。
html仿写网盘文件目录
09-24
可以使用HTML和CSS来实现一个仿写的网盘文件目录。下面是一个简单的示例： ```html <!DOCTYPE html> 文件目录 .directory { list-style-type: none; padding-left: 20px; } .directory li { margin: 5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值