说明

做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. [转帖]jmeter SSL证书相关配置

    在实际工作中,我们大多数接口都是用的HTTPS来保证安全,使用jmeter测试HTTPS请求是如何配置证书呢? 1.最简单的方法,在选项里选择SSL管理器,然后选择相应的证书即可 在弹出的选择框选择证 ...

  2. [转帖]xargs详解

    https://www.cnblogs.com/xiaofeng666/p/10800939.html xargs与find经常结合来进行文件操作,平时删日志的时候只是习惯的去删除,比如 # find ...

  3. [转帖]RPC 框架总结与进阶

    https://www.cnblogs.com/xiaojiesir/p/15579418.html 框架总结 Netty 服务端启动 Netty 提供了 ServerBootstrap 引导类作为程 ...

  4. [官方]华为的部分设备的SPECint_rate_2006的测试数据

    Test Sponsor System Name BaseCopies Processor Results EnabledCores EnabledChips Cores/Chip Threads/C ...

  5. 自己想的一些判断存储长度的sql

    create table zhaobsh (t1 date ,t2 TIMESTAMP) insert into zhaobsh values (CURRENT_DATE,CURRENT_TIMEST ...

  6. Springboot actuator的简单使用

    Springboot actuator的简单使用 简介 公司基于springboot研发的系统,开发已经默认集成了actuator 为了安全起见这个插件模式是不开启的. 今天与研发同事进行了沟通,简单 ...

  7. vue3中markRaw的使用

    markRaw 作用:将一个对象标记为不可以被转化为代理对象.返回该对象本身. 应用场景: 1.有些值不应被设置成响应式时,例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表时,跳过响应式转换 ...

  8. js数组修改后会互相影响

    // 假设httpServe 是服务器返回来的数据 // 我们这里有一个需求, // 某一个区域需要对这一份数据进行展示 // 另一个区域需要只需要展示前1条数据 let httpServe = [ ...

  9. 【笔记】macbook m2 芯片中使用 gcc docker 镜像来交叉编译

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 一个 c 程序,如何在 macbook m2 芯片的笔记本 ...

  10. Linux线程API使用与分析

    线程是操作系统进程调度器可调度的最小粒度的执行单元 执行ps -eLF查看线程 UID PID PPID LWP C NLWP SZ RSS PSR STIME TTY TIME CMD root 1 ...