SpringBoot引擎框架thymeleaf前后端交互的具体使用方法

一、Index.html 以及 single-product.html首页、商品展示两个网页

在这里插入图片描述

第一步、首先在MySQL数据生成一张表

在这里插入图片描述

第二步、在IDEA中的generatorConfig.xml文件中,输入表的名字,然后点击Maven——plugins——mybatis-generator-mybatis-generator-generate生成代码

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第三步、在HTML文件index.html中添加数据

在这里插入图片描述

第四步、在HTML文件single-product.html中添加数据

在这里插入图片描述

第五步、自己写Controller和Service,也就是下面三个文件要自己写

在这里插入图片描述

Controller:

在这里插入图片描述

SuperProductservice:

@Service
public interface SuperProductservice {

    List<SuperProduct> GetSuperProductList();

    SuperProduct GetSuperProductById(int SuperProId);

    List<SuperProduct> GetSuperProductByIdList(int[] SuperProIdList);
}

SuperProductserviceImpl:(这是SuperProductservice的实现类,工业标准)

@Service
public class SuperProductserviceImpl implements SuperProductservice {
    @Autowired
    SuperProductMapper superProductMapper;

    @Override
    public List<SuperProduct> GetSuperProductList() {
        return superProductMapper.selectAll();
    }

    @Override
    public SuperProduct GetSuperProductById(int SuperProId) {
        return superProductMapper.selectByPrimaryKey(SuperProId);
    }

    @Override
    public List<SuperProduct> GetSuperProductByIdList(int[] SuperProIdList) {
        List<SuperProduct> superProductList = new ArrayList<>();
        for (int j : SuperProIdList) {
            superProductList.add(superProductMapper.selectByPrimaryKey(j));
        }
        return superProductList;
    }
}

Mapper

@Mapper
public interface SuperProductMapper {
    int deleteByPrimaryKey(Integer id);

    int insert(SuperProduct record);

    SuperProduct selectByPrimaryKey(Integer id);

    List<SuperProduct> selectAll();

    int updateByPrimaryKey(SuperProduct record);
}

.XML文件

在这里插入图片描述

二、registration.html 以及 login.html注册和登录页面

registration.html
在这里插入图片描述
在这里插入图片描述

RegisterController
在这里插入图片描述
login.html
在这里插入图片描述
LoginController
在这里插入图片描述

三、cart.html 购物车页面

购物车主要是两个功能,分别是
①single-product.html商品页面添加宝贝到购物车,并展示出来的功能
②购物车删除宝贝的功能
③提交订单的功能

①single-product.html添加商品到购物车
single-product.html商品页面,实现,我一点击商品添加到购物车功能,就可以获得响应
在这里插入图片描述
CartController通过PostMappering来获取用户提交的宝贝信息,写入数据库,然后返回关联字让cart.html页面可以显示出来
在这里插入图片描述
cart.html
在这里插入图片描述
②购物车删除宝贝的功能
点击删除的时候把商品的id传回去Controller就可以了
cart.html
在这里插入图片描述
CartController
在这里插入图片描述
③提交订单的功能
这个功能不用写什么,直接用一个跳转到checkout.html订单页面就可以了,然后Controller通过session接收用户id,再通过用户id在cart数据库表中搜索显示出来就行

cart.html
在这里插入图片描述
Controller
在这里插入图片描述

四、checkout.html 订单页面

订单页面要实现两个功能

用户提交订单后,相应的数据库要做一些删除的操作

checkout.html
在这里插入图片描述

CartController
在这里插入图片描述

  • 2
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前后端分离项目是指将前端和后端的开发分离,前端使用Vue等框架进行开发,后端使用SpringBoot框架进行开发。在这种架构下,前端和后端通过接口进行数据交互,实现前后端的解耦和独立开发。\[1\]\[2\]\[3\] 在一个SpringBoot Vue前后端分离项目中,可以按照以下步骤进行开发: 1. 创建一个SpringBoot项目,可以使用IDEA等开发工具进行创建。\[1\]\[2\]\[3\] 2. 在SpringBoot项目中添加接口,用于前端与后端的数据交互。可以使用SpringBoot的注解来定义接口,并实现相应的业务逻辑。\[1\]\[3\] 3. 创建一个Vue项目,可以使用Vue CLI等工具进行创建。\[1\]\[2\] 4. 在Vue项目中配置跨域,以便能够访问后端的接口。可以使用Vue的配置文件或者代理来实现跨域。\[1\] 5. 在Vue项目中编写前端页面和组件,实现用户界面的展示和交互。可以使用Vue的组件化开发方式来提高代码的复用性和可维护性。\[1\]\[2\] 6. 在Vue项目中通过axios等工具发送请求,与后端的接口进行数据交互。可以使用RESTful API的方式来进行接口设计和调用。\[1\]\[2\] 7. 在SpringBoot项目中处理前端发送的请求,进行相应的业务逻辑处理,并返回数据给前端。可以使用SpringBoot的注解来处理请求和返回数据。\[1\]\[3\] 8. 运行前端和后端项目,进行测试和调试。可以使用浏览器的开发者工具来查看网络请求和响应,以及调试代码。\[1\]\[2\]\[3\] 通过以上步骤,就可以实现一个基于SpringBoot和Vue的前后端分离项目。前端和后端可以独立开发和部署,通过接口进行数据交互,实现灵活的前端界面和后端业务逻辑的开发。 #### 引用[.reference_title] - *1* *2* [SpringBoot+Vue前后端分离](https://blog.csdn.net/weixin_47006863/article/details/123553092)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [springboot+vue前后端分离项目(后台管理系统)](https://blog.csdn.net/qq_52050769/article/details/119685283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值