Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >动手练一练，做一个现代化、响应式的后台管理首页

动手练一练，做一个现代化、响应式的后台管理首页

原创
作者头像
前端达人
修改于 2020-03-06 01:50:25
修改于 2020-03-06 01:50:25
1.2K00
代码可运行
举报
文章被收录于专栏：前端达人前端达人
运行总次数：0
代码可运行
关联问题
换一批

作为一个前端开发者，我们或多或少都会接触后台管理系统的制作，你是否会亲自动手做还是从网上找源码改一个呢？今天我们将从零开始纯手工制作一个后台管理面板的首页，通过这个案例的学习你将会学习到如何制作一个响应式后台管理页面的思路，本篇文章内容比较长，请大家多多包涵，希望你能看下去，😁😁😁。

这篇文章的内容是基于我阅读国外一篇博文内容的整理，并非完全直接翻译，由于水平有限，难免有限疏漏，欢迎大家指正

一、 首先明确下界面需求

1、屏幕宽度 >767px 时，界面交互如下视频所示：

界面的菜单可以通过点击左下角的按钮进行折叠，右边的空白内容，用来示意需要填充的内容。

2、当屏幕宽度 < 767px 时，界面交互如下视频所示：

由于界面有限，菜单被隐藏，通过点击按钮展开或隐藏菜单。

二、接下来思考一下，如何分解制作需求

拿到界面需求后，我们做的第一件事，并不是赶紧写代码，而是需要静下心来分解需求，完成这个需求你需要考虑：

  1. 响应式布局需要用到哪些知识点
  2. 如何解决菜单左右折叠的问题
  3. 如何处理菜单在小屏设备的展示问题
  4. 如何规划页面的布局，建议现在纸上画出来。

关于响应式需要用到 flexbox 、 grid 布局，rem单位、vw和vh视口单位、媒介选择器等；菜单折叠的问题，这里需要通过JS脚本来触发菜单文本和logo的隐藏；小屏设备菜单的按钮，我们默认隐藏在左边的菜单里，通过媒介查询器触发显示，并需要在按钮上添加JS事件，触发菜单的打开与隐藏。

需求分解完后，我们开始动手制作吧！

三、首先建立基本HTML结构

1、分析完需求后，我们先建立基础的 HTML 结构，整个页面布局分为了左右两大块，示例代码如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<svg style="display:none;">...</svg>
<header class="page-header">...</header>
<section class="page-content">...</section>

你可能注意到，我添加了 svg 部分，并且设置了隐藏，这里我们使用 SVG Sprites（雪碧图）技术，方便我们在菜单里添加菜单图标，这里我从 Envato 网站下载了后台管理相关的图标，如下图所示，喜欢的可以在文章下方留言获取

2、雪碧图示例代码如下，就是一堆SVG图标的集合，并确保 id 属性的唯一性，方便后面的代码调用：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<svg style="display:none;">
  <symbol id="down" viewBox="0 0 16 16">
    <polygon points="3.81 4.38 8 8.57 12.19 4.38 13.71 5.91 8 11.62 2.29 5.91 3.81 4.38" />
  </symbol>
  <symbol id="users" viewBox="0 0 16 16">
    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,15a7,7,0,0,1-5.19-2.32,2.71,2.71,0,0,1,1.7-1,13.11,13.11,0,0,0,1.29-.28,2.32,2.32,0,0,0,.94-.34,1.17,1.17,0,0,0-.27-.7h0A3.61,3.61,0,0,1,5.15,7.49,3.18,3.18,0,0,1,8,4.07a3.18,3.18,0,0,1,2.86,3.42,3.6,3.6,0,0,1-1.32,2.88h0a1.13,1.13,0,0,0-.27.69,2.68,2.68,0,0,0,.93.31,10.81,10.81,0,0,0,1.28.23,2.63,2.63,0,0,1,1.78,1A7,7,0,0,1,8,15Z" /> 
  </symbol>
   
  <!-- more symbols here -->
</svg>

3、 Header 部分的代码

