javascript css less vue.js 前端框架 黑马后台管理系统

文章目录

目录

前言

一、效果图

1.登录界面

2. 用户管理组件

 3.权限管理组件

 4.商品管理组件

 5.订单管理组件

 6.系统设置组件

二、安装包

1.打开项目，安装依赖

2. 运行项目

三.配置路由

1.在项目中安装vue-router

 2.在src文件夹下创建router文件夹

3.配置index.js文件

4.将router挂载到main.js文件中  

四.基于路由渲染登录组件

1.在router/index.js下创建路由规则

 2.在App.vue中添加占位符

五.模拟登录功能

1.在MyLogin.vue文件里声明data

2.添加点击事件 

六.实现后台主页的基础布局

1.创建MyHome的路由规则

 2.在MyHome组件中进行基础布局

七.退出登录并控制访问权限

1.在MyHeader页面中为 退出登录 添加点击事件

 2.利用全局前置守卫来实现如果没有登录，则不能访问home页

八.实现子路由的嵌套展示

1.在MyAside.vue文件中添加路由链接router-link

 2.在MyHome.vue文件中添加router-view占位符

 3.在router/index.js文件中声明路由规则children：[]

九. 点击进入用户详情页

1.将MyUsers中的数据渲染到页面上

 2.声明跳转到详情页中的方法

 3.在router/index.js声明路由规则

十. 升级用户详情页的路由规则

1.MyUsers.vue文件下

十一. 路由重定向（设置默认显示用户页面）

总结

前言

黑马后台管理系统是一个基于vue-cli开发的项目，可以作为一个练习vue的简单易上手的案例。

本案例涉及vue-cli中component模块的动态使用、vue-router路由、全局前置守卫等内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

1.登录界面

2. 用户管理组件

 3.权限管理组件

 4.商品管理组件

 5.订单管理组件

 6.系统设置组件

 此案例仅供练习使用，后边的权限管理、商品管理、订单管理、系统设置模块中的内容可以根据自己的需要添加内容

二、安装包

1.打开项目，安装依赖

npm i

2. 运行项目

npm run serve

三.配置路由

1.在项目中安装vue-router

npm i vue-router@3.5.2 -S

 2.在src文件夹下创建router文件夹

然后在router文件夹下创建index.js文件

3.配置index.js文件

// router/index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

// 在Vue中使用VueRouter插件

Vue.use(VueRouter)

// 创建VueRouter实例

const router = new VueRouter()

// 将VueRouter实例router导出

export default router

4.将router挂载到main.js文件中  

// mian.js

import Vue from 'vue'

import App from './App.vue'

// 导入样式

import './assets/css/bootstrap.css'

import './index.css'

// 导入router

import router from '@/router/index.js'

Vue.config.productionTip = false

new Vue({

render: h => h(App),

router

}).$mount('#app')

四.基于路由渲染登录组件

1.在router/index.js下创建路由规则

// router/index.js

import Login from '@/components/MyLogin.vue'

const router = new VueRouter({

routes: [

{ path: '/', redirect: '/login'}, //新增

{ path: '/login', component: Login} //新增

]

})

 2.在App.vue中添加占位符

// App.vue

五.模拟登录功能

1.在MyLogin.vue文件里声明data

// MyLogin.vue

data() {

return {

username: '',

password: ''

}

}

2.添加点击事件 

// MyLogin.vue

methods: {

reset() {

this.username = '',

this.password = ''

},

login() {

if(this.username === 'admin' && this.password === '666666') {

// 登录成功

// 1.创建缓存

localStorage.setItem('token','chengong'),

// 2.跳页面

this.$router.push('/home')

} else {

// 登陆失败

localStorage.removeItem('token')

}

}

}

六.实现后台主页的基础布局

1.创建MyHome.vue的路由规则

// router/index.js

const router = new VueRouter({

routes: [

{ path: '/', redirect: '/login'},

{ path: '/login', component: Login},

{ path: '/home', component: Home}, // 新增

]

})

 2.在MyHome.vue组件中进行基础布局

// 结构部分

// 样式部分

七.退出登录并控制访问权限

1.在MyHeader.vue页面中为 退出登录 添加点击事件

// 声明outlogin函数

methods: {

outlogin() {

// 删除token

localStorage.removeItem('token')

// 跳页面

this.$router.push('/login')

}

}

 2.利用全局前置守卫来实现如果没有登录，则不能访问home页

// router/index.js

router.beforeEach((to,from,next) => {

if (to.path === '/home') {

const token = localStorage.getItem('token')

if (token) {

next()

} else {

next('/login')

}

} else {

next()

}

})

八.实现子路由的嵌套展示

1.在MyAside.vue文件中添加路由链接router-link

// MyAside.vue

 2.在MyHome.vue文件中添加router-view占位符

// MyHome.vue

 3.在router/index.js文件中声明路由规则children：[]

// router/index.js

// 创建VueRouter实例

const router = new VueRouter({

routes: [

{ path: '/', redirect: '/login'},

{ path: '/login', component: Login},

{ path: '/home', component: Home, children: [

{ path: 'users', component: Users },

{ path: 'rights', component: Rights },

{ path: 'goods', component: Goods },

{ path: 'order', component: Order },

{ path: 'settings', component: Setting }

]},

]

})

九. 点击进入用户详情页

1.将MyUsers.vue中的数据渲染到页面上

// MyUsers.vue

{{item.id}}

{{item.name}}

{{item.age}}

{{item.position}}

详情

 2.声明跳转到详情页中的方法

// MyUsers.vue

methods: {

gotoDetail() {

this.$router.push('/home/detail')

}

}

 3.在router/index.js声明路由规则

// 创建VueRouter实例

const router = new VueRouter({

routes: [

{ path: '/', redirect: '/login'},

{ path: '/login', component: Login},

{ path: '/home', component: Home, children: [

{ path: 'users', component: Users },

{ path: 'rights', component: Rights },

{ path: 'goods', component: Goods },

{ path: 'order', component: Order },

{ path: 'settings', component: Setting },

{ path: 'detail', component: UserDetail } //详情页面的地址和users他们是平级的

]},

]

})

十. 升级用户详情页的路由规则

1.MyUsers.vue文件下

十一. 路由重定向（设置默认显示用户页面）

在/home的路由规则下增加redirect属性即可 redirect:'/home/users',

总结

 欢迎大家在评论区进行讨论

好文推荐