《开启微服务之旅：Spring Boot Web开发举例》（二）

Yvemil72024-12-23 12:06
  1. S pringboot开发 企业信息管理系统
    1. 引入资源

1.创建 项目引入页面原型

2.引入 maven 的 依赖和starters

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <dependency > <groupId >org.springframework.boot</groupId > <artifactId >spring-boot-starter-web</artifactId > </dependency > <dependency > <groupId >org.springframework.boot</groupId > <artifactId >spring-boot-starter-test</artifactId > <scope >test</scope > </dependency > <dependency > <groupId >org.springframework.boot</groupId > <artifactId >spring-boot-devtools</artifactId > <optional >true</optional > </dependency > <dependency > <groupId >org.springframework.boot</groupId > <artifactId >spring-boot-starter-thymeleaf</artifactId > </dependency > <dependency > <groupId >org.webjars</groupId > <artifactId >jquery</artifactId > <version >3.3.1</version > </dependency > <dependency > <groupId >org.mybatis.spring.boot</groupId > <artifactId >mybatis-spring-boot-starter</artifactId > <version >1.3.1</version > </dependency > <dependency > <groupId >com.alibaba</groupId > <artifactId >druid</artifactId > <version >1.0.9</version > </dependency > <dependency > <groupId >log4j</groupId > <artifactId >log4j</artifactId > <version >1.2.15</version > </dependency > <dependency > <groupId >mysql</groupId > <artifactId >mysql-connector-java</artifactId > <scope >runtime</scope > </dependency > |

    1. thymeleaf模板 处理