Header部分代码，我们用 nav 标签包裹 logo 部分、 菜单链接部分、同时添加了一个隐藏的菜单按钮 .toggle-mob-menu（小屏设备才会显示），手机端设备将会显示这个按钮用于 打开/隐藏 菜单。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<header class="page-header">
  <nav>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="forecastr logo">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="open menu">
      <svg width="20" height="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </button>
    <ul class="admin-menu">
      <li class="menu-heading">
        <h3>Admin</h3>
      </li>
      <li>
        <a href="#0">
          <svg>
            <use xlink:href="#pages"></use>
          </svg>
          <span>Pages</span>
        </a>
      </li>
       
      <!-- more list items here -->
       
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="collapse menu">
          <svg aria-hidden="true">
            <use xlink:href="#collapse"></use>
          </svg>
          <span>Collapse</span>
        </button>
      </li>
    </ul>
  </nav>
</header>

上述代码有两点需要注意：

  • 这里我们使用 use 语法，获取 svg 雪碧图上对应的图标。
  • ARIA 属性，是网页无障访问的属性，方便读屏设备理解其用途。

4、接下来编写 Section 的 HTML 结构

这里包含两个Section区域

Section #1

这部分包含两块，一个 搜索区域的表单 和 管理员头像 部分，下图为 screens (>767px)的情况：

这部分的代码如下所示：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<section class="search-and-user">
  <form>
    <input type="search" placeholder="Search Pages...">
    <button type="submit" aria-label="submit form">
      <svg aria-hidden="true">
        <use xlink:href="#search"></use>
      </svg>
    </button>
  </form>
  <div class="admin-profile">
    <span class="greeting">...</span>
    <div class="notifications">
      <span class="badge">...</span>
      <svg>
        <use xlink:href="#users"></use>
      </svg>
    </div>
  </div>
</section>

Section #2

这部分是首页的内容部分，主要用来展示一些网页小部件，这里用空白的方块来示意，如下图所示：

这部分的 HTML 代码结构如下所示：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<section class="page-content">
  <section class="grid">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</section>

四、编写基本的CSS样式

准备完 HTML 结构后，我们开始创建一些 CSS 的自定义变量和常见的样式，示例代码如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
:root {
  --page-header-bgColor: #242e42;
  --page-header-bgColor-hover: #1d2636;
  --page-header-txtColor: #dde9f8;
  --page-header-headingColor: #7889a4;
  --page-header-width: 220px;
  --page-content-bgColor: #f0f1f6;
  --page-content-txtColor: #171616;
  --page-content-blockColor: #fff;
  --white: #fff;
  --black: #333;
  --blue: #00b9eb;
  --red: #ec1848;
  --border-radius: 4px;
  --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
}
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
ul {
  list-style: none;
}
 
a,
button {
  color: inherit;
}
 
a {
  text-decoration: none;
}
 
button {
  background: none;
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
}
 
svg {
  display: block;
}
 
body {
  font: 16px/1.5 "Lato", sans-serif;
}

这里只粘贴了最基础的代码，大家可以在点击 阅读原文 链接查看示例和源码

五、定义面板内容样式

完成基础样式的定以后，我们进入最关键的部分，定义面板的样式 。

1、Header 相关样式

Headr 部分在大屏设备的情况下，宽度为220px，其高度等于整个视口的高度，如果其内容超过视口的高度，将会出现一个垂直的滚动条。

nav 元素则为 flex 容器，其高度为100%。包含以下三个对象，前面已经提及过，这里就不多说了，我们直接来看代码：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/*CUSTOM VARIABLES HERE*/
 
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-top: 20px;
  width: var(--page-header-width);
  color: var(--page-header-txtColor);
  background: var(--page-header-bgColor);
}
 
.page-header nav {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
.page-header .toggle-mob-menu {
  display: none;
}

上述代码，我们将菜单固定在左侧，如果你不习惯固定模式，希望其随内容滚动区域而滚动，你可以这么做：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
body {
  position: relative;
}
 
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
   
  /*Comment these styles*/
  /*position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;*/
}

2、菜单链接样式

