vue实现侧边折叠菜单栏手风琴效果

在我们做管理后台亦或是产品流程时，总是需要一个菜单栏或者导航栏来架起我们的产品架构，那么，如何用vue实现侧边折叠导航栏呢？接下来将一一介绍。

                                       请先看效果演示图。


步骤1：先架构整个页面的布局，撰写html、css和js
HTML代码

<template><div id="main"><div class="content"><!-- 左边导航栏 --><div class="admin_nav col-lg-3 col-xl-2" v-show="fullWidth"><div class = "admin_nav_site"><div class="title">数据中心后台管理</div><ul v-for="(item,index) in navList" :key="index"><li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)"ref="title" :class="{active:currentSort == index}" class="col-lg-12"><div class="left_icon"><i :class="'iconfont '+item.className"></i></div><div class="middle">{{item.title}}</div><div class="right_icon"><i :class="'iconfont '+item.close"></i></div></li><li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1"><router-link :to="it.path" tag="a">{{it.name}}</router-link></li></ul></div></div><!-- 右边内容 --><div class="admin_content col-12 col-md-12 col-lg-12 col-xl-10"><div class="admin_header"><!-- 导航图标 --><div class="H5_item" v-show="!fullWidth"><i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i></div><div class="user"><div class="userHead"><span><img src="../../assets/image/userhead.svg"></span><span>admin</span></div><div class="logOut"><i class="iconfont icon-tuichu"></i></div></div></div><div class="admin_body"><keep-alive><router-view /></keep-alive></div></div></div></div>
</template>

JS代码

