vue-VueRouter-后台管理案例

程序员文章站 2022-07-09 19:52:23

...

vue-VueRouter-后台管理案例

文章目录

1、UI界面
2、项目分析
3、项目改造

3.1、抽离并渲染App根组件
3.2、把左侧菜单改造为路由链接
3.3、创建左侧菜单对应的组件
3.4、右侧主体区域添加路由占位符
3.5、添加子路由规则
3.6、通过路由重定向默认渲染用户组件
3.7、渲染用户列表数据
3.8、编程式导航跳转到用户详细页
3.9、实现后退功能

4、完整代码及效果图

***后记*** ：

内容

1、UI界面

一般情况下，前端页面由UI做好页面（html+css)给我们，我们根据UI页面修改为Vue项目。

UI页面代码

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>10_router-backend-manager</title>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<style type="text/css">
  		html,
  		body,
  		#app {
  		  margin: 0;
  		  padding: 0px;
  		  height: 100%;
  		}
  		.header {
  		  height: 50px;
  		  background-color: #545c64;
  		  line-height: 50px;
  		  text-align: center;
  		  font-size: 24px;
  		  color: #fff;
  		}
  		.footer {
  		  height: 40px;
  		  line-height: 40px;
  		  background-color: #888;
  		  position: absolute;
  		  bottom: 0;
  		  width: 100%;
  		  text-align: center;
  		  color: #fff;
  		}
  		.main {
  		  display: flex;
  		  position: absolute;
  		  top: 50px;
  		  bottom: 40px;
  		  width: 100%;
  		}
  		.content {
  		  flex: 1;
  		  text-align: center;
  		  height: 100%;
  		}
  		.left {
  		  flex: 0 0 20%;
  		  background-color: #545c64;
  		}
  		.left a {
  		  color: white;
  		  text-decoration: none;
  		}
  		.right {
  		  margin: 5px;
  		}
  		.btns {
  		  width: 100%;
  		  height: 35px;
  		  line-height: 35px;
  		  background-color: #f5f5f5;
  		  text-align: left;
  		  padding-left: 10px;
  		  box-sizing: border-box;
  		}
  		button {
  		  height: 30px;
  		  background-color: #ecf5ff;
  		  border: 1px solid lightskyblue;
  		  font-size: 12px;
  		  padding: 0 20px;
  		}
  		.main-content {
  		  margin-top: 10px;
  		}
  		ul {
  		  margin: 0;
  		  padding: 0;
  		  list-style: none;
  		}
  		ul li {
  		  height: 45px;
  		  line-height: 45px;
  		  background-color: #a0a0a0;
  		  color: #fff;
  		  cursor: pointer;
  		  border-bottom: 1px solid #fff;
  		}

  		table {
  		  width: 100%;
  		  border-collapse: collapse;
  		}

  		td,
  		th {
  		  border: 1px solid #eee;
  		  line-height: 35px;
  		  font-size: 12px;
  		}

  		th {
  		  background-color: #ddd;
  		}
  	  </style>
  </head>
  <body>
  <div id="app">
  	<div>
  		<!-- 头部区域 -->
  		<header class="header">后台管理系统</header>
  		<!-- 中间主体区域 -->
  		<div class="main">
  		  <!-- 左侧菜单栏 -->
  		  <div class="content left">
  			<ul>
  			  <li><a href="#">用户管理</a></li>
  			  <li><a href="#">权限管理</a></li>
  			  <li><a href="#">商品管理</a></li>
  			  <li><a href="#">订单管理</a></li>
  			  <li><a href="#">系统设置</a></li>
  			</ul>
  		  </div>
  		  <!-- 右侧内容区域 -->
  		  <div class="content right">
  			<div class="main-content">
  			<!-- <router-view /> -->
  		  </div>
  		</div>
  		</div>
  		<!-- 尾部区域 -->
  		<footer class="footer">版权信息</footer>
  	</div>
  </div>

  <script>
  	const app = new Vue({
  		el: '#app'
  	 });
   </script>
  </body>
  </html>

效果图示1-1：

2、项目分析

