SPA项目开发之首页导航+左侧菜单

最新推荐文章于 2022-09-13 20:40:28 发布
最新推荐文章于 2022-09-13 20:40:28 发布
阅读量1k 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_60390944/article/details/121309036
版权

 一：mock.js模拟响应ajax请求

   1、安装mockjs依赖

  npm install mockjs -D              #只在开发环境使用

 2.配置开发环境及生产环境

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

1.spa->config->dev.env.js(开发环境)

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
     MOCK: 'true'
})

 2.spa->config->prod.env.js（生产环境）

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false'
}

3.main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
//开发环境：true && require('@/mock')会执行后面代码，也就是说mock.js会被导入到当前环境中
//开发环境：false&& require('@/mock')不会执行后面代码，也就是说mock.js不会被导入到当前环境中
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 新添加 1
import axios from '@/api/http' // #vue项目对axios的全局配置      
//import axios from 'axios'
import VueAxios from 'vue-axios'


Vue.use(ElementUI)   // 新添加 3
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({undefined
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
}

2.mock的使用

      在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置

1./src/mock/json/login-mock.js(用来造json数据的)

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }
 
//使用mockjs的模板生成随机数据
const loginInfo = {
	'code|0-1': 0,
	'msg|3-10': 'msg'
}
export default loginInfo;

定义接口调用返回的json格式 

2.  /src/mock/index.js(用来引用数据的)

返回的json格式与对应的接口请求地址进行绑定

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
 
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})
 
