Java Web 厨艺交流平台设计与实现：SpringBoot2 + Vue3 架构实践

技术架构

后端技术：Spring Boot

Spring Boot 作为 Java 企业级开发的核心框架，以'约定优于配置'的设计哲学简化了应用开发。其零配置启动机制大幅减少了 XML 配置文件编写，内置 Tomcat/Jetty/Undertow 支持独立 JAR 包部署。集成 Actuator 监控组件后，可提供健康检查与企业级特性。微服务友好架构使其能与 Spring Cloud 生态无缝集成。开发者通过 Starter 依赖体系聚焦业务逻辑，单一可执行 JAR 的部署模式极大简化了运维流程。

前端技术：Vue.js

Vue.js 凭借渐进式框架设计和卓越的开发体验成为首选。基于依赖追踪的响应式系统实现高效视图更新，单文件组件（SFC）设计封装了样式、逻辑与模板。从简单的视图层库扩展至完整 SPA 解决方案十分灵活。Vue Router、Pinex/Vuex、Vue CLI 等工具链完备，直观的模板语法结合强大的指令系统让复杂交互变得简洁。TypeScript 支持与开发者工具则为大型项目提供了可靠保障。

核心代码示例

以下是后端控制器的一个典型实现片段，展示了如何通过 RESTful 接口处理商品（或资源）信息的查询、保存与删除逻辑。在实际项目中，可根据具体业务需求调整实体类与方法细节。

package com.controller;
import java.math.BigDecimal;
import java.text.SimpleDateFormat;
import java.text.ParseException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;
import com.entity.ShangpinxinxiEntity;
import com.entity.view.ShangpinxinxiView;
import com.service.ShangpinxinxiService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;
import java.io.IOException;
import com.service.StoreupService;
import com.entity.StoreupEntity;

/**
 * 商品信息
 * 后端接口
 * @author *
 * @email *
 * @date 2023-05-08 15:26:09
 */
