澳门金莎娱乐手机版 服务器 那是一款基于js模拟Taobao网的多元选取菜单代码,如需引进外界Js需刷新手艺试行

那是一款基于js模拟Taobao网的多元选取菜单代码,如需引进外界Js需刷新手艺试行

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法。分享给大家供大家参考。具体如下:

JS联动下拉框

•效果演示地址

这是一款基于js模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据。

 

重要功能总结

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

权限功能的实现

模拟淘宝网菜单选择body *{ font-size:14px; margin:0; padding:0;}#CategorySelector{ clear:both; width:778px; height:220px; background-color:#FFF; margin-bottom:8px;}#CategorySelector ul{ margin:0 3px 0 0; padding:0; border:1px solid #CCC; float:left; width:189px; height:218px; overflow:auto;}#CategorySelector ul.Blank{ background-color:#F6F6F6;}#CategorySelector li{ list-style-type:none; width:auto; height:20px; margin:0 1px !important; margin /**/:0 1px 0 -15px; padding:0; border:1px solid #FFF; line-height:20px; color:#444; text-indent:3px; cursor:default;}#CategorySelector li.Selected{ background-color:#CAFFC0; border:1px solid #0A9800; color:#006623;}#CategorySelector li.IsParent{ background-image:url(//files.jb51.net/file_images/article/201508/201581893903737.gif); background-position:99% 50%; background-repeat:no-repeat;}#CategorySelector li.RecentUsed{ color:#170;}#CategoryTitle{ clear:both; width:778px; background-color:#FFF;}#CategoryTitle ul{ float:left;}#CategoryTitle li{ margin:0 3px 0 0; float:left; border:1px solid #CCC; width:189px; color:#0063C8; font-weight:bold; border-bottom:0px; height:23px; line-height:23px;}  选择宝贝类别 选择游戏 选择游戏区域 选择服务器         Array.prototype.S = String.fromCharCode;Array.prototype.in_array = function{ var re = new RegExp; return re.test(this.S+this.join;}function DataContent(){ this.Parent; // Parent Tags this.ParentID; this.Children; // Children Tags this.ChildrenID;}function DataServer(){ this.mList = new Array(); this.ListCount = function(){return this.mList.length;} this.GetListObj = function { if  return this.mList[n]; return null; } this.Add = function(sParent,sParentID,sChildren,sChildrenID) { obj = new DataContent(); obj.Parent = sParent; obj.ParentID = sParentID; obj.Children = sChildren; obj.ChildrenID = sChildrenID; this.mList[this.ListCount()] = obj; }}function getTriggerNode { return ?event.srcElement:e.target;}function getObject{ return document.getElementById;}function CreateList(objName,objData,objSelected){ var listBox = getObject; if return; var strOutput = ""; var liClass = ""; var id = 0; var op_txt = new Array(); var op_val = new Array(); var sub_val = new Array(); if  { for(i=0;i<objData.ListCount if.ParentID==objSelected[0]) { id = i; break; } if(i==objData.ListCount{ listBox.innerHTML=""; listBox.className="Blank"; return false; } } if for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj; tmpobj = objData.GetListObj; if (tmpobj.Children.length==0) { for(i=0;i<objData.ListCount();op_txt.push.Parent),op_val.push(objData.GetListObj; } else { op_txt = tmpobj.Children; op_val = tmpobj.ChildrenID; } for(i=0;i<op_txt.length;i++) { if(sub_val.in_array liClass = "IsParent"; if(op_val[i] == objSelected[1]){ liClass += " Selected"; } strOutput += '<li >'+op_txt[i]+'</li>'; liClass = ''; } listBox.innerHTML = strOutput; strOutput = ""; listBox.className="";}function changeCategoryStyle{ if{ lastSelectItem[ulID].className=lastSelectItem[ulID].className.replace.replace; } liCurr.className += " Selected"; lastSelectItem[ulID] = liCurr;}function changeCategory{ var obj = getTriggerNode; var obj2 = obj; if return ; if obj = obj.parentNode; while(obj2.nodeName != "UL") obj2 = obj2.parentNode; if return; changeCategoryStyle; var parentID = [1]; switch { case itemtype: break; case gametype: CreateList([gamearea,gameserverData],gameareaData,[parentID,0]); break; case gamearea: CreateList([gameserver,],gameserverData,[parentID,0]); break; }}var cselect = "CategorySelector";var itemtype = "Category_ItemType";var gametype = "Category_GameType";var gamearea = "Category_GameArea";var gameserver = "Category_GameServer";var lastSelectItem = {itemtype:new Object(),gametype:new Object(),gamearea:new Object(),gameserver:new Object()};var itemtypeData = new DataServer();itemtypeData.Add;itemtypeData.Add;var gametypeData = new DataServer();gametypeData.Add;gametypeData.Add;var gameareaData = new DataServer();gameareaData.Add("魔力宝贝",1,["天歇","牧羊"],[1,2]);gameareaData.Add("仙境传说",2,["上海","北京"],[3,4]);var gameserverData = new DataServer();gameserverData.Add("天歇",1,["平顶","山顶"],[1,2]);gameserverData.Add("牧羊",2,["平顶2","山顶2"],[3,4]);//gameserverData.Add("上海",3,["sfdsadfas","sdf"],[5,6]);gameserverData.Add("北京",4,["asdf","asdff"],[7,8]);CreateList([itemtype,],itemtypeData,[0,0]);CreateList([gametype,gameareaData],gametypeData,[0,0]);getObject.onclick = changeCategory;

