vue-VueRouter-后台管理案例

vue-VueRouter-后台管理案例


目录




内容

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、项目分析

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

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

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:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NhMwEj29-1596036571161)(./images/2020-07-28_p-userInfo_1.png)]

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:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZjlIDwN-1596036571163)(./images/2020-07-28_p-userInfo-goback.png)]

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:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZ0pQ6NP-1596036571164)(./images/2020-07-28_p-vue-ui.png)]

    • 详情页4-2:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iP3j9O89-1596036571166)(./images/2020-07-28_p-userInfo-goback_1.png)]

后记

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

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

前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页