说明

做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. [转帖]tidb-lightning 逻辑模式导入

    https://docs.pingcap.com/zh/tidb/stable/tidb-lightning-configuration 本文档介绍如何编写逻辑导入模式的配置文件,如何进行性能调优等内 ...

  2. [转帖]SPEC测试arm服务器性能,SPECJVM2008测试处理器性能_服务器评测与技术-中关村在线...

    首先,我们使用SPECJVM2008测试最新至强E5处理器的虚拟化性能. SPECJVM2008是一种通用的多线程Java基准测试工具,它能够反映JRE(Java Runtime Environmen ...

  3. PostgreSQL简单添加只读用户的方法

    1. 添加了白名单只读来避免开发同事错误的修改数据库内的数据, 但是他们总想去查询数据库的内容. 最简单的办法是修改pg_hba.conf添加只读用户. 2. 添加只读用户. 使用psql登录pg数据 ...

  4. CS231N Assigenment1 two_layer_net笔记

    two_layer_net.ipynb 之前对 x.reshape(x.shape[0], -1)语句的输出结果理解一直有误: 1 x = [[1,4,7,2],[2,5,7,4]] 2 x = np ...

  5. antv-x6 使用及总结

    1 简介 AntV是一个数据可视化(https://so.csdn.net/so/search?q=数据可视化&spm=1001.2101.3001.7020 )的工具(https://ant ...

  6. vue mixin混入 全局混入 局部混入

    <div id="app"> --{{nameName}} </div> // 全局混入 不需要注册 var m1 = Vue.mixin({ data() ...

  7. NET Core 通过扩展方法实现密码字符串加密(Sha256和Sha512)

    using System; using System.Security.Cryptography; using System.Text; namespace SPACore.Extensions { ...

  8. 微信小程序-页面生命周期

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

  9. silce的扩容，截取，使用规范总结

    切片 什么是slice slice的创建使用 slice使用的一点规范 slice和数组的区别 slice的append是如何发生的 复制Slice和Map注意事项 接收 Slice 和 Map 作为 ...

  10. 数据挖掘机器学习[七]---2021研究生数学建模B题空气质量预报二次建模求解过程：基于Stacking机器学习混合模型的空气质量预测｛含码源+pdf文章｝

    相关文章: 特征工程详解及实战项目[参考] 数据挖掘---汽车车交易价格预测[一](测评指标:EDA) 数据挖掘机器学习---汽车交易价格预测详细版本[二]{EDA-数据探索性分析} 数据挖掘机器学习 ...