//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)
运行结果：(其运行结果是随机进行的）

二:前台页面的搭建

1、将全局组件导入（首页导航，左侧菜单,顶部）

1.AppMain.vue

<template>
    <el-container class="main-container">
        <el-aside v-bind:class="asideClass">
            <LeftNav></LeftNav>
        </el-aside>
        <el-container>
            <el-header class="main-header">
                <TopNav></TopNav>
            </el-header>
            <el-main class="main-center">Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
    // 导入组件
    import TopNav from '@/components/TopNav.vue'
    import LeftNav from '@/components/LeftNav.vue'

    // 导出模块
    export default {
        data(){
      return{
        asideClass:'main-aside'
      }
    },
    //注册其它主键
    components:{
      TopNav,LeftNav
    },
    created(){
      //v是传过来的参数
      this.$root.Bus.$on("collapsed-aside",(v)=>{
       this.asideClass=v ?'main-aside-collapsed':'main-aside ';
      })
    }
    };
</script>
<style scoped>
    .main-container {undefined
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .main-aside-collapsed {undefined
        /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
        width: 64px !important;
        height: 100%;
        background-color: #334157;
        margin: 0px;
    }

    .main-aside {undefined
        width: 240px !important;
        height: 100%;
        background-color: #334157;
        margin: 0px;
    }

    .main-header,
    .main-center {undefined
        padding: 0px;
        border-left: 2px solid #333;
    }
</style>

2.LeftNav.vue

<template>
    <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
     text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
        <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
        <div class="logobox">
            <img class="logoimg" src="../assets/img/logo.png" alt="">
        </div>
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
        </el-menu-item>
    </el-menu>
</template>
<script>
    export default {
        data(){
      return{
        collapsed:false
      }
    },
    //钩子函数
    created(){
      //v是传过来的参数
      this.$root.Bus.$on("collapsed-aside",(v)=>{
       this.collapsed=v;
      })
    }
    }
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {undefined
        width: 240px;
        min-height: 400px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {undefined
        border: none;
        text-align: left;
    }

    .el-menu-item-group__title {undefined
        padding: 0px;
    }

    .el-menu-bg {undefined
        background-color: #1f2d3d !important;
    }

    .el-menu {undefined
        border: none;
    }

    .logobox {undefined
        height: 40px;
        line-height: 40px;
        color: #9d9d9d;
        font-size: 20px;
        text-align: center;
        padding: 20px 0px;
    }

    .logoimg {undefined
        height: 40px;
    }
</style>

3.TopNav.vue

<template>
    <!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
     text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>

        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu> -->
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
        <el-button class="buttonimg">
            <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
        </el-button>
        <el-submenu index="2" class="submenu">
            <template slot="title">超级管理员</template>
            <el-menu-item index="2-1">设置</el-menu-item>
            <el-menu-item index="2-2">个人中心</el-menu-item>
            <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        data(){
      return{
        collapsed:false,
        imgshow:require('@/assets/img/show.png'),
        imgsq:require('@/assets/img/sq.png')
      }
    },
    methods:{
      doToggle(){
        this.collapsed=!this.collapsed;
        //触发事件
        this.$root.Bus.$emit("collapsed-aside",this.collapsed)
      },
      //退出功能
      exit(){
        this.$router.push({path:'/Login'})
      }
    }
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {undefined
        border: none;
    }

    .submenu {undefined
        float: right;
    }

    .buttonimg {undefined
        height: 60px;
        background-color: transparent;
        border: none;
    }

    .showimg {undefined
        width: 26px;
        height: 26px;
        position: absolute;
        top: 17px;
        left: 17px;
    }

    .showimg:active {undefined
        border: none;
    }
</style>

2、在路由中进行配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
Vue.use(Router)

export default new Router({undefined
  routes: [{undefined
      path: '/',
      name: 'Login',
      component: Login
    },
    {undefined
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },{
      path: '/AppMain',
      name: 'AppMain',
      component:AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }
      ]
    }
  ]
})

3、导入图片

4、总线的概念：将一个空的Vue实例放到根组件下，所有的子组件都能调用

定义总线：vue Bus总线

1.main.js 

//The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
//开发环境：true && require('@/mock')会执行后面代码，也就是说mock.js会被导入到当前环境中
//开发环境：false&& require('@/mock')不会执行后面代码，也就是说mock.js不会被导入到当前环境中
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 新添加 1
import axios from '@/api/http' // #vue项目对axios的全局配置      
//import axios from 'axios'
import VueAxios from 'vue-axios'


Vue.use(ElementUI)   // 新添加 3
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({undefined
  el: '#app',
  //自定义的事件总线对象，用于父子组件的通信
  data(){
    return{
      Bus:new Vue({

      })
    }
  },
  router,
  components: { App },
  template: '<App/>'
})

2. 结果展示：

 

使用vue-cli搭建SPA项目
kissship的博客
09-21 470
SPA项目是一种Web应用程序的架构，其主要特点是整个应用程序在加载后，只会加载一次页面（通常是一个HTML文件），之后的用户交互都在这个页面上进行，通过JavaScript动态地更新内容，而不需要每次用户操作都重新加载整个页面。SPA通常使用前端框架（如React、Angular、Vue.js等）来实现，这些框架允许开发人员创建交互性强、用户体验良好的Web应用程序。Vue CLI（Vue Command Line Interface）是一个用于创建、配置和管理Vue.js项目的官方命令行工具。
SPA项目开发之动态树+数据表格+分页
Smootht的博客
08-25 275
SPA项目开发之动态树+数据表格+分页1. 前言2. 动态树2.1 代码块概解2.2 效果显示3. 数据表格+分页3.1 定义组件3.2 表格样式3.3 搜索框3.4 分页3.5 实现代码块3.6 实现效果图 1. 前言 续写前篇Spa项目开发之首页导航+左侧菜单，在spa项目中进行书写一个动态树与数据表格，分页的功能 2. 动态树 2.1 代码块概解 在前篇代码的基础上，将LeftNav.vue组件内容进行修改成动态的菜单，也就是将获取到的表格数据赋值遍历输出 要实现路由跳转，先要在el-menu标
SPA项目之首页导航+左侧菜单
weixin_45180770的博客
08-30 324
安装mockjs依赖 npm install mockjs -D 只在开发环境使用 打包到生产环境时自动不使用mock，我们可以在env中做一个配置 dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge...
SPA项目开发（首页导航&左侧菜单）
weixin_66202611的博客
09-12 543
process.env.moc在生产环境为false，开发环境为turn。以上两个文件还是有区别的 一个是开发环境（dev.env）表示需要这门技术mock作为数据的接口。2.导入AppMain.vue/LeftNav.vue/TopNav.vue。3.在需要用到总线中变量时，通过this.$root.Bus.$on获取中心中的变量值。2. 在子组件中通过this.$root.Bus.$emti注册事件进行传参。4.router.index.js中添加路由与组件的映射。2.引入到main.js中使用。
SPA首页导航和左侧菜单
chiyangj的博客
08-28 759
这里写目录标题使用mockjs模拟mock.js的安装引用mock.js拦截路由配置首页头部点击退出 使用mockjs模拟 什么是mock.js Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 mock.js重要特性 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。 mock.js的安装引用 进入项目的盘符如： 安装moc
vue--SPA项目开发之首页导航+左侧菜单
chen的博客
09-30 2183
1. Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 老大，接口文档还没输出，我的好多活干不下去啊！ 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mo...
SPA 项目开发 之 首页导航&左侧菜单
qq_44641053的博客
08-10 2396
SPA 项目开发 之 首页导航&左侧菜单SPA 项目开发 之 首页导航&左侧菜单Mock.js登陆与注册页面的跳转HBuild 主要代码components 目录Routerviews 目录效果展示 SPA 项目开发 之 首页导航&左侧菜单 需要实现的功能： 1、mock.js模拟响应ajax请求 2、通过js代码完成路由的跳转 3、后台主界面的搭建 4、退...
SPA项目开发之首页导航与左侧菜单 - mock.js模拟数据
qq_63492318的博客
09-13 876
我们在main.js中定义一个变量，为总线；main.jsnew Vue({router,data() {return {//在Vue根实例中定一个变量，这个变量就是vue实例，它就是总线}},})3.2 改变收缩图标的样式methods: {//将 this.collapsed 放到总线上}}测试一下没有问题；2、在LeftNav.vue中使用钩子函数，从总线上取出this.collapsed变量data(){return {}},
SPA项目开发之登录
weixin_30502157的博客
08-29 378
前端 首先安装开发模板 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 就这样把4个一个个安装就可以了，出现err就重新下载 index.jsp import Vue from 'vue' import Router fr...
SPA项目开发之动态树 + 数据表格 + 分页
断雨的博客
08-13 195
文章目录动态树数据表格分页测试 思路 准备好后台（左侧树，带分页的文章查询） 将左侧树的数据绑定到elementui中的menu标签上 新增一个自定义组件用来展示文章列表的 绑定elementui提供的分页组件来完成分页功能 动态树 动态生成NavMenu导航菜单(只支持2级菜单) 结构 <el-menu key="" index=""> <el-subme...
SPA项目开发(登录)及常见问题
m0_47252566的博客
08-26 1326
@TOC SPA项目登录功能的实现 安装开发模块 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 三级目录 三级目录 三级目录 二级目录 三级目录
SPA项目开发（CRUD&表单验证）
m0_62604616的博客
09-13 697
拷入后会报错，将title和editFormVisible、editForm赋值。①、将以下拷入Articles.vue中分页条下面。然后更改doSearch中的以下代码，改成第二个代码。关闭窗体方法和handleEdit中调用以上该方法。然后先加入一个方法closeDialog。2、通过点击 新增/编辑将表单对应窗口弹出。②、 写一个方法 handleEdit。handleEdit方法中加入以下代码。1、拷入表单组件 el-from。写个方法：clearData。在关闭窗体方法中加入以下代码。
SPA项目开发登录
weixin_30511039的博客
08-10 245
1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 1.2 npm安装elementUI cd pro01 #进入新建项目的根目录 npm install element-ui ...
C#实现简易左侧导航菜单的示例教程
C#左侧导航菜单是一个在桌面应用程序、Web应用程序或Web页面中非常常见的界面元素，它为用户提供了一个直观的方式来导航到不同的部分或页面。下面详细介绍在C#中实现左侧导航菜单所涉及的相关知识点。 ### 1. WPF...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值