后台Demo-需求分析及静态资源

最新推荐文章于 2022-04-14 22:07:17 发布
最新推荐文章于 2022-04-14 22:07:17 发布
阅读量270 收藏 1
点赞数
文章标签： java css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41473383/article/details/113737362
版权

后台Demo

1、后台需求列表

  1. 分类管理
    • 分类查询
    • 新增分类
    • 删除
  2. 商品管理
    • 商品查询
    • 新增商品
    • 编辑修改
    • 删除
  3. 用户管理
    • 用户查询
    • 删除

2、表结构设计

在这里插入图片描述

分类表：

CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

商品表：

CREATE TABLE `product` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `phonenumber` varchar(12) DEFAULT NULL,
  `cruentPrice` float DEFAULT NULL,
  `cid` int(11) DEFAULT NULL,
  `createDate` datetime DEFAULT NULL,
  `department` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `fk_product_category` (`cid`),
  CONSTRAINT `fk_product_category` FOREIGN KEY (`cid`) REFERENCES `category` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

用户表：

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `phonenumber` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

管理员表：

CREATE TABLE `useradministrator` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

3、静态资源

在这里插入图片描述

  1. img目录下放着网站显示所需要的静态图片

  2. 在css目录里有3个子目录

    1. back
      这个目录里有一个style.css,这是后台界面用到的样式
    2. bootstrap
      这里存放的是bootstrap的css样式文件
    3. fore
      这个目录里也有一个style.css,这是前台界面用到的样式

  3. js目录下有几个子目录

    1. bootstrap用到的js文件
    2. jquery用到的js文件
    3. ajax 库
    4. vue.js 库

4、HTML包含关系

Html 本身不是能够直接包含其他的 Html 文件的，但是一个项目里又有很多可以共用的部分。 那么就会采用 Thymeleaf 的包含技术把这些共用部分拼接起来。
而Thymeleaf 支持纯 html ，这样即能使用 单纯的html ，又可以享受到包含的好处了。

商品查询对应的HTML文件(顶部导航栏、侧边栏)

<div th:replace="admin/headpage::html"></div>
<div th:replace="admin/sidebar::html(active='list')"></div>

在这里插入图片描述

<div class="headpageDiv" th:fragment="html" xmlns:th="http://www.thymeleaf.org">
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#nowhere">后台管理</a>
        <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="exitUser">注销</a>
            </li>
        </ul>
    </nav>
</div>

在这里插入图片描述

<div class="sidebarDiv" th:fragment="html" xmlns:th="http://www.thymeleaf.org">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a th:class="${active=='main'?'nav-link active':'nav-link'}" href="/main">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        首页 <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a th:class="${active=='listOrders'?'nav-link active':'nav-link'}" href="/Order">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
                            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                            <polyline points="13 2 13 9 20 9"></polyline>
                        </svg>
                        分类管理
                    </a>
                </li>
                <li class="nav-item">
                    <a th:class="${active=='list'?'nav-link active':'nav-link'}" href="/product">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
                            <circle cx="9" cy="21" r="1"></circle>
                            <circle cx="20" cy="21" r="1"></circle>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                        </svg>
                        商品管理
                    </a>
                </li>
                <li class="nav-item">
                    <a th:class="${active=='listUser'?'nav-link active':'nav-link'}" href="/Customer">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        用户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a th:class="${active=='listData'?'nav-link active':'nav-link'}" href="/Database">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2">
                            <line x1="18" y1="20" x2="18" y2="10"></line>
                            <line x1="12" y1="20" x2="12" y2="4"></line>
                            <line x1="6" y1="20" x2="6" y2="14"></line>
                        </svg>
                        数据
                    </a>
                </li>
                <li class="nav-item">
                    <a th:class="${active=='listAccumulate'?'nav-link active':'nav-link'}" href="/Accumulate">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
                            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                            <polyline points="2 17 12 22 22 17"></polyline>
                            <polyline points="2 12 12 17 22 12"></polyline>
                        </svg>
                        积分
                    </a>
                </li>
            </ul>

            <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                <span>Saved reports</span>
                <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                </a>
            </h6>
            <ul class="nav flex-column mb-2">
                <li class="nav-item">
                    <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                        Current month
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                        Last quarter
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                        Social engagement
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                        Year-end sale
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

其中蓝色亮标

在这里插入图片描述

                    <a th:class="${active=='main'?'nav-link active':'nav-link'}" href="/main">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        首页 <span class="sr-only">(current)</span>
                    </a>

