vue系列(三)——手把手教你搭建一个vue3管理后台基础模板

news2025/7/8 4:49:22

目录

一、前言:

二、网站页面分析

三、开发步骤

(一)、安装element

(二)、安装使用svg插件

(三)、编写主界面框架代码

 (四)、编写菜单栏

 (五)、新建页面及路由

(六)、定制页面标签栏

第一步:

第二步:

(七)、修改封装菜单栏

(八)、添加面包屑

四、结尾


一、前言:

先上图,项目模板成品截图:

开源的vue管理后台模板很多,如需快速开发一个后台管理可搜索“vue管理后台模板”查找,本文旨在熟悉vue开发过程实践,适合vue刚入门的小伙伴阅读和动手实践,内容偏长,只想要代码的同学可直接点击 源代码。通过本章博客你可以学到:

(1)、element UI组件库的使用。

(2)、如何自定义组件。

(3)、路由的熟练使用。

(4)、vue项目开发思想的提升。

(5)、……

本项目在上一章节集成项目基础上开发,可先点击下方链接阅读。(如阅读本章无障碍请忽略)

vue系列(二)——vue3基础项目(集成框架)搭建_萧萧风的博客-CSDN博客目录一、新建项目二、集成路由三、安装配置axios(网络请求库)四、使用vuex(暂无)五、结尾打开编辑器新建项目,填写项目名称,点击创建,之后等待项目加载完成就可以了。我的Hbuilder X 版本是3.4.14新建的项目目录下面是vue项目加载页面的形式,单页渲染,所有的内容展示都是在index.html页面上进行渲染,而App.vue是index.html里面最外层的组件容器、包含全局的js代码css样式。所有的页面的渲染是在App.vue容器里面进行文件main.js:入口js文件,所有全局文件的引https://blog.csdn.net/xxfen_/article/details/125327388?spm=1001.2014.3001.5501

二、网站页面分析

网站由登录页、主界面、内容页组成。

主界面整体模块是由:

(1)、导航栏;

(2)、左测导航菜单栏;

(3)、页面标签卡栏;

(4)、内容栏(展示页面)。

组成。

菜单栏的点击切换改变的只是内容栏的内容,由此得出:

登录页和主界面是一级路由,内容页是主界面下的嵌套路由。

三、开发步骤

(一)、安装element

官网: 一个 Vue 3 UI 框架 | Element Plus。

首先安装国内npm镜像,这样下载资源包速度会更快

npm install cnpm -g --registry=https://registry.npmmirror.com

然后,安装element

npm install element-plus --save

 引入项目,在main.js文件中加入以下代码

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

测试一下引入是否成功,在home.vue中加入按钮组件

<el-button type="primary">Primary</el-button>

 

 运行项目:npm run dev

运行效果如下,说明引入成功:

(二)、安装使用svg插件

  •  安装:

npm i vite-plugin-svg-icons -D

  •  在src下新建存放svg目录:

  • 在components目录下新建组件:SvgIcon.vue
<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon',
      },
      name: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
      return { symbolId };
    },
  });
</script>
  •  在vite.config.js中配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
  	vue(),
	createSvgIconsPlugin({
	        // 指定需要缓存的图标文件夹
	        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
	        // 指定symbolId格式
	        symbolId: '[name]',
	      })
  ]
})
  • 在main.js中引入,添加代码:

//导入Svg图片插件,可以在页面上显示Svg图片
import 'virtual:svg-icons-register'
import SvgIcon from "./components/SvgIcon.vue";
app.component('SvgIcon',SvgIcon)

  •  到了这里,运行项目出现报错:没有找到fast-glob。就需要安装fast-glob。

npm i fast-glob

  •  测试使用

打开Icon 图标 | Element Plus

 点击图标复制svg内容

在新建的svg目录下新建svg文件,名称格式:icon-“图标名称”,粘贴内容保存

 在页面中使用:

<SvgIcon name="aim" class="icon-svg" />

(三)、编写主界面框架代码

  • 先搭建一个整体框架,home.vue 代码
