说明

做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. HTTP 1.1响应码

    HTTP 1.1响应码 响应码和信息 含义 HttpURLConnection 1XX 信息 100 Continue 服务器准备接受请求主体,客户端应当发送请求主体:这允许客户端在请求中发送大量数据 ...

  2. JVM内存参数的学习之三

    JVM内存参数的学习之三 背景 研究启动性能时, 顺便看到了jmap -heap 1 的部分信息 看到: MinHeapFreeRatio.MaxHeapFreeRatio 自己突然以为是 Perce ...

  3. [转帖]k8s集群部署工具kubeadm详解

    https://zhuanlan.zhihu.com/p/670125857 kubeadm是快捷创建Kubernetes集群的最佳实践工具,我们只需用kubeadm init 和 kubeadm j ...

  4. [转帖]警惕Oracle数据库性能“隐形杀手”——Direct Path Read

    一. 简介 Oracle 的11g版本正式发布到今天已经10年有余,最新版本也已经到了20c,但是Direct Path Read(直接路径读)导致性能问题的案例仍时有发生,很多12c的用户还是经常遇 ...

  5. [转帖]金仓数据库KingbaseES表空间(tablespace)知多少

    金仓数据库KingbaseES表空间定义 金仓数据库KingbaseES中的表空间允许在文件系统里定义那些代表数据库对象的文件存放位置,比如表和索引等.一旦表空间被创建,那么就可以在创建数据库对象时通 ...

  6. [转帖]Redis 核心篇：唯快不破的秘密

    文章系转载,方便整理和归纳,源文地址:https://z.itpub.net/article/detail/4B5A03BDDBE9A2BC3E080E278FE4D21E 以下文章来源于码哥字节 , ...

  7. 简单的获取ESXi服务器上面开启了多少个vCPU的办法

    开启ssh 执行命令 esxcli vm process list |grep Config |cut -b 17- |xargs cat |grep numvcpus |cut -d " ...

  8. UOS 以及 部分NetworkManager管理linux服务器 设置固定IP地址的办法.

    UOS 以及 部分NetworkManager管理linux服务器 设置固定IP地址的办法. 很多操作系统没法右键 网络连接进行处理 但是发现大部分机器都增加了 NetworkManager 的网络管 ...

  9. iframe 在线预览pdf、word、excel、ppt、txt、图片、视频

    第一种方式通过 iframe 在线预览 pdf,word,excel,ppt,txt,图片,视频 <template> <el-button @click="openHan ...

  10. vue获取子组件的实例$el、$attrs和inheritAttrs的使用

    我的需求 有些时候,我们需要获取组件的DOM元素 有些小伙伴会说,这还不简单 直接使用this.$ref.xx不就可以了吗 我们来看一下,是不是我们想的那样简单 组件内容 <template&g ...