active传入sidebar.html的参数’list’、‘main’、‘listOrders’、‘listUser’、‘listData’、'listAccumulate’触发响应的亮标展示。

                    <a th:class="${active=='main'?'nav-link active':'nav-link'}" href="/main">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                        </svg>
                        首页 <span class="sr-only">(current)</span>
                    </a>
qq_41473383
关注
后台管理系统demo
11-25
后台管理系统demo 后台管理系统demo 后台管理系统demo 后台管理系统demo
博主收藏的前端框架，极力推荐！
weixin_34097242的博客
09-06 182
收藏的几十个前端框架，需要的博友们，自己把握。 再次感谢分享的人！ 1、http://demo.mycodes.net/houtai/hangkongdaili_admin/ 2、http://demo.mycodes.net/houtai/H-ui.admin/ 3、http://demo.mycodes.net/houtai/Ylsat_admin/ 4、http://dem...
后台管理demo
m0_58028532的博客
06-21 238
demo http://www.macrozheng.com/admin/index.html#/login
后台Demo
11-01
自己用MyEclipse实现Android应用的后台
后台系统demo
09-26
这是一个自己vue后台的开发环境，适合新手上路，如有问题请多指教
前端静态模板-后台系统-学生作业毕设实训素材.zip
04-07
这个"前端静态模板-后台系统-学生作业毕设实训素材.zip"压缩包提供了一个完整的前端应用源码开发Demo，对于学习者来说，它是一个宝贵的资源，能够帮助理解并实践前端开发流程。 首先，前端源码是构建网页和应用的...
网站数据统计后台管理页面html静态模板
12-04
网站数据统计后台管理页面html静态模板是用于构建网站数据分析后台界面的一种设计框架。这个模板集成了各种关键元素和功能，方便开发者快速搭建一个直观、高效且美观的数据展示和管理平台。下面将详细介绍模板中涉及...
管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板.zip
最新发布
02-25
【后台管理系统】：后台管理系统通常用于企业管理、数据分析、用户管理等内部操作，包括登录认证、权限管理、数据展示、业务处理等功能。这个模板提供了一个基础的架构，可以帮助开发者快速构建自己的管理界面，避免...
后台保持运行开机后自动启动设定好的APK的DEMO.zip
07-30
标题中的“后台保持运行开机后自动启动设定好的APK的DEMO.zip”是一个关于Android应用程序开发的示例，它涉及到如何让一个应用在系统启动后自动启动并保持后台运行的技术。这种技术通常用于服务或者定时任务，比如...
crm客户管理系统的静态页面
09-19
用户可以通过这个Demo了解CRM系统的操作流程和界面布局，以便于理解和评估是否适合自己的业务需求。 6. **文件名称列表**："Demo用户静态模型图"可能是包含这些静态页面的图像或设计文件，用于展示用户界面的布局和...
后台管理系统静态资源
07-05
30套后台管理系统的静态页面，只用写好后台接口，直接把这些页面的数据调用一下后台接口就能实现动态数据了，值得大家拥有
demo后台.rar
07-20
使用JdbcTemplate操作数据库 Spring的JdbcTemplate是自动配置的，你可以直接使用@Autowired或构造函数（推荐）来注入到你自己的bean中来使用。 下面就来一起完成一个增删改查的例子： 准备数据库
java后台开发demo
03-08
java后台开发demo，ssm 技术选型，有兴趣的同学可以看看，对初学者有很大的提升和帮助
UML 需求分析必会demo
08-08
必会的三种图，活动图，状态机图，用例图
淘淘商城后台管理系统静态资源文件
03-20
淘淘商城第十六课后台管理系统静态资源文件，原封文件，没有任何改动
Vue 后台管理系统 Demo
weixin_42605169的博客
03-25 3000
GITHUB 原文地址： https://github.com/lin-xin/vue-manage-system 前言 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便...
SpringBoot Web开发——后台管理系统demo
weixin_44302046的博客
04-14 1884
视图解析：SpringBoot默认不支持 JSP，需要引入第三方模板引擎技术实现页面渲染。
网站后台资源管理demo
09-11
网站后台资源管理demo
蓝色后台系统demo
04-25
蓝色后台系统，简单，大方。下载即可用，采用boostrap框架
利用ISP-Demo-term实现STC-ISP单片机代码更新
资源摘要信息:"本资源为ISP-Demo-term_STC-ISP_DEMO_51单片机的相关资料，旨在介绍如何利用ISP技术对51单片机进行代码更新。ISP（In-System Programming）即在系统编程技术，是一种无需将微控制器从系统中拆卸下来，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值