菜单 <ul> 将会作为 flex容器，以 列布局 的方式进行展示；链接 <a> 标签包含了图标和菜单文本，这里将 <a> 标签作为flex容器，布局方式为 行布局 ，示例代码如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/*CUSTOM VARIABLES HERE*/
 
.page-header .admin-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 35px;
}
 
.page-header .admin-menu li:last-child {
  margin-top: auto;
  margin-bottom: 20px;
}
 
.page-header .admin-menu li > * {
  width: 100%;
  padding: 12px 15px;
}
 
.page-header .admin-menu a,
.page-header .admin-menu button {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
 
.page-header .admin-menu .menu-heading h3 {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  margin-top: 12px;
  color: var(--page-header-headingColor);
}

3、右边Section区域

上面提及到了面板 .page-content 区域包含了两个Section—— .search-and-user 和 grid 内容 。这块区域距离左边220px，这里我们使用 width: calc(100% - 220px) 方式进行计算，这里的220PX的宽度则为左边菜单header的宽度。这部分的样式代码如下所示：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/*CUSTOM VARIABLES HERE*/
 
page-content {
  position: relative;
  left: var(--page-header-width);
  width: calc(100% - var(--page-header-width));
  min-height: 100vh;
  padding: 30px;
  color: var(--page-content-txtColor);
  background: var(--page-content-bgColor);
}

3.1、定义 .search-and-user 区域的样式

在 .search-and-user 这个 section 区域里我们包含了 表单搜索 及 .admin-profile 两部分内容, 这里我们用了网格布局，表单搜索区域将会占满整个剩余空间，网格之间的距离为50px,元素之间垂直对齐。

表单搜索图标按则钮使用绝对定位的方式定位在搜索框的右边内。

.admin-profile 区域使用 flex 布局，内容垂直居中，头像右上角的角标使用绝对定位进行处理。

基于以上说明，这部分的样式代码定义如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/*CUSTOM VARIABLES HERE*/
 
.search-and-user {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 50px;
  align-items: center;
  background: var(--page-content-bgColor);
  margin-bottom: 30px;
}
 
.search-and-user form {
  position: relative;
}
 
.search-and-user form button {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
 
.search-and-user .admin-profile {
  display: flex;
  align-items: center;
}
 
.search-and-user .admin-profile .notifications {
  position: relative;
}
 
.search-and-user .admin-profile .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  color: var(--white);
  background: var(--red);
}

3.2、定义 Grid 控制面板的内容区域

这里我们使用网格布局，每一网格固定高度300PX，网格布局分为两列，除了第一行和最后一行单独成行。

基于这些想法，我们的样式定义如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/*CUSTOM VARIABLES HERE*/
 
.page-content .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}
 
.page-content .grid > article {
  display: flex;
  height: 300px;
  background: var(--page-content-blockColor);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
 
.page-content .grid > article:first-child,
.page-content .grid > article:last-child {
  grid-column: 1 / -1;
}

六、处理左边菜单的折叠

当我们每次点击菜单的 折叠/展开 按钮时，菜单将会折叠, 如下图所示：

这个界面只会在大屏的状态下可见，当菜单折叠时，菜单的宽度将由 220px 变成 40px，菜单的名称将会隐藏，右边的 .page-content 区域面积将会变大，我们将其宽度变成 calc(100% - 40px) 即可。这里需要注意菜单折叠按钮的变化，点击按钮时将会旋转180度。

基于以上的说明，首先我们需要在折叠菜单上添加点击事件，控制菜单的显示与隐藏，带 aria 的属性主要是为了网页无障碍属性使用，最关键的代码还是toggle方法：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
const body = document.body;
const collapseBtn = document.querySelector(".admin-menu button");
const collapsedClass = "collapsed";
 
collapseBtn.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "collapse menu"
    ? this.setAttribute("aria-label", "expand menu")
    : this.setAttribute("aria-label", "collapse menu");
  body.classList.toggle(collapsedClass);
});

对于菜单折叠的样式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/*CUSTOM VARIABLES HERE*/
 