<template v-slot:default>
	<div :class="['content',isCollapse?'menu--fold':'menu--unfold']">
		<!-- 侧边菜单栏 -->
		<div class="menuLeft">
			<div class="menu-nav-header">
				<span>{{isCollapse?'控制台':'管理控制台'}}</span>
			</div>
             <!--todo 菜单栏组件 -->
		</div>
		<!-- 右边内容 -->
		<div class="content-main">
			<div class="navTop horizontalView">
				<div class="nav_tools horizontalView">
					<SvgIcon :name="isCollapse?'expand':'fold'" class="icon-svg" @click="isCollapse=!isCollapse" />
				</div>
			</div>
			<!-- todo 内容组件 -->
		</div>
	</div>
</template>

<script>
export default {
		components: {

		},
		data: function() {
			return {
				isCollapse: false
				
			}
		}
}
</script>

<style>
	@import url('../assets/css/home.css');
</style>

  •  编写css样式

 

 通用的放在base.css中,页面独有的放在home.css

  • base.css代码:
.content {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

/* 水平布局 居中*/
.horizontalView {
	position: relative;
	flex-direction: row;
	display: flex;
	align-items: center;
}

/* 垂直布局居中 */
.verticalView {
	position: relative;
	flex-direction: column;
	display: flex;
	align-items: center;
}

/* 居中 */
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 28px;
	transform: translate(-50%, -50%);
}

.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}
.icon-svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
	overflow: hidden;
}
  • home.css代码:
/* -------侧边栏 折叠 */
.menu--fold .menuLeft {
	width: 64px;
}

.menu--fold .content-main {
	margin-left: 64px;
}

/* --------------------- */

/* ---------侧边栏 展开 */
.menu--unfold .menuLeft {
	width: 230px;
}

.menu--unfold .content-main {
	margin-left: 230px;
}

/* ------------- */

.navTop {
	position: relative;
	width: 100%;
	height: 50px;
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	background: white;
}

.nav_tools {
	height: 100%;
}

.nav_tools .icon-svg {
	margin-left: 10px;
	color: #5b5b5b;
}

.menuLeft {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1020;
	overflow: hidden;
	background-color: #263238;
}

.content-main {
	position: relative;
	background: #f1f4f5;
	height: 100%;

}
.menu-nav-header {
	color: white;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	/* background-color: #9fbea7; */
	background-color: #566f7e;
}

/* 动画 */
.nav_tools,
.menuLeft,
.content-main {
	transition: inline-block 0.3s, left 0.3s, width 0.3s, margin-left 0.3s, font-size 0.3s;
}





  •  base.css放在app.vue

@import url("./assets/css/base.css");

  • 看看页面效果:

  • 点击上边折叠按钮

 (四)、编写菜单栏

请先去了解组件使用文档:Menu 菜单 | Element Plus

复制实例代码自定义内容属性及样式,关闭组件提供的折叠动画,自定义动画样式

  • 在home.vue中加入修改菜单组件代码
<!--todo 菜单栏组件 -->
			<el-menu active-text-color="#fff" background-color="#263238" class="el-menu-vertical-demo"
				:collapse-transition="false" default-active="2" text-color="#96a4ab " @open="handleOpen"
				@close="handleClose" :collapse="isCollapse">
				<el-menu-item index="1">
					<SvgIcon name="home" class="icon-svg" />
					<span slot="">&nbsp;&nbsp;首页</span>
				</el-menu-item>
				<el-sub-menu index="2">
					<template #title>
						<SvgIcon name="img" class="icon-svg" />
						<span>&nbsp;&nbsp;图片管理</span>
					</template>
					<el-menu-item index="1-1">
						<SvgIcon name="img" class="icon-svg" />
						<span>&nbsp;&nbsp;图片1</span>
					</el-menu-item>
					<el-menu-item index="1-2">
						<SvgIcon name="img" class="icon-svg" />
						<span>&nbsp;&nbsp;图片2</span>
					</el-menu-item>
					<el-sub-menu index="1-4">
						<template #title>
							<SvgIcon name="img" class="icon-svg" />
							<span>&nbsp;&nbsp;图片3</span>
						</template>
						<el-menu-item index="1-4-1">
							<SvgIcon name="img" class="icon-svg" />
							<span>&nbsp;&nbsp;图片三级子菜单</span>
						</el-menu-item>
					</el-sub-menu>
				</el-sub-menu>
				<el-sub-menu index="3">
					<template #title>
						<SvgIcon name="collection" class="icon-svg" />
						<span>&nbsp;&nbsp;收藏管理</span>
					</template>
					<el-menu-item index="3">
						<SvgIcon name="collection" class="icon-svg" />
						<span class="icon-text">&nbsp;&nbsp;收藏</span>
					</el-menu-item>
				</el-sub-menu>

				<el-menu-item index="4">
					<SvgIcon name="about" class="icon-svg" />
					<span>&nbsp;&nbsp;设置</span>
				</el-menu-item>

			</el-menu>
  • home.css 中加入修改样式代码
