打通前后端全栈开发node+vue进阶课程学习系统项目实战详细讲解：后台路由，导航，首页，退出登录
Posted 成都苏天天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打通前后端全栈开发node+vue进阶课程学习系统项目实战详细讲解：后台路由，导航，首页，退出登录相关的知识，希望对你有一定的参考价值。
第二章 建议学习时间8小时 总项目预计10章
学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习前面的vue和node基础博客【共10章】
演示地址：后台：demoback.lalalaweb.com 前台：demo.lalalaweb.com
演示过程中可能会发现bug，希望即时留言反馈，谢谢
源码下载：https://github.com/sutianbinde/classweb //不是全部的代码，每次更新博客才更新代码
学习目标：此教程将教会大家 如何一步一步实现一个完整的课程学习系统（包括课程管理后台/Node服务器/学习门户三个模块）。
上次node基础课程博客大家反响很好，时隔3个月，才更新项目部分，预计2~3天更新一章，我尽量20天更新完毕，学完这个项目Nodejs和vue就基本熟悉了，如发现教程有误的地方，请及时留言反馈
视频教程地址：www.lalalaweb.com，后期会上传教学视频，大家可前往视频学习（暂时还没有视频）
首页导航 路由配置
上一篇博客中，我们已经实现了登录功能，那么接着我就需要写登录完成后跳转的页面
我们先把项目运行起来 Node端 npm start ，vue端npm run dev
首先我们需要使用一个字体图标库 fontawesome，如果没有用过的自行百度啊，这里就不扯其他知识了
下载地址：http://fontawesome.dashgame.com/ 或者 到github下载的本项目中对应路径去找也可以
下载好以后把css和font放到static中，然后我们在index.html中引入
<link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css"/>
注：1。我没有找到可以通过import引入的fontawesome包，所以就直接引入文件了，（网上有 vue-awesome，但貌似不好用，就没有用）
这里为什么是 ../static 这样去找static，而不是 ./ ，因为当进入二级路由以后，在路由内部index和static就不在被认为是同一级，就找不到了，所以就通过 ../往上再找了一级。
我们要设置一些统一的全局样式，我们就直接写在 index.html中，这里本来不是一次就写完这些样式，但为了避免以后再回来添加样式，这里就一起写了，首先清楚了全局的margin等，然后定义了 .btn按钮样式 .myinput输入框样式，以后再使用
<style> *{ margin: 0; padding: 0; } body{ font-size: 14px; font-family: arial "microsoft yahei"; background: #f0f2f5; } ul,li{ list-style: none; } /*按钮*/ .btn{ border:1px solid #4187db; color: #4187db; background: #fff; padding: 6px 14px 7px; border-radius: 3px; transition: all 0.5s ease; outline: none; margin-top: 14px; cursor: pointer; } .btn i{ margin-right: 4px; } .btn:hover{ background: #4187db; color: #fff; } /*输入框*/ .myinput{ width: 65%; border: 1px solid #cad3de; height: 35px; line-height: 35px; margin: 5px 0 10px; border-radius: 3px; padding: 0 10px; outline: none; box-sizing: border-box; } .myinput:focus{ border: 1px solid #4289dc; } </style>
在assets文件夹中创建 images文件夹，放入我们backIndex.vue中需要的图片 （图片请到github下载的项目中对应路径去找）
然后我们去修改 路由文件 index.js的路由，在其中添加后台首页框架的路由，如下图
并且在components中创建 backIndex.vue组件
在backIndex.vue组件中写入后面代码
基本功能如下图，左侧导航，顶部搜索栏和个人头像 退出等操作
代码解释：中间大部分是Html+css代码，代码中注释已经可以帮助大家理解
这里着重说一下路由部分：router-link表示点击的时候url需要跳转的地址，这些地址对应的路由文件还没有写，这里先写上，下下步就配置这个，页面不多，我们就完成 首页 用户/学员管理 课程列表/课程编辑 几个页面，这样就可以算是一个基础版的后台管理系统了。
当点击对应的link的时候，vue内部会自动添加router-link-active 类，我们css中对这个类做了样式设置。
<template> <div class="backlogin"> <div class="header"> <div class="search_box" :class="{search_box_fouce:search_box_fouce}"> <i class="fa fa-search" aria-hidden="true"></i> <input @focus="focusFn" @blur="blurFn" type="text" name="" id="" value="" placeholder="搜索 . . . " /> </div> <div class="handler"> <div class="more" @click="toggleSlide"> <i class="fa fa-bars" aria-hidden="true"></i> <ul :class="{showul:showExit}"> <li><a href="javascript:;" @click="logout"><i class="fa fa-sign-out" aria-hidden="true"></i>退出</a></li> <li><a href="javascript:;" @click="">修改密码</a></li> <li><a href="javascript:;">意见反馈</a></li> </ul> </div> <img src="../assets/images/teacherimg01.png" alt="" /> </div> </div> <!--侧面导航--> <div class="sidenav_box"> <img class="logo" src="../assets/images/logo03.png" alt="" /> <ul class="sidenav"> <li class="now"> <router-link to="/backIndex/indexContent"> <i class="fa fa-home" aria-hidden="true"></i> <span>网站首页</span> </router-link> </li> <li> <router-link to="/backIndex/adminList"> <i class="fa fa-user-o" aria-hidden="true"></i> <span>后台人员</span> </router-link> </li> <li> <router-link to="/backIndex/studentList"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <span>学员管理</span> </router-link> </li> <li> <router-link to="/backIndex/courseList"> <i class="fa fa-book" aria-hidden="true"></i> <span>课程管理</span> </router-link> </li> </ul> </div> <div class="content"> <ul class="breadcrumb"> <li><a href="#/backIndex/">首页</a></li> <li>{{pageTitle}}</li> </ul> <router-view></router-view> </div> </div> </template> <script> var pageTitleObj = { indexContent:"网站首页", adminList:"后台人员", studentList:"学员管理", courseList:"课程管理", courseEdit:"课程编辑" }; export default { name: \'backlogin\', data () { return { search_box_fouce:false, showExit:false, pageTitle: pageTitleObj[ this.$route.path.substr( this.$route.path.lastIndexOf("/")+1 ) ] || "网站首页" } }, methods:{ focusFn(){ //搜索框获取焦点，添加class this.search_box_fouce = true; }, blurFn(){ //搜索框失去焦点，去掉class this.search_box_fouce = false; }, toggleSlide(){ //这个是用来显示和隐藏头像旁的退出下拉框 this.showExit = !this.showExit }, logout(){ //退出系统 } }, watch:{ //监控路径变化 当路径发送变化的时候，改变面包屑导航的显示 $route: { handler: function (val, oldVal) { var path = val.path; this.pageTitle = pageTitleObj[ path.substr( path.lastIndexOf("/")+1 ) ] || "网站首页"; } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> ul, li{ list-style: none; } .header{ height: 60px; box-shadow: 0 1px 5px rgba(13,62,73,0.2) ; background: #fff; margin-left: 80px; min-width: 740px; } .sidenav_box{ width: 80px; box-shadow: 0 1px 5px rgba(13,62,73,0.2) ; position: fixed; left: 0; top: 0; bottom: 0; background: #fff; z-index: 99; } .sidenav_box .logo{ width: 46px; margin: 20px 0 0 17px; } .sidenav{ margin-top: 30px; } .sidenav li{ margin-bottom: 20px; } .sidenav a{ display: block; width: 56px; height: 56px; margin: 0 auto; position: relative; cursor: pointer; opacity: 0.6; transition:all 0.5s ease; text-decoration: none; } .sidenav a i{ font-size: 20px; line-height: 56px; text-align: center; display: block; color: #566a80; } .sidenav a:hover{ background: #f0f2f5; opacity: 1; } .sidenav a span{ position: absolute; left: 55px; top: 22px; background: #000; color: #fff; width: 0px; padding: 5px 0; border-radius: 3px; font-size: 12px; opacity: 0; } .sidenav a:hover span{ opacity: 1; left: 65px; width: 60px; padding: 5px 20px; transition:none 0.5s ease-out; transition-property: opacity,left; } .sidenav a span:after{ content: ""; position: absolute; top: 8px; left: -10px; border:5px solid transparent; border-right-color: #000; } .sidenav .router-link-active:after{ content: ""; position:<以上是关于打通前后端全栈开发node+vue进阶课程学习系统项目实战详细讲解：后台路由，导航，首页，退出登录的主要内容，如果未能解决你的问题，请参考以下文章