根据项目的整体布局划分好组件结构，通过路由导航控制组件的显示。功能实现及步骤如下：

抽离并渲染App根组件
把左侧菜单改造为路由链接
创建左侧菜单对应的组件
右侧主体区域添加路由占位符
添加子路由规则
通过路由重定向默认渲染用户组件
渲染用户列表数据
编程式导航跳转到用户详细页
实现后退功能

3、项目改造

3.1、抽离并渲染App根组件

代码3.1-1：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>10_router-backend-manager</title>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<script src="../../node_modules/vue-router/dist/vue-router.js"></script>
  	<style type="text/css">
  		html,
  		body,
  		#app {
  		  margin: 0;
  		  padding: 0px;
  		  height: 100%;
  		}
  		.header {
  		  height: 50px;
  		  background-color: #545c64;
  		  line-height: 50px;
  		  text-align: center;
  		  font-size: 24px;
  		  color: #fff;
  		}
  		.footer {
  		  height: 40px;
  		  line-height: 40px;
  		  background-color: #888;
  		  position: absolute;
  		  bottom: 0;
  		  width: 100%;
  		  text-align: center;
  		  color: #fff;
  		}
  		.main {
  		  display: flex;
  		  position: absolute;
  		  top: 50px;
  		  bottom: 40px;
  		  width: 100%;
  		}
  		.content {
  		  flex: 1;
  		  text-align: center;
  		  height: 100%;
  		}
  		.left {
  		  flex: 0 0 20%;
  		  background-color: #545c64;
  		}
  		.left a {
  		  color: white;
  		  text-decoration: none;
  		}
  		.right {
  		  margin: 5px;
  		}
  		.btns {
  		  width: 100%;
  		  height: 35px;
  		  line-height: 35px;
  		  background-color: #f5f5f5;
  		  text-align: left;
  		  padding-left: 10px;
  		  box-sizing: border-box;
  		}
  		button {
  		  height: 30px;
  		  background-color: #ecf5ff;
  		  border: 1px solid lightskyblue;
  		  font-size: 12px;
  		  padding: 0 20px;
  		}
  		.main-content {
  		  margin-top: 10px;
  		}
  		ul {
  		  margin: 0;
  		  padding: 0;
  		  list-style: none;
  		}
  		ul li {
  		  height: 45px;
  		  line-height: 45px;
  		  background-color: #a0a0a0;
  		  color: #fff;
  		  cursor: pointer;
  		  border-bottom: 1px solid #fff;
  		}

  		table {
  		  width: 100%;
  		  border-collapse: collapse;
  		}

  		td,
  		th {
  		  border: 1px solid #eee;
  		  line-height: 35px;
  		  font-size: 12px;
  		}

  		th {
  		  background-color: #ddd;
  		}
  	  </style>
  </head>
  <body>
  <div id="app">
  	<router-view />
  </div>
  <script>
  	const App = {
  	  template: `
  		<div>
  		  <!-- 头部区域 -->
  		  <header class="header">后台管理系统</header>
  		  <!-- 中间主体区域 -->
  		  <div class="main">
  			<!-- 左侧菜单栏 -->
  			<div class="content left">
  			  <ul>
  				<li><a href="#">用户管理</a></li>
  				<li><a href="#">权限管理</a></li>
  				<li><a href="#">商品管理</a></li>
  				<li><a href="#">订单管理</a></li>
  				<li><a href="#">系统设置</a></li>
  			  </ul>
  			</div>
  			<!-- 右侧内容区域 -->
  			<div class="content right">
  			  <div class="main-content">
  			  <!-- <router-view /> -->
  			</div>
  		  </div>
  		  </div>
  		  <!-- 尾部区域 -->
  		  <footer class="footer">版权信息</footer>
  	  </div>
  	  `
  	}
  	const router = new VueRouter({
  	  routes: [
  		{path: '/', component: App}
  	  ]
  	})
  	const app = new Vue({
  		el: '#app',
  		router
  	 });
   </script>
  </body>
  </html>

3.2、把左侧菜单改造为路由链接

