N-122基于springboot,vue网上订餐系统-CSDN博客

本文链接：https://blog.csdn.net/weixin_42899150/article/details/131619747

开发工具：IDEA

服务器：Tomcat9.0， jdk1.8

项目构建：maven

数据库：mysql5.7

前端技术：Vue+ElementUI

服务端技术：springboot+mybatis+redis

本系统分用户前台和管理后台两部分，项目采用前后端分离

主要功能如下：

(1)前台部分功能：

1.登录、注册、首页

2.购物车、商品详情、搜索商品、结算功能

3.我的订单、个人资料、退出登录、取消订单、评价等

(2)后台部分功能：

1.登录、首页、退出登录

2.用户管理：新增、修改、分页查询、删除

3.角色管理：新增、修改、分页查询、删除

4.商品分类管理：新增、修改、分页查询、删除

5.商品管理：新增、修改、分页查询、删除

6.订单管理：修改状态、查询详情、分页查询、删除

7.评论管理：分页查询、查看详情、回复

文档截图：

N-122基于springboot,vue网上订餐系统

前台截图：

后台截图：



@RestController("AdminProductController")
@RequestMapping("/admin/product")
public class ProductController {

    @Resource
    private IProductService productService;

    /**
     * 后台保存商品数据(添加、修改)
     * @param productDTO
     * @return
     */
    @PostMapping("/save")
    public ResponseDTO<Boolean> saveProduct(@RequestBody ProductDTO productDTO){
        return productService.saveProduct(productDTO);
    }

    /**
     * 后台分页获取商品数据
     * @param pageDTO
     * @return
     */
    @PostMapping("/list")
    public ResponseDTO<PageDTO<ProductDTO>> getProductListByPage(@RequestBody PageDTO<ProductDTO> pageDTO){
        return productService.getProductListByPage(pageDTO);
    }

    /**
     * 后台删除商品数据
     * @param productDTO
     * @return
     */
    @PostMapping("/remove")
    public ResponseDTO<Boolean> removeProduct(@RequestBody ProductDTO productDTO){
        return productService.removeProduct(productDTO);
    }

    /**
     * 后台获取商品总数
     * @return
     */
    @PostMapping("/total")
    public ResponseDTO<Long> getProductTotal(){
        return productService.getProductTotal();
    }

    /**
     * 获取访问量最多的三个商品
     * @return
     */
    @PostMapping("/view_num")
    public ResponseDTO<List<ProductDTO>> getProductListByViewNum(){
        return productService.getProductListByViewNum();
    }
}

