说明

做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. 使用Python+FFMPEG实现视频分割与合并

    前言 日常中偶尔会遇到需要简单剪辑处理视频的场景,以前我可能会拿出PR来剪辑一下,(别跟我说国产那些软件,剪辑完视频强制加上广告片头片尾恶心的一批),但是PR毕竟太重量级,剪个简单的视频都要花不少时间 ...

  2. GB18030-2022 标准学习

    GB18030-2022 标准学习 下载 https://openstd.samr.gov.cn/bzgk/gb/newGbInfo?hcno=A1931A578FE14957104988029B08 ...

  3. Windows平台的prometheus和Grafana的学习与使用

    Windows平台的prometheus和Grafana的学习与使用 背景 最近没有了linux机器 突然想捯饬一下Windows平台的监控与使用 所以总结一一下. 第一步下载 https://pro ...

  4. [粘贴]TiFlash

    TiFlash 是 TiDB HTAP 形态的关键组件,它是 TiKV 的列存扩展,在提供了良好的隔离性的同时,也兼顾了强一致性.列存副本通过 Raft Learner 协议异步复制,但是在读取的时候 ...

  5. linux 查看系统计划任务相关的命令

    最近公司排查计划任务: for i in `ls /etc/cron.d` ; do cat /etc/cron.d/$i |grep -v "#" ; done for i in ...

  6. 内网CentOS7搭建ntp服务器实现内网时间同步

    内网CentOS7搭建ntp服务器实现内网时间同步 背景 公司内部有很多虚拟机,本来很简单的实现了每天晚上自动同步阿里云时间 crontab -e 1 1 * * * ntpdate ntp.aliy ...

  7. Docker与虚拟化技术浅析第一弹之docker与Kubernetes

    1 前言 Docker是一个开源的引擎,可以轻松地为任何应用创建一个轻量级的. 可移植的.自给自足的容器.开发者在笔记本电脑上编译测试通过的容器可以批量地在生产环境中部署,包括VMs (虚拟机).ba ...

  8. express实现批量删除和分页

    后端代码批量删除 // 批量删除 router.get('/manyDel', function (req, res) { let { ids } = req.query if (ids&&a ...

  9. ASP.NET MVC 通过ActionFilter获取请求的参数

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...

  10. 修改windows电脑键盘按键映射

    改键的需求 买了一把61键的小键盘,有些按钮没有,比如Home.End.四个方向键,这些键需要按Fn+XX来实现,所以上网查了一下键盘按键修改的方法,即把按键给改了,比如把右边的Ctrl改成方向键. ...