首先,简单介绍一下我的开发环境
| 工具 | 用处 |
| — | — |
| H+ | 前端框架,直观的教程文档,非常实用 |
| SpringBoot | 后端框架,简单上手,搭建快 |
| MySQL | 数据库 |
| IDEA | 非常强大的编译器 |
| Ajax | 异步请求,前端向后端发送请求 |
| thymeleaf | 模板引擎,实时渲染页面,基于HTML |
| HBuild X | 前端编译器,用其他的也可以,看自己 |
好了,环境介绍完毕,我们先从前端界面做起
数据库
===
一个后台管理,肯定少不了数据,不然怎么叫后台管理呢
这里我是用的是MySQL数据库,当然你使用其他的也行,不过后面在SpringBoot中要做不同的配置
在MySQL中新建一个user数据库,新建一个t_user表,字段如下,id,用户名,昵称,密码(id记得设置为自增长模式)
H+前端框架
======
基本介绍
官网地址:H+ 后台主题UI框架 - 主页
H+是一个非常强大的前端开源框架,开箱即用,不需要过多的配置,里面有非常多组件,具体就不一一介绍了,有兴趣的自己去看看
我们要做的是后台管理,所以我们直接找到表格,可以看到有很多样式选择,我们选择一个简单点
这里为了方便快速搭建我选择基本表格,当时你们可以根据自己喜欢来选择
H+框架引入
打开HBuild X编译器(你用其他的也可以,没影响)
在左侧空白处新建一个项目(快捷键ctrl+n),选择基于HTML普通项目,添加项目名称,选好路径,点击创建
一个基本的前端项目就创建好了
接着,将H+框架的css,js,font等静态资源全部复制项目下
编写后台表格页面
找到H+框架中基本表格的源码,复制代码到index.htm下
再对其进行一点修改,去掉右上角的工具栏,加上增删改查的按钮
修改之后的页面如下,用到了H+框中的表格、表单、按钮、字体图标库,就不详细介绍了,有兴趣可以自己看看前端代码,我们着重讲解js和后端的搭建
同时,我们还需要一个弹出框,当点击添加和修改的时候会弹出一个表单框
我们在H+前端框架的表单中找到弹出框示例,复制代码做点修改
修改后如下:
modal弹出框原理
HTML页面代码比较多,就不放上来了,底部Gitee仓库完整的项目,主要讲解一下上面这个modal弹出框怎么实现的就行
首先,每个modal弹出框都有唯一的标识ID属性,这里我们有两个,一个添加用户,一个修改用户(里面的表单代码我没放出来,比较多,文章底部Gitee仓库我上传了完整开源项目)
我们为每个修改和删除按钮都添加一个类名标识(这里为什么不用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取消缓存
最后我们该如何学习?
1、看视频进行系统学习
这几年的Crud经历,让我明白自己真的算是菜鸡中的战斗机,也正因为Crud,导致自己技术比较零散,也不够深入不够系统,所以重新进行学习是很有必要的。我差的是系统知识,差的结构框架和思路,所以通过视频来学习,效果更好,也更全面。关于视频学习,个人可以推荐去B站进行学习,B站上有很多学习视频,唯一的缺点就是免费的容易过时。
另外,我自己也珍藏了好几套视频资料躺在网盘里,有需要的我也可以分享给你:
2、读源码,看实战笔记,学习大神思路
“编程语言是程序员的表达的方式,而架构是程序员对世界的认知”。所以,程序员要想快速认知并学习架构,读源码是必不可少的。阅读源码,是解决问题 + 理解事物,更重要的:看到源码背后的想法;程序员说:读万行源码,行万种实践。
Spring源码深度解析:
Mybatis 3源码深度解析:
Redis学习笔记:
Spring Boot核心技术-笔记:
3、面试前夕,刷题冲刺
面试的前一周时间内,就可以开始刷题冲刺了。请记住,刷题的时候,技术的优先,算法的看些基本的,比如排序等即可,而智力题,除非是校招,否则一般不怎么会问。
关于面试刷题,我个人也准备了一套系统的面试题,帮助你举一反三:
只有技术过硬,在哪儿都不愁就业,“万般带不去,唯有业随身”学习本来就不是在课堂那几年说了算,而是在人生的旅途中不间断的事情。
人生短暂,别稀里糊涂的活一辈子,不要将就。
)]
Mybatis 3源码深度解析:
[外链图片转存中…(img-5Qmb8h4v-1720027851083)]
Redis学习笔记:
[外链图片转存中…(img-m2vEMP9m-1720027851083)]
Spring Boot核心技术-笔记:
[外链图片转存中…(img-IEYaOYA6-1720027851084)]
3、面试前夕,刷题冲刺
面试的前一周时间内,就可以开始刷题冲刺了。请记住,刷题的时候,技术的优先,算法的看些基本的,比如排序等即可,而智力题,除非是校招,否则一般不怎么会问。
关于面试刷题,我个人也准备了一套系统的面试题,帮助你举一反三:
[外链图片转存中…(img-bkL4fXWK-1720027851085)]
只有技术过硬,在哪儿都不愁就业,“万般带不去,唯有业随身”学习本来就不是在课堂那几年说了算,而是在人生的旅途中不间断的事情。
人生短暂,别稀里糊涂的活一辈子,不要将就。