您可能感兴趣的文章:

  • JS实多级联动下拉菜单类,简单实现省市区联动菜单!
  • js左侧多级菜单动态的解决方案
  • JS简单实现多级Select联动菜单效果代码
  • JavaScript多级下拉菜单代码(简单实用)
  • JS+CSS实现的简单折叠展开多级菜单效果
  • javascript实现在下拉列表中显示多级树形菜单的方法
  • js实现网页多级级联菜单代码
  • JS模拟的QQ面板上的多级可展开的菜单
  • js模拟淘宝网的多级选择菜单实现方法
  • 基于JavaScript实现多级菜单效果

权限路由思路:

希望本文所述对大家的javascript程序设计有所帮助。

根据用户登录的roles信息与路由中配置的roles信息进行比较过滤,生成可以访问的路由表,并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表,从而实现左侧和顶栏菜单的展示。

实现步骤:

1.在router/index.js中,给相应的菜单设置默认的roles信息;

如下:给”权限设置”菜单设置的权限为:meta:{roles: ['admin', 'editor']},及不同的角色都可以看到;
给其子菜单”页面权限”,设置权限为:meta:{roles:
[‘admin’]},及表示只有”admin”可以看到该菜单;
给其子菜单”按钮权限”设置权限为:meta:{roles: ['editor']},及表示只有”editor”可以看到该菜单。

2.通过router.beforeEach()和router.afterEach()进行路由过滤和权限拦截;

// permission judge functionfunction hasPermission(roles, permissionRoles) { if (roles.indexOf return true // admin permission passed directly if  return true return roles.some(role => permissionRoles.indexOf}const whiteList = ['/login'] // 不重定向白名单router.beforeEach => { NProgress.start() // 设置浏览器头部标题 const browserHeaderTitle = to.meta.title store.commit('SET_BROWSERHEADERTITLE', { browserHeaderTitle: browserHeaderTitle }) // 点击登录时,拿到了token并存入了vuex; if  { /* has token*/ if (store.getters.isLock && to.path !== '/lock') { next NProgress.done() } else if  { next // 会匹配到path:'',后面的path:'*'还没有生成; NProgress.done() } else { if (store.getters.roles.length === 0) { store.dispatch.then(res => { // 拉取用户信息 const roles = res.roles store.dispatch('GenerateRoutes', { roles }).then => { // 根据roles权限生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问权限路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 }) }).catch => { store.dispatch => { Message.error(err || 'Verification failed, please login again') next } else { // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ if (hasPermission(store.getters.roles, to.meta.roles)) { next()// } else { next({ path: '/401', replace: true, query: { noGoBack: true }}) } } } } else { if (whiteList.indexOf { next() } else { // 点击退出时,会定位到这里 next NProgress.donerouter.afterEach => { NProgress.done() // 结束Progress setTimeout => { const browserHeaderTitle = store.getters.browserHeaderTitle setTitle }, 0)})

用户点击登录之后的业务逻辑分析:

1、用户调取登录接口,获取到token,进行路由跳转到首页;

2、通过路由导航钩子router.beforeEach函数确定下一步的跳转逻辑,如下:2.1、用户已经登录成功并返回token值;

2.1.1、lock 锁屏场景;

2.1.2、用户重新定位到登录页面;

2.1.3、根据用户是否有roles信息,进行不同的业务逻辑,如下:

、初始情况下,用户roles信息为空;

