位置: IT常识 - 正文

使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)(springboot用法)

编辑:rootadmin
使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)

推荐整理分享使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)(springboot用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:springboot .do,springboot+,springboot ci,springboot+,springboot.,springboot ci,springboot .do,springboot用法,内容如对您有帮助,希望把文章链接给更多的朋友!

 最近也是临近期末了,各种的期末大作业,后台管理也是很多地方需要用到的,为了方便大家能快速上手,快速搭建一个简单的后台管理,我花了两天时间整理了一下

我会从0开始介绍,从数据库的设计到前端页面的引入最后到后端代码的编写,你只需要会一点前端的基础和ssm的基础就能快速上手搭建一个简单的后台管理

本次案例分两篇文章教学:

(第一篇):数据表设计,前端框架引入和编写前端页面,搭建基本的springboot项目,引入前端到springboot项目中,在浏览器显示

(第二篇):后端代码的设计,这部分逻辑涉及的比较多,所以单独放一篇出来讲,代码从0手敲讲解,保证你能学会,完成增删改查的功能

各大技术基础教学、实战开发教学(最新更新时间2021-12-4)

目录

前言和环境介绍

数据库

H+前端框架

基本介绍 

H+框架引入

编写后台表格页面

modal弹出框原理

搭建后端

基本介绍

创建SpringBoot项目

基本配置

引入前端

测试项目(测试一下页面是否能显示)

Gitee开源项目地址(本次项目源码)

各大技术基础教学、实战项目开发教学


前言和环境介绍

无论是做app,网站,还是小程序,都少不了后台管理

那么对于前端不是很会,后端也是只会一些的人来说,如何快速搭建一个简单的后台管理系统呢,哎别急,今天就来教大家简单快速搭建一个后台管理系统

首先,简单介绍一下我的开发环境

工具用处H+前端框架,直观的教程文档,非常实用SpringBoot后端框架,简单上手,搭建快MySQL数据库IDEA非常强大的编译器Ajax异步请求,前端向后端发送请求thymeleaf模板引擎,实时渲染页面,基于HTMLHBuild X前端编译器,用其他的也可以,看自己

好了,环境介绍完毕,我们先从前端界面做起

数据库

一个后台管理,肯定少不了数据,不然怎么叫后台管理呢

这里我是用的是MySQL数据库,当然你使用其他的也行,不过后面在SpringBoot中要做不同的配置

在MySQL中新建一个user数据库,新建一个t_user表,字段如下,id,用户名,昵称,密码(id记得设置为自增长模式)

H+前端框架基本介绍 

官网地址:H+ 后台主题UI框架 - 主页

H+是一个非常强大的前端开源框架,开箱即用,不需要过多的配置,里面有非常多组件,具体就不一一介绍了,有兴趣的自己去看看

我们要做的是后台管理,所以我们直接找到表格,可以看到有很多样式选择,我们选择一个简单点

这里为了方便快速搭建我选择基本表格,当时你们可以根据自己喜欢来选择

H+框架引入

HBuild X官网下载地址(无需安装,解压即用)

打开HBuild X编译器(你用其他的也可以,没影响)

在左侧空白处新建一个项目(快捷键ctrl+n),选择基于HTML普通项目,添加项目名称,选好路径,点击创建

 一个基本的前端项目就创建好了

 接着,将H+框架的css,js,font等静态资源全部复制项目下

编写后台表格页面

找到H+框架中基本表格的源码,复制代码到index.htm下

再对其进行一点修改,去掉右上角的工具栏,加上增删改查的按钮

修改之后的页面如下,用到了H+框中的表格、表单、按钮、字体图标库,就不详细介绍了,有兴趣可以自己看看前端代码,我们着重讲解js和后端的搭建

同时,我们还需要一个弹出框,当点击添加和修改的时候会弹出一个表单框

我们在H+前端框架的表单中找到弹出框示例,复制代码做点修改

修改后如下:

使用SpringBoot一小时快速搭建一个简单后台管理(增删改查)(超详细教程)(springboot用法)

modal弹出框原理

HTML页面代码比较多,就不放上来了,底部Gitee仓库完整的项目,主要讲解一下上面这个modal弹出框怎么实现的就行

首先,每个modal弹出框都有唯一的标识ID属性,这里我们有两个,一个添加用户,一个修改用户(里面的表单代码我没放出来,比较多,文章底部Gitee仓库我上传了完整开源项目)

<!-- 添加用户的弹出框 --><div id="modal-form-add" class="modal fade" aria-hidden="true"></div><!-- 修改用户的弹出框 --><div id="modal-form-update" class="modal fade" aria-hidden="true"></div>

我们为每个修改和删除按钮都添加一个类名标识(这里为什么不用ID,是因为ID只能唯一标识,添加按钮可以用ID,但是修改和删除不能用ID只能用class,因为有多个修改和删除按钮,添加按钮只有一个)

我们在js文件夹下面新建一个myJS文件夹,存放自己编写的js代码,新建一个index.js,添加以下代码

// 监听添加按钮事件(通过id属性监听)$('#addUserBtn').click(function() {// 添加按钮被点击之后,展示modal框$('#modal-form-add').modal('show');})// 监听修改按钮事件(通过class属性监听)$('.updateUserBtn').click(function() {// 修改按钮被点击之后,展示modal框$('#modal-form-update').modal('show');})

然后再index.html底部引入index.js即可

就可以实现点击添加和修改按钮会弹出modal表单框,简单前端管理页面就搭建完毕了,接下来是后端

搭建后端基本介绍

SpringBoot是目前非常主流的后端框架,简化新spring应用的初始搭建以及开发过程,搭建快,省去了编写大量配置文件的过程

创建SpringBoot项目

打开IDEA,选择spring Initializr,点击下一步

 添加主包名称,java version版本选择8,点击下一步

在左侧找到这五个依赖,勾选上,点击下一步

添加项目名称(默认为之前填写的主包名称),项目路径自己选择,点击完成

右下角处选择自动导入pom.xml依赖(没有的话直接跳过)

一个基本的SpringBoot项目就创建完毕了

基本配置

在搭建项目之前,先做一些基本的配置,如数据源(连接MySQL)、static静态资源映射(避免被拦截)、设置端口号(避免冲突)等

删除原有的application.properties文件,新建一个application.yml文件(两种都可以,yml文件方便一点),添加以下配置信息

spring: # 数据源,连接MySQL数据库 datasource: url: jdbc:mysql://localhost:3306/user?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true username: 数据库用户名 password: 数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver # JPA配置,打印sql语句 jpa: show-sql: true properties: hibernate: format_sql: true # mvc配置,映射html页面 mvc: static-path-pattern: /** view: prefix: / suffix: .html # thymeleaf模板引擎配置,设置编码,false取消缓存 thymeleaf: encoding: UTF-8 cache: falseserver: # 修改启动端口号 port: 8081 # 静态资源映射路径 web: resources: static-locations: classpath:/static/

在项目目录下新建一个config包(存在基本配置类),新建一个MyWebMVCConfig类,代码如下

@Configurationpublic class MyWebMVCConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { System.out.println("==========静态资源拦截!============"); //将所有/static/** 访问都映射到classpath:/static/ 目录下 registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); }}引入前端

把刚刚在HBuildX写好的前端页面引入到IDEA中,首先复制除了html的其他所有文件到static文件夹下

接着复制index.html到templates文件夹下

然后打开index.html,在所有访问静态资源的链接前面加上/static/

测试项目(测试一下浏览器是否能显示页面)

想项目目录下新建一个controller包,新建一个IndexCtroller类,添加以下代码

@RestControllerpublic class IndexController { @RequestMapping(value = "/index") // 访问路径 public ModelAndView toIndex() { // 返回templates目录下index.html ModelAndView view = new ModelAndView("index"); return view; }}

 点击启动项目,选哪个都可以,我一般选第二个debug模式启动,方式debug调试

 等待启动完成之后,打开浏览器,输入 localhost:8081/index,页面成功显示

第一篇文章到这里介绍完毕,第二篇正在火速撰写中······

Gitee开源项目地址(本次项目源码)

SpringBoot项目教学合集: CSDN中的所有SpringBoot项目开源,持续更新新项目、新教学文章

各大技术基础教学、实战项目开发教学

各大技术基础教学、实战开发教学(最新更新时间2021-11-28)_Bald programmer的博客-CSDN博客

本文链接地址:https://www.jiuchutong.com/zhishi/298488.html 转载请保留说明!

上一篇:Vue3:探讨一下mixin

下一篇:Jasper Report详细使用教程(保姆级教程),整合Springboot使用(jasperreports入门)

  • 微信耳机模式怎么调成扬声器模式(微信耳机模式怎么调整)

    微信耳机模式怎么调成扬声器模式(微信耳机模式怎么调整)

  • 1password是什么软件(1password好用吗)

    1password是什么软件(1password好用吗)

  • 华为mate30卡顿严重怎么办(华为mate30有卡顿)

    华为mate30卡顿严重怎么办(华为mate30有卡顿)

  • 华为手机桌面怎么显示步数(华为手机桌面怎么删除多余页面)

    华为手机桌面怎么显示步数(华为手机桌面怎么删除多余页面)

  • 步步高家教机内存不足(步步高家教机内屏被摔了)

    步步高家教机内存不足(步步高家教机内屏被摔了)

  • 单面双层dvd盘片的容量可达(单面双层dvd盘片的容量)

    单面双层dvd盘片的容量可达(单面双层dvd盘片的容量)

  • 苹果7p相机抖动处理方法(苹果7照相机抖动模糊)

    苹果7p相机抖动处理方法(苹果7照相机抖动模糊)

  • 扩展坞会不会损害电脑(扩展坞会不会损坏电脑)

    扩展坞会不会损害电脑(扩展坞会不会损坏电脑)

  • ipad怎么看iphone定位?(ipad怎么看iphone屏幕使用时间共享)

    ipad怎么看iphone定位?(ipad怎么看iphone屏幕使用时间共享)

  • 蓝牙接收器4.0和5.0有什么区别(蓝牙接收器4.0和5.0区别在哪)

    蓝牙接收器4.0和5.0有什么区别(蓝牙接收器4.0和5.0区别在哪)

  • wps打印图片显示不全(wps打印图片显示不了怎么会事)

    wps打印图片显示不全(wps打印图片显示不了怎么会事)

  • x30上市日期(x30什么时候生产的)

    x30上市日期(x30什么时候生产的)

  • 华为手机长按桌面空白处没有反应(华为手机长按桌面没反应)

    华为手机长按桌面空白处没有反应(华为手机长按桌面没反应)

  • 亚马逊购物要关税吗(亚马逊购物关税怎么算)

    亚马逊购物要关税吗(亚马逊购物关税怎么算)

  • 京东之家是京东自营吗(京东之家是京东的直营吗)

    京东之家是京东自营吗(京东之家是京东的直营吗)

  • ip地址一般分为几类

    ip地址一般分为几类

  • wifi上有个星号怎么弄(无线标志上有个星号连接不上无线)

    wifi上有个星号怎么弄(无线标志上有个星号连接不上无线)

  • 手机怎么操控空调(手机怎么操控空调遥控)

    手机怎么操控空调(手机怎么操控空调遥控)

  • 快手为什么播放量少了(快手为什么播放量高粉丝少)

    快手为什么播放量少了(快手为什么播放量高粉丝少)

  • 微信公众号的作用和意义(微信公众号的作者怎么称呼)

    微信公众号的作用和意义(微信公众号的作者怎么称呼)

  • qq精选图片怎么弄的(QQ精选图片怎么删除)

    qq精选图片怎么弄的(QQ精选图片怎么删除)

  • 咸鱼评价可以隐藏吗(咸鱼评价可以隐藏名)

    咸鱼评价可以隐藏吗(咸鱼评价可以隐藏名)

  • 天气冷电脑无法启动(天气冷电脑无法启动怎么办)

    天气冷电脑无法启动(天气冷电脑无法启动怎么办)

  • wikihow是什么(WIKIHOW是什么意思)

    wikihow是什么(WIKIHOW是什么意思)

  • 手机小屏幕怎么弄出来(手机小屏幕怎么开)

    手机小屏幕怎么弄出来(手机小屏幕怎么开)

  • mac怎么打开home文件夹? mac打开home文件夹的两种方法(mac怎么打开hosts文件)

    mac怎么打开home文件夹? mac打开home文件夹的两种方法(mac怎么打开hosts文件)

  • Create OpenAI Account的教程来啦,赶紧学习吧!

    Create OpenAI Account的教程来啦,赶紧学习吧!

  • 城建税减半征收政策文件
  • 公司名下的房产过户到个人要交多少税
  • 购买地瓜
  • 固定资产一次性扣除账务处理
  • 科目余额表解析
  • 小公司可以不交五险一金吗
  • 向金融企业借款利息支出可以税前扣除吗
  • 市场开发费用会计分录
  • 保证金抵扣货款分录
  • 不含税价怎么转化为含税价
  • 固定资产退回账务处理规定
  • 投资收益会计处理
  • 增值税发票进项税额抵扣
  • 企业取得的信托计划分红缴企业所得税吗
  • 出口发票开具注意事项及要求有哪些?
  • 更换金税盘后数据能恢复么
  • 馒头税率是9么
  • 申报密码遗失怎么重置
  • 软件合同审核要点
  • 收到员工补缴的公积金怎么入账
  • 外贸企业增值税发票需要认证吗
  • win10锁屏界面不能输入密码
  • linux系统开机黑屏怎么办
  • office com组件修复
  • php 回调函数
  • 个体工商户需要年审吗
  • 一次摊销法优缺点
  • 专用发票怎样申报
  • 收到银行本票的账务处理
  • 预算会计与财务会计适度分离
  • vue要掌握哪些知识?
  • php 方法
  • tmux复制粘贴
  • 集团公司如何收管理费
  • 现代服务业主要功能
  • 发票未认证跨月怎么办
  • 公司购买黄金送客户可以取得进项抵税吗
  • access china
  • 企业代扣代缴个人所得税申报流程图
  • 企业管理费会计怎么做账
  • 税务实名认证是法人还是办税人
  • 固定资产以什么资金形态存在
  • 港资企业属于什么性质
  • 固定资产折旧和无形资产摊销
  • 企业所得税余额为负数
  • 盈余公积提取是什么意思
  • 销售退货和销售换货的区别
  • 借款收回的会计科目
  • 以前年度多结转了成本,可以不调回了今年少结转吗
  • 承包经营所得个人所得税计算举例
  • 非在职人员和其他人员的区别
  • 缴纳以前年度税金怎么做账
  • 银行承兑汇票的好处
  • 什么是开办费包括
  • 项目资本金如何确定
  • 收到劳务费
  • sqlserver 修改列类型
  • 系统磁盘碎片整理
  • win7虚拟xp系统怎么安装
  • winxp系统设置密码
  • windows登录密码设置
  • ububtu安装教程
  • 如何使用一键启动
  • win10外置光驱读不出光盘怎么办
  • 删除linux系统命令
  • windows8停止
  • windows10总是提醒更新
  • win10升级补丁后死机
  • cocos 源码
  • html初学
  • Android getTopActivity的方法
  • cocos lua调试
  • javascript基础入门教程
  • 使用粗盐热敷十大危害
  • js处理时间
  • javascript面向对象精要pdf
  • 税收和社保不在同一地缴纳怎么办
  • 天津地税局网上营业厅
  • 贵州地税网上申报大厅
  • 郑东新区社保局电话号码是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设