当前位置：首页 > news >正文

Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

news 来源：原创 2023/3/23 12:29:08

vue3的优点

1.本章目标

2. 如何实现

2.1 通过将左侧菜单列表改造成路由链接的形式来实现

2.2 接下来，监听跳转的路由链接，实现点击二级菜单列表时，在Main 区域展示不同的内容组件

2.3 各组件代码

0.vue3的优点

使用Proxy代替defineProperty实现响应式
Vue3可以更好的支持TypeScript
新的特性：
Composition API(组合API)
。 setup配置
。 ref与reactive
。 watch与watchEffect
。 provide与inject
新的内置组件
。Fragment
。Teleport
。Suspense
其他改变
。新的生命周期钩子
。 data选项应始终被声明为一个函数
。移除keyCode支持作为v-on的修饰符

1.本章目标

1.1 点击不同的菜单列表，可以在右侧 (Main) 主体区域显示不同的组件页面

2. 如何实现

2.1 通过将左侧菜单列表改造成路由链接的形式来实现

1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式)，默认是false

Menu 菜单 | Element Plus (gitee.io)Menu 菜单 | Element Plus

2. 在 menu 节点中设置 router属性为true 开启路由模式

小技巧

如果需要把某个属性的值重置成true,可以对该属性进行简写。
例如 :router="true" 可以简写成 router:router 前面加冒号，代表属性绑定。
必须按照该规则，使用属性时才生效

3. 左侧菜单路由模式开启后，需要设定各页面的跳转地址

页面的跳转地址由服务器提供

代码改造，每一个二级菜单，应取服务器返回的path 属性做为跳转的唯一值，而不是Id。

2.2 接下来，监听跳转的路由链接，实现点击二级菜单列表时，在Main 区域展示不同的内容组件

1.首先，第一步应创建各菜单列表链接对应的各内容组件页面。例如，创建一个用户组件页面

2. 监听路由

由于Welcome组件是作为 Home 组件的子路由规则来进行嵌套展示在Main 内容区域的。
所以，左侧菜单的子组件需要展示在 Main 内容区域，那么左侧菜单的子组件（二级菜单）也需要嵌套在Home 组件里面作为Home 组件的子路由规则进行展示在 Main 区域。

2.3 各组件代码

1. 路由规则 index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/user/Users.vue'
const routes = [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{ path: '/welcome', component: Welcome },{ path: '/users', component: Users }]}
]const router = createRouter({history: createWebHashHistory(),routes
})// 挂载路由导航守卫
router.beforeEach((to, from, next) => {if (to.path === '/login') return next()// 获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next()
})export default router

2. Home.vue 组件