/* 修改菜单栏样式样式 */

.menuLeft .el-menu {
	border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	border-right: none;
	width: 230px;
}

.el-menu .icon-text {
	margin-left: 10px;
}

  • 页面效果:

 菜单栏编写到这还没完呢,上面这种写法是每次添加、修改或删除菜单都要在页面中找到位置再修改有点繁琐,在页面代码多了或菜单项好多时去编辑修改更是麻烦的一比,所以等后面再来优化代码,把菜单封装成菜单数据集合,然后再在页面中for循环展示。

 (五)、新建页面及路由

  •  新建页面:

index.vue,img1.vue,collect.vue,set.vue 。并在页面内加上页面标识文字。

  • 配置路由:

router目录下index.js代码:

// import Vue from 'vue'   //引入Vue
import {
	createRouter,
	createWebHashHistory
} from 'vue-router' //引入vue-router
// Vue.use(Router)  //Vue全局使用Router

import home from '../views/home.vue'
import login from '../views/login.vue'
import index from '../views/index.vue'
import collect from '../views/collect.vue'
import set from '../views/set.vue'
import img1 from '../views/img1.vue'

const routes = [{
		path: '',
		redirect: "home"
	}, {
		path: '/',
		redirect: "home"
	},
	{
		path: '/login',
		name: 'login',
		component: login,
		meta: {
			title: '登录'
		}
	},
	{
		path: '/home',
		name: 'home',
		component: home,
        /* 子路由 */
		children: [{
				path: '/',
				redirect: "index"
			},{
				path: '',
				redirect: "index"
			}, {
				path: '/index',
				name: 'index',
				component: index,
				meta: {
					title: '首页',
				}
			},
			{
				path: '/collect',
				name: 'collect',
				component: collect,
				meta: {
					title: '收藏',
					isTab: true
				}
			},
			{
				path: '/img1',
				name: 'img1',
				component: img1,
				meta: {
					title: '图片1',
					isTab: true
				}
			},
			{
				path: '/set',
				name: 'set',
				component: set,
				meta: {
					title: '设置',
					isTab: true
				}
			}
		]
	}
];

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
/* router.beforeEach((to, from, next) => {
	if (to.path === '/login') {
		next();
	} else {
		let token = localStorage.getItem('Authorization');

		if (token === null || token === '') {
			next('/login');
		} else {
			next();
		}
	}
}); */
const router = createRouter({
	history: createWebHashHistory(),
	routes
})
export default router;
  •  在home.vue中加入路由组件测试一下路由跳转:

<router-view />

  •  在菜单项中加入跳转路由代码

在“首页”菜单项加上点击跳转路由代码:@click="$router.push({ name: 'index' })"

同理,在其它菜单项上加入相应代码。

  •  测试效果

点击“设置”

 点击“收藏”

 ok,路由配置成功!

(六)、定制页面标签栏

二步走:

(1)、监听路由的切换,存储跳转的路由的name(或path)集合,并存储当前的路由name。

(2)、使用 el-tabs标签页组件Tabs 标签页 | Element Plus,自定义样式,编写内容组件。

第一步:

  • 监听路由变化,watch与data同层:
watch: {
			$route: {
				handler(to, from) {
					if (to.path != from.path) {
						// 处理路由
						this.routeHandle(to);
					}
				}
			}
		},
  • 算了,直接放js全部代码吧:
<script>

	export default {
		components: {

		},
		data: function() {
			return {
				isCollapse: false,
				mainTabs: [],
				mainTabsActiveName: '',
				menuActiveName: '',
				menus: []
			}
		},
		created() {
			let that = this;
			that.routeHandle(that.$route);
		},
		// 监听路由变化
		watch: {
			$route: {
				handler(to, from) {
					if (to.path != from.path) {
						// 处理路由
						this.routeHandle(to);
					}
				}
			}
		},
		methods: {
			resetDocumentClientHeight: function() {
				this.documentClientHeight = document.documentElement['clientHeight'];
				window.onresize = () => {
					this.documentClientHeight = document.documentElement['clientHeight'];
					this.loadSiteContentViewHeight();
				};
			},
			loadSiteContentViewHeight: function() {
				let height = this.documentClientHeight - 52; //减去导航栏高度50 
				console.log(this.$route.meta.isTab)
				if (this.$route.meta.isTab) {
					height -= 70; //减去tab栏高度40,减去上下边距30
					/* this.siteContentViewHeight = {
						'min-height': height + 'px'
					}; */
					this.siteContentViewHeight = height;
				} else {
					height -= 30;
					//给内容区设置高度
					this.siteContentViewHeight = height;
				}

			},
			routeHandle: function(route) {
				//每次切换页面,重新计算页面高度和内容区高度
				this.resetDocumentClientHeight();
				this.loadSiteContentViewHeight();
				if (route.meta.isTab) {
					// tab选中, 不存在先添加
					var tab = this.mainTabs.filter(item => item.name === route.name)[0];
					if (!tab) {
						if (route.meta.isDynamic) {
							route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0];
							if (!route) {
								return console.error('未能找到可用标签页!');
							}
						}
						tab = {
							menuId: route.meta.menuId || route.name,
							name: route.name,
							title: route.meta.title,
							iframeUrl: route.meta.iframeUrl || '',
							params: route.params,
							query: route.query
						};
						this.mainTabs = this.mainTabs.concat(tab);
					}
					this.menuActiveName = tab.menuId + '';
					this.mainTabsActiveName = tab.name;
				}
			},
			mounted: function() {
				let that = this;
				that.resetDocumentClientHeight();
				that.loadSiteContentViewHeight();
			}
		}
	}
</script>

第二步:

  • 编写组件
<!-- todo 内容组件 -->
			<el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true"
				@tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
				
				<el-scrollbar ref="scroll" :height="siteContentViewHeight+32+'px'" @scroll="scroll">
					<el-tab-pane v-for="item in mainTabs" :label="item.title" :name="item.name">
						<el-card :style="'min-height:'+siteContentViewHeight + 'px'">
			
							<router-view v-if="item.name === mainTabsActiveName" />
			
						</el-card>
					</el-tab-pane>
				</el-scrollbar>
			</el-tabs>
			<div v-else>
				<el-scrollbar ref="scroll" :height="siteContentViewHeight+32+'px'" @scroll="scroll">
					<!-- 主入口标签页 e -->
					<el-card :style="'min-height:'+ siteContentViewHeight + 'px'">
						<router-view />
					</el-card>
				</el-scrollbar>
			</div>
  • 修改样式:

/* 修改标签栏样式 */
.content-main .el-tabs .el-tabs__header {
	z-index: 90;
	padding: 0 55px 0 15px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
	background-color: #fff;
}

.content-main .el-tabs .el-tabs__nav-wrap::after {
	width: 0px;
}

.content-main .el-scrollbar .el-card {
	margin: 15px 15px;
	
}
.content-main .el-tabs .el-tabs__header{
	margin: unset;
}
.content-main .el-tabs .el-tab-pane{
}
  •  在methods中添加函数方法
selectedTabHandle: function(tab, e) {
				tab = this.mainTabs.filter(item => item.name === tab.paneName);
				if (tab.length >= 1) {
					this.$router.push({
						name: tab[0].name,
						query: tab[0].query,
						params: tab[0].params
					});
				}
			},
			removeTabHandle: function(tabName) {
				this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
				if (this.mainTabs.length >= 1) {
					// 当前选中tab被删除
					if (tabName === this.mainTabsActiveName) {
						var tab = this.mainTabs[this.mainTabs.length - 1];
						this.$router.push({
								name: tab.name,
								query: tab.query,
								params: tab.params
							},
							() => {
								this.mainTabsActiveName = this.$route.name;
							}
						);
					}
				} else {
					this.menuActiveName = '';
					this.$router.push({
						name: 'Home'
					});
				}
			},
  • 效果:

(七)、修改封装菜单栏

  •  在router文件下新建文件

  •  menu.js文件代码:
var mu = {
	longTitle: '管理控制台',
	littleTitle: '控制台',
	items: [{
			iconName: 'home',
			name: '首页',
			routerName: 'index',
			disabled: false
		}, {
			iconName: 'img',
			name: '图片管理',
			submenu: [{
				iconName: 'img',
				name: '图片一',
				routerName: 'img1',
				disabled: false
			}, {
				iconName: 'img',
				name: '图片二',
				routerName: 'img2',
				disabled: false
			}, {
				iconName: 'img',
				name: '图片三管理',
				submenu: [{
					iconName: 'img',
					name: '图片三',
					routerName: 'img1',
					disabled: true
				}]

			}]
		},
		{
			iconName: 'collection',
			name: '收藏管理',
			submenu: [{
				iconName: 'collection',
				name: '收藏',
				routerName: 'collect',
				disabled: false
			}]
		},
		{
			iconName: 'about',
			name: '设置',
			routerName: 'set',
			disabled: false
		}

	]
}
export default mu;
  • 重新写菜单组件:
<div class="menu-nav-header">
				<span>{{isCollapse?littleTitle:longTitle}}</span>
			</div>
			<el-menu active-text-color="#fff" background-color="#263238" class="el-menu-vertical-demo"
				:collapse-transition="false"  text-color="#96a4ab " @open="handleOpen"
				@close="handleClose" :collapse="isCollapse">
				<template v-for="(item,index) in menus">
					
					<el-menu-item v-if="!item.submenu" :index="index" @click="$router.push({ name: item.routerName })" :disabled="item.disabled">
						<SvgIcon :name="item.iconName" class="icon-svg" />
						<span slot="">&nbsp;&nbsp;{{item.name}}</span>
					</el-menu-item>
					<el-sub-menu v-else :index="index">
						<template #title>
							<SvgIcon :name="item.iconName" class="icon-svg" />
							<span slot="">&nbsp;&nbsp;{{item.name}}</span>
						</template>
						<template v-for="(submenuItem,submenuIndex) in item.submenu">
						
							<el-menu-item v-if="!submenuItem.submenu" :index="index+'-'+submenuIndex" :disabled="submenuItem.disabled"
								@click="$router.push({ name: submenuItem.routerName })">
								<SvgIcon :name="submenuItem.iconName" class="icon-svg" />
								<span slot="">&nbsp;&nbsp;{{submenuItem.name}}</span>
							</el-menu-item>
							<el-sub-menu v-else :index="index+'-'+submenuIndex">
								<template #title>
									<SvgIcon :name="submenuItem.iconName" class="icon-svg" />
									<span slot="">&nbsp;&nbsp;{{submenuItem.name}}</span>
								</template>
								<el-menu-item v-for="(item3,index3) in submenuItem.submenu" :index="index" :disabled="item3.disabled"
									@click="$router.push({ name: item3.routerName })">
									<SvgIcon :name="item3.iconName" class="icon-svg" />
									<span slot="">&nbsp;&nbsp;{{item3.name}}</span>
								</el-menu-item>

							</el-sub-menu>
						</template>
					</el-sub-menu>
				</template>
			</el-menu>

只嵌套了三级子菜单,如果有更多级子菜单,需要在组件中再嵌套多个for循环即可。

  • script代码中首先导入menu

import mu from '../router/menu/menu.js';

  •  在created中调用

 这样,修改菜单栏就只需要在menu.js进行编辑了,不再需要修改页面代码。

(八)、添加面包屑

  • 页面中加入面包屑组件:
<el-breadcrumb separator="/">
					<el-breadcrumb-item v-if="!breadcrumbList.size && breadcrumbList[0]!='首页'" :to="{ name: 'index' }">
						首页
					</el-breadcrumb-item>
					<el-breadcrumb-item v-for="it in breadcrumbList">{{it}}</el-breadcrumb-item>
				</el-breadcrumb>
  • 在created中,将菜单栏集合做下处理,处理成下面格式:
{
"首页":["首页"],
"图片一":["图片管理","图片一"],
......
}
  • 代码:
    //菜单项层级处理,做一个面包屑集合保存
            var mus=that.menus
            for (let i1 of mus) {
                if (i1.submenu) {
                    for (let i2 of i1.submenu) {
                        if (i2.submenu) {
                            for (let i3 of i2.submenu) {
                                if (!i3.submenu) {
                                    that.breadcrumbObj[i3.name] = [i1.name, i2.name, i3.name];
                                }
                            }
                        } else {
                            that.breadcrumbObj[i2.name] = [i1.name, i2.name];
                            console.log(i2.name)
                        }
                    }
                } else {
                    that.breadcrumbObj[i1.name] = [i1.name];
                    console.log(i1.name)
                }
            }

路由发生变化时赋值,在watch中加入:

this.breadcrumbList = this.breadcrumbObj[to.meta.title]

注意:路由中的name要与菜单中的name保持一致。

四、结尾

到这里,一个简单的管理后台基础模板就完成了,源代码拿走不谢,码字不易,既然看到了这里,点个赞再走吧。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用wireshark抓取HTTPS数据包?

1、wireshark 抓包为什么不显示出来&#xff1f; wireshark 是基于网络层的抓包工具&#xff0c;通过捕获通信双方的TCP/IP包实现内容提取。对于应用层的数据&#xff0c;如果应用层协议是公开的&#xff0c;就可以直接显示数据。处理HTTPS 协议时&#xff0c;因为不知道客户端…

前端知识——css之flex布局

1.基本概念 flex布局是一种布局模型&#xff0c;经常被称之为flexbox&#xff0c;使用flex布局之后&#xff0c;他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前&#xff0c;常用布局有&#xff1a;流式布局&#xff0c;浮动布局&#xff0c;定…

Vite代理解决跨域问题

Vite代理解决跨域问题 我们在编写前端项目的时候&#xff0c;经常会遇到跨域的问题&#xff0c;当我们访问后端 API 的 URL 路径时&#xff0c;只要域名、端口或访问协议&#xff08;如 HTTP 和 HTTPS&#xff09;有一项不同&#xff0c;就会被浏览器认定为跨域。另外我们也会…

小程序真机调试提示系统错误

Error: 系统错误&#xff0c;错误码&#xff1a;80051,source size 7935KB exceed max limit 2MB [20220929 16:18:58][wxfc8aa5984cac7f72] [1.06.2208010][win32-x64]// 说明你源文件大小为7985kb 超过了2M 所以编译失败解决方法 1. 压缩项目中的图或转为base64格式 …

【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目

文章目录&#x1f3f4;‍☠️SpringMVC简介SpringMVC是什么SpringMVC的基础架构SpringMVC的优点&#x1f3f3;️‍&#x1f308;SpringMVC接管Web说明三层框架SpringMVC的简单开发&#x1f6a9;Spring搭建&#x1f6a9;Mybatis搭建&#x1f3c1; Spring整合Mybatis✅结语&#…

(element-ui)取消el-table的hover状态,取消高亮显示

文章目录前言方法一 ------覆盖css样式方法二------卸载掉背景颜色&#xff08;类似于方法一&#xff09;方法三------使用函数方法方法四------禁用鼠标悬浮怎么办&#xff1f;究极解决------将错就错前言 在使用element-ui的el-table表格的过程中&#xff0c;会发现&#xf…

VsCode配置JavaWeb(最新)

我个人是很喜欢VsCode的&#xff0c;开源免费、功能全面。所以为了方便&#xff0c;我把我几乎所有的运行都集成到了VsCode上来&#xff0c;JavaWeb也不例外。 前言 之前也在CSDN上看到有些博主写了配置方法&#xff0c;但是很不幸的是&#xff0c;插件Tomcat for java已经不可…

Web过滤器:Filter