代码3.2-1：

  <!-- 左侧菜单栏 -->
  			<div class="content left">
  			  <ul>
  				<li><router-link to="/users">用户管理</router-link></li>
  				<li><router-link to="/rights">权限管理</router-link></li>
  				<li><router-link to="/goods">商品管理</router-link></li>
  				<li><router-link to="/orders">订单管理</router-link></li>
  				<li><router-link to="/settings">系统设置</router-link></li>
  			  </ul>
  			</div>

3.3、创建左侧菜单对应的组件

代码3.3-1：

  const Users = {
 		template: `
 			<div>
 				用户管理
 			</div>
 		`
 	}
 	const Rights = {
 		template: `
 			<div>
 				权限管理
 			</div>
 		`
 	}
 	const Goods = {
 		template: `
 			<div>
 				商品管理
 			</div>
 		`
 	}
 	const  Orders= {
 		template: `
 			<div>
 				订单管理
 			</div>
 		`
 	}
 	const Settings = {
 		template: `
 			<div>
 				设置管理
 			</div>
 		`
 	}

3.4、右侧主体区域添加路由占位符

代码3.4-1：

  <!-- 右侧内容区域 -->
  <div class="content right">
    <div class="main-content">
  	<router-view /> 
  </div>
</div>

3.5、添加子路由规则

+代码3.5-1：

const router = new VueRouter({
	  routes: [
		{
			path: '/',
			 component: App,
			 children: [
				 {name: 'users', path: '/users', component: Users},
				 {name: 'rights', path: '/rights', component: Rights},
				 {name: 'goods', path: '/goods', component: Goods},
				 {name: 'orders', path: '/orders', component: Orders},
				 {name: 'settings', path: '/settings', component: Settings},
			 ]
		}
	  ]
	})

3.6、通过路由重定向默认渲染用户组件

