SpringBoot使用Thymeleaf实现商品的增删改查（五）

最新推荐文章于 2024-06-27 23:42:05 发布

count的专栏

最新推荐文章于 2024-06-27 23:42:05 发布

阅读量2.5k

点赞数 6

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/xiao_count/article/details/102455533

版权

SpringBoot 专栏收录该内容

8 篇文章 10 订阅

订阅专栏

本文在上一篇SpringBoot使用thymeleaf实现用户的登录注册（四）基础上实现用户对商品的增删改查。
项目结构图如下：
在这里插入图片描述

项目结构图中框起来的是需要修改或者新建的

流程图如下：
在这里插入图片描述

1.修改db2(product)的功能实现

1.1修改db2—>mapper下的

ProductMapper.java

@Qualifier("db2SqlSessionFactory")
@Mapper
@Component
public interface ProductMapper {

    /**
     * 添加一个商品
     *
     * @param name
     * @param price
     */
    @Insert("insert into product(productName, productPrice) values(#{name}, #{price})")
    void addProduct(@Param("name") String name, @Param("price") Double price);

    /**
     * 查询所有的商品
     *
     * @return
     */
    @Select("select * from product")
    List<Product> findAll();

    /**
     * 根据商品id查询商品信息
     * @param id
     */
    @Select("select * from product where productId = #{id}")
    Product findOne(@Param("id") Integer id);

    /**
     *更新商品信息
     * @param product
     */
    @Update({"update product set productName = #{product.productName}, productPrice = #{product.productPrice} where productId = #{product.productId}"})
    void update(@Param("product") Product product);

    /**
     * 根据商品id删除商品信息
     * @param id
     */
    @Delete("delete from product where productId = #{id}")
    void delete(@Param("id") Integer id);

}

1.2修改db2—>service下的

IProductService.java

public interface IProductService {

    /**
     * 添加一个商品
     *
     * @param product
     */
    void saveProduct(Product product);

    /**
     * 查询所有的商品
     *
     * @return
     */
    List<Product> findAllProducts();

    /**
     * 根据商品id查询商品信息
     * @param id
     * @return
     */
    Product findOne(Integer id);

    /**
     *更新商品信息
     * @param product
     */
    void update(Product product);

    /**
     * 根据商品id删除商品信息
     * @param id
     */
    void delete(Integer id);
}

impl.ProductServiceImpl.java

@Service
public class ProductServiceImpl implements IProductService {
    @Autowired
    private ProductMapper productMapper;

    /**
     * 添加一个商品
     *
     * @param product
     */
    @Override
    // @Transactional(transactionManager = "db2TransactionManager")
    public void saveProduct(Product product) {
        productMapper.addProduct(product.getProductName(), product.getProductPrice());
    }

    /**
     * 查询所有的商品
     *
     * @return
     */
    @Override
    public List<Product> findAllProducts() {
        return productMapper.findAll();
    }

    /**
     * 根据商品id查询商品信息
     * @param id
     * @return
     */
    @Override
    public Product findOne(Integer id) {
        return productMapper.findOne(id);
    }

    /**
     *更新商品信息
     * @param product
     */
    @Override
    public void update(Product product) {
        productMapper.update(product);
    }

    /**
     * 根据商品id删除商品信息
     * @param id
     */
    @Override
    public void delete(Integer id) {
        productMapper.delete(id);
    }
}

2.修改Controller

ProductController.java

@Controller
public class ProductController {

    @Autowired
    IProductService productService;


    /**
     * 商品列表
     * @param model
     * @return
     */
    @RequestMapping("/productList")
    public String productList(Model model) {
        List<Product> products = productService.findAllProducts();
        model.addAttribute("products", products);
        return "product/productList";
    }

    /**
     * 商品列表点击Add
     * @return
     */
    @RequestMapping("/toAdd")
    public String toAdd(){
        return "product/productAdd";
    }

    /**
     * 执行增加商品信息，增加提交后自动返回商品列表界面
     * @param product
     * @return
     */
    @RequestMapping("/add")
    public String add(Product product){
        productService.saveProduct(product);
        return "redirect:/productList";
    }

    /**
     * 商品列表点击update
     * @param model
     * @param id
     * @return
     */
    @RequestMapping("/toUpdate")
    public String toUpdate(Model model, Integer id){
        Product product = productService.findOne(id);
        model.addAttribute("product", product);
        return "product/productUpdate";
    }

