SPA项目开发之首页导航及左侧

最新推荐文章于 2022-09-13 10:57:27 发布
最新推荐文章于 2022-09-13 10:57:27 发布
阅读量770 收藏
点赞数
分类专栏： 笔记 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60385807/article/details/121231038
版权

目录

一、Mock.js

1、介绍

2、mock.js的使用步骤

   2.1安装mockjs依赖

 2.2、引入

3、mock.js的使用

 二、总线的讲解

1、点击提交跳转主界面

2、导航栏的收缩

​ 3、退出

一、Mock.js

1、介绍

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

众所周知Mock.js因为两个重要的特性风靡前端:

老大，接口文档还没输出，我的好多活干不下去啊！

后端小哥，接口写好了没，我要测试啊！

前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。更多内容，可以云Mockjs官方查看“Mock.js”

注1：easy-mock，一个在线模拟后台的数据平台

2、mock.js的使用步骤

   2.1安装mockjs依赖

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

 2.2、引入

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

在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'
})

prod.env.js

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

main.js

//开发环境下才会引入mockjs
//开发环境：true && require('@/mock')会执行后面的代码，也就是说mock.js会被导入到当前环境中
//生产环境:false  && require('@/mock')不会执行后面代码，也就是说mock.js不会引人到当前环境中
  //  '/'相对的是src路径
  process.env.MOCK && require('@/mock')

  注1：import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案
      后者支持动态引入，也就是require(${path}/xx.js)

3、mock.js的使用

新建mock

 index.js

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)

login-mock.js

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }

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

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

const loginInfo = {
    'code|0-1': 0,
    'msg|3-10': 'msg'
}

返回json格式与对应的接口请求地址进行绑定
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)

未访问后台拿到了数据 ，接口调用的两种结果随机产生，真实的模拟了实际开发场景

 二、总线的讲解

点击Main上方图标收起左侧导航栏

1、点击提交跳转主界面

 导入图片

 index.js|src/router

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({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav,
          },
          {
            path: '/TopNav',
            name: 'TopNav',
            component: TopNav,
            }
      ]
    }
     ]
})

Login.vue

 submitForm() {
        let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
        // 箭头函数解决了this 指针污染的问题
        this.axios.post(url, this.ruleForm).then((resp) => {
          console.log(resp);
          if (resp.data.code == 1) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.$router.push({
              path:'/AppMain'
            });
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'warning'
            });
          }
        }).catch(function(error) {
          console.log(error);
        });
      }}

2、导航栏的收缩

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(){
      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.asideClass=v ? 'main-aside-collapsed':'main-aside';
      });
    }
    };
</script>
<style scoped>
    .main-container {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

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

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

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

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);
      }
    }

    }
</script>

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

    .submenu {
        float: right;
    }

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

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

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

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(){
      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.collapsed=v;
      });
    }
    }
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 240px;
        min-height: 400px;
    }

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

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

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

    .el-menu {
        border: none;
    }

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

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