@RestController
@RequestMapping("/shangpinxinxi")
public class ShangpinxinxiController {
    @Autowired
    private ShangpinxinxiService shangpinxinxiService;
    @Autowired
    private StoreupService storeupService;

    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, ShangpinxinxiEntity shangpinxinxi,
                  @RequestParam(required = false) Double pricestart,
                  @RequestParam(required = false) Double priceend, HttpServletRequest request) {
        String tableName = request.getSession().getAttribute("tableName").toString();
        if (tableName.equals("shangjia")) {
            shangpinxinxi.setShangpubianhao((String) request.getSession().getAttribute("username"));
        }
        EntityWrapper<ShangpinxinxiEntity> ew = new EntityWrapper<ShangpinxinxiEntity>();
        if (pricestart != null) ew.ge("price", pricestart);
        if (priceend != null) ew.le("price", priceend);
        PageUtils page = shangpinxinxiService.queryPage(params,
                MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, shangpinxinxi), params), params));
        return R.ok().put("data", page);
    }

    /**
     * 前端列表
     */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, ShangpinxinxiEntity shangpinxinxi,
                  @RequestParam(required = false) Double pricestart,
                  @RequestParam(required = false) Double priceend, HttpServletRequest request) {
        EntityWrapper<ShangpinxinxiEntity> ew = new EntityWrapper<ShangpinxinxiEntity>();
        if (pricestart != null) ew.ge("price", pricestart);
        if (priceend != null) ew.le("price", priceend);
        PageUtils page = shangpinxinxiService.queryPage(params,
                MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, shangpinxinxi), params), params));
        return R.ok().put("data", page);
    }

    /**
     * 列表
     */
    @RequestMapping("/lists")
    public R list(ShangpinxinxiEntity shangpinxinxi) {
        EntityWrapper<ShangpinxinxiEntity> ew = new EntityWrapper<ShangpinxinxiEntity>();
        ew.allEq(MPUtil.allEQMapPre(shangpinxinxi, "shangpinxinxi"));
        return R.ok().put("data", shangpinxinxiService.selectListView(ew));
    }

    /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(ShangpinxinxiEntity shangpinxinxi) {
        EntityWrapper<ShangpinxinxiEntity> ew = new EntityWrapper<ShangpinxinxiEntity>();
        ew.allEq(MPUtil.allEQMapPre(shangpinxinxi, "shangpinxinxi"));
        ShangpinxinxiView shangpinxinxiView = shangpinxinxiService.selectView(ew);
        return R.ok("查询商品信息成功").put("data", shangpinxinxiView);
    }

    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id) {
        ShangpinxinxiEntity shangpinxinxi = shangpinxinxiService.selectById(id);
        shangpinxinxi.setClicknum(shangpinxinxi.getClicknum() + 1);
        shangpinxinxi.setClicktime(new Date());
        shangpinxinxiService.updateById(shangpinxinxi);
        return R.ok().put("data", shangpinxinxi);
    }

    /**
     * 前端详情
     */
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id) {
        ShangpinxinxiEntity shangpinxinxi = shangpinxinxiService.selectById(id);
        shangpinxinxi.setClicknum(shangpinxinxi.getClicknum() + 1);
        shangpinxinxi.setClicktime(new Date());
        shangpinxinxiService.updateById(shangpinxinxi);
        return R.ok().put("data", shangpinxinxi);
    }

    /**
     * 赞或踩
     */
    @RequestMapping("/thumbsup/{id}")
    public R vote(@PathVariable("id") String id, String type) {
        ShangpinxinxiEntity shangpinxinxi = shangpinxinxiService.selectById(id);
        if (type.equals("1")) {
            shangpinxinxi.setThumbsupnum(shangpinxinxi.getThumbsupnum() + 1);
        } else {
            shangpinxinxi.setCrazilynum(shangpinxinxi.getCrazilynum() + 1);
        }
        shangpinxinxiService.updateById(shangpinxinxi);
        return R.ok("投票成功");
    }

    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody ShangpinxinxiEntity shangpinxinxi, HttpServletRequest request) {
        shangpinxinxi.setId(new Date().getTime() + new Double(Math.floor(Math.random() * 1000)).longValue());
        // ValidatorUtils.validateEntity(shangpinxinxi);
        shangpinxinxiService.insert(shangpinxinxi);
        return R.ok();
    }

    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody ShangpinxinxiEntity shangpinxinxi, HttpServletRequest request) {
        shangpinxinxi.setId(new Date().getTime() + new Double(Math.floor(Math.random() * 1000)).longValue());
        // ValidatorUtils.validateEntity(shangpinxinxi);
        shangpinxinxiService.insert(shangpinxinxi);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    @Transactional
    public R update(@RequestBody ShangpinxinxiEntity shangpinxinxi, HttpServletRequest request) {
        // ValidatorUtils.validateEntity(shangpinxinxi);
        shangpinxinxiService.updateById(shangpinxinxi);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids) {
        shangpinxinxiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }

    /**
     * 前端智能排序
     */
    @IgnoreAuth
    @RequestMapping("/autoSort")
    public R autoSort(@RequestParam Map<String, Object> params, ShangpinxinxiEntity shangpinxinxi,
                      HttpServletRequest request, String pre) {
        EntityWrapper<ShangpinxinxiEntity> ew = new EntityWrapper<ShangpinxinxiEntity>();
        Map<String, Object> newMap = new HashMap<String, Object>();
        Map<String, Object> param = new HashMap<String, Object>();
        Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
        while (it.hasNext()) {
            Map.Entry<String, Object> entry = it.next();
            String key = entry.getKey();
            String newKey = entry.getKey();
            if (pre.endsWith(".")) {
                newMap.put(pre + newKey, entry.getValue());
            } else if (StringUtils.isEmpty(pre)) {
                newMap.put(newKey, entry.getValue());
            } else {
                newMap.put(pre + "." + newKey, entry.getValue());
            }
        }
        params.put("sort", "clicknum");
        params.put("order", "desc");
        PageUtils page = shangpinxinxiService.queryPage(params,
                MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, shangpinxinxi), params), params));
        return R.ok().put("data", page);
    }
}

系统展示

以下为平台部分功能界面的参考截图：

文档说明

配套文档包含系统部署指南与接口说明，详见下图：