创建mvc的配置类TxMvcConfig

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| @Configuration @MapperScan("cn.tx.springboot.mapper" ) public class TxMvcConfig implements WebMvcConfigurer{ @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/toLogin" ).setViewName("login" ); registry.addViewController("/header" ).setViewName("header" ); registry.addViewController("/index" ).setViewName("index" ); registry.addViewController("/menu" ).setViewName("menu" ); registry.addViewController("/add" ).setViewName("add" ); } @Override public void addInterceptors(InterceptorRegistry registry) { List<String> excludePatterns = new ArrayList<String>(); excludePatterns.add("/css/**" ); excludePatterns.add("/images/**" ); excludePatterns.add("/toLogin" ); excludePatterns.add("/login" ); registry.addInterceptor(new LoginInterceptor()) .addPathPatterns("/**" ) .excludePathPatterns(excludePatterns); } } |

    1. 创建数据库 环境

1.创建 数据库执行脚本

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for my_user -- ---------------------------- DROP TABLE IF EXISTS `my_user`; CREATE TABLE `my_user` ( `pid` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) DEFAULT NULL, `password` varchar(255) DEFAULT NULL, `p_addr` varchar(255) DEFAULT NULL, `gender` int(11) DEFAULT NULL, `birth` date DEFAULT NULL, PRIMARY KEY (`pid`) ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of my_user -- ---------------------------- INSERT INTO `my_user` VALUES ('1', 'zhangsan', '123', '北京', '1', '2020-06-14'); |

  1. 配置druid 数据源

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| spring: datasource: username: root password: root url: jdbc:mysql://localhost:3306/boot_demo driver-class-name: com.mysql.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource initialSize: 5 minIdle: 5 maxActive: 20 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 minEvictableIdleTimeMillis: 300000 validationQuery: SELECT 1 FROM DUAL testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true filters: stat,wall,log4j maxPoolPreparedStatementPerConnectionSize: 20 useGlobalDataSourceStat: true connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500 |

  1. 创建 数据源的配置类

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| @Configuration public class DruidConfig { @ConfigurationProperties(prefix = "spring.datasource" ) @Bean public DataSource dataSource(){ return new DruidDataSource(); } } |

    1. 编写 数据层

1.创建 mybatis的配置类 Mybatis Config

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| @Configuration public class MybatisConfig { @Bean public ConfigurationCustomizer getCustomizer(){ return new ConfigurationCustomizer() { @Override public void customize(org.apache.ibatis.session.Configuration configuration) { configuration.setMapUnderscoreToCamelCase(true ); } }; } } |

2.创建 数据层UserMapper

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public interface MyUserMapper { @Options(useGeneratedKeys = true , keyProperty = "pid" ) @Insert("insert into my_user(pid, username, password, p_addr, gender, birth)values(" + "#{pid}, #{username}, #{password}, #{pAddr}, #{gender}, #{birth})" ) public void insert(MyUser user) ; @Select("select * from my_user" ) public List<MyUser> selectUsers(); @Select("select * from my_user t where t.username = #{username} and t.password = #{password}" ) public MyUser selectUsersById(Map<String, String> map); @Select("select * from my_user t where t.pid = #{pid}" ) public MyUser selectUsersById1(int userId); @Update("update my_user set " + "username = #{username}," + "password=#{password}, " + "p_addr= #{pAddr}, " + "gender=#{gender}, " + "birth=#{birth} " + "where pid = #{pid}" ) public void update(MyUser user) ; @Delete("delete from my_user where pid = #{pid}" ) public void delete(int pid) ; } |

    1. 编写 Service

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| public interface MyUserService { public void insert(MyUser user) ; public void update(MyUser user) ; public List<MyUser> selectUsers(); public MyUser selectUsersById(Map<String, String> map); public MyUser selectUsersById1(int userId); public void delete(int pid) ; } |

实现类略（参见视频）

    1. 页面 处理

  2. main页面处理

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <html lang= "en" xmlns: th = "http://www.thymeleaf.org" > <head > <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title >首页</title > </head > <frameset cols= "*" rows= "136, *" id= "frame_main" border= "0" > <frame src= "header" noresize= "noresize" name= "header" > <frameset cols= "240, *" > <frame th :src= "@{/menu}" name= "menu" /> <frame th :src= "@{/main}" name= "main" > </frameset > </frameset > |

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <a th :href= "@{/add}" >添加</a > <table class= "mt" align= "center" > <tr > <td >用户名</td > <td >密码</td > <td >地址</td > <td >生日</td > <td >操作</td > </tr > <tr th :each= "user:{users}"**** \> \<****td**** ****th**** ****:text=**** ****"{user.username}" ></td > <td th :text= "{user.password}"**** \>\ \<****td**** ****th**** ****:text=**** ****"{user.pAddr}" ></td > <td th :text= "{#calendars.format(user.birth,'yyyy-MM-dd')}"**** \>\ \<****td**** \> \<****a**** ****th**** ****:href=**** ****"@{/getUser(pid={user.pid})}" >修改</a > <a th :href= "@{/delete(pid=${user.pid})}" >删除</a > </td > </tr > </table > |

2.添加页面处理

引入thymeleaf命名空间后

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <form th :action= "@{/save}" method= "post" > <table class= "mt" align= "center" > <tr > <td >用户名</td > <td ><input name= "username" type= "text" /></td > </tr > <tr > <td >密码</td > <td ><input name= "password" type= "password" /></td > </tr > <tr > <td >地址</td > <td ><input name= "pAddr" type= "text" /></td > </tr > <tr > <td >生日</td > <td ><input name= "birth" type= "text" /></td > </tr > <tr > <td >性别</td > <td ><input name= "gender" type= "text" /></td > </tr > <tr > <td ></td > <td ><input type= "submit" /></td > </tr > </table > </form > |

2.修改页面处理

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <form th :action= "@{/update}" method= "post" > <input type= "hidden" name= "pid" th :value= "{user.pid}"**** /\> \<****table**** ****class=**** ****"mt"**** ****align=**** ****"center"**** \> \<****tr**** \> \<****td**** \>用户名\ \<****td**** \>\<****input**** ****name=**** ****"username"**** ****type=**** ****"text"**** ****th**** ****:value=**** ****"{user.username}" /></td > </tr ><tr > <td >密码</td > <td ><input name= "password" type= "password" th :value= "{user.password}"**** /\>\ \\<****tr**** \> \<****td**** \>地址\ \<****td**** \>\<****input**** ****name=**** ****"pAddr"**** ****type=**** ****"text"**** ****th**** ****:value=**** ****"{user.pAddr}" /></td > </tr > <tr > <td >地址</td > <td ><input name= "gender" type= "text" th :value= "{user.gender}"**** /\>\ \ \<****tr**** \> \<****td**** \>生日\ \<****td**** \>\<****input**** ****name=**** ****"birth"**** ****type=**** ****"text"**** ****th**** ****:value=**** ****"{#calendars.format(user.birth, 'yyyy-MM-dd')}" /></td > </tr ><tr > <td ></td > <td ><input type= "submit" /></td > </tr > </table > </form > |

    1. 用户 登录

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html lang= "en" xmlns: th = "http://www.thymeleaf.org" > <head > <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title >用户登录</title > <!--<link href="css/login.css" rel="stylesheet" type="text/css" />--> <link th :href= "@{/css/login.css}" rel= "stylesheet" type= "text/css" /> <script th :src= "@{/webjars/jquery/3.3.1/jquery.js}" ></script > <script > function login1 () { **** (****"form"**** ).submit(); } \ \ \<****body**** \> \<****div**** ****id=**** ****"login"**** \> \<****div**** ****id=**** ****"top"**** \> \<****div**** ****id=**** ****"top_left"**** \>\<****img**** ****src=**** ****"images/login_03.gif"**** /\>\ \<****div**** ****id=**** ****"top_center"**** \>\ \ \<****form**** ****th**** ****:action=**** ****"@{/login}"**** ****method=**** ****"post"**** \> \<****div**** ****id=**** ****"center"**** \> \<****div**** ****id=**** ****"center_left"**** \>\ \<****div**** ****id=**** ****"center_middle"**** \> \<****div**** ****style=**** ****"**** ****text-align**** : ****center**** ; ****color**** : ****red**** ****"**** ****th**** ****:text=**** ****"{tip}" ></div > <div id= "user" >用 户 <input type= "text" name= "username" /> </div > <div id= "password" >密 码 <input type= "password" name= "password" /> </div > <div id= "btn" > <a href= "#" οnclick= " login1 ()" >登录</a > <a href= "#" >清空</a > </div > </div > <div id= "center_right" ></div > </div > </form > <div id= "down" > <div id= "down_left" > <div id= "inf" > <span class= "inf_text" >版本信息</span > <span class= "copyright" >信息管理系统 v2.0</span > </div > </div > <div id= "down_center" ></div > </div > </div > </body > </html > |

登录的Controller逻辑

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| @PostMapping("/login" ) public String login(HttpSession session, String username, String password, Model model) { Map<String, String> map = new HashMap<String, String>(); map.put("username" , username); map.put("password" , password); MyUser user = userService .selectUsersById(map); if (user != null ){ session.setAttribute("user" , user); return "redirect:index" ; }else { model.addAttribute("tip" ," 用户名或者密码错误 " ); return "login" ; } } |

Header模板页面

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <div id= "main" > <div id= "welcome" >欢迎你回来 <span th :text= "{session.user.username}"**** ****th**** ****:if=**** ****"{not #strings.isEmpty(session.user)}" ></span > <a target= "_top" th :text= " 请登录 " th :href= "@{/toLogin}" th :if= "${#strings.isEmpty(session.user)}" ></a > <img src= "images/clock.gif" /> 学习是最好的投资</div > <div id= "adminop" > <ul > <li ><a href= "#" >站点首页</a ></li > <li ><a href= "javascript: parent .location. reload ();" >管理首页</a ></li > <li ><a href= "javascript: parent .location. reload ();" >退出管理</a ></li > <li ><a href= "#" >站点首页</a ></li > </ul > </div > </div > |

相关推荐
Ling_suu3 分钟前
SpringBoot3——Web开发
java·服务器·前端
Yvemil710 分钟前
《开启微服务之旅：Spring Boot Web开发》（二）
前端·spring boot·微服务
hanglove_lucky12 分钟前
本地摄像头视频流在html中打开
前端·后端·html
维李设论15 分钟前
Node.js的Web服务在Nacos中的实践
前端·spring cloud·微服务·eureka·nacos·node.js·express
2401_8576009521 分钟前
基于 SSM 框架 Vue 电脑测评系统：赋能电脑品质鉴定
前端·javascript·vue.js
计算机学长felix24 分钟前
基于SpringBoot的“旅游管理系统”的设计与实现（源码+数据库+文档+PPT)
spring boot·毕业设计
天之涯上上26 分钟前
Pinia 是一个专为 Vue.js 3 设计的状态管理库
前端·javascript·vue.js
@大迁世界33 分钟前
摆脱 `<div>`！7 种更语义化的 HTML 标签替代方案
前端·html
苹果醋31 小时前
SpringBoot快速入门
java·运维·spring boot·mysql·nginx
高山我梦口香糖1 小时前
[react] ＜NavLink＞自带激活属性
前端·javascript·react.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04SQL 主从数据库实时备份05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07VSCode插件 —— Cody AI （免费AI助手！）08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）