@media screen and (min-width: 768px) {
  .collapsed .page-header {
    width: 40px;
  }
 
  .collapsed .page-header .admin-menu li > * {
    padding: 10px;
  }
 
  .collapsed .page-header .logo,
  .collapsed .page-header .admin-menu span,
  .collapsed .page-header .admin-menu .menu-heading {
    display: none;
  }
 
  .collapsed .page-header .admin-menu svg {
    margin-right: 0;
  }
 
  .collapsed .page-header .collapse-btn svg {
    transform: rotate(180deg);
  }
 
  .collapsed .page-content {
    left: 40px;
    width: calc(100% - 40px);
  }
}

处理完折叠后，由于图标上的文字被隐藏，我们需要添加一个鼠标经过事件，在链接里添加个title属性，让用户明白菜单的作用，用于显示菜单的文本信息，示例代码如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
const body = document.body;
const menuLinks = document.querySelectorAll(".admin-menu a");
const collapsedClass = "collapsed";
 
for (const link of menuLinks) {
  link.addEventListener("mouseenter", function() {
    body.classList.contains(collapsedClass) &&
    window.matchMedia("(min-width: 768px)").matches
      ? this.setAttribute("title", this.textContent)
      : this.removeAttribute("title");
  });
}

七、处理小屏幕响应式样式问题

当屏幕< 767px 是，左边的菜单会隐藏，如下图所示，通过点击按钮的形式打开菜单：

针对这个界面我们需要添加媒介属性单独定义相关样式进行处理：

  • header 和 .page-content 区域设置 position: static 和 width: 100%。
  • 将 nav flex容器的列布局更改为行布局
  • 将一开始出于隐藏状态的 mobile 菜单按钮设置成显示状态
  • 将导航菜单的位置定位在 mobile 菜单之下，默认设置为隐藏状态
  • 最下方的折叠菜单和.greeting元素则设置成隐藏状态
  • .search-and-user 搜索表单和用户头像区域则使用绝对定位的方式放置在 mobile 菜单按钮的右侧

相关的CSS代码如下所示：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
@media screen and (max-width: 767px) {
  .page-header,
  .page-content {
    position: static;
    width: 100%;
  }
 
  .page-header nav {
    flex-direction: row;
  }
 
  .page-header .toggle-mob-menu {
    display: block;
  }
 
  .page-header .admin-menu {
    position: absolute;
    left: 98px;
    top: 57px;
    margin-top: 0;
    z-index: 2;
    border-radius: var(--border-radius);
    background: var(--page-header-bgColor);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s;
  }
   
  .page-header .admin-menu li:last-child,
  .search-and-user .admin-profile .greeting {
    display: none;
  }
 
  .search-and-user {
    position: absolute;
    left: 131px;
    top: 10px;
    padding: 0;
    grid-column-gap: 5px;
    width: calc(100% - 141px);
    border-radius: var(--border-radius);
    background: transparent;
  }
}

八、处理菜单打开的交互

如下图所示，点击 mobile 按钮则会展开下拉菜单：

完成这个需求比较简单，我们先添加一段脚本，用于定义按钮的点击事件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
const body = document.body;
const toggleMobileMenu = document.querySelector(".toggle-mob-menu");
 
toggleMobileMenu.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "open menu"
    ? this.setAttribute("aria-label", "close menu")
    : this.setAttribute("aria-label", "open menu");
  body.classList.toggle("mob-menu-opened");
});

aria 属性则为了方便读屏设备，属于网页无障碍访问的内容部分

对应相关的 CSS 属性如下：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.page-header .toggle-mob-menu svg {
  transition: transform 0.2s;
}
 
.page-header .admin-menu {
  transition: all 0.2s;
}
 
.mob-menu-opened .toggle-mob-menu svg {
  transform: rotate(180deg);
}
 