<template>
  <body
      class="html not-front not-logged-in one-sidebar sidebar-second page-node page-node- page-node-3 node-type-product uc-product-node">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
  </div>
  <div id="wrapper">
    <!-- LOGIN POP UPS -->
    <div id="popup-overlay"></div>
    <div class="wrapper">
      <header>
        <the-header></the-header>
      </header>
      <div class="content clearfix">
        <div class="breadcrumbs">
          <h2 class="element-invisible">You are here</h2>
          <div class="breadcrumb">
            <router-link to="/">首页</router-link>
            » 商品详情

          </div>
        </div>
        <div id="content" class="column left-content">
          <div class="section">
            <a id="main-content"></a>
            <h1 class="title" id="page-title" v-text="product.name"></h1>
            <div class="tabs"></div>
            <div class="region region-content">
              <div id="block-system-main" class="block block-system">


                <div class="content">
                  <div id="node-3" class="node node-product clearfix" about="/product/convallis-sit-amet-tellus"
                       typeof="sioc:Item foaf:Document">

                    <div class="meal-details single">


                      <div class="image">
                        <div class="field field-name-uc-product-image field-type-image field-label-hidden">
                          <div class="field-items">
                            <div class="field-item even">
                              <div class="flex-nav-container">
                                <div class="flexslider-content flexslider clearfix" id="flexslider-1">
                                  <ul class="slides">
                                    <li><img typeof="foaf:Image" :src="product.photo" width="800" height="500" alt=""/>
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="date_categories">
                        <div class="created"></div>
                        <div
                            class="field field-name-field-product-category field-type-taxonomy-term-reference field-label-inline clearfix">
                          <div class="field-label"></div>
                          <div class="field-items">
                            <div class="field-item even">上架日期：{{ product.createTime }} 点击量：{{ product.viewNum }}</div>
                          </div>
                        </div>
                        <div class="clear"></div>
                      </div>

                      <div class="field field-name-body field-type-text-with-summary field-label-hidden">
                        <div class="field-items">
                          <div class="field-item even" property="content:encoded"><p v-text="product.info"></p>
                          </div>
                        </div>
                      </div>
                      <hr/>

                      <span class="price"><div class="product-info display-price uc-product-3"><span class="uc-price"
                                                                                                     v-text="'¥'+product.price"></span></div></span>
                      <div class="add-to-cart">
                        <form id="uc-product-add-to-cart-form-3">
                          <div>
                            <div class="form-actions form-wrapper" id="edit-actions">
                              <input class="node-add-to-cart form-submit" @click="addCart(product.id)" type="button"
                                     id="edit-submit-3" name="op" value="加入购物车"/>
                            </div>
                          </div>
                        </form>
                      </div>

                      <hr/>
                      <h1>商品评价</h1>
                      <template
                          v-if="product.evaluates === undefined || product.evaluates.length <= 0">
                        <el-row><h3>暂无评价</h3></el-row>
                      </template>
                      <template v-else>
                        <el-row :gutter="20" v-for="eva in product.evaluates" :key="eva.id">
                          <el-col :span="2" style="text-align: left;">
                            <div class="grid-content bg-purple">
                              <img :src="eva.userPhotoUrl|filterPhoto" class="layui-nav-img" style="height:55px; width:55px;">
                            </div>
                          </el-col>
                          <el-col :span="17" style="text-align: left;">
                            <el-row><span>{{ eva.username }}</span></el-row>
                            <el-row><span>{{ eva.evaluateTime }}</span></el-row>
                            <el-row>{{ eva.evaluateContent }}</el-row>
                          </el-col>
                          <el-col :span="5">
                            <el-rate
                                :value="eva.result"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                            </el-rate>
                          </el-col>
                        </el-row>
                      </template>

                    </div>

                    <!-- // node view full -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> <!-- /.section, /#content -->

        <the-aside></the-aside>


      </div>
    </div>
    <the-footer></the-footer>
  </div>
  </body>
</template>

<script>
import TheFooter from '../components/TheFooter.vue';
import TheHeader from '../components/TheHeader.vue';
import TheAside from '../components/TheAside.vue';

export default {
  name: 'detail',
  components: {TheFooter, TheHeader, TheAside},
  data: function () {
    return {
      product: {},
      user: {}
    }
  },
  mounted() {
    this.getProduct();
    this.getUserByToken();
  },
  watch: {
    '$route.query'() {
      this.getProduct();
    }
  },
  methods: {
    getUserByToken() {
      let token = Tool.getLoginUser();
      if (Tool.isEmpty(token)) {
        this.user.token = "";
      } else {
        this.$ajax.post(process.env.VUE_APP_SERVER + "/web/user/token", {token: token}).then((response) => {
          let resp = response.data;
          if (resp.code === 0) {
            this.user = resp.data;
          }
        });
      }
    },
    addCart(productId) {
      let data = {
        productId: productId,
        userId: this.user.id,
        quantity: 1
      };
      this.$ajax.post(process.env.VUE_APP_SERVER + "/web/cart/add", data).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          this.$message.success(resp.msg);
        } else {
          this.$message.error(resp.msg);
        }
      });
    },
    getProduct() {
      let query = this.$route.query;
      let data = {};
      if (query.productId) {
        data = {id: query.productId};
      }
      // 获取当前商品详情信息
      this.$ajax.post(process.env.VUE_APP_SERVER + "/web/product/get", data).then((response) => {
        let resp = response.data;
        if (resp.code === 0) {
          this.product = resp.data;
          this.product.photo = process.env.VUE_APP_SERVER + "/photo/view?filename=" + this.product.photo;
        }
      });
    }
  },
  filters: {
    filterPhoto(img) {
      return process.env.VUE_APP_SERVER + "/photo/view?filename=" + img;
    }
  }
}
</script>

<style>

</style>