<script>import axios from 'axios';export default {name: 'navigation',data() {return {navList: [{title: '用户管理',isSubShow: false,className: 'icon-guanliyuan1',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '工号管理',path: '/home/navigation-one/user'}, // {// name: '角色管理',// path: '/home/navigation-one/role'// }, // {// name: '权限管理',// path: '/home/navigation-one/user'// }, ]},{title: '资源管理',isSubShow: false,className: 'icon-ziyuan',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '我的收藏',path: '/home/navigation-one/user'},{name: '我的项目',path: '/home/navigation-one/role'}]},{title: '综合管理',isSubShow: false,className: 'icon-zonghe',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '划配管理',path: '/home/navigation-one/user'},{name: '数据信息',path: '/home/navigation-one/role'}]},{title: '系统消息',isSubShow: false,className: 'icon-xiaoxi',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '实时动态',path: '/home/navigation-one/user'},{name: '过去动态',path: '/home/navigation-one/role'}]}],currentSort: 0,pagetype: "index",fullWidth: true,dismenu: true}},methods: {active(index) {this.currentSort = index;},changeTitleColor(index) {this.currentSort = index;},removeTitleColor(index) {this.currentSort = null;},handleToTitle(ind, item) {this.navList[ind].isSubShow = !this.navList[ind].isSubShow;if (this.navList[ind].isSubShow == true) {this.navList[ind].close = 'icon-zhedie';} else {this.navList[ind].close = 'icon-close';}}}}
</script>

CSS代码

    #main {background: #F0F6FF;font-size: 0.16rem;}#main .content {display: flex;flex-direction: row;}.content .admin_nav {min-height: 9.37rem;max-height: 1.3rem;padding: 0 !important;background: #364150;position: relative;}.content .admin_nav .admin_nav_site{height: 100vh;}.content .admin_nav .title {height: 1.39rem;line-height: 1.39rem;background: rgba(63, 73, 86, 1);color: #FFFFFF;text-align: center;font-size: 0.18rem;display: flex;justify-content: center;}.content .admin_nav .title div {padding: 0 0.03rem;}.content .admin_nav .title div:first-child i {font-size: 0.18rem;}.content .admin_nav ul .active {background: rgba(68, 81, 99, 1);}.content .admin_nav ul .active1 a.router-link-active {color: #fff;}.content .admin_nav ul li {height: 0.6rem;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 0.18rem;}.content .admin_nav ul li a {color: #cecdc5;cursor: pointer;}.content .admin_nav ul li:first-child {font-size: 0.2rem;height: 0.64rem;display: flex;flex-direction: row;align-items: center;color: #BEC5C0;cursor: pointer;}.content .admin_nav ul li:first-child div {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: #BEC5C0;}.content .admin_nav ul li:first-child .left_icon {width: 22%;}.content .admin_nav ul li:first-child .left_icon i {color: #1296DB;}.content .admin_nav ul li:first-child .middle {width: 56%;display: flex;justify-content: flex-start;}.content .admin_nav ul li:first-child .right_icon {width: 22%;}.admin_nav .admin .middle:hover {color: #fff;}.admin_nav .admin .right_icon i:hover {color: #fff;}.admin_nav .admin .middle.router-link-active {color: #fff;}.content .admin_nav_position {position: absolute;z-index: 3000;}.content .admin_content {padding: 0 !important;}.content .admin_content .admin_header {width: 100%;height: 0.6rem;background: #364150;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}.content .admin_content .admin_header .H5_item {width: 0.4rem;height: 0.4rem;border-radius: 0.2rem;display: flex;justify-content: center;align-items: center;margin-left: 0.2rem;}.content .admin_content .admin_header .H5_item i {font-size: 0.22rem;color: #fff;}.content .admin_content .admin_header .user {width: 100%;display: flex;align-items: center;justify-content: flex-end;}.content .admin_content .admin_header .user .userHead {height: 0.6rem;display: flex;flex-direction: row;align-items: center;color: #fff;font-size: 0.18rem;}.content .admin_content .admin_header .user .userHead span {padding: 0 0.05rem;}.content .admin_content .admin_header .user .userHead span:nth-child(1) {position: relative;}.content .admin_content .admin_header .user .userHead span img {width: 0.4rem;height: 0.4rem;border-radius: 50%;}.content .admin_content .admin_header .user .userHead span input {width: 0.4rem;height: 0.4rem;position: absolute;overflow: hidden;opacity: 0;cursor: pointer;}.content .admin_content .admin_header .user .logOut {color: #fff;margin-left: 0.12rem;margin-right: 0.5rem;}.content .admin_content .admin_header .user .logOut i {color: #1296DB;font-size: 0.24rem;cursor: pointer;}.toggle-cart-enter-active {transition: all 0.4s linear;}.toggle-cart-leave-active {transition: all 0.4s linear;}.toggle-cart-enter {transform: translateX(-200%);}.toggle-cart-leave-active {transform: translateX(-200%);}

 

步骤2：撰写完基本网页布局和样式后，对部分细节进行剖析。

1、动态绑定路径

<router-link :to="it.path" tag="a">{{it.name}}</router-link>

2、一级菜单，标题及折叠符号

①通过@mouseenter和@mouseleave事件，当鼠标移入和移出时，改变标题区域背景颜色

②通过@click事件，当鼠标点击时，显示二级菜单列表

③利用:class动态绑定类名，触发active方法，修改折叠符号状态；绑定图标类名，通过遍历，修改对应图标

<ul v-for="(item,index) in navList" :key="index"><li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)" ref="title" :class="{active:currentSort == index}" class="col-lg-12"><div class="left_icon"><i :class="'iconfont '+item.className"></i></div><div class="middle">{{item.title}}</div><div class="right_icon"><i :class="'iconfont '+item.close"></i></div></li><li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1"><router-link :to="it.path" tag="a">{{it.name}}</router-link></li>
</ul>
active(index) {this.currentSort = index;
},changeTitleColor(index) {this.currentSort = index;
},removeTitleColor(index) {this.currentSort = null;
},handleToTitle(ind, item) {this.navList[ind].isSubShow = !this.navList[ind].isSubShow;if (this.navList[ind].isSubShow == true) {this.navList[ind].close = 'icon-zhedie';} else {this.navList[ind].close = 'icon-close';}
}

步骤3：菜单栏完成后，在网页端能进行查看，但是还需做一个手机端适配，这样就达到两端同步适应的效果。实现如下：

①对左边导航栏再撰写第二套代码，并绑定好对应的参数实现显示和隐藏

②运用vue已有的transition，绑定name值，实现动画效果绑定

HTML代码

<!-- 移动端导航栏 -->
<transition name="toggle-cart"><div class="admin_nav admin_nav_position col-8 col-md-5 col-lg-3 col-xl-3" v-show="!fullWidth&&!dismenu"><div class="title"><div v-show="!fullWidth"><i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i></div><div>数据中心后台管理</div></div><ul v-for="(item,index) in navList" :key="index"><li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)" ref="title" :class="{active:currentSort == index}"><div class="left_icon"><i :class="'iconfont '+item.className"></i></div><div class="middle">{{item.title}}</div><div class="right_icon"><i :class="'iconfont '+item.close"></i></div></li><li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1"><router-link :to="it.path" tag="a">{{it.name}}</router-link></li></ul></div>
</transition>

JS代码

mounted() {window.onresize = () => { //监听屏幕变化this.page_width();};this.page_width();
}，
methods: {make_menu() { //点击导航图标this.dismenu = !this.dismenu;},page_width() { //获取屏幕宽度var screenWidth = window.screen.width;if (screenWidth <= 1024) {this.fullWidth = false;} else {this.fullWidth = true;}}
}

最后来看下手机端效果：

附上全文代码：

<template><div id="main"><div class="content"><!-- 左边导航栏 --><div class="admin_nav col-lg-3 col-xl-2" v-show="fullWidth"><div class = "admin_nav_site"><div class="title">数据中心后台管理</div><ul v-for="(item,index) in navList" :key="index"><li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)" 		ref="title" :class="{active:currentSort == index}" class="col-lg-12"><div class="left_icon"><i :class="'iconfont '+item.className"></i></div><div class="middle">{{item.title}}</div><div class="right_icon"><i :class="'iconfont '+item.close"></i></div></li><li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1"><router-link :to="it.path" tag="a">{{it.name}}</router-link></li></ul></div><!-- 管理员端 --><!-- <ul class="admin"><li class="col-lg-12"><div class="left_icon"><i class="iconfont icon-guanliyuan1"></i></div><router-link to="/admin/administrator/secadmin" tag="div" class="middle">管理员端</router-link><div class="right_icon"><i class="iconfont icon-jinru"></i></div></li></ul> --></div><!-- 右边内容 --><div class="admin_content col-12 col-md-12 col-lg-12 col-xl-10"><div class="admin_header"><!-- 导航图标 --><div class="H5_item" v-show="!fullWidth"><i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i></div><div class="user"><div class="userHead"><span><img src="../../assets/image/userhead.svg"></span><span>admin</span></div><div class="logOut"><i class="iconfont icon-tuichu"></i></div></div></div><div class="admin_body"><keep-alive><router-view /></keep-alive></div></div><!-- 移动端导航栏 --><transition name="toggle-cart"><div class="admin_nav admin_nav_position col-8 col-md-5 col-lg-3 col-xl-3" v-show="!fullWidth&&!dismenu"><div class="title"><div v-show="!fullWidth"><i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i></div><div>数据中心后台管理</div></div><ul v-for="(item,index) in navList" :key="index"><li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)"ref="title" :class="{active:currentSort == index}"><div class="left_icon"><i :class="'iconfont '+item.className"></i></div><div class="middle">{{item.title}}</div><div class="right_icon"><i :class="'iconfont '+item.close"></i></div></li><li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1"><router-link :to="it.path" tag="a">{{it.name}}</router-link></li></ul></div></transition></div></div>
</template><script>import axios from 'axios';export default {name: 'navigation-1',data() {return {token: '',navList: [{title: '用户管理',isSubShow: false,className: 'icon-guanliyuan1',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '工号管理',path: '/home/navigation-one/user'}, // {// name: '角色管理',// path: '/home/navigation-one/role'// }, // {// name: '权限管理',// path: '/home/navigation-one/user'// }, ]},{title: '资源管理',isSubShow: false,className: 'icon-ziyuan',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '我的收藏',path: '/home/navigation-one/user'},{name: '我的项目',path: '/home/navigation-one/role'}]},{title: '综合管理',isSubShow: false,className: 'icon-zonghe',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '划配管理',path: '/home/navigation-one/user'},{name: '数据信息',path: '/home/navigation-one/role'}]},{title: '系统消息',isSubShow: false,className: 'icon-xiaoxi',close: 'icon-close',up: 'icon-zhedie',secMenu: [{name: '实时动态',path: '/home/navigation-one/user'},{name: '过去动态',path: '/home/navigation-one/role'}]}],currentSort: 0,pagetype: "index",fullWidth: true,dismenu: true}},mounted() {window.onresize = () => { //监听屏幕变化this.page_width();};this.page_width();},methods: {active(index) {this.currentSort = index;},changeTitleColor(index) {this.currentSort = index;},removeTitleColor(index) {this.currentSort = null;},handleToTitle(ind, item) {this.navList[ind].isSubShow = !this.navList[ind].isSubShow;if (this.navList[ind].isSubShow == true) {this.navList[ind].close = 'icon-zhedie';} else {this.navList[ind].close = 'icon-close';}},make_menu() { //点击导航图标this.dismenu = !this.dismenu;},page_width() { //获取屏幕宽度var screenWidth = window.screen.width;if (screenWidth <= 1024) {this.fullWidth = false;} else {this.fullWidth = true;}}}}
</script><style scoped>#main {background: #F0F6FF;font-size: 0.16rem;}#main .content {display: flex;flex-direction: row;}.content .admin_nav {min-height: 9.37rem;max-height: 1.3rem;padding: 0 !important;background: #364150;position: relative;}.content .admin_nav .admin_nav_site{height: 100vh;}.content .admin_nav .title {height: 1.39rem;line-height: 1.39rem;background: rgba(63, 73, 86, 1);color: #FFFFFF;text-align: center;font-size: 0.18rem;display: flex;justify-content: center;}.content .admin_nav .title div {padding: 0 0.03rem;}.content .admin_nav .title div:first-child i {font-size: 0.18rem;}.content .admin_nav ul .active {background: rgba(68, 81, 99, 1);}.content .admin_nav ul .active1 a.router-link-active {color: #fff;}.content .admin_nav ul li {height: 0.6rem;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 0.18rem;}.content .admin_nav ul li a {color: #cecdc5;cursor: pointer;}.content .admin_nav ul li:first-child {font-size: 0.2rem;height: 0.64rem;display: flex;flex-direction: row;align-items: center;color: #BEC5C0;cursor: pointer;}.content .admin_nav ul li:first-child div {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: #BEC5C0;}.content .admin_nav ul li:first-child .left_icon {width: 22%;}.content .admin_nav ul li:first-child .left_icon i {color: #1296DB;}.content .admin_nav ul li:first-child .middle {width: 56%;display: flex;justify-content: flex-start;}.content .admin_nav ul li:first-child .right_icon {width: 22%;}.admin_nav .admin .middle:hover {color: #fff;}.admin_nav .admin .right_icon i:hover {color: #fff;}.admin_nav .admin .middle.router-link-active {color: #fff;}.content .admin_nav_position {position: absolute;z-index: 3000;}.content .admin_content {padding: 0 !important;}.content .admin_content .admin_header {width: 100%;height: 0.6rem;background: #364150;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}.content .admin_content .admin_header .H5_item {width: 0.4rem;height: 0.4rem;border-radius: 0.2rem;display: flex;justify-content: center;align-items: center;margin-left: 0.2rem;}.content .admin_content .admin_header .H5_item i {font-size: 0.22rem;color: #fff;}.content .admin_content .admin_header .user {width: 100%;display: flex;align-items: center;justify-content: flex-end;}.content .admin_content .admin_header .user .userHead {height: 0.6rem;display: flex;flex-direction: row;align-items: center;color: #fff;font-size: 0.18rem;}.content .admin_content .admin_header .user .userHead span {padding: 0 0.05rem;}.content .admin_content .admin_header .user .userHead span:nth-child(1) {position: relative;}.content .admin_content .admin_header .user .userHead span img {width: 0.4rem;height: 0.4rem;border-radius: 50%;}.content .admin_content .admin_header .user .userHead span input {width: 0.4rem;height: 0.4rem;position: absolute;overflow: hidden;opacity: 0;cursor: pointer;}.content .admin_content .admin_header .user .logOut {color: #fff;margin-left: 0.12rem;margin-right: 0.5rem;}.content .admin_content .admin_header .user .logOut i {color: #1296DB;font-size: 0.24rem;cursor: pointer;}.toggle-cart-enter-active {transition: all 0.4s linear;}.toggle-cart-leave-active {transition: all 0.4s linear;}.toggle-cart-enter {transform: translateX(-200%);}.toggle-cart-leave-active {transform: translateX(-200%);}
</style>

注：

1、css样式中的rem换算成px为对应的rem值*100,如：font-size:0.24rem；=>  font-size:24px；

2、文章中涉及到的iconfont类名是因为引用了阿里图标，如遇到不知道如何引用的可以翻阅博文→ https://blog.csdn.net/weixin_44803753/article/details/113423633

3、关于router-link对应的跳转，如有小伙伴不太清楚如何使用vue-router配置路由的可以翻阅博文→https://blog.csdn.net/weixin_44803753/article/details/113436625

Ending(〃'▽'〃)！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

程序员过关斩将--解决分布式session问题

程序员过关斩将--解决分布式session问题

微信搜一搜架构师修行之路session 说到 session&#xff0c;我相信每个程序员都不陌生&#xff0c;或多或少在项目中使用过。session 这个词&#xff0c;其实是一个抽象的概念&#xff0c;它不像 Cookie 那样有着明确的定义。当大多数程序员谈论 session 的时候&#xff0c;可能…
阅读更多...
如何将nodejs项目程序部署到阿里云服务器上

如何将nodejs项目程序部署到阿里云服务器上

将nodejs项目程序部署到阿里云服务器上一、概述二、具体步骤1、拥有自己的服务器2、下载Xshell3、 oneinstack配置web环境4、 XShell连接远程主机5、更新系统软件6、在服务器上安装node环境7、部署项目到服务器上8、安装pm2并启动nodejs项目三、快捷指令1、linux的常用命令2、p…
阅读更多...
101. 对称二叉树023（BFS）

101. 对称二叉树023（BFS）

一&#xff1a;题目 二&#xff1a;上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullpt…
阅读更多...
中移动完成透镜天线远距覆盖和降本增效试点

中移动完成透镜天线远距覆盖和降本增效试点

日前&#xff0c;中国移动研究院在官微上正式发布了《新型透镜天线进行首次高铁覆盖实验》一文。中国移动研究院、中国移动甘肃公司与西安海天天线科技股份有限公司联合开展的人工介质圆柱透镜天线在高铁、高速等线状纵深领域的长距覆盖取得突破性进展。两年以来&#xff0c;铁…
阅读更多...
基于PHPEnv的本地环境搭建—PHP第一个项目：HelloWorld（从安装到运行）

基于PHPEnv的本地环境搭建—PHP第一个项目：HelloWorld（从安装到运行）

1、安装软件 编程工具&#xff1a;Notepad 运行环境&#xff1a;phpEnv 2、用phpEnv建立本地运行环境 &#xff08;1&#xff09;官方下载phpEnv&#xff0c;运行phpEnv&#xff0c;启动服务。服务启动之后&#xff0c;apache和mysql变绿。如下图所示&#xff1a; &#xff0…
阅读更多...
在idae中为什么用Module创建一个新的Maven项目的时候会被卡死

在idae中为什么用Module创建一个新的Maven项目的时候会被卡死

一:问题描述 然后就会卡死&#xff0c; 二&#xff1a;问题解决 我们会发现这里的路径是有问题的&#xff0c;idea自带的maven会卡死我们&#xff0c;因为下载jar包的速度慢的惊人 将其改为我们自己maven路径&#xff0c;下载速度会很快&#xff0c;便不会出现卡死的现象&a…
阅读更多...
ASP.NET Core Blazor Webassembly 之 数据绑定

ASP.NET Core Blazor Webassembly 之 数据绑定

上一次我们学习了Blazor组件相关的知识&#xff08;Asp.net Core Blazor Webassembly - 组件&#xff09;。这次继续学习Blazor的数据绑定相关的知识。当代前端框架都离不开数据绑定技术。数据绑定技术以数据为主导来驱动UI界面&#xff0c;用户对数据的修改会实时提现在UI上&a…
阅读更多...
PHP做二次开发：本机安装ThinkCMF系统

PHP做二次开发：本机安装ThinkCMF系统

使用工具&#xff1a;phpEnv、TortoiseGit 具体步骤&#xff1a; 1.获取thinkcmf源代码 2.修改Hosts文件设置虚拟域名指向本机 3.配置apache建立本地站点 4.建立数据库 5.访问本地站点开始安装 第一步&#xff1a;获取thinkcmf源代码 1.打开浏览器访问gitee.com&#xff0c;搜…
阅读更多...
107. 二叉树的层序遍历 II and 102. 二叉树的层序遍历 023（BFS模板题打两道）

107. 二叉树的层序遍历 II and 102. 二叉树的层序遍历 023（BFS模板题打两道）

一&#xff1a;题目 二&#xff1a;上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullpt…
阅读更多...
PHP做二次开发：ThinkCMF门户应用安装

PHP做二次开发：ThinkCMF门户应用安装

使用工具&#xff1a;phpEnv 具体步骤&#xff1a; 1.获取门户应用portal源码 2.安装portal代码 3.执行portal数据库文件 4.安装并启用前台模板 5.导入后台管理菜单 第一步&#xff1a;获取门户应用portal源码 1.打开官方网站http://kancloud.cn/thinkcmf/faq/1005840&#xf…
阅读更多...
vector的逆序输出（神奇的vector）

vector的逆序输出（神奇的vector）

一&#xff1a;直接上代码&#xff08;逆序输出&#xff09; #include<bits/stdc.h> using namespace std; int main(){vector<int> v;for(int i 0; i < 5; i){v.push_back(i); }reverse(v.begin(),v.end());for(int i 0; i < 5; i){cout << v[i] &…
阅读更多...
初识ABP vNext（6）：vue+ABP实现国际化

初识ABP vNext（6）：vue+ABP实现国际化

点击上方蓝字"小黑在哪里"关注我吧语言选项语言切换注意前言上一篇介绍了ABP扩展实体&#xff0c;并且在前端部分新增了身份认证管理和租户管理的菜单&#xff0c;在实现这两个功能模块前&#xff0c;先来解决一下界面文字国际化的问题。开始国际化&#xff08;简称 …
阅读更多...
『软件工程1』详解软件是什么

『软件工程1』详解软件是什么

软件基本概念一、什么是产品二、软件的双重角色三、软件的涵义及特征四、软件应用五、软件危机六、软件神话一、什么是产品 1、从用户的角度 产品实际上就是信息&#xff0c;以某种方式使得用户世界更加美好 2、从软件工程师的角度 产品实际上就是软件 二、软件的双重角色 1…
阅读更多...
200. 岛屿数量025(BFS详解)

200. 岛屿数量025(BFS详解)

二&#xff1a;思路 1.这里我们使用的是BFS(广度优先搜索遍历) 2.当我们遇到一个岛屿&#xff08;‘1’&#xff09;的时候&#xff0c;我们就对其的左右四边进行广度遍历 并且标记已经访问过的结点。 3.那么我们每次遇到一个1开始广度遍历那就证明我们发现了一个岛 三:上码 …
阅读更多...
进击吧！ Blazor 第一期

进击吧！ Blazor 第一期

Blazor 是一个 Web UI 框架&#xff0c;可通过 WebAssembly 在任意浏览器中运行 .Net 。Blazor 旨在简化快速的单页面 .Net 浏览器应用的构建过程&#xff0c;它虽然使用了诸如 CSS 和 HTML 之类的 Web 技术&#xff0c;但它使用 C&#xff03;语言和 Razor 语法代替 JavaScrip…
阅读更多...
『软件工程2』详解软件工程和软件过程模型

『软件工程2』详解软件工程和软件过程模型

文章目录一、软件工程的定义1、Fritz Bauer在NATO上给出的定义2、Barry Boehm3、IEEE在软件工程术语汇编中的定义二、软件工程的层次1、软件工程三个要素2、软件工程的层次——图解3、软件工程的层次——逐一分析三、软件过程的三个阶段1、定义阶段——“做什么”2、开发阶段—…
阅读更多...
利用vector实现一对一（pair＜int,int＞）

利用vector实现一对一（pair＜int,int＞）

一&#xff1a;前言 我们知道有一对一的STL容器有map容器&#xff0c;但是map容器中的按键值排序和不允许由重复的元素&#xff0c;现在&#xff0c;我们可以利用 vector<pair<int,int> >来实现一对一&#xff0c;但其没有排序可以允许有重复的元素 二&#xff1…
阅读更多...
没有docker，谈什么微服务架构？

没有docker，谈什么微服务架构？

新的互联网技术时代已经来临了&#xff0c;容器、Kubernetes、DevOps、微服务、云原生代表着技术前进的方向&#xff0c;.NET Core微服务Docker&#xff0c;亦是当下最优解决方案(低调点&#xff0c;几乎没有之一)&#xff01;有点自夸&#xff1f;作为专注于.NET领域十多年的老…
阅读更多...
『软件工程3』你应该知道的三种原型实现模型：抛弃式、演化式、增量式

『软件工程3』你应该知道的三种原型实现模型：抛弃式、演化式、增量式

三种原型实现模型一、抛弃式原型开发二、演化式原型开发三、增量式原型开发一、抛弃式原型开发 1、定义&#xff1a;验证和澄清系统的需求描述&#xff0c;重新构造系统。 2、流程图 3、典型例子 开发者与客户进行沟通交流&#xff0c;之后获取到客户的需求&#xff0c;于是…
阅读更多...
『软件工程4』一文了解软件项目管理中的4P

『软件工程4』一文了解软件项目管理中的4P

软件项目管理中的4P一、项目管理的重要性和定义1、重要性&#xff08;两个阶段&#xff09;2、软件项目管理的定义二、管理四要素4P1、管理的四要素(4P)2、软件项目中影响最终结果的要素3、项目管理关心的问题三、项目参与者类型(people)四、项目小组结构(people)1、项目的三种…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023