    /**
     * 执行更新商品信息，增加提交后自动返回商品列表界面
     * @param product
     * @return
     */
    @RequestMapping("/update")
    public String update(Product product){
        productService.update(product);
        return "redirect:/productList";
    }

    /**
     * 商品列表点击delete
     * @param id
     * @return
     */
    @RequestMapping("/delete")
    public String delete(Integer id){
        productService.delete(id);
        return "redirect:/productList";
    }

}

3.修改HTML页面

3.1使用Bootstrap美化HTML页面

在resources—>static下新建css文件夹，再在css文件夹下新建bootstrap.css
bootstrap.css具体见源码
在这里插入图片描述

3.2修改resources---->templates—>products的

productList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>productList</title>
    <!--thymeleaf表达式，th:href="@{/css/bootstrap.css}"@表示后面的是一个链接-->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>商品列表</h1>
<br/><br/>
<div class="with:80%">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>productName</th>
            <th>productPrice</th>
        </tr>
        </thead>
        <tbody>
        <!--each来进行for循环求值-->
        <tr th:each="product : ${products}">
            <th scope="row" th:text="${product.productId}"></th>
            <td th:text="${product.productName}"></td>
            <td th:text="${product.productPrice}"></td>
            <td><a th:href="@{/toUpdate(id=${product.productId})}">update</a></td>
            <td><a th:href="@{/delete(id=${product.productId})}">delete</a></td>
        </tr>
        </tbody>
    </table>
</div>
<div class="form-group">
    <div class="col-sm-2 control-label">
        <a href="/toAdd" th:href="@{/toAdd}" class="btn btn-info">add</a>
    </div>
</div>
</body>
</html>

productAdd.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>productAdd</title>
    <!--利用thymeleaf表达式获取css路径,bootstrap给button提供样式-->
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>添加商品</h1>
<br/><br/>
<div class="with:80%">
    <form class="form-horizontal"   th:action="@{/add}"  method="post">
        <div class="form-group">
            <label for="productName" class="col-sm-2 control-label">productName</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="productName"  id="productName" placeholder="productName"/>
            </div>
        </div>
        <div class="form-group">
            <label for="productPrice" class="col-sm-2 control-label" >productPrice</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="productPrice" id="productPrice" placeholder="productPrice"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="Submit" class="btn btn-info" />
                &nbsp; &nbsp; &nbsp;
                <input type="reset" value="Reset" class="btn btn-info" />
            </div>
        </div>
    </form>
</div>
</body>
</html>

productUpdate.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>productUpdate</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>修改商品信息</h1>
<br/><br/>
<div class="with:80%">
    <form class="form-horizontal"   th:action="@{/update}" th:object="${product}"  method="post">
        <input type="hidden" name="productId" th:value="*{productId}" />
        <div class="form-group">
            <label for="productName" class="col-sm-2 control-label">productName</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="productName"  id="productName" th:value="*{productName}" placeholder="productName"/>
            </div>
        </div>
        <div class="form-group">
            <label for="productPrice" class="col-sm-2 control-label" >productPrice</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="productPrice" id="productPrice"  th:value="*{productPrice}" placeholder="productPrice"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="Submit" class="btn btn-info" />
                &nbsp; &nbsp; &nbsp;
                <a href="/toAdd" th:href="@{/productList}" class="btn btn-info">Back</a>
            </div>

        </div>
    </form>
</div>
</body>
</html>

4.界面展示

4.1商品列表界面

在这里插入图片描述

4.2添加商品界面

在这里插入图片描述

4.3更新商品信息界面

5.项目源代码

源代码链接
https://github.com/Qreply/springbootCRUD.git

count的专栏

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot使用Thymeleaf实现商品的增删改查（五）

本文在上一篇（SpringBoot使用thymeleaf实现用户的登录注册（四））基础上实现用户对商品的增删改查。项目结构图如下：项目结构图中框起来的是需要修改或者新建的流程图如下：1.修改db2(product)的功能实现1.1修改db2—>mapper下的ProductMapper.java@Qualifier("db2SqlSessionFactory")@Mapp...
复制链接

扫一扫

专栏目录