通过store.dispatch调取接口,获取用户信息;
获取到roles信息后,将roles,name,avatar保存到vuex;
同时,通过store.dispatch(‘GenerateRoutes’, { roles
})去重新过滤和生成路由,并将重新生成之后的权限路由’routes’保存到vuex;
最后,通过router.addRoutes()合并路由表;
如果在获取用户信息接口时,出现错误,则调取store.dispatch接口,返回到login页面;
用户FedLogOut之后,需要情况vuex和localStorage中的token信息;

、用户已经拥有roles信息;

点击页面路由,通过roles权限判断 hasPermission();
如果用户有该路由权限,直接跳转对应的页面;如果没有权限,则跳转至401提示页面;

2.2、用户没有获取到token值;

2.2.1、如果设置了白名单用户,则直接跳转到相应的页面;反之,则跳转至登录页面;

3、通过路由导航钩子函数router.afterEach,做收尾工作,如下:3.1、NProgress.done()
// 结束Progress3.2、获取到title并设置title;

详细代码,请参考src/permission.js

4、权限演示说明

. username: admin,password:
123456;admin拥有最高权限,可以查看所有的页面和按钮;

. username: editor,password:
123456;editor只有被赋予权限的页面和按钮才可以看到;

三级导航菜单顶部栏展示

如图所示,在完成一般后台系统所具有的二级导航菜单功能之后,我发现其实很多的后台管理系统都有三级导航菜单,但是如果都把三级菜单放到左侧菜单做阶梯状排列,就会显得比较紧凑,因此我觉得把所有的三级菜单放到顶部是一个不错的选择。

开发需求:点击左侧菜单,找到其对应的菜单排放于顶部导航栏;

开发步骤:

1、 定义顶部导航组件topMenu.vue;

通过element-ui,NavMenu
导航菜单来进行顶部菜单的展示,注意顶栏和侧栏设置的区别;同时将其引用于头部组件headNav.vue中;

2、定义顶栏路由数据router/topRouter.js;

export const topRouterMap = [ { 'parentName':'infoShow', 'topmenulist':[ { path: 'infoShow1', name: 'infoShow1', meta: { title: '个人信息子菜单1', icon: 'fa-asterisk', routerType: 'topmenu' }, component: () => import('@/page/fundList/moneyData') } ] }, { 'parentName':'chinaTabsList', 'topmenulist':[ { path:'chinaTabsList1', name:'chinaTabsList1', meta:{ title:'区域投资子菜单1', icon:'fa-asterisk', routerType:'topmenu' }, component: () => import('@/page/fundList/moneyData') } ] }]

定义topRouterMap为路由总数组;通过parentName来与左侧路由建立联系;通过topmenulist表示该顶栏路由的值;通过meta.routerType的值为”topmenu”或”leftmenu”来区分是顶栏路由,还是左侧路由;

3、 准备headNav.vue中渲染数据;

思路:点击左侧菜单,需要显示顶部对应的菜单。因为左侧菜单要和顶部菜单建立联系。我们知道导航菜单在用户登录时,会根据用户的role信息进行权限过滤;那么,在过滤权限路由数据之前,我们可以通过addTopRouter()将所有的三级菜单进行过滤添加,添加完成之后,继续进行角色过滤,可以保证将不具备权限的顶部菜单也过滤掉。

// 通过循环过滤,生成新的二级菜单function addTopRouter(){ asyncRouterMap.forEach => { if(item.children && item.children.length >= 1){ item.children.forEach => { topRouterMap.forEach => { if(sitem.name === citem.parentName){ let newChildren = item.children.concat; item.children = newChildren; } }) }) } }) return asyncRouterMap;}

4、点击左侧菜单过滤路由并显示对应数据;

