Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案
基于svelte3.x+svelteKit+svelte-ui网页后台管理系统SvelteAdmin。
Svelte-Ui-Admin 基于svelte3.x+svelteKit+vite3+echarts搭配使用Svelte UI组件库开发的一套轻量级前端中后台管理系统解决方案。Svelte Ui Admin遵循Svelte Ui组件设计和开发规范，高颜值的组件让整体风格细腻统一。
技术框架
- 开发工具：Vscode
- 框架技术：svelte3.x+svelteKit+vite3
- UI组件库：svelte-ui (基于svelte自定义pc端UI组件库)
- 样式处理：sass^1.54.4
- 图表组件：echarts^5.3.3
- 编辑器组件：wangeditor^4.7.15
- 国际化方案：svelte-i18n^3.4.0
- 数据模拟：mockjs^1.1.0
功能特性
- 最新前端技术栈Svelte3、SvelteKit、Vite3、SvelteUI、Svelte-i18n、Echarts5.x、MockJs。
- 支持中文/英文/繁体多语言解决方案。
- 支持表格单选/多选、边框/隔行换色、横向/纵向虚拟滚动条等功能。
- 整体搭配高颜值的Svelte Ui组件库，风格更加统一。
- 高效率开发，整个框架已经搭建完毕，只需新增相应模块即可。
- 动态路由及菜单联动控制。
项目目录结构
整体遵循标准的svelteKit项目结构目录及编码规范。
效果预览
Svelte Ui组件库
基于svelte3.x开发的桌面pc端UI组件库SvelteUI。超过30+组件，覆盖了大多数组件应用场景，遵循svelte.js语法规范开发。
通过如下方式快速引入组件。
import {
Button,
Input,
Radio,
Select,
Checkbox,
...
} from 'svelte-ui'
具体的用法及介绍，可以去看看下面的这篇分享文章。
https://www.cnblogs.com/xiaoyan2017/p/16585254.html
Svelte Ui Admin页面布局结构
项目公共布局模板+layout.svelte，错误页+error.svelte。
+layout.svelte整体分为顶部栏+左侧菜单+右侧主体内容三大板块。
<div class="svadmin__container" style="--themeSkin: {$skin}">
<div class="svadmin__wrapper-layout flexbox flex-col">
<div class="sv__layout-header">
<Header />
</div>
<div class="sv__layout-body flex1 flexbox">
<!-- //侧边栏 -->
{#if rootRouteEnable}
<div class="sv__bd-sidebar">
<SideMenu routes={mainRoutes} {activeRoute} />
</div>
{/if}
{#if (rootRouteEnable && route != '/') || !rootRouteEnable}
<div class="sv__bd-menus" class:collapsed={collapsed&&!rootRouteEnable}>
<RouteMenu
routes={getAllRoutes}
{activeRoute}
{activeRootRoute}
{rootRouteEnable}
{collapsed}
/>
</div>
{/if}
<div class="sv__bd-main flex1 flexbox flex-col">
<!-- 面包屑导航 -->
<BreadCrumb routes={getAllRoutes} {activeRoute} {activeRootRoute} />
<!-- 主内容区 -->
<Scrollbar autohide gap={2}>
<div class="sv__main-wrapper">
<slot />
</div>
</Scrollbar>
</div>
</div>
</div>
</div>
+error.svelte错误页处理。
<script>
import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { Button } from '$lib/svelte-ui' function goHome() {
goto('/home/index')
}
</script> <svelte:head>
<title>{$page.status} Error!</title>
</svelte:head> <div class="svadmin__pageErr flexbox flex-col flex-alignc flex-justifyc">
<div class="svadmin__pageErr-img"><i class="sv-icon-round_close_fill_light"></i></div>
<div class="svadmin__pageErr-content">
<div class="c-red fs-18">┗| {$page.status} |┛ Page Error~~</div>
<div class="c-999 mt-10 mb-10">{$page.error.message}</div>
<Button size="small" on:click={goHome}>Go Home</Button>
</div>
</div>
自定义路由菜单Menu
如上图：使用了svelte-ui组件库中的Menu组件来动态生成菜单。
<Menu
class="svadmin__menu-list"
data={getNewRoutes}
active={activeRoute}
trigger="click"
collapse={collapsed}
backgroundHover="#e2f2ff"
>
{#each getNewRoutes as route}
<svelte:component this={routeMenuItem} item={route} {activeRootRoute} {rootRouteEnable} />
{/each}
</Menu>
<!-- 二级菜单 -->
<script>
import { goto } from '$app/navigation'
import { _ } from 'svelte-i18n' import { Menu, MenuItem, MenuSub } from '$lib/svelte-ui'
import routeMenuItem from './routeMenuItem.svelte' import utils from '@/utils'
import { getCurrentRootRoute, hasChildrenRoute } from '@/utils/routes' export let item = []
// 根菜单
export let activeRootRoute = ''
// 是否开启一级路由菜单
export let rootRouteEnable = true function changeRoute(path) {
if(utils.isExternal(path)) {
window.open(path, '_blank')
}else {
goto(path)
}
}
</script> {#if !item.meta.hidden}
{#if activeRootRoute !== getCurrentRootRoute(item) && rootRouteEnable === true}
<div></div>
{:else}
{#if item.children && Array.isArray(item.children) && hasChildrenRoute(item.children)}
<MenuSub key={item.key}>
<span slot="icon"><i class={item.meta.icon}></i></span>
<div slot="title">{$_(`menu.${item.meta.title}`)}</div> {#each item.children || [] as route2}
<svelte:component this={routeMenuItem} item={route2} {activeRootRoute} {rootRouteEnable} />
{/each}
</MenuSub>
{:else}
<MenuItem key={item.key} title={$_(`menu.${item.meta.title}`)} on:click={changeRoute(item.path)}></MenuItem>
{/if}
{/if}
{/if}
/**
* 路由菜单Layout.js
*/
export function load() {
return {
mainRoutes: [
// 主页模块
{
key: 'home', // 标识Menu组件匹配路径
path: '/home', // 跳转路由
redirect: '/home/index', // 重定向路由
meta: {
auth: true, // 是否验证状态
icon: 'sv-icon-homefill', // 路由图标
title: 'layouts__main-menu__home', // 路由标题
hidden: false, //是否隐藏菜单项
},
children: [
// 首页
{
key: 'home_index',
path: 'index',
meta: {
auth: true,
icon: 'sv-icon-home',
title: 'layouts__main-menu__home_index'
}
},
// 工作台
{
key: 'home_workplace',
path: 'workplace',
meta: {
auth: true,
icon: 'sv-icon-dashboard',
title: 'layouts__main-menu__home_dashboard'
}
},
// 自定义面包屑
{
key: 'home_breadcrumb',
path: 'breadcrumb',
meta: {
auth: true,
icon: 'sv-icon-breadcrumb',
title: 'layouts__main-menu__home_breadcrumb',
// 自定义面包屑
breadcrumb: [
{
meta: {title: 'layouts__main-menu__home_breadcrumb'},
path: '/home/breadcrumb',
},
{
meta: {title: 'layouts__main-menu__home'},
path: '/home',
},
{
meta: {title: 'layouts__main-menu__home_breadcrumb-links'},
}
]
}
},
// 外部链接
{
key: 'https://svelte.dev/',
path: 'https://svelte.dev/',
meta: {
icon: 'sv-icon-openlink',
title: 'layouts__main-menu__home_apidocs',
rootRoute: '/home'
}
}
]
}, // 组件模块
{
key: 'component',
path: '/component',
redirect: '/component/table/all',
meta: {
auth: true, //是否验证状态
icon: 'sv-icon-apps-fill',
title: 'layouts__main-menu__component',
hidden: false, //是否隐藏菜单项
},
children: [
{
key: 'component_table',
path: 'table',
redirect: '/component/table/all',
meta: {
auth: true,
icon: 'sv-icon-table',
title: 'layouts__main-menu__component_table',
},
children: [
{
key: 'component_table_all',
path: 'all',
meta: {
title: 'layouts__main-menu__component_table-all'
}
},
{
key: 'component_table_custom',
path: 'custom',
meta: {
title: 'layouts__main-menu__component_table-custom'
}
},
{
key: 'component_table_search',
path: 'search',
redirect: '/component/table/search/list',
meta: {
title: 'layouts__main-menu__component_table-search',
},
children: [
{
key: 'component_table_search_list',
path: 'list',
meta: {
title: 'layouts__main-menu__component_table-search-list'
}
}
]
}
]
},
{
key: 'component_list',
path: 'list',
meta: {
icon: 'sv-icon-sort',
title: 'layouts__main-menu__component_list',
}
},
{
key: 'component_form',
path: 'form',
redirect: '/component/form/all',
meta: {
auth: true,
icon: 'sv-icon-forms',
title: 'layouts__main-menu__component_form',
},
children: [
{
key: 'component_form_all',
path: 'all',
meta: {
title: 'layouts__main-menu__component_form-all',
}
},
{
key: 'component_form_custom',
path: 'custom',
meta: {
title: 'layouts__main-menu__component_form-custom',
}
}
]
},
{
key: 'component_editor',
path: 'editor',
meta: {
icon: 'sv-icon-editor',
title: 'layouts__main-menu__component_editor',
}
}
]
}, // 配置模块
{
key: 'setting',
path: '/setting',
redirect: '/setting/mine',
meta: {
icon: 'sv-icon-setting',
title: 'layouts__main-menu__setting',
hidden: false,
},
children: [
...
]
}, // 权限验证模块
{
key: 'permission',
path: '/permission',
redirect: '/permission/all',
meta: {
auth: true,
icon: 'sv-icon-secret',
title: 'layouts__main-menu__permission',
hidden: false,
},
children: [
...
]
}, // 错误页面模块
{
key: 'error',
path: '/error',
redirect: '/error/403',
meta: {
icon: 'sv-icon-roundclosefill',
title: 'layouts__main-menu__error',
hidden: false,
},
children: [
...
]
},
]
}
}
svelte-i18n国际化解决方案
项目中采用svelte-i18n实现国际化，支持中文/英文/繁体字三种语言。
npm i svelte-i18n -D
/**
* 国际化语言配置
* @author YXY
*/ import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n'
import { browser } from '$app/env'
import Storage from '@/utils/storage' // 引入语言配置
import cn from '@/locale/zh-CN'
import tw from '@/locale/zh-TW'
import en from '@/locale/en-US' export const langKey = 'lang'
export const langVal = 'cn' addMessages('cn', cn)
addMessages('tw', tw)
addMessages('en', en) const lang = getLang()
console.log('当前国际化：', lang)
init({
fallbackLocale: lang,
initialLocale: getLocaleFromNavigator()
})
setHtmlLang(lang) /* 获取语言 */
export function getLang() {
const lang = Storage.get(langKey)
return lang || langVal
} /* 持久化存储 */
export function setLang(lang, reload = false) {
if(lang != getLang()) {
Storage.set(langKey, lang || '')
setHtmlLang(lang) // 重载页面
if(reload) {
window.location.reload()
}
}
}
svelte动态图表Hooks
由于项目中多个地方使用了Echarts图表组件，于是单独抽离了一个hooks文件来初始化echarts组件。
针对自适应图表，则使用了 "element-resize-detector": "^1.2.4" 来实时监听DOM尺寸改变。
/**
* @title 动态图表Hooks
* @author YXY
*/
import * as echarts from 'echarts'
import elementResizeDetector from "element-resize-detector"
import utils from '@/utils' export const useCharts = async(node, options) => {
let chartInstance
let chartNode = null
let erd = elementResizeDetector() const resizeFn = utils.debounce(() => {
chartInstance.resize()
}, 100) if(node) {
chartInstance = echarts.init(node)
chartInstance.setOption(options)
chartNode = chartInstance
}
erd.listenTo(node, resizeFn)
}
通过如下方式即可快速调用图表hooks。
<script>
import { useCharts } from '@/hooks.js' function useBarChart(node) {
useCharts(node, {
...
})
} function useStackChart(node) {
useCharts(node, {
...
})
}
</script> <div class="card-charts" use:useBarChart></div>
<div class="card-charts" use:useStackChart></div>
项目中还有一大亮点就是Table表格组件，支持固定表头/列，单选及多选，边框/隔行换色，支持动态slot插槽等功能。
<script>
/**
* 表格组件
* @author YXY
* Q：282310962 WX：xy190310
*/ let tableNode
let curpage = 1
let limit = 10
let selectRows = []
let tableData = Mock.mock({
total: 100,
page: 1,
pagesize: 5,
'list|10': [
{
id: '@integer(1, 1000)',
author: '@cname()',
title: '@ctitle(10, 15)',
image: `https://cdn2.thecatapi.com/images/@integer(200, 300).jpg`,
summary: '@ctitle(20, 70)',
'role|1': ['admin', 'test', 'dev'],
topmost: '@boolean()',
progress: '@integer(30, 90)',
date: '@datetime()'
}
]
})
let tableColumns = [
{type: 'selection', align: 'center', width: 60, fixed: true}, // 多选
// {type: 'index', align: 'center', width: 60}, // 索引序号
{prop: 'id', label: 'id', align: 'center', width: 60}, // 索引序号
{prop: 'author', label: '作者', align: 'center', width: 100},
{slot: 'title', label: '标题', align: 'left', width: 250},
{slot: 'image', label: '图像', align: 'center', width: 120},
{slot: 'summary', label: '详细内容', align: 'left', width: 450},
{slot: 'role', label: '角色', align: 'center', width: 100},
{slot: 'topmost', label: '置顶', align: 'center', width: 100},
{slot: 'progress', label: '热度', align: 'center', width: 150},
{prop: 'date', label: '发布时间', align: 'left', width: 200}, // 时间
{slot: 'btns', label: '操作', align: 'center', width: 200, fixed: 'right'}, // 操作
]
// 获取选中行数据
function getSelectionRow() {
svLayer({
title: '信息',
content: JSON.stringify(selectRows),
xclose: true,
area: '640px'
})
}
// 选中第3行
function updateRow() {
tableNode.setCurrent(2)
}
// 取消选择
function cancelSelection() {
tableNode.setCurrent()
}
// 当前页
function handleChangePage(e) {
console.log('当前页：', e.detail)
curpage = Number(e.detail)
}
// 页码
function handleChangeSize(e) {
console.log('每页：', e.detail)
limit = Number(e.detail)
}
// 点击行
function handleSelectionChange(e) {
console.log('selection change选中行数据>>：', e.detail)
selectRows = e.detail
}
</script> <Table
dataSource={tableData.list}
columns={tableColumns}
stripe={isStripe}
border={isBorder}
size={tableSizeCmd}
highlightCurrentRow
let:row
let:col
let:index
on:selectionChange={handleSelectionChange}
on:headerClick={handleHeaderClick}
bind:this={tableNode}
style="height: 500px; margin-bottom: 15px;"
>
{#if col.slot == 'title'}
<Link href="https://svelte.dev/" target="_blank" isUnderline color="#06f">{row.title}</Link>
{:else if col.slot == 'image'}
<img src={row.image} style="height: 50px; width: 50px;" alt="" />
{:else if col.slot == 'summary'}
<Tooltip content={row.summary} placement="top-start">
<div class="clamp2">{row.summary}</div>
</Tooltip>
{:else if col.slot == 'role'}
{#if row.role == 'admin'}
<Tag type="success" effect="dark" size="mini">{row.role}</Tag>
{:else if row.role == 'test'}
<Tag type="primary" size="mini">{row.role}</Tag>
{:else}
<Tag type="warning" effect="dark" size="mini">{row.role}</Tag>
{/if}
{:else if col.slot == 'topmost'}
<Switch checked={row.topmost} activeColor="#ff4079" size="small" />
{:else if col.slot == 'progress'}
<Progress percent={row.progress} color="#ffa222" showtext="false" strokeWidth={10} style="width: 100px;" />
{:else if col.slot == 'btns'}
<Link type="primary" icon="sv-icon-attention_light" gap="5" on:click={handleTableView}>查看</Link>
<Link type="success" icon="sv-icon-edit" gap="5" on:click={handleTableEdit(row)}>编辑</Link>
<Link type="danger" icon="sv-icon-delete" gap="5" on:click={handleTableDel(row)}>删除</Link>
{/if}
</Table>
<Pagination
layout="total, sizes, prev, pager, next, jumper"
currentPage={curpage}
pageSize={limit}
pageSizes={[10, 50, 100]}
total="500"
size="mini"
position="center"
on:changePage={handleChangePage}
on:changeSize={handleChangeSize}
/>
Ok，基于svelte+svelteUI开发后台管理系统就分享到这里，希望对大家有所帮助~~
最后附上一个svelte.js网页聊天实例项目
https://www.cnblogs.com/xiaoyan2017/p/16272097.html
Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案的更多相关文章
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（4）-构建项目解决方案 创建EF DataBase Frist模式
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(4)-构建项目解决方案 创建EF DataBase Frist模式 进行本次文章之前,我们可能需要补充一些 ...
- 一种小型后台管理系统通用开发框架中的Cache缓存设计
本篇博客记录一下我在实习的公司的后台管理系统开发框架中学习到的一种关于网站的缓存(Cache)的实现方法,我会在弄懂的基础上,将该方法在.net core上进行实现.因为公司开发都是基于.net fr ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（4）-创建项目解决方案
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 设计中术语,概念这种东西过于模糊,我们必须学习累积才能认识这些概念模型. 我无法用文章来下详细解析此系统的深层概念,需要大 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
- django后台管理系统(admin)的简单使用
目录 django后台管理系统的使用 检查配置文件 检查根urls.py文件 启动项目,浏览器输入ip端口/admin 如: 127.0.0.1/8000/admin 回车 注册后台管理系统超级管理 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（1）-前言与目录（持续更新中...）
转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...
- Django后台管理系统讲解及使用
大家在创建Django项目后,在根路由urls.py文件中,会看到一行代码 from django.contrib import admin urlpatterns = [ url(r'^admin/ ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（转）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http://ww ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（一）： 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
随机推荐
- vim插件的社区活跃度怎么样
www.vim.org -> Scripts -> Browse all可以看到有5051个插件.搜索Nerd可以看到NerdTree插件,它的评分是Rating 7882/2514, D ...
- 关于ios的IDFA
了解IDFA,看我这篇文章就够了双11剁手后,我静静的限制了广告追踪 今年双11爆了,据统计,全天交易额1207亿,移动端占比82%,在马云的持续教育和移动端的爆发下,用户在移动端消费的习惯已经不可逆 ...
- 博客从 CloudBase 迁移至云主机
迁移起因 原来的博客 其实从很久以前就想要写博客,但总是断断续续的,一直都没有认真地开始. 最终,决定使用静态博客工具作为自己博客的承载体.在多种工具的比较下,最终选择了 Hugo 并部署到 Gith ...
- 第十四天python3 面向对象
1.面向对象 是对现实世界中的事物进行抽象的方式: 一切皆对象: 对象是数据和操作的封装: 对象之间相互独立,但也可以相互作用: 三要素: 封装: 数据与方法的集合: 提供一个或者多个接口来访问:隐藏 ...
- python 文件操作（读写等）
简介 在实际开发中我们需要对文件做一些操作,例如读写文件.在文件中新添内容等,通常情况下,我们会使用open函数进行相关文件的操作,下面将介绍一下关于open读写的相关内容. open()方法 ope ...
- [极客大挑战 2019]BabySQL-1|SQL注入
1.打开题目之后,查看源代码信息,发现check.php文件,结果如下: 2.那就只能尝试登录,经测试当输入or.by.select.from.and.where等关键字时会被过滤且会被过滤为空(过滤 ...
- 转一篇MYSQL文章《数据库表设计，没有最好只有最适合》
http://mp.weixin.qq.com/s/a8klpzM5iam0_JYSw7-U4g 我们在设计数据库的时候,是否会突破常规,找到最适合自己需求的设计方案,下面来举个例子: 常用的邻接表设 ...
- 一文搞懂│php 中的 DI 依赖注入
目录 什么是 DI / 依赖注入 依赖注入出现的原因 简单的依赖注入 高阶的依赖注入 依赖注入的应用 依赖注入高阶优化 什么是 DI / 依赖注入 依赖注入DI 其实本质上是指对类的依赖通过构造器完成 ...
- HTML5 基础学习
HTML 基础学习 参考资料 视频课程:https://www.bilibili.com/video/BV14J4114768 W3C文档:https://webplatform.github.io/ ...
- 我和Apache DolphinScheduler的这一年
Apache DolphinScheduler,为Apache开源项目, 简称"DS", 中文名 "小海豚调度"(海豚聪明.人性化,又左右脑可互相换班,终生不用 ...