main.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data(){
    return{
      Bus:new Vue({

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

效果：  

 3、退出

 TopNav.vue

 exit(){
        this.$router.push({path:'/Login'});
      } 

点击退出跳转登录界面 ！！！

---------------------没有了--------------------------------------------------------

在敲！！！别催
关注
专栏目录
好租客-05 首页功能导航，房屋推荐，最新资讯模块实现
qq_36723759的博客
06-02 205
UI效果 2、注意点： flutter中的 Text 默认是不支持换行的，而且本身属性的 maxLines 规定了最大行数，但是设置了也不会自动换行。需要借助 Expanded 控件。且 Expanded 的使用方式需要在 包裹 Column，而不是让 Column 包裹，否则换行失效（具体说不清楚，可以看实现代码中的 index-news.dart 文件中的写法）。 3、实现代码 1、index-page.dart 文件内容 import 'package:flutter/material.dart
SPA 项目开发 之 首页导航&左侧菜单
qq_44641053的博客
08-10 2251
SPA 项目开发 之 首页导航&左侧菜单SPA 项目开发 之 首页导航&左侧菜单Mock.js登陆与注册页面的跳转HBuild 主要代码components 目录Routerviews 目录效果展示 SPA 项目开发 之 首页导航&左侧菜单 需要实现的功能： 1、mock.js模拟响应ajax请求 2、通过js代码完成路由的跳转 3、后台主界面的搭建 4、退...
SPA项目开发之首页导航+左侧菜单
qq_66924116的博客
09-11 357
npm install mockjs -D（d:仅开发中使用）3.导入公共模块及mockjs全局设置。，并在该文件中定义拦截路由配置，1.安装mockjs依赖；2.配置开发环境及生产环境。设置路由index.js。
NO.164 禅道的自定义功能：导航和主页的自定义
weixin_33672400的博客
07-27 1073
为什么80%的码农都做不了架构师？>>> ...
APP UI结构-首页功能点大集锦，很干很详细
weixin_34161032的博客
08-28 634
APP UI结构的系列的文章有一段时间没有更新了，因为最近在学一些新东西和看一些新书籍，适当的给自己充电也是为了更好的输出，言归正传，今天想跟大家聊的是和首页相关的一些内容，可能有些内容最近有的小伙伴已经更新过了，相信大家也看见了，比如导航的分类、加载的分类等，感觉写的都很不错，我也在犹豫这些内容还要不要再写，但是思考再三，还是决定写一下吧，毕竟这是APP UI结构系列文章里不可缺少的一部分，作为...
SPA项目开发之首页导航与左侧菜单 - mock.js模拟数据
qq_63492318的博客
09-13 847
我们在main.js中定义一个变量，为总线；main.jsnew Vue({router,data() {return {//在Vue根实例中定一个变量，这个变量就是vue实例，它就是总线}},})3.2 改变收缩图标的样式methods: {//将 this.collapsed 放到总线上}}测试一下没有问题；2、在LeftNav.vue中使用钩子函数，从总线上取出this.collapsed变量data(){return {}},
SQL Server Profiler
m0_60385807的博客
05-16 7116
一、SQL Server Profiler 介绍 SQL Server Profiler 是一个图形界面和一组系统存储过程 作用： 图形化监视SQLServer查询； 在后台收集查询信息； 分析性能； 诊断像死锁之类的问题； 调试SQL语句 模拟重放SQL Server活动； 也可以使用SQL Profiler捕捉在SQL Server实例上执行活动。这样的活动被称为Profiler跟踪。 ...
JWT的使用
m0_60385807的博客
11-17 6306
目标： ①、jwt出现的原因及工作原理 ②、jwt工具类介绍，三种场景 ③、jwt与vuex配合在SPA项目中的应用 一、jwt的介绍 1、jwt是什么 JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案 2、为什么使用JWT JWT的精髓在于：“去中心化”，数据是保存在客户端的。 3、JWT的工作原理 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下： {"UserName": "Chongchong","Role": "Ad
Shiro授权
m0_60385807的博客
12-25 2306
一、shiro授权角色、权限 思路： 给用户授予角色 给用户授予权限 做法： 1、拿到账号 2、通过用户账号查询对应的能够看到的那些菜单 3、将这些权限交给shiro管理 授予角色做法： 1、拿到账号 2、通过用户账号查询对应的能够看到的那些角色 3、将这些权限交给shiro管理 mapper.xml Mapper.java Service.java Mapper.xml <!--添加通过账号查询用户信息--> <select id="queryByName" resul
Vuex的使用
m0_60385807的博客
11-15 1653
一、vuex 1、Vuex的介绍 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作 Vuex分成五个部分： 1.State：单一状态树 2.Getters：状态获取 3.Mutations：触发同步事件 4.Actions：提交mutation，可以包含异步操作 5.Module：将vuex进行分模块 2、vue中各个组件之间传值 ①、父子组件 父组件-->.
动态SQL和分页
m0_60385807的博客
12-13 844
一、mybatis动态sql 例如： 需求：页面展示数据有十列，点击修改，只修改其中一例 之前：哪怕只修改一列数据，都需要向后台传递10列的数据到后台，否则为空 采用mybatis的动态sql(通过传值来编写sql语句) <update id="updateByPrimaryKeySelective" parameterType="com.dhm.model.Book" > update t_mvc_book <set > <if test="bn
svn应用
m0_60385807的博客
11-18 715
一、为什么使用svn(版本控制器) 1、代码整合问题 2、团队项目，在不使用版本控制器的时候，代码改动很难追责 3、组员所写代码丢失问题 二、安装VisualSVN idea中使用svn必须要安装svn的客户端TortoiseSVN,通俗一点来说就是小乌龟啦，其它同eclipse svn可视化工具 第一个用于eclipse集成 第二个单独的svn客户端 第三个视图化的svn服务端 1、安装VisualSVN-Server-3.9.1-x64.msi 在re...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值