在组件topMenu.vue中,用户默认进来或者点击左侧菜单,触发setLeftInnerMenu()函数,如下:

 setLeftInnerMenu(){ if(this.$route.meta.routerType == 'leftmenu'){ // 点击的为 左侧的2级菜单 this.$store.dispatch(''ClickLeftInnerMenu, {'name':this.$route.name} ); }else{ // 点击顶部的菜单 this.$store.dispatch('ClickTopMenu', {'title':this.$route.meta.title} ); }}

通过当前路由this.$route.meta.routerType的值判断,用户是点击顶部菜单还是左侧菜单。如果点击顶部菜单,通过this.$store触发异步动作’ClickLeftInnerMenu’并传递参数’name’,vuex中通过state.topRouters
= filterTopRouters过滤当前路由信息;代码如下:

// 获取到当前路由对应顶部子菜单 function filterTopRouters{ let topRouters = topRouterMap.find=>{ return item.parentName === data.name }) if(!mutils.isEmpty{ return topRouters.topmenulist; }}

topMenu.vue中,通过computed:{ ...mapGetters}进行对应顶部路由数据的展示。用户每次点击左侧菜单时,顶部路由都进行了重新赋值并渲染,保证了数据的准确性。

5、顶部菜单完善;

当顶部菜单的数据量过大时,我们需要设置横向滚动条并设置滚动条的样式。如图:

mock数据详解

easy-mock使用

Easy Mock介绍:

•Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务,•Easy
Mock 支持基于 Swagger
创建项目,以节省手动创建接口的时间;•简单点说:Easy
Mock就是一个在线创建mock的服务平台,帮你省去你
配置、安装、起服务、维护、多人协作Mock数据不互通等一系列繁琐的操作,
它能在不用1秒钟的时间内给你所要的一切。

详细使用方法,包含新建项目,基础语法,数据占位符,Swagger等介绍和使用,请参考详细文档

easy-mock,在本项目中的使用:

1.按照官方文档,创建个人项目vue-touzi-admin;

根据项目需要,创建的接口有:用户登录接口:”/user/login”;获取用户信息接口:”/user/info”;用户登出接口:”/user/logout”;获取所有用户列表接口:”/user/getUserList”;如图:

登录接口在easy-mock端编写的逻辑如下:

{ code: function { if (_req.body.username === "admin" || _req.body.username === "editor" && _req.body.password === "123456") { return 200 } else { return -1 } }, message: function { if (_req.body.username !== "admin" || _req.body.username !== "editor") { return "账号或密码有误!" } }, data: function { if (_req.body.username == "admin" && _req.body.password === "123456") { return { code: 0, roles: ['admin'], token: 'admin', introduction: '我是超级管理员', name: 'Super Admin' } } else if (_req.body.username === 'editor' && _req.body.password === "123456") { return { code: 0, roles: ['editor'], token: 'editor', introduction: '我是编辑', name: 'Normal Editor' } } else { return "账号或密码有误!" } }}

1.webpack中,开发环境和生产环境地址配置;生产环境,NODE_ENV:
‘”production”‘;如下:

module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_BASE_URL: '"https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/api"',})

3.接口封装实例;如下:

import request from '@/utils/axios'export function login { return request({ url: process.env.API_BASE_URL+'/user/login', method: 'post', data: { username, password } })}

mockjs使用

在使用easy-mock模拟数据的过程中,发现其对表格固定数据不能实现增删改等功能,因而选择了使用mockjs;

介绍及功能:

Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

1.根据数据模板生成模拟数据,通过mockjs提供的方法,你可以轻松地创造大量随机的文本,数字,布尔值,日期,邮箱,链接,图片,颜色等.

2.模拟 Ajax
请求,生成并返回模拟数据,mockjs可以进行强大的ajax拦截.能判断请求类型,获取到url,请求参数等.然后可以返回mock的假数据,或者你自己编好的json文件.功能强大易上手.

3.基于 HTML 模板生成模拟数据

mockjs在本项目中使用:

npm install mockjs --save-dev

2.创建mock文件夹结构并定义相关的功能模块;如图:

mockjs/index.js,负责定义相关的mock接口,如下:import Mock from 'mockjs'import tableAPI from './money'// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留Mock.setup({ timeout: '300-600'})// 资金相关Mock.mock(//money/get/, 'get', tableAPI.getMoneyList)Mock.mock(//money/remove/, 'get', tableAPI.deleteMoney)Mock.mock(//money/batchremove/, 'get', tableAPI.batchremoveMoney)Mock.mock(//money/add/, 'get', tableAPI.createMoney)Mock.mock(//money/edit/, 'get', tableAPI.updateMoney)

mockjs/money.js,则定义相关的函数,实现模拟数据的业务逻辑,比如资金流水数据的增删改查等;数据的生成规则请参照mockjs官网文档,上面有详细的语法说明;

3.在main.js中引入定义好的mockjs;如下:

import './mockjs' //引用mock

4.mockjs,api接口封装;

src/api/money.js中,进行了统一的接口封装,在页面中调用对应函数,即可获取到相应的模拟数据。代码如下:

import request from '@/utils/axios'export function getMoneyIncomePay { return request({ url: '/money/get', method: 'get', params: params })}export function addMoney { return request({ url: '/money/add', method: 'get', params: params })}

5.组件中,接口调用,获取数据,渲染页面;

总结

以上所述是小编给大家介绍的vue实现后台管理权限系统及顶栏三级菜单显示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图