.mob-menu-opened .page-header .admin-menu {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

九、最终完成的代码

好了，到这里代码部分已经完成，由于文章篇幅有限，这里就不贴代码了，大家可以点击 阅读原文 链接在线体验和查看源码。

小节

今天的内容有些多，感谢你能耐心看到这里，可见做一个后台管理界面也不太轻松，主要细节问题比较多，因此针对这样的需求，动手之前一定要先规划清楚该怎么做，有哪些细节问题需要处理，不要拿到一个需求没想清楚就做。今天的例子，还是建议大家自己亲手实践一遍，大家可以点击 阅读原文 在线体验，复制链接查看源码。

如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享实践案例，欢迎持续关注。

文章来源： 作者：George Martsoukos 网站：tutsplus 非直译

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
3239
Go 开发者必备：Protocol Buffers 入门指南
1927
10分钟带你彻底搞懂分布式链路跟踪
1333
​图解《中台战略》业务中台设计原则
apiajax
A、基于 HTTP/HTTPS 协议的 RESTFul API 调用（最大应用范围）
LIYI
2019/09/27
2.7K0
​图解《中台战略》业务中台设计原则
命保住了！五年时间，我们也搞了一个技术中台
运维云数据库 Redis®缓存网站
在技术圈，每年总有那么一拨人，喜欢把 “某某岗位要不要写代码” 这样的话题拿出来讨论一番。
JAVA葵花宝典
2019/08/05
6730
中台战略全解读（三）：业务中台建设
微服务ajax分布式消息队列 CMQ 版
从业务到中台，必须经历抽象建模的过程。这个过程分为两个阶段，分别是 0 级抽象中心建模的阶段和 1 级抽象组件建模的阶段。每个阶段采用的建模抽象机制都是实体抽象法。下面以 0 级阶段建模抽象为例进行说明。
架构之家
2022/07/12
1.6K0
中台战略全解读（三）：业务中台建设
一文读懂「中台」的前世今生
微服务企业网站面向对象编程
导读：中台，通过业务、数据和技术的抽象，形成了服务能力的复用，构建了企业级的服务能力，消除了企业内部各业务部门、各分子公司间的壁垒，适应了企业，特别是大型企业集团业务多元化的发展战略。
IT阅读排行榜
2019/07/17
2.5K0
一文读懂「中台」的前世今生
金融全产品交易场景下的技术中台实践
腾讯云学堂
抗击疫情，腾讯云在行动。科技步伐在向产业互联网迈进的大趋势下，互联网体验和传统金融行业正在相互触碰及深度交融。企业数字化转型如火如荼，各种中台战略及相应互联网架构的演进或重构正是当前IT的建设重点。本文是对TVP王晔倞老师的直播演讲整理，为大家介绍介绍整个技术中台的演化过程，说明在实践过程中遇到的问题与条件，并带领大家了解技术中台的价值与未来发展。
可可爱爱没有脑袋
2020/03/05
6920
金融全产品交易场景下的技术中台实践
中台之上（一）：重视业务架构，不要让“业务的归业务、技术的归技术”
架构设计企业
很多企业都将促进业务与科技的深度融合作为发展战略，也都想学学阿里的中台战略，其实，除了中台战略之外，基于企业级业务架构设计来实现组件化开发也是企业数字化转型的优选路径，是弥合业务与技术之间“数字鸿沟”的有效手段。未来，业务不再仅仅是业务，技术也不再仅仅是技术，谁先实现思维方式的改进，谁能更好地联动整个企业，谁就能赢得竞争的先手，而业务架构能力可以在这方面发挥关键作用，而且是超越中台之上的作用。
xcbeyond
2021/03/16
8180
MVC与三层架构理解
jspmvcservletjava
早期只有Servlet，只能使用response输出标签数据，非常麻烦后来。JSP的出现，简化了 Servlet的开发。但是过度的使用JSP，在JSP中写大量的java代码，又前端的页面，造成难以维护，难于分工协作的窘境。 再后来，随着java的web开发的逐步完善，公司的开发需要形成一种规范，来更好的管理和维护代码，借鉴MVC的开发模式，使得程序的设计更加合理性。
全栈程序员站长
2022/09/12
9100
MVC与三层架构理解
再谈中台战略与气象业务建设
微服务企业
我曾经推过一篇《中台战略与气象业务系统建设之经验分享》，简单聊了聊中台战略在气象部门的落地困境。最近看了《企业IT架构转型之道》一书的作者钟华的一段关于中台的对话访谈，其中谈到决定中台成败的四要素，对我思考中台在气象业务建设过程中遇到的问题有了一些启发，也有了一些新的理解，所以今天跟大家再次聊聊中台战略与气象业务建设。
用户1247399
2020/06/11
6250
再谈中台战略与气象业务建设
DDD重构中台业务
ddd互联网模型设计重构
DDD有两把利器，那就是它的战略设计和战术设计方法。中台在企业架构上更多偏向业务模型，形成中台的过程实际上也是业务领域不断细分的过程。在这个过程中我们会将同类通用的业务能力进行聚合和业务重构，再根据限界上下文和业务内聚的原则建立领域模型。而DDD的战略设计最擅长的就是领域建模。
架构狂人
2023/08/16
5350
DDD重构中台业务
中台的概念及其架构设
架构设计系统架构架构模式软件架构
中台的产生，并非完全是自顶向下的战略设计，也并非是为了追随某种行业风口，而是随着公司业务高速发展、组织不断膨胀的过程中暴露的种种问题需要被解决。
周陆军博客
2023/05/14
5420
凯哥 ｜ 数据中台的底层逻辑（二）
企业erp网站
中台并不是从天而降的，回顾企业软件历史，中台思想是企业软件发展的必然趋势，中台的出现说明部分企业已经从信息化建设已经进入了数字化转型时代，从局部优化进入全局优化，从业务支撑变成业务本身。
凯哥
2023/03/03
6580
凯哥 ｜ 数据中台的底层逻辑（二）
基于大中台小前台模式设计高并发电商架构
编程算法存储
公司执行好大中台小前台模式，首先需要进行组织架构调整，比如阿里巴巴大中台小前台组织架构（如图3）如下：中台事业群和小前台事业群。其中中台事业群包括：搜索事业部、共享业务事业部（用户、商品、交易等）、数据技术及产品部（OLAP）、基础架构事业部等；小前台事业群包括电商事业群、蚂蚁金服集团、阿里云事业群、菜鸟网络、大文娱集团、阿里妈妈等其他。
玄姐谈AGI
2019/11/06
2.3K0
基于大中台小前台模式设计高并发电商架构
中台战略与气象业务系统建设之经验分享
it
【中台】是2018年开始火爆起来的，最先实践的是阿里巴巴，那本《企业IT架构转型之道》成为阿里巴巴【中台】战略思想与架构实战的参考宝典，我也通过这本书才开始关注起【中台】。当我接触的项目要引进【中台】这个理念时，内心即有惊喜也有疑惑。引进【中台】战略思想，足以说明我们要融入数字化转型浪潮的决心，心中有些惊喜！但因为这是一个新的理念、新的思维要在业务系统建设中落地，还不能很好的理解就开始实践，内心难免有些疑惑不安。于是开始到处搜罗有关【中台】的文档、说明材料进行阅读学习。随着学习和理解的深入，我觉得【中台】要在气象部门实现落地并应用，将面临极大的阻力，并且时间周期并不可控，也许1年，也许3年，因为【中台】是一个战略层面要改革的领域，和数字化转型一样，同样是个“一把手”工程，需要自上而下推动，不能单纯理解为一种技术的变革和实现。对于长期采用层级划分和多重机构的传统管理方式运行的气象局来说，要撼动已经形成的管理体制和机制是何等的艰难。
用户1247399
2020/06/01
4290
中台战略与气象业务系统建设之经验分享
微服务面试必读：拆分、事务、设计的综合解析与实践指南
2023腾讯·技术创作特训营 第三期
首先，微服务是对传统单体架构的一种优化。当一个单体架构随着业务的增加而变得臃肿时，微服务通过将业务拆分成小的独立单元来进行优化。
努力的小雨
2023/11/07
4660
中台战略一
费用中心微服务
最近公司进行战略调整，组建中台部门，《企业IT架构转型之道-阿里巴巴中台战略思想与架构实战》这本书是中台理论鼻祖之作，赶紧拜读
码农戏码
2021/03/23
5170
数字化转型背景下的金融交易业务中台实践
微服务
目前金融业IT系统大多由业务部门或渠道进行竖井式建设，这种模式的好处是系统专业性强，但同时也给运营及IT管理部门带来分散性阵痛。那么如何在强监管与统一风控的形势下，实现统一管控、快速响应、应需而变、按期交付？中台架构就是在这种背景下应运而生。本文主要以某城商行基于BIIP实施的交易中台的实践案例展开分享，一起和大家探讨企业数字化转型中的背景、技术方案及功能架构。
yuanyi928
2018/12/13
1.7K0
聊透中台，到底什么是中台
2023腾讯·技术创作特训营 第二期
但与此同时，关于中台究竟是什么，却是众说纷纭。引用王健老师在《当我们谈中台时，我们在谈些什么| 白话中台战略》一文中提到的关于中台的一些理解，就能看出一些端倪。
用户10756793
2023/09/16
1.2K0
一个微服务业务系统的中台构建之路
微服务
中台是近两年软件开发领域的热点话题，相关的文章也成为了各个技术社区和媒体争相报道的网红内容。作为企业支撑业务开发的核心系统，中台的重要性不言而喻，很多企业也开始尝试中台的构建和落地工作。Biz-UI 的业务中台孵化于 BSAP（Business Service Architecture and Practice）项目，经过一年多的积累，终于开花结果。本文将从中台的基本概念讲起，带你一起探寻 Biz-UI 团队的业务中台构建之旅。
深度学习与Python
2020/09/04
7160
一个微服务业务系统的中台构建之路
HRMS(人力资源管理系统)-SaaS架构设计-概要设计实践
其他
https://www.cnblogs.com/hegezhou_hot/p/9753733.html
纯洁的微笑
2018/11/06
3.1K0
MVC与三层架构
mvc数据库sqlhtml
三层架构 (3-tier application) 是将整个业务应用划分为：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）。区分层次的目的即为了“高内聚，低耦合”的思想。 
周小董
2019/03/25
3.1K0
MVC与三层架构
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
非常抱歉，系统出错，请从新发起支付？抱歉，你的操作过于频繁，请稍后重试？抱歉，页面出错了！ 系统繁忙，请稍后再试（云服务器）？
相关课程
腾讯云WeData大数据开发与治理训练营数字化IT从业者知识体系微信小程序应用实践_《锋运票务系统》
​图解《中台战略》业务中台设计原则
2.7K0
命保住了！五年时间，我们也搞了一个技术中台
6730
中台战略全解读（三）：业务中台建设
1.6K0
一文读懂「中台」的前世今生
2.5K0
金融全产品交易场景下的技术中台实践
6920
中台之上（一）：重视业务架构，不要让“业务的归业务、技术的归技术”
8180
MVC与三层架构理解
9100
再谈中台战略与气象业务建设
6250
DDD重构中台业务
5350
中台的概念及其架构设
5420
凯哥 ｜ 数据中台的底层逻辑（二）
6580
基于大中台小前台模式设计高并发电商架构
2.3K0
中台战略与气象业务系统建设之经验分享
4290
微服务面试必读：拆分、事务、设计的综合解析与实践指南
4660
中台战略一
5170
数字化转型背景下的金融交易业务中台实践
1.7K0
聊透中台，到底什么是中台
1.2K0
一个微服务业务系统的中台构建之路
7160
HRMS(人力资源管理系统)-SaaS架构设计-概要设计实践
3.1K0
MVC与三层架构
3.1K0
相关推荐
​图解《中台战略》业务中台设计原则
更多 >
前端达人0
LV.2
这个人很懒，什么都没有留下～
文章
803
获赞
1.8K
专栏
2
作者相关精选
换一批
加入讨论
的问答专区 >
喵喵侠
1KOL擅长5个领域
相关课程
一站式学习中心 >
腾讯云WeData大数据开发与治理训练营
1474人在学
数据开发治理平台 WeData
数字化IT从业者知识体系
423人在学
CODING DevOps
软件开发
微信小程序应用实践_《锋运票务系统》
328人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
1
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验