Filter 概述工作原理生命周期web.xml配置的常用节点FilterConfig类过滤器链FilterChainHttpFilter的简化设计自动登录功能的改进验证登入页面的改进浏览器的缓存功能概述 Filter过滤器,是Servlet技术中最实用的技术,能够管理Web服务器的所有Web资源,实现信息拦截、权限访问控…

vue动态路由添加,vue-router的addRoute方法实现权限控制,添加根路由和子路由

addRoute路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路&#xff1a;动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由 静态路由和动态路由的优缺点 1、中大型项目&#xff0c;采用的都是动态路由方式,因为后台导航目录运营人…

Vue3如何封装组件?

&#x1f525;&#x1f525;&#x1f525;欢迎关注csdn前端领域博主: 前端小王hs &#x1f525;&#x1f525;&#x1f525;email: 337674757qq.com &#x1f525;&#x1f525;&#x1f525;前端交流群&#xff1a; 598778642 在开发Vue3项目的过程中&#xff0c;我们经常会使…

H5页面跳转微信小程序时:wx.miniProgram.navigateTo 报错 ‘wx‘ is not defined no-undef

有一个功能&#xff0c;需要从H5页面跳转到微信小程序&#xff0c;查了微信官方文档&#xff1a;只需要引入js文件&#xff0c;然后直接使用即可&#xff1a; 1&#xff1a;引用&#xff1a; 当然也可以下载下来直接引用项目具体位置的js文件 2: 使用&#xff1a; 然后一直报错…

vue3 hooks使用

vue3 hooks使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用&#xff0c;其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的&#xff0c;学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉&#xff0c;就算没用过也一定了解过&#xff0c;也就是混入&#xff0c;通过 mixin …

useDark的使用方法以及Element-Plus深色主题切换案例(vue3)

useDark 顾名思义&#xff0c;是否使用深色模式&#xff0c;useDark它是通过读取localStorage/sessionStorage的存储值&#xff08;key 是可自定义的&#xff09;。从而设置html的class。VueUse的官方案例使用了Tailwind CSS 偏好的暗模式。因为我们不一定都用得到Tailwind CSS…

vue实现本地预览word(docx)、excel(xlsx)、pdf文件

vue实现本地预览word(docx)、excel(xlsx)、pdf文件 实现效果&#xff1a; 通过点击预览&#xff0c;浏览器打开新标签页展示文件内容 word效果&#xff1a; pdf效果&#xff1a; excel效果&#xff1a; 前期准备&#xff1a; word插件&#xff1a; npm install --save …

【TFS-CLUB社区 第5期赠书活动】〖Python OpenCV从入门到精通〗等你来拿,参与评论,即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《Python OpenCV从入门到精通》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 内容提要❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《Python OpenCV从入门到精通》 内容简介&#xff1a; 《Python O…

【uniapp】页面下拉刷新

目录 一、全局 二、局部 1、一个页面一个下拉刷新 2、一个页面多个下拉刷新&#xff08;切换时滚动条回到顶部&#xff09; 3、一个页面多个下拉刷新&#xff08;切换时恢复滚动条位置&#xff09; 一、全局 修改pages.json的"enablePullDownRefresh": true, …

【Node.js实战】一文带你开发博客项目之登录(前置知识)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…

微信小程序自定义组件(超详细)

&#x1f48c;写在开头&#xff1a; 哈喽呀&#xff0c;亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分&#xff1a;组件的创建&#xff0c;组件的结构&#xff0c;组件的引用&#xff0c;组件样式&#xff0c;组件的生命周期等。 文章目录…

【蓝桥杯真题】当蓝桥杯开设Web组之后,对几题能拿省一?

目录 &#x1f3c6;难度分析 &#x1f3c6;一、水果拼盘 &#x1f3c6;二、展开你的扇子 &#x1f3c6;三、和手机相处的时光 &#x1f3c6;四、灯的颜色变化 &#x1f3c6;五、冬奥大抽奖 &#x1f3c6;六、蓝桥知识网 &#x1f3c6;七、布局切换 &#x1f3c6;八、购…

vue3,使用watch监听props中的数据

情况一&#xff1a;监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick () > {testStr.value P }子组件中监听传入的数据 watch(() > props.testStr,(newVal, oldVal) > {console.log(监听基本类型数据testStr)console.log(new, newVal)cons…