代码3.6-1：

   path: '/',
   component: App,
   redirect: 'users',
   children: [
   ...

3.7、渲染用户列表数据

代码3.7-1：

  const Users = {
  		template: `
  			<div>
  				<h3>用户管理</h3>
  				<table>
  					<thead>
  						<tr>
  							<th>ID</th>
  							<th>姓名</th>
  							<th>年龄</th>
  							<th>操作</th>
  						</tr>
  					</thead>
  					<tbody>
  						<tr v-for="user in userList" :key="user.id">
  							<td>{{ user.id }}</td>
  							<td>{{ user.name }}</td>
  							<td>{{ user.age }}</td>
  							<td><a href="javascript:;">详情</a></td>
  						</tr>
  					</tbody>
  				</table>
  			</div>
  		`,
  		data() {
  			return {
  				userList: [
  					{id: 1, name: '张三', age: 22},
  					{id: 2, name: '李四', age: 32},
  					{id: 3, name: '王五', age: 25},
  					{id: 4, name: '刘菲', age: 27},
  				]
  			}
  		}
  	}

3.8、编程式导航跳转到用户详细页

代码3.8-1：

  // 添加点击事件
  <td><a href="javascript:;" @click.prevent="goDetail(user.id)">详情</a></td>
  methods: {
  			goDetail(id) {
  				this.$router.push(`/userInfo/${id}`)
  			}
  },

  // 创建UserInfo组件
  const UserInfo = {
  		props: ['id'],
  		template: `
  			<div>
  				<h5>用户详情页</h5>
  				<p>用户ID：{{ id }} </p>
  			</div>
  		`
   }
  // 添加路由规则
  {name: 'userInfo', path: '/userInfo/:id', component: UserInfo, props: true},

效果图示3.8-1：

3.9、实现后退功能

详情页修改，代码3.9-1：

   const UserInfo = {
  		props: ['id'],
  		template: `
  			<div>
  				<h5>用户详情页</h5>
  				<p>用户ID：{{ id }} </p>
  				<button @click="goBack">返回</button>
  			</div>
  		`,
  		methods: {
  			goBack() {
  				this.$router.go(-1)
  			}
  		},
  	}

效果图示3.9-1：

4、完整代码及效果图

完整代码4-1：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>10_router-backend-manager</title>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<script src="../../node_modules/vue-router/dist/vue-router.js"></script>
  	<style type="text/css">
  		html,
  		body,
  		#app {
  		  margin: 0;
  		  padding: 0px;
  		  height: 100%;
  		}
  		.header {
  		  height: 50px;
  		  background-color: #545c64;
  		  line-height: 50px;
  		  text-align: center;
  		  font-size: 24px;
  		  color: #fff;
  		}
  		.footer {
  		  height: 40px;
  		  line-height: 40px;
  		  background-color: #888;
  		  position: absolute;
  		  bottom: 0;
  		  width: 100%;
  		  text-align: center;
  		  color: #fff;
  		}
  		.main {
  		  display: flex;
  		  position: absolute;
  		  top: 50px;
  		  bottom: 40px;
  		  width: 100%;
  		}
  		.content {
  		  flex: 1;
  		  text-align: center;
  		  height: 100%;
  		}
  		.left {
  		  flex: 0 0 20%;
  		  background-color: #545c64;
  		}
  		.left a {
  		  color: white;
  		  text-decoration: none;
  		}
  		.right {
  		  margin: 5px;
  		}
  		.btns {
  		  width: 100%;
  		  height: 35px;
  		  line-height: 35px;
  		  background-color: #f5f5f5;
  		  text-align: left;
  		  padding-left: 10px;
  		  box-sizing: border-box;
  		}
  		button {
  		  height: 30px;
  		  background-color: #ecf5ff;
  		  border: 1px solid lightskyblue;
  		  font-size: 12px;
  		  padding: 0 20px;
  		}
  		.main-content {
  		  margin-top: 10px;
  		}
  		ul {
  		  margin: 0;
  		  padding: 0;
  		  list-style: none;
  		}
  		ul li {
  		  height: 45px;
  		  line-height: 45px;
  		  background-color: #a0a0a0;
  		  color: #fff;
  		  cursor: pointer;
  		  border-bottom: 1px solid #fff;
  		}

  		table {
  		  width: 100%;
  		  border-collapse: collapse;
  		}

  		td,
  		th {
  		  border: 1px solid #aaa;
  		  line-height: 35px;
  		  font-size: 12px;
  		}

  		th {
  		  background-color: #ddd;
  		}
  	  </style>
  </head>
  <body>
  <div id="app">
  	<router-view />
  </div>
  <script>
  	const App = {
  	  template: `
  		<div>
  		  <!-- 头部区域 -->
  		  <header class="header">后台管理系统</header>
  		  <!-- 中间主体区域 -->
  		  <div class="main">
  			<!-- 左侧菜单栏 -->
  			<div class="content left">
  			  <ul>
  				<li><router-link to="/users">用户管理</router-link></li>
  				<li><router-link to="/rights">权限管理</router-link></li>
  				<li><router-link to="/goods">商品管理</router-link></li>
  				<li><router-link to="/orders">订单管理</router-link></li>
  				<li><router-link to="/settings">系统设置</router-link></li>
  			  </ul>
  			</div>
  			<!-- 右侧内容区域 -->
  			<div class="content right">
  			  <div class="main-content">
  				<router-view /> 
  			</div>
  		  </div>
  		  </div>
  		  <!-- 尾部区域 -->
  		  <footer class="footer">版权信息</footer>
  	  </div>
  	  `
  	}
  	const Users = {
  		template: `
  			<div>
  				<h3>用户管理</h3>
  				<table>
  					<thead>
  						<tr>
  							<th>ID</th>
  							<th>姓名</th>
  							<th>年龄</th>
  							<th>操作</th>
  						</tr>
  					</thead>
  					<tbody>
  						<tr v-for="user in userList" :key="user.id">
  							<td>{{ user.id }}</td>
  							<td>{{ user.name }}</td>
  							<td>{{ user.age }}</td>
  							<td><a href="javascript:;" @click.prevent="goDetail(user.id)">详情</a></td>
  						</tr>
  					</tbody>
  				</table>
  			</div>
  		`,
  		data() {
  			return {
  				userList: [
  					{id: 1, name: '张三', age: 22},
  					{id: 2, name: '李四', age: 32},
  					{id: 3, name: '王五', age: 25},
  					{id: 4, name: '刘菲', age: 27},
  				]
  			}
  		},
  		methods: {
  			goDetail(id) {
  				this.$router.push(`/userInfo/${id}`)
  			}
  		},
  	}
  	const UserInfo = {
  		props: ['id'],
  		template: `
  			<div>
  				<h5>用户详情页</h5>
  				<p>用户ID：{{ id }} </p>
  				<button @click="goBack">返回</button>
  			</div>
  		`,
  		methods: {
  			goBack() {
  				this.$router.go(-1)
  			}
  		},
  	}
  	const Rights = {
  		template: `
  			<div>
  				权限管理
  			</div>
  		`
  	}
  	const Goods = {
  		template: `
  			<div>
  				商品管理
  			</div>
  		`
  	}
  	const  Orders= {
  		template: `
  			<div>
  				订单管理
  			</div>
  		`
  	}
  	const Settings = {
  		template: `
  			<div>
  				设置管理
  			</div>
  		`
  	}
  	const router = new VueRouter({
  	  routes: [
  		{
  			path: '/',
  			 component: App,
  			 redirect: 'users',
  			 children: [
  				 {name: 'users', path: '/users', component: Users},
  				 {name: 'userInfo', path: '/userInfo/:id', component: UserInfo, props: true},
  				 {name: 'rights', path: '/rights', component: Rights},
  				 {name: 'goods', path: '/goods', component: Goods},
  				 {name: 'orders', path: '/orders', component: Orders},
  				 {name: 'settings', path: '/settings', component: Settings},
  			 ]
  		}
  	  ]
  	})
  	const app = new Vue({
  		el: '#app',
  		router
  	 });
   </script>
  </body>
  </html>

