说明

做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实现用户增删改查实战的更多相关文章

  1. 第二百七十六节，MySQL数据库，【显示、创建、选定、删除数据库】，【用户管理、对用户增删改查以及授权】

    MySQL数据库,[显示.创建.选定.删除数据库],[用户管理.对用户增删改查以及授权] 1.显示数据库 SHOW DATABASES;显示数据库 SHOW DATABASES; mysql - 用户 ...

  2. 用户增删改查 django生命周期 数据库操作

    一 django生命周期 1 浏览器输入一个请求(get/post)2 响应到django程序中3 执行到url,url通过请求的地址匹配到不同的视图函数4 执行对应的视图函数,此过程可以查询数据库, ...

  3. SpringBoot整合MybatisPlus基本的增删改查，保姆级教程

    概述 MybatisPlus是国产的第三方插件, 它封装了许多常用的CURDapi,免去了我们写mapper.xml的重复劳动,这里介绍了基本的整合SpringBoot和基础用法. 引入依赖 在项目中 ...

  4. ASP.NET学习笔记（3）——用户增删改查（三层）

    说明(2017-10-6 11:21:58): 1. 十一放假在家也没写几行代码,本来还想着利用假期把asp.net看完,结果天天喝酒睡觉,回去的票也没买到,惨.. 2. 断断续续的把用户信息的页面写 ...

  5. SpringBoot+Mybatis增删改查实战

    简介 SpringBoot和Mybatis是啥请自行百度,作者这里也是花了几天时间入门了这个框架用来完成任务,并且也算符合要求的完成了任务,期间也各种百度但是没找到自己想要的那种简单易懂的教程,所以踩 ...

  6. 在MyEclipse中使用spring-boot+mybatis+freemarker实现基本的增删改查

    一.基本环境 二.创建实体类 1.User.java package bjredcross.rainbowplans.model; import bjredcross.rainbowplans.com ...

  7. ASP.NET学习笔记（2）——用户增删改查

    说明(2017-7-4 11:48:50): 1. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  8. Django - 基于orm实现用户增删改查

    1.基于orm实现用户新增 user_info.html中,增加代码: views.py中,在原user_info函数中,增加判断代码: 备注:最后一句,可以通过return redirect 实现, ...

  9. 《linux就该这么学》课堂笔记07 while、case、计划任务、用户增删改查命令

    while条件循环语句 while 条件测试操作 do 命令序列 done  case条件测试语句 case 变量值 in 模式一) 命令序列1 ;; 模式二) 命令序列2 ;; *) 默认命令序列 ...

  10. JSP+Servlet+Ajax实现用户增删改查的例子

    一.数据库设计 用户表User 已有的测试数据 二.Java代码编写 Java EE的架构一般分为以下五层: ①.Domain ②.DAO ③.Service ④.Controller ⑤.View ...

随机推荐

  1. 如何查看centos对于 TIME_WAIT 状态的 Socket 回收时间

    要查看系统对于 TIME_WAIT 状态的 Socket 回收时间,可以通过以下方式查询 TCP 数据结构中的相关字段值: cat /proc/sys/net/ipv4/tcp_fin_timeout ...

  2. MySQL 8.2.0部署安装验证

    MySQL 8.2.0部署安装验证 背景 昨天捯饬了半天Oracle23c Free版本发现自己白忙活了. 然后想着继续看一下 MySQL8.2. 看看会不会又继续白忙活 下载与安装 https:// ...

  3. 指定特定IP走特定网卡的方法

    指定特定IP走特定网卡的方法 背景 目标: 能够在有VPN以及多个网卡的情况下, 使用特定的IP地址进行登录服务器. 作用: 便于审计以及安全管理, 避免出现安全风险. 方式方法: route 命令设 ...

  4. 【转帖】What are segfault rip/rsp numbers and how to use them

    https://stackoverflow.com/questions/1456899/what-are-segfault-rip-rsp-numbers-and-how-to-use-them   ...

  5. 银河麒麟系统信息获取V1.0版本

    银河麒麟系统信息获取 摘要 最近项目有一些兼容性测试需求. 可能需要获取一些系统配置信息便于相关的工作. 想着自己总结一下. 便于后续的不太熟悉的同事进行简要处理 银河麒麟获取版本 nkvers # ...

  6. 高性能MySQL实战（三）：性能优化 | 京东物流技术团队

    这篇主要介绍对慢 SQL 优化的一些手段,而在讲解具体的优化措施之前,我想先对 EXPLAIN 进行介绍,它是我们在分析查询时必要的操作,理解了它输出结果的内容更有利于我们优化 SQL.为了方便大家的 ...

  7. 【dp，建模】AGC032D Rotation Sort

    Problem Link 有一个长为 \(n\) 的排列 \(p\),给定 \(A,B\),你每次可以做以下两种操作之一: 选取 \(l,r\),将 \(p[l:r]\) 循环右移,代价为 \(A\) ...

  8. TienChin 活动管理-活动列表展示

    后端 ActivityVO /** * @author BNTang * @version 1.0 * @description 活动管理VO * @since 2023-23-05 **/ publ ...

  9. 【CSDN浏览器插件测评超详细版】——万能便捷的C功能，直接爱不释手，强烈推荐！更多功能等你探索

    我的界面预览: 1.下载安装 下载链接:https://plugin.csdn.net/?utm_source=chajian-contest-1210#/chrome-index-help 说明:若 ...

  10. 19.9 Boost Asio 同步字典传输

    这里所代指的字典是Python中的样子,本节内容我们将通过使用Boost中自带的Tokenizer分词器实现对特定字符串的切割功能,使用Boost Tokenizer,可以通过构建一个分隔符或正则表达 ...