Springboot+Freemarker+Boostrap实现用户增删改查实战
说明
做java web用的2大模板语言分别是：thymeleaf和freemarker，thymeleaf前面已经用了很多了，所以今天用一下这个freemarker。
技术栈
- springboot
- mybatis-plus
- freemarker
- bootstrap
实现效果
主要代码
列表页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>用户列表</title>
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>用户列表</h3>
<div class="row">
<div class="form-group">
<form action="/users/list" method="get">
<div class="col-sm-4">
<input type="text" class="form-control" name = "s_username" id="s_username" placeholder="请输入用户名称">
</div>
<div class="col-sm-1">
<button class="btn btn-primary" type="submit" id="search">
查询
</button>
</div>
</form>
<div class="col-sm-1"><button class="btn btn-success" onclick="add()">新增</button></div>
</div>
</div>
<table class="table table-striped" style="margin-top: 10px;">
<tr>
<th>序号</th>
<th>用户名</th>
<th>邮箱</th>
<th>姓名</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<#--遍历用户列表-->
<#if userList?? && (userList?size >0)>
<#list userList as user>
<tr>
<td>${user_index +1}</td>
<td>${user.username}</td>
<td>${user.email}</td>
<td>${user.truename}</td>
<td>${(user.createTime?string("yyyy-MM-dd HH:mm:ss"))!}</td>
<td>
<a class="btn btn-sm btn-warning" href="/users/edit/${user.id}">编辑</a>
<button class="btn btn-sm btn-danger" onclick="remove(${user.id})">删除</button>
</td>
</tr>
</#list>
<#else>
<tr>
<td colspan="6">无数据</td>
</tr>
</#if>
</table>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/util.js"></script>
<script>
function remove(id) {
if (confirm("确定删除数据？")) {
$.ajax({
type: "POST",
url: "${ctx.contextPath}remove/"+id,
success: function (data) {
window.location.href="/users/list";
},
error: function (e) {
console.log("ERROR: ", e);
}
});
}
}
function add() {
window.location.href="/users/edit/0";
}
</script>
</body>
</html>
修改页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>修改用户</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h3 style="text-align: center;">修改用户</h3>
<form class="form-horizontal" action="/users/save" method="post">
<div class="form-group">
<label for="username" class="col-sm-4 control-label">用户名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="username" name="username" value="${user.username!}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">邮箱</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="email" name="email" value="${user.email!}">
</div>
</div>
<div class="form-group">
<label for="truename" class="col-sm-4 control-label">姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="truename" name="truename" value="${user.truename!}">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-8">
<button type="button" class="btn btn-default" onclick="cancel()">取消</button>
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/util.js"></script>
<script>
function cancel() {
window.location.href="/users/list";
}
</script>
</body>
</html>
API和路由
@Controller
@RequestMapping("/users")
public class UsersController {
@Autowired
private UserService userService;
@GetMapping("/list")
public String list(Model model, @RequestParam(value = "s_username",required = false) String s_username){
QueryWrapper<User> queryWrapper = null;
if(!StringUtils.isEmpty(s_username)){
queryWrapper = new QueryWrapper<>();
queryWrapper.like("username", s_username);
}
List<User> userList = userService.list(queryWrapper);
model.addAttribute("userList", userList);
return "users";
}
@GetMapping("/edit/{id}")
public String edit(@PathVariable Integer id, Model model){
User user = userService.getById(id);
if(user==null){
user = new User();
}
model.addAttribute("user", user);
return "userEdit";
}
@PostMapping("/remove/{id}")
@ResponseBody
public Result<String> remove(@PathVariable Integer id){
userService.removeById(id);
return ResultUtil.ok();
}
@PostMapping("save")
public String save(User user){
userService.saveOrUpdate(user);
return "redirect:/users/list";
}
}
获取源码
地址：https://gitee.com/indexman/freemarker_demo
Springboot+Freemarker+Boostrap实现用户增删改查实战的更多相关文章
- 第二百七十六节，MySQL数据库，【显示、创建、选定、删除数据库】，【用户管理、对用户增删改查以及授权】
MySQL数据库,[显示.创建.选定.删除数据库],[用户管理.对用户增删改查以及授权] 1.显示数据库 SHOW DATABASES;显示数据库 SHOW DATABASES; mysql - 用户 ...
- 用户增删改查 django生命周期 数据库操作
一 django生命周期 1 浏览器输入一个请求(get/post)2 响应到django程序中3 执行到url,url通过请求的地址匹配到不同的视图函数4 执行对应的视图函数,此过程可以查询数据库, ...
- SpringBoot整合MybatisPlus基本的增删改查，保姆级教程
概述 MybatisPlus是国产的第三方插件, 它封装了许多常用的CURDapi,免去了我们写mapper.xml的重复劳动,这里介绍了基本的整合SpringBoot和基础用法. 引入依赖 在项目中 ...
- ASP.NET学习笔记（3）——用户增删改查（三层）
说明(2017-10-6 11:21:58): 1. 十一放假在家也没写几行代码,本来还想着利用假期把asp.net看完,结果天天喝酒睡觉,回去的票也没买到,惨.. 2. 断断续续的把用户信息的页面写 ...
- SpringBoot+Mybatis增删改查实战
简介 SpringBoot和Mybatis是啥请自行百度,作者这里也是花了几天时间入门了这个框架用来完成任务,并且也算符合要求的完成了任务,期间也各种百度但是没找到自己想要的那种简单易懂的教程,所以踩 ...
- 在MyEclipse中使用spring-boot+mybatis+freemarker实现基本的增删改查
一.基本环境 二.创建实体类 1.User.java package bjredcross.rainbowplans.model; import bjredcross.rainbowplans.com ...
- ASP.NET学习笔记（2）——用户增删改查
说明(2017-7-4 11:48:50): 1. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- Django - 基于orm实现用户增删改查
1.基于orm实现用户新增 user_info.html中,增加代码: views.py中,在原user_info函数中,增加判断代码: 备注:最后一句,可以通过return redirect 实现, ...
- 《linux就该这么学》课堂笔记07 while、case、计划任务、用户增删改查命令
while条件循环语句 while 条件测试操作 do 命令序列 done case条件测试语句 case 变量值 in 模式一) 命令序列1 ;; 模式二) 命令序列2 ;; *) 默认命令序列 ...
- JSP+Servlet+Ajax实现用户增删改查的例子
一.数据库设计 用户表User 已有的测试数据 二.Java代码编写 Java EE的架构一般分为以下五层: ①.Domain ②.DAO ③.Service ④.Controller ⑤.View ...
随机推荐
- C++11 同步与互斥
C++11 同步与互斥 0. C++11的线程 #include <thread> 面向对象的接口 RAII(资源获取即初始化)机制,当线程对象被销毁时,会自动执行析构函数,如果线程仍然在 ...
- android studio 如何把依赖导出成 jar
反编译工具 dex-tools-2.1-SNAPSHOT 第一步 用一个普通的app工程,引用所有的库,然后生成apk文件 第二步 把apk文件,改扩展名为zip,解压后,里面有几个*.dex文件,拷 ...
- 这一次，弄明白JS中的文件相关（二）：HTTP请求头和响应头
(一)前置知识 开始前,我们先来复习一下HTTP的基础知识. HTTP请求分为:请求行.请求头.空行.请求体(也叫正文.请求实体.请求主体). HTTP响应分为:状态行(也叫响应行).响应头.空行.响 ...
- 使用JavaStream将List转为Map
有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 使用Java Stream将List转换为Map ...
- [转帖]OceanBase实验4：迁移MySQL数据到OceanBase集群
服务器环境 1)12核48G,操作系统为centos 7.9系统,单节点三副本1-1-1集群. 2)源MySQL数据库:与OceanBase同一台服务器,版本为MySQL 5.7. 1.使用 mysq ...
- 【小实验】javascript 能够表述的最大整数
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 打开浏览器的控制台,开始输入数值: 输入:(16 位十进制 ...
- 根据pdf模板文件添加数据生成新的pdf与pdf添加读取二维码
参考文档 :https://www.cnblogs.com/ibeisha/p/itextsharp-pdf.html 程序demo 地址:https://github.com/hudean/itex ...
- GaussDB(for MySQL)剪枝功能，让查询性能提升70倍！
作者,祝青平,华为云数据库内核高级工程师.擅长数据库优化器内核研发,9年数据库内核研发经验,参与多个TP以及AP数据库的研发工作. 近日,华为云数据库社区下面有这样一条用户提问留言:请问,如何通过My ...
- 火遍外网的Keychron测评，带你入坑；ps马上5.20了送一个给你的心爱的她/他。
那些年用过的机械键盘 如果你经常上YouTube或Instagram,然后你又对键盘感兴趣,我相信你肯定看到过他--Keychron K2,他真的是一款曝光量很高的键盘. 1.键盘keychron k ...
- NetCat 工具的常用使用技巧
netcat 黑客们的瑞士军刀,虽然小巧但是其功能一点也不弱,并且该工具天生免杀,值得你去尝试. NCwindows反弹 1:正向连接 服务器执行:nc -l -p 8888 -e cmd.exe 本 ...