效果图示：
- 整体界面4-1：
- 详情页4-2：

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

vue-VueRouter-后台管理案例

vue-VueRouter-后台管理案例

目录

文章目录

内容

1、UI界面

2、项目分析

3、项目改造

3.1、抽离并渲染App根组件

3.2、把左侧菜单改造为路由链接

3.3、创建左侧菜单对应的组件

3.4、右侧主体区域添加路由占位符

3.5、添加子路由规则

3.6、通过路由重定向默认渲染用户组件

3.7、渲染用户列表数据

3.8、编程式导航跳转到用户详细页

3.9、实现后退功能

4、完整代码及效果图

后记：

关于笔记本电源管理背光设置案例

详解使用VUE搭建后台管理系统(vue-cli更新至3.0)

后台管理登录篇-asp设计与数据库

ASP.NET MVC5网站开发之用户角色的后台管理1（七）

vue+express 构建后台管理系统的示例代码

钉钉怎么添加子账号管理？钉钉管理后台添加子账号方法

Linux后台进程管理的一些命令小结

ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）实例

原生node.js案例--前后台交互

SQL Server 表的管理_关于数据增删查改的操作的详解（案例代码）

vue-VueRouter-后台管理案例

vue-VueRouter-后台管理案例

目录

文章目录

内容

1、UI界面

2、项目分析

3、项目改造

3.1、抽离并渲染App根组件

3.2、把左侧菜单改造为路由链接

3.3、创建左侧菜单对应的组件

3.4、右侧主体区域添加路由占位符

3.5、添加子路由规则

3.6、通过路由重定向默认渲染用户组件

3.7、渲染用户列表数据

3.8、编程式导航跳转到用户详细页

3.9、实现后退功能

4、完整代码及效果图

后记 ：

关于笔记本电源管理背光设置案例

详解使用VUE搭建后台管理系统(vue-cli更新至3.0)

后台管理登录篇-asp设计与数据库

ASP.NET MVC5网站开发之用户角色的后台管理1（七）

vue+express 构建后台管理系统的示例代码

钉钉怎么添加子账号管理？钉钉管理后台添加子账号方法

Linux后台进程管理的一些命令小结

ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）实例

原生node.js案例--前后台交互

SQL Server 表的管理_关于数据增删查改的操作的详解（案例代码）

后记：