<template><el-container class="home_container"><!-- 头部区域 --><el-header><div><img src="../assets/heima.png" alt="" /><span>电商后台管理系统</span></div><el-button type="info" @click="logout">退出</el-button></el-header><!-- 页面主体区域 --><el-container><!-- 侧边栏 --><el-aside :width="isCollapse ? '64px':'200px'"><div class="toggle-button" @click="toggleCollapse">|||</div><!-- 侧边栏菜单区域 --><el-menu active-text-color="#409Eff"background-color="#545c64"text-color="#fff" unique-opened:collapse="isCollapse" :collapse-transition="false":router="true"><!-- 一级菜单 --><el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id"><!-- 一级菜单模板区域 --><template #title><el-icon :class="iconsObj[item.id]"></el-icon><span>{{item.authName}}</span></template><!-- 二级菜单 --><el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id"><template #title><el-icon><iconMenu /></el-icon><span>{{subItem.authName}}</span></template></el-menu-item></el-submenu></el-menu></el-aside><!-- 右侧内容主体区域 --><el-main><!-- 路由占位符 --><router-view></router-view></el-main></el-container></el-container>
</template>
<script>
export default {data () {return {// 左侧菜单数据对象menulist: [],// 字体图标对象iconsObj: {125: 'iconfont icon-users',103: 'iconfont icon-tijikongjian',101: 'iconfont icon-shangpin',102: 'iconfont icon-danju',145: 'iconfont icon-baobiao'},// 是否折叠isCollapse: false}},created () {this.getMenuList()},methods: {logout () {window.sessionStorage.clear()this.$router.push('/login')},// 获取所有的菜单数据async  getMenuList () {const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) return this.$message.error(res.meta.msg)// 成功了，进行赋值this.menulist = res.dataconsole.log(res)},// 点击按钮，切换菜单的折叠与展开toggleCollapse () {this.isCollapse = !this.isCollapse}}
}
</script>
<style lang="less" scoped>
.home_container {height: 100%;
}
.el-header {background-color: #363d40;// 给头部设置一下弹性布局display: flex;// 让它贴标左右对齐justify-content: space-between;// 清空图片左侧paddingpadding-left: 0;// 按钮居中align-items: center;// 文本颜色color: #fff;// 设置文本字体大小font-size: 20px;// 嵌套> div {// 弹性布局display: flex;// 纵向上居中对齐align-items: center;// 给文本和图片添加间距，使用类选择器span {margin-left: 15px;}}
}
.el-aside {background-color: #313743;.el-menu {border-right: none;}
}
.el-main {background-color: #e9edf1;
}
.iconfont{margin-right: 10px;
}
.toggle-button{// 添加背景颜色background-color: #4A5064;// 设置文本大小font-size:10px;// 设置文本行高line-height:24px;// 设置文本颜色color:#fff;// 设置文本居中text-align: center;// 设置文本间距letter-spacing: 0.2em;// 设置鼠标悬浮变小手效果cursor:pointer;
}
</style>

3. Users.vue 组件

<template><div><h3>用户列表组件</h3></div>
</template><script>
export default {}
</script><style lang="less" scoped></style>

查看全文中文繁体

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.exyb.cn/news/show-4499985.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈，一经查实，立即删除！

linux vi指令回退,Linux命令 vi vim

易读版本1、vi & vim 有两种工作模式：(1) 命令模式：接受、执行 vi & vim 操作命令的模式，打开文件后的默认模式；(2) 编辑模式：对打开的文件内容进行增、删、改操作的模式；#在编辑模式下按下 ESC …...

编程日记 2023/3/23 12:29:08

公司寄件报销难？你缺的只是高效的寄件管理解决方案

不论公司规模多大，涉及什么业务范畴，都需要用到快递业务。由于是对公寄件，往往需要员工先行垫付快递费，最后统一整理报销。大致报销流程如下： 1、寄件时保存快递存根（底单）； 2、…...

编程日记 2023/3/23 12:29:06

linux怎么修改命令行怎么退出,linux vi保存退出命令（如何退出vi）

满意答案crazy_hy推荐于 2017.10.03采纳率：48% 等级：8已帮助：2662人有很多方法：退出Vi当编辑完文件，准备退出Vi返回到shell时，可以使用以下几种方法之一。在命令模式中，连按两次大写字母Z&am…...

编程日记 2023/3/23 12:29:02

剑指 Offer 18. 删除链表的节点

好多if 救命🆘 class Solution {public ListNode deleteNode(ListNode head, int val) {if(headnull)return null;if(head.valval)return head.next;ListNode prehead;while(pre.next!null && pre.next.val!val){prepre.next;}if(pre.next.valval){pre.ne…...

编程日记 2023/3/23 12:29:00

【华为OD机试真题 python】连续字母长度【2022 Q4 | 100分】

■ 题目描述【连续字母长度】给定一个字符串，只包含大写字母，求在包含同一字母的子串中，长度第 k 长的子串的长度，相同字母只取最长的那个子串。输入描述第一行有一个子串(1<长度<100)，只包含大写字母。…...

编程日记 2023/3/23 12:28:56

你的硬盘有多快？，教你提升硬盘/NAS读写性能

速度是每个极客的追求，为了提升充电速度，我研究了各种充电头，写了篇「关于PD快充和快充充电器选购指南，看这一篇就够了」，还被张大妈首页推荐了。今天我们就来聊一聊机械硬盘 / 固态硬盘 / U盘 / NAS 等设备的理论极限…...

编程日记 2023/3/23 12:28:54

张飞电子工程师速成视频教程百度云_张飞电子工程师速成视频教程第二部

课程简介：第二部涉及知识点：1、直流有刷马达如何实现正反转？2、温度开关概念、工作原理、工作温度曲线。3、如何实现三极管作为开关用？N型三极管和P型三极管如何作电源开关用？他们有什么区别？可以互换位置吗…...

编程日记 2023/3/23 12:28:51

开源数据库风起云涌，openGauss 恰逢其时

自上世纪 60 年代首款企业级数据库产品诞生起，数据库已历经 60 年的发展迭代。当开源吞噬软件的今天，数据库迎来转折点：当查看国外数据库排名 DB-Engines 网站，和国内墨天轮最新数据库排行榜时，我们发现开源数据库已占…...

编程日记 2023/3/23 12:28:50

微胖test

status{"money_value_in_total":18607.86,"vip_points_item":12100,"playerID":1002262989,"speedup_general":5072,"speedup_cargo":384,"payment_times":415,"metal_all":1417721.3736,"power_...

编程日记 2023/3/23 12:28:49

java 贴吧代码_基于jsp的论坛贴吧-JavaEE实现论坛贴吧 - java项目源码

基于jspservletpojomysql实现一个javaee/javaweb的论坛贴吧, 该项目可用各类java课程设计大作业中, 论坛贴吧的系统架构分为前后台两部分, 最终实现在线上进行论坛贴吧各项功能,实现了诸如用户管理, 登录注册, 权限管理等功能, 并实现对各类论坛贴吧相关的实体进行管理。该论坛…...

编程日记 2023/3/23 12:28:48

办公软件自学教程有哪些

办公软件自学教程有哪些 1、安装办公软件，推荐使用微软开发的office办公软件，国产的金山开发的wps办公软件也不错（支持正版哦），用法都是大同小异。采用何种软件纯属个人偏爱。 2、购买一本office教程。（必须…...

编程日记 2023/3/23 12:28:45

区块链毕设选题外文参考文献

编程日记 2023/3/23 12:28:42

【数据恢复】使用驱动器中的光盘之前需要将其格式化，是否要将其格式化？

我们很多人都有将重要数据保存到移动硬盘或者U盘等外置设备上作为备份的习惯，但是你知道吗，即使保存到这些设备上，也并不是完全安全的。大多数人都具有最基本的一个意识，那就是平时使用U盘的时候，要有安全弹出的好习…...

编程日记 2023/3/23 12:28:41

如何让VR全景创业之路走得轻松？

虽然现在VR全景在网上都有很多免费的教程，但是依旧有很多人会选择VR全景加盟，这是为什么呢？这是因为如果你是用VR全景自娱自乐的话，那么免费版本也就够了，但是如果你想用VR全景创业赚钱的话，仅仅依靠网上那…...

编程日记 2023/3/23 12:28:39

低代码开发AI行业应用前端UI,全景低代码开发

1. 泛前端视角下企业AI落地的趋势和痛点 AI行业应用将由单点能力比拼进入方案和产品整体能力比拼阶段你有我有全都有： 拥有头部AI能力和资源的服务商在相对成熟场景的单点技术能力日趋同质化人才同质化 AI人才来源，性质和水准无本质差异， 归…...

编程日记 2023/3/23 12:28:36

XMind软件简易使用教程

Xmind是一款非常实用的思维导图软件。第一次接触xmind是在上学那会，学校花费重金从外面请来一位老师专门花了两节课的时间，用几十页的PPT给我们讲如何使用该软件，当时不懂事，认为这只是个软件，又不用考试，就…...

编程日记 2023/3/23 12:28:35

java毕业设计贴吧管理系统mybatis+源码+调试部署+系统+数据库+lw

java毕业设计贴吧管理系统mybatis源码调试部署系统数据库lw java毕业设计贴吧管理系统mybatis源码调试部署系统数据库lw本源码技术栈： 项目架构：B/S架构开发语言：Java语言开发软件：idea eclipse 前端技术：Layui、…...

编程日记 2023/3/23 12:28:33

黑子说话(叹号) C语言从零带你做三子棋小游戏

三子棋小游戏学了这么久C语言，看了很长时间的黑框框，相信大家都迫不及待的要做一款小游戏来试试手了，今天呢，我来带大家手把手敲代码，开发出也许是你的第一款小游戏！ 准备工作我们既然要开始做这个小游…...

编程日记 2023/3/23 12:28:32

【聚来宝】创业兼职教程资料

网购的趋势已经势不可档，这是因为：地面上的产品500卖5000千，他们卖的不是产品，而是房产，是地产！！不是网上便宜，而是他们卖得太贵了！另一方面：地面上的商家大多…...

编程日记 2023/3/23 12:28:29

CTF-2017世安杯ReverseMe

一、题目 2017世安杯ReverseMe 二、解题思路这里题目提示是使用Reverseme了，可以想象是不是进行了颠倒文件的想法三、解题过程首先使用winhex工具查看文件这里发现了文件最后发现，文件给进行了倒置利用python进行倒置回来 python代码&#x…...

编程日记 2023/3/23 12:28:28

搭建自己的区块链，人人能写区块链

如何实现自己的区块链? 人人能写区块链？能做到吗？ 写一个自己的区块链，不是让程序员凭空想象，而是使用已经的开源平台，通过学习理念、工具、通过编写简答的函数即可以实现自己的区块链。人人能写区块链吗&#xff1f…...

编程日记 2023/3/23 12:28:21

区块链测试网服务发布

官网注册登录：区块链服务网络BSN 为开发者打造的免费测试服务 1、下载链码包方法一登录进去后就先去开发者社区下载链码包，我下载的是secp256r1版本的然后改个名（不改也行） 方法二： 发布一个新服务&#xff0c…...

编程日记 2023/3/23 12:28:18

如何进行MOCK测试

一、测试背景 1.1、客户端测试面临的场景测试场景：服务端返回异常数据的情况下，客户端如何处理？ 1.2、服务端测试面临的场景测试场景：订单系统需要用到支付系统返回的数据，但是支付系统还没有开发完成如何提前开始…...

编程日记 2023/3/23 12:28:17

小程序创业会有哪些坑

小程序教程（限时免费看） 小程序免费视频，请拿走，扫一扫可直接观看...

编程日记 2023/3/23 12:28:15

已知测量精度，计算工业相机分辨率

1.需求分析： 描述机器视觉系统需要完成的功能和工作环境，对于整个机器视觉系统的成功集成是至关重要，即设定工作目标。 1.分辨率估算：相机每次采集图像的像素点数，一般对应于光电传感器靶面排列的像元数：&a…...

编程日记 2023/3/23 12:28:12

02. 数据库基础

02. 数据库基础数据库基础（上） /01 数据库基本概念数据库基本概念数据库数据库（database）就是一个由一批数据构成的有序集合，这个集合通常被保存为一个或多个彼此相关的文件。用户可以对文件中的数据进行新…...

编程日记 2023/3/23 12:28:10

I.MX6ULL驱动LED流程

I.MX6ULL IO初始化流程文章目录1. 使能时钟2. IO复用3. 设置电气属性4. 配置GPIO功能以LED0的IO来对应进行初始化，查看原理图对应IO是GPIO1_31. 使能时钟查看I.MX6ULL参考手册 CCM使能时钟管理查看CCM_CCGR0-6这7个寄存器能够对每一个位的外设时钟进行单独使能…...

编程日记 2023/3/23 12:28:10

相机分辨率对成像的影响

在每个特征占据相同像素的前提下，分辨率越大的相机具有的视野越大，相机距离被测物体越远。在视野大小相同的前提下，分辨率越大的相机所成的像的每个特征具有越多的像素，从而相片具有更高的清晰度，结果也更加精确。...

编程日记 2023/3/23 12:28:09

二十四、动网格Remeshing方法及实例

1 概念介绍这次我们做一个比较复杂，同时也是比较实用的案例-网格重构。网格重构(Remeshing)方法是动网格常用的方法，一般会和弹簧光顺方法及扩散光顺方法相结合使用。当网格变形达到一定的程度后，网格会发生重构。 2 使用条件使用条件&am…...

编程日记 2023/3/23 12:28:06

TB开拓者支持哪个券商？

随着近两年量化交易的盛行，TB开拓者被越来越多投资者知悉，TB是国内最早能够接入证券、期货市场进行自动交易的程序化交易软件之一。TB除多帐户交易终端功能外，还拥有功能也是挺丰富的。不过TB开拓者会更适合有一定的计算机语言基础&#xff…...

编程日记 2023/3/23 12:28:03

相机寻找最适合分辨率android,ARCore：获取相机的分辨率(ARCore : Get Camera's resolution)...

ARCore：获取相机的分辨率(ARCore : Get Cameras resolution)有没有办法获得相机的分辨率？ (除非从头开始使用Android)我没有在session.setDisplayGeometry()上的setter上找到任何getter，这并不是我所期望的。我的目标是知道相机的图片比率&am…...

编程日记 2023/3/23 12:28:01

tb开拓者画线

PlotString ("demo","▽▽▲▼",high*1.2,Red);...

编程日记 2023/3/23 12:28:01

华为怎么删掉android,华为手机怎么卸载软件华为手机卸载应用软件教程

日常对手机APP的清理会让手机界面变得干净整洁，定期卸载不需要的手机APP、优化内存也能提高手机的运行速度。然而，直接在主界面上长按软件图标，只能删除软件快捷方式，并不能彻底清除该软件，卸载软件有特定的途径。下面…...

编程日记 2023/3/23 12:27:52

程序员如何通过造轮子走向人生巅峰？

前言：你所做的事情，也许暂时看不到成果。但不要灰心，你不是没有成长，而是在扎根。程序员圈经常流行的一句话：“不要重复造轮子”。在计算机领域，我们将封装好的组件、库，叫做轮子。因为它可以拿…...

编程日记 2023/3/23 12:27:51

matlab 填充透明色,在Matlab中使用透明像素填充数组

我已经在matlab中编写了一段代码，将图像大小调整为特定大小(不会使它们变形)，并在必要时应用填充。但是，填充是黑色的，我希望它是透明的。我不知道该怎么做。这是我有的代码：% global variablesinputFolder input/ima…...

编程日记 2023/3/23 12:27:46

启用Rewrite让齐博CMS实现伪静态

# Windows系统上安装ApacheMySQLPHP环境，启用Rewrite让齐博CMS实现伪静态# 如：由 list.php?fid1 变为 list-1.htm 的形式显示## 如果你是用空间商的服务器，请首先咨询你的空间商是否支持mod_rewrite及是否支持对# 站点目录中 .htaccess 的文…...

编程日记 2023/3/23 12:27:44

给创业码农的话--如何提升开发效率

本文转自 http://mp.weixin.qq.com/s?__bizMzAwNDY1ODY2OQ&mid400785752&idx1&sne1c166e7fad0892811c9ca9bca6d1540&3rdMzA3MDU4NTYzMw&scene6#rd&utm_sourcetuicool&utm_mediumreferral 编者的话：simsun在2013…...

编程日记 2023/3/23 12:27:42

linux 内核usleep,Linux的sleep()和usleep()的使用和区别

说明：usleep和sleep都是使用系统调用，但是usleep更加精确，但是不能实现实时延迟(系统调用消耗时间)函数名: sleep头文件: #include // 在VC中使用带上头文件#include // 在gcc编译器中，使用的头文件因gcc版本的不同而不同功能…...

编程日记 2023/3/23 12:27:40

永城职业学院计算机基础考试,计算机录入与排版试题_相关文章专题_写写帮文库...

时间：2019-05-15 14:44:05 作者：admin2013年下期《计算机录入与排版》课教学总结新田县职业中专唐丹《计算机录入与排版》是我校计算机应用专业中技能性很强的课程之一，主要内容有：文字编辑、排版、电子表格和图时间：2…...

编程日记 2023/3/23 12:27:40

linux usleep占用cpu,c-Cent OS 6.3上的usleep的CPU高使用率

我在cent os 5.3和cent os 6.3上编译以下代码：#include #include #include #include using namespace std;pthread_mutex_t _mutex;pthread_spinlock_t spinlock;list _task_list;void * run(void*);int main(){int worker_num 3;pthread_t pids[worker_num];pthre…...

编程日记 2023/3/23 12:27:36

Sublime使用

文章目录一、汉化二、修改字体三、总结一、汉化 Sublime Text 4 软件本身是支持汉化的，但是需要安装插件，不需要再去找汉化包之类首先我们需要调出命令面板：点击“Tools”-》Commadn Palette或者直接按下快捷键Ctrlshiftp调出在调出的页面输…...

编程日记 2023/3/23 12:27:36

分辨率单位、换算及镜头与感光器像素的匹配

1、分辨率单位： lp/mm（line-pairs/mm）：每毫米线对，表示黑白两条线；常用于表示镜头分辨率的单位，指成像平面1mm间距内能分辨开的黑白相间的线条对数；l/mm：每毫米线数&…...

编程日记 2023/3/23 12:27:31

angular将html导出为pdf,如何在angular2中将HTML转换为pdf？

JSPDF适用于角度2.您需要从dt~下载定义.将库导入为：import * as jsPDF from "jspdf";...let doc new jsPDF();// Add a title to your PDFdoc.setFontSize(30);doc.text(12, 10, "Your Title");// Create your table here (The dynamic table …...

编程日记 2023/3/23 12:27:30

【软件教程】Spring Tool Suite（STS）

目录为什么要安装STS?简介软件获取官网获取小编百度云连接获取安装软件安装插件安装反编译插件使用使用前的准备如何使用为什么要安装STS? 简介 STS：Spring Tool Suite,就是Spring官方基于Eclipse封装的一款开发工具, 主要是为了便于开发Spring应用程序。它与Ec…...

编程日记 2023/3/23 12:27:28

数据结构—查找(Part Ⅰ)—顺序/折半/分块查找

数据结构-查找(第九章)的整理笔记，若有错误，欢迎指正。查找的基本概念被查找对象是由一组元素(或记录)组成的表或文件，称为查找表。查找表中的每个元素则由若干个数据项组成，其中指定一个数据项为关键字(key)，所有…...

编程日记 2023/3/23 12:27:28

区块链到底是怎么运行的

为了方便你理解，这一篇文章我将以比特币为例来进行讲解，因为比特币算是区块链应用中最简单、最容易理解的一个案例了。中心化记账的问题首先，举一个关于中心化记账的经典例子 - 银行转账。假设小明给小红转200块，银行收到了转账…...

编程日记 2023/3/23 12:27:23

火焰识别python_OpenCV_火焰检测——完整代码

转：http://blog.csdn.net/xiao_lxl/article/details/43307993 火焰检测小程序前几天，偶然看到了An Early Fire-Detection Method Based on Image Processing ,The Author is:Thou-Ho (Chao-Ho) Chen, Ping-Hsueh Wu, and Yung-Chuen Chiou 这篇文章&…...

编程日记 2023/3/23 12:27:21

Muesli_基于声呐图像寻雷难度的图像复杂度度量——MATLAB代码

clc;clear all; X imread("your img path"); X double(im2gray(X));[m, n] size(X); kernal_size 3;%3,5,9,25h_mean fspecial(average,[kernal_size kernal_size]); I_mean conv2(X,h_mean); temp_mean I_mean((kernal_size-1)/21:m(kernal_size-1)/2,(kern...

编程日记 2023/3/23 12:27:20

电子邮件头跟踪_如何以正确的方式发送电子邮件：跟踪，跟进并获得回复。

电子邮件头跟踪by Theo Strauss由西奥斯特劳斯(Theo Strauss) 如何以正确的方式发送电子邮件：跟踪，跟进并获得回复。 (How to send an email the right way: track, follow up, and get a response.) 银河电子邮件指南：第三部分 (The Emaile…...

编程日记 2023/3/23 12:27:19

IT创业项目-赚钱项目-网赚项目：月入2W+的视频号创业项目

今日给大家共享一下保姆级教程的视频号。2天见效，月收入2W。内容包括五个部分： 一、项目要求; 二、项目的商场前景; 三、途径现状总结; 四、项目预备; 五、项目发动运转流程。一、项目要求 1.每天至少投入两个小时。 2.用剪映改变背景的基本操作。 …...

编程日记 2023/3/23 12:27:18

基于Android的太原市景点推荐系统的设计与实现

毕业设计基于Android的太原市景点推荐系统的设计与实现 1．课题意义及目标随着人们生活水平的提高，外出旅游已经成了人们放松休闲的主要活动之一。现在移动端设备已是人们必备，最重要的是携带方便，基于Android的太原市景点推…...

编程日记 2023/3/23 12:27:13

make/Makefile verbose

1. Linux for example kernel make V1 For CMake, use make VERBOSE1; for GNU autotools make V1 This depends on your make program. Note: make -s (silent) will suppress all make log. 2. make -n Show logic commands excuted by make 3. Linux app/Makefile...

编程日记 2023/3/23 12:27:13

最全的机器学习资料

原文机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的…...

编程日记 2023/3/23 12:27:13

区块链知识点大全

区块链知识普及区块链的基本内容基本概念 1.什么是区块链把多笔交易的信息以及表明该区块的信息打包放在一起，经验证后的这个包就是区块。每个区块里保存了上一个区块的hash值，使区块之间产生关系，也就是说的链了。合起来就叫区块链…...

编程日记 2023/3/23 12:27:10

用vscode配置C++3种编译器及多文件编译

末尾附上最终的模板 Vscode开发环境配置 C有很多种编译器，最重要的有三种 GNU的GCC(推荐)微软的MSVCClang/LLVM C的最新标准是C23,各个编译器对C各个标准的支持情况是不同的： C compiler support - cppreference.com 注意主要看C20的支持情况用Vsco…...

编程日记 2023/3/23 12:27:09

【学习笔记】PHP进阶

文章目录表单传值概念为什么使用表单传值表单传值方式GET传值POST传值GET传值和POST传值的区别PHP接收数据的三种方式PHP处理复选框数据复选框单项的命名方式单选按钮的数据处理多选按钮的数据处理无选中情况文件上传原理表单编写在PHP中接收文件$_FILES变量详解移动临时文件到…...

编程日记 2023/3/23 12:27:07

Maya游戏角色骨骼绑定学习教程

编程日记 2023/3/23 12:27:05

吉利嘉际车机安装第三方软件教程（2022年更新）

本方法适用于嘉际全系列车型，系统版本为1.7.7的嘉际车机也支持。21款嘉际车机均可通过本方法来为车机安装第三方软件。 💡 文中使用的方法为DNS重定向，需要你具备一定的动手能力，否则将无法达到最终目的。 💡 阅读本文…...

编程日记 2023/3/23 12:27:04

区块链、互联网

社群小讨论：区块链、互联网~~ 1.从区块链角度，互联网产品和区块链产品的差异区块链最大的特性在去中心化和信任，区块链慢，但是无法更改，或者说很难更改，基本可以无条件去信任程序会那样去做，互…...

编程日记 2023/3/23 12:27:01

《飞桨PaddleSpeech语音技术课程》一句话语音合成全流程实践

一句话语音合成全流程实践 PaddleSpeech r1.2.0 发新内容1 声音克隆介绍 & 语音合成基本概念回顾语音合成（Speech Sysnthesis），又称文本转语音（Text-to-Speech, TTS），指的是将一段文本按照一定需求转…...

编程日记 2023/3/23 12:27:00

用GParted-LiveCD进行Ubuntu分区大小的调整

http://www.linuxidc.com/Linux/2013-06/85747.htm 一、准备 1、下载最新版本的gparted镜像文件：点击这里。 2、将gparted镜像文件刻录成光盘或压制在U盘上制成LiveUSB 3、虽说是无损调整，但为了安全起见(万一停电咋办？)，建议…...

编程日记 2023/3/11 7:38:26

两大阐释、四大流程，拿下CI/CD！

在最好的时候创建用户喜欢的高质量应用程序并不是件容易的事情。更何况，要怎样做才能更快地创建用户喜欢的高质量应用程序并且能够不断改进它们呢？这就是需要引入持续集成和持续交付（CI / CD）的地方。持续集成（CI&…...

编程日记 2023/3/14 21:36:28

CI/CD技术分享：OpenStack Zuul介绍

编者按：据统计，在上周结束的OpenStack温哥华峰会中，关于CI/CD持续集成和交付的议题超过40个，CI/CD成为了整场峰会最热门的话题之一。而Zuul作为CI/CD模块中耀眼的明星，被大家所熟知，在本次峰会上更是引起了…...

编程日记 2023/3/15 10:52:18

什么是 CI/CD？ (持续集成/持续交付)

在软件开发中经常会提到持续集成Continuous Integration（CI）和持续交付Continuous Delivery（CD）这几个术语。但它们真正的意思是什么呢？ 在谈论软件开发时，经常会提到持续集成Continuous Integration&…...

编程日记 2023/2/13 14:39:24

输入一个分数，将其约分为最简分式

输入一个分数，将其约分为最简分式 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h>int main(void) {int a, b;printf("Enter two integers: ");scanf("%d/%d", &a, &b);int molecule a, denominator b;while (b ! 0) {in…...

编程日记 2023/3/15 12:23:11

浅谈一家全球电商在Kubernetes环境上的CI/CD落地与实践

云原生技术生态近几年狂飙猛进，现已成为互联网公司的主流服务端技术栈。公司要快速响应市场变化和需求变更，就离不开自动化流水线进行编译、打包和部署，如何基于Kubernetes落地CI/CD就是DevOps团队需要解决的首要问题之一，同时也是…...

编程日记 2023/2/13 14:36:56

如何从零开始搭建 CI/CD 流水线

在当前 DevOps 的趋势下，持续集成（CI）和持续部署（CD）具有支柱性地位，那么能够成功搭建 CI/CD 流水线就至关重要了。我们可能会在各种角色的岗位描述中发现关于「持续集成」和「持续部署」技能的要求&#x…...

编程日记 2023/2/13 14:38:37

容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程

暑期实习期间，所在的技术中台—效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台，实现研发过程自动化、标准化； 实习期间对DevOps的理解一直懵懵懂懂，最近观看了阿里专家带你玩转容器云原生DevOps 公开课…...

编程日记 2023/2/13 14:38:01

求最简分式

C语言求出最简分式使用辗转相除法，求出最大公约数，分子分母各除以最大公约数即可得到最简分式。其中包含变量的值传递思想 /* 用户输入一个分式，求出它的最简化形式， 比如 18/12 要求输出 3/2 */ #include <stdio.h> int…...

编程日记 2023/2/13 14:40:25

kubernetes-CI/CD

目录 [TOC] 1.安装gitlib 运行： sudo docker run --detach \--hostname gitlab.glj-site.com \--publish 4443:443 --publish 8880:80 --publish 23:22 \--name gitlab \--restart always \--volume /srv/gitlab/config:/etc/gitlab \--volume /srv/gitlab/logs:/va…...

编程日记 2023/3/11 7:09:10

C语言最简分式

C语言最简分式题目内容： 分数可以表示为“分子/分母”的形式。编写一个程序，要求用户输入一个分数，然后将其约分为最简分式。最简分式是指分子和分母不具有可以约分的成分了。如6/12可以被约分为1/2。当分子大于分母时，不需要…...

编程日记 2023/2/13 14:31:29

1503 Problem A 最简分式

Description 我们知道，5/312/3，称等号后面的式子为最简分式。也就是说，在分式中，分子一定要小于分母，而且分子、分母是互质的。请写一个程序，对于用户输入的一个合法分式，输出其约简之后的结果…...

编程日记 2023/2/13 14:39:06

C语言编程题最简分式,C语言程序设计入门最简分式

最简分式题目内容：分数可以表示为“分子/分母”的形式。编写一个程序，要求用户输入一个分数，然后将其约分为最简分式。最简分式是指分子和分母不具有可以约分的成分了。如6/12可以被约分为1/2。当分子大于分母时，不需要表达为整数…...

编程日记 2023/2/13 14:33:00

最简分式

题目内容： 分数可以表示为“分子/分母”的形式。编写一个程序，要求用户输入一个分数，然后将其约分为最简分式。最简分式是指分子和分母不具有可以约分的成分了。如6/12可以被约分为1/2。当分子大于分母时，不需要表达为整数又分数…...

编程日记 2023/2/13 14:35:26

5-1. 约分最简分式(15)

分数可以表示为“分子/分母”的形式。编写一个程序，要求用户输入一个分数，然后将其约分为最简分式。最简分式是指分子和分母不具有可以约分的成分了。如6/12可以被约分为1/2。当分子大于分母时，不需要表达为整数又分数的形式，即11…...

编程日记 2023/2/13 14:41:01

Problem L: 最简分式

2017年山科C语言期末考试 Problem L: 最简分式 Description 我们知道，5/313/5，称等号后面的式子为最简分式。也就是说，在分式中，分子一定要小于分母，而且分子、分母是互质的。请写一个程序，对于用户输入的…...

编程日记 2023/2/13 14:33:51

FluxCD、ArgoCD或Jenkins X，哪个才是适合你的GitOps工具？

GitOps是一种使用基于Git的工作流程来全面管理应用和基础设施的想法，其在最近获得了极大关注。新一代的部署工具更能说明这一点，它们将GitOps作为持续交付的主要组织原则。本文中我们将研究的工具有FluxCD、ArgoCD和Jenkins X，它们都专注于将…...

编程日记 2023/3/23 9:23:19

CI/CD 工具选型：Jenkins 还是 GitLab CI/CD？

十年来，持续集成（Continuous Integration，CI）和持续交付（Continuous Delivery，CD）领域都取得了很大的进步。DevOps 测试的兴起导致了对 CI/CD 工具的快速需求。现有的解决方案总是随着时间的推移…...

编程日记 2023/2/13 14:32:40

Jenkins与GitLab CI/CD对比介绍

Jenkins与GitLab CI/CD对比介绍1. Jenkins 介绍2. Jenkins 核心特性3. GitLab CI/CD 介绍4. GitLab CI/CD：核心特性5. Jenkins vs GitLab CI/CD 的功能对比6. Jenkins vs GitLab CI/CD 之间的区别7. Jenkins vs GitLab CI/CD 优缺点8. Jenkins vs GitLab CI/CD 如何…...

编程日记 2023/2/13 14:32:02

OPENGL 固定管线

OPENGL 固定管线其实就是使用的0号着色器，glUserProgram(0);所以固定管线除了shader固化，不可编写外，其他的后期什么该有的都可以使用，比如fbo什么的...

编程日记 2023/2/13 14:35:01

管线架构图

感觉不错...

编程日记 2023/2/13 14:34:19

渲染管线梳理图（渲染流水线）

...

编程日记 2023/2/13 14:31:02

VTK：体绘制——体绘制管线图形渲染管线

1.几何渲染与体绘制几何渲染：就是通过绘制几何图元（顶点、线段、面片等）来渲染数据，例如绘制图像需要在空间中建立一个四边图元，然后以纹理映射的方式将该图像贴图到该图元上进行渲染；而三维模型的绘制通…...

编程日记 2023/2/13 14:30:05

OpenGL图形渲染管线（Pipeline）学习

OpenGL图形渲染管线（Pipeline）学习1.0 图形渲染管线概述2.0 图形渲染管线处理流程2.1 顶点数据（Vertex Data）2.2 顶点着色器（Vertex Shader）2.2.1 世界坐标2.2.2 局部坐标2.2.3 观察坐标2.2.4 裁剪坐标&…...

编程日记 2023/2/13 14:32:33

计算机图形渲染管线

计算机图形渲染管线 Computer Graphics Pipeline 固定渲染管线的每个阶段拍照的过程: 寻找拍摄对象 （ 模型变换 ） 摆放相机 （ 相机变换 ） 调节相机参数 （ 投影变换 ） 拍照 （ 视口变换&…...

编程日记 2023/2/13 14:35:49

Vulkan【15】图形管线（Graphics Pipline）

创建图形管线本节的代码是 14-init_pipeline.cpp 你越来越接近把这些拉到一起来渲染一个立方体！下一步是通过设置图形管道来配置GPU来进行渲染。一个图形管线由着色阶段、管线布局、渲染过程和固定功能管线阶段组成。您在前面的部分中定义了着色阶段和管线布局…...

编程日记 2023/2/13 14:30:44

计算机图形管线

http://blog.csdn.net/zhulinpptor/article/category/731757 不错的博客...

编程日记 2023/2/13 14:35:04

计算机图形管线（实时渲染管线）

在计算机图形学中，计算机图形管线（渲染管线或简称图形管线）是一个概念模型，它描述了图形系统将 3D场景渲染到2D屏幕所需执行的步骤。早期计算机图形管线是立即渲染模式（Immediate mode，也就是固定渲染管…...

编程日记 2023/2/13 14:35:51

图形渲染管线流程

博客资料来源《DirectX 9 3D游戏设计入门》渲染管线流程：本地坐标（模型空间） ——> 世界坐标（世界空间） ——> 视图坐标（相机空间） ——> 背面拣选 ——> 光照 ——> 裁剪&…...

编程日记 2023/2/13 14:34:13

[OpenGL] OpenGL图像渲染管线流程

第一步：顶点数据传入GPU https://blog.csdn.net/weixin_44179561/article/details/124275761 通过缓冲对象（BO）将在CPU内的顶点数据传入GPU，通过顶点数组对象（VAO）告诉OpenGL该如何解释这些数据索引缓冲…...

编程日记 2023/3/10 1:23:01

OpenGL图形渲染管线

1. OpenGL图形渲染管线 1. OpenGL图形渲染管线在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应屏幕的2D像素。3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线&…...

编程日记 2023/2/13 14:31:05

WebGL图形管线

要渲染3D图形，我们必须遵循一系列步骤。这些步骤被称为图形管线或渲染管线。下图描述WebGL图形流水线。 JavaScript 在开发WebGL应用程序时，我们需要写Shader语言代码与GPU进行沟通。使用JavaScript编写的程序，其中包括以下操作的控制代码-…...

编程日记 2023/2/13 14:35:32

cad高程测绘图lisp_CAD中自动画管线图的LISP程序

CAD中自动画管线图的LISP程序画一些管路原理图时，当代表不同管路的直线在图中相交时，需将在交点处的某一直线断开，再用一半圆连接两断点，使用下面这个LISP编写的程序，只用键入"brel"的命令，其它的…...

编程日记 2023/2/13 14:35:17

3D图形渲染管线图

放三张3D图形渲染管线图，自己领会：...

编程日记 2023/2/13 14:33:07

OpenGL总结13-固定管线绘图与可编程管线绘图的性能以及vao和vbo的使用

因为项目需要所以要进行三维纹理图像的绘制，用固定管线进行绘图的时候，每次绘制都要给GPU传递大量的坐标点，这个点的数量达到亿级，绘制图像的时候都不不敢使用四通道的图像（否则程序卡成JPG），这…...

编程日记 2023/2/13 14:31:33

OpenGL图形渲染管线图解

一，概述当前OpenGL的版本为3.3，基于可渲染管线，实现模型生成，渲染，图像输出等工作。可渲染管线就是把三维顶点经过一系列加工变成二维的离散的像素点。并且用户可以在特定着色阶段自由配置（如在顶点着色和…...

编程日记 2023/2/13 14:30:50

Error updating database. Cause: java.sql.SQLSyntaxErrorException: ORA-01745: invalid host/bind vari

报错信息： Error updating database. Cause: java.sql.SQLSyntaxErrorException: ORA-01745: invalid host/bind variable name 解决方案这个的问题看上去是报错，实际上可能的原因是sql太长了，超过了最大限制，所以什么奇形怪状…...

编程日记 2023/2/13 14:31:49

Android12编译：build/make/core/dex_preopt_config.mk:157: error: fopen failed.

# chmod 777 out/ -R...

编程日记 2023/2/13 14:35:21

在linux系统下使用service tomcat start命令打开tomcat失败，报Neither the JAVA_HOME nor the JRE_HOME environment vari

出现问题在linux系统下使用service tomcat start命令打开tomcat失败，报 Neither the JAVA_HOME nor the JRE_HOME environment vari 解决办法在linux中使用cd命令进入你的tomcat安装路径，进入/tomcat/bin目录下，然后使用vi命令修改cata…...

编程日记 2023/2/13 14:30:53

java中case怎么用,Java中case使用示例，Javacase使用示例,switch([vari

Java中case使用示例，Javacase使用示例,switch([variswitch([variable]) { case [int or ch]: [code] break; case [int or ch]: [code] break; case [int or ch]: [code] break; case [int or ch]: [code] break; }//举例int count; switch(count) { case 0: g.setC…...

编程日记 2023/2/13 14:30:24

论文分享 -- Graph Embedding -- struc2vec

博客内容将首发在微信公众号"跟我一起读论文啦啦"，上面会定期分享机器学习、深度学习、数据挖掘、自然语言处理等高质量论文，欢迎关注！ 本次要总结和分享的论文是struc2vec，参考的代码code，不同于以往根据…...

编程日记 2023/3/23 9:23:42

[论文笔记]：PROGRESSIVE GROWING OF GANS FOR IMPROVED QUALITY, STABILITY, AND VARIATION

PROGRESSIVE GROWING OF GANS FOR IMPROVED QUALITY, STABILITY, AND VARIATION论文翻译摘要1. 介绍2. 逐步增长的GANS(Progressive growing of GANs)3. 使用小批量标准偏差增加可变性4. 生成器和判别器中的归一化4.1 调节学习速率4.2 生成器中的像素pixel-wise特征向量归一化5…...

编程日记 2023/3/16 16:23:48

（RN）Region Normalization for Image Inpainting

论文地址：AAAI 2020. https://arxiv.org/pdf/1911.10375v1.pdf motivation：传统的image inpainting的方式利用FN(feature normalization)来帮助网络训练，但是他们往往是在整个图像上进行，没有考虑到corrupted region的像素对于me…...

编程日记 2023/2/13 14:30:47

7 天找个 Go 工作，Gopher 要学的条件语句，循环语句，第3篇

本篇博客重点内容来到 Go 语言学习的第 3 篇博客，本篇将涉及两种 Go 语句，其一是分支，即条件判断，其二是循环。条件判断语句又细分为 if 语句，if else 语句，if 嵌套语句，switch 语句&#x…...

编程日记 2023/2/13 14:29:31

[论文解读]Explaining Knowledge Distillation by Quantifying the Knowledge

Explaining Knowledge Distillation by Quantifying the Knowledge 简介论文标题 Explaining Knowledge Distillation by Quantifying the Knowledge可解释性：通过量化知识来解释知识蒸馏2020.3.7 核心内容本研究核心在于通过定义并量化神经网络中层特征的“…...

编程日记 2023/2/13 14:25:44

7 天能找到 Go 工作吗？学学 Go 数组和指针试试

学习之前对于一个 Python 工程师来说，数组和指针在 Python 中都没有明确概念，所以这部分知识点只能依赖 C/C的积累了。学习数组的时候，可以参考 Python 的列表进行实践。 Go 数组先看一下数组的定义，它是一个由固定长度的特…...

编程日记 2023/2/13 14:35:11

【Python｜Kaggle】机器学习系列之Pandas基础练习题（二）

前言 Hello！小伙伴！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称：海轰标签：程序猿｜C选手｜学生简介：因C语…...

编程日记 2023/2/13 14:34:16

EMVS: Event-Based Multi-View Stereo 论文详细分析

本文详细记录了EMVS这篇论文的一些细节。主要用于个人记录，转载请注明出处。 0. 前言本人近期准备深入研究这个算法，并尝试做相应改进，所以总结了此文，梳理自己的思路。本文并没有把论文分析的很完整，不适合完全没有…...

编程日记 2023/2/13 14:29:23

【CMake】第1篇了解 CMake 构建源码输出 Hello world（初学者必备）

目录 1、CMake 2、CMake 简单使用 2.1 创建一个main.cpp文件 2.2 创建CMakeLists.txt文件 2.3 执行 cmake . 2.4 执行 make 2.5 运行 main 可执行文件 3、使用 build 文件夹存放构建后的文件 1、CMake Cmake 是一个跨平台、开源的构建系统。查看CMake版本： c…...

编程日记 2023/2/13 14:33:19

the jre_home environment variable is not defined correctly this environment vari

1、分析startup.bat启动脚本：发现其调用了catalina.bat,而catalina.bat调用了setclasspath.bat 2、在setclasspath.bat的头部定义了JAVA_HOME和JRE_HOME的值，那么这里需要我们手动设置JAVA_HOME变量和JRE_HOME变量（红色代码为新添加&#xf…...

编程日记 2023/2/13 14:35:09

直播 | ACL 2021论文解读：提升预训练语言模型实体与关系理解的统一框架

「AI Drive」是由 PaperWeekly 和 biendata 共同发起的学术直播间，旨在帮助更多的青年学者宣传其最新科研成果。我们一直认为，单向地输出知识并不是一个最好的方式，而有效地反馈和交流可能会让知识的传播更加有意义，从而产生更大的…...

编程日记 2023/2/13 14:30:59

Adversarially Regularized Graph Autoencoder for Graph Embedding论文笔记

Adversarially Regularized Graph Autoencoder for Graph Embedding论文链接总结网络EncoderDecoderDiscriminator原理损失代码（无）论文链接总结这篇文章将GAN（生成对抗网络）加入到了GAT中，根据base-encoder的不同…...

编程日记 2023/3/16 0:30:19

WACV 2021 论文大盘点-图像分类篇

WACV 2021 论文大盘点-图像分类篇学习 2-7 70阅读2点赞0评论编译 | CV君报道 | OpenCV中文网（微信id：iopencv） 本篇文章总结图像分类相关论文，包含细粒度分类、医学图像分类、植物叶子等级分类等。共计 10 篇&#xff0…...

编程日记 2023/2/13 14:34:10

对抗样本论文阅读Intriguing properties of neural networks

Intriguing properties of neural networks 文章提出了神经网络中的两个有趣的特性，首次提出了对抗样本adversarial examples的概念 Representation of High Level Neurons（高水平神经元的表现） The first property is concerned with the …...

编程日记 2023/2/13 14:27:35

《JavaScript权威指南第7版》第8章函数

目录8.1 函数定义8.1.1 函数声明8.1.2 函数表达式8.1.3 箭头函数8.1.4 嵌套函数8.2 调用函数8.2.1 函数调用8.2.2 方法调用8.2.3 构造函数调用8.2.4 间接调用8.2.5 隐式函数调用8.3 函数的实参和形参8.3.1 可选形参和默认值8.3.2 剩余形参和可变长的实参列表8.3.3 Arguments对象…...

编程日记 2023/2/13 14:32:30

TransA 论文笔记

TransA: An Adaptive Approach for Knowledge Graph Embedding- Abstract- Background- Algorithm- Experiment- Conclusion- Abstract translation-based methods also suffer from the oversimplified loss metric, and are not competitive enough to model vari- ous and...

编程日记 2023/2/13 14:32:50

数组的排序和查重

//声明一个数组 var arr [12, 3, 3,3,3, 34, 76, 35, 34, 45, 3, 3]; //数组去重 //遍历这个数组 for( var i0;i<arr.length;i){ //用当前下标的元素与后下标的元素做比较，如果相等，则删除这个下标； for(var ji1;j<arr.length;j){ if(…...

编程日记 2023/2/13 14:36:03

[审核]因为审核人员不了解苹果登录被拒

1.审核被拒信息 Guideline 2.1 - Information Needed We’re looking forward to completing the review of your app, but we need more information to continue. Next Steps Please provide detailed answers to the following questions in your reply to this message i…...

编程日记 2023/2/13 14:25:41