javaWeb期末！！！当当网，springboot整合mybatis+vue3实现前台后台管理！！

于 2024-06-18 17:17:40 发布
阅读量340 收藏
点赞数 9
文章标签： mybatis java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73733267/article/details/139778954
版权

先放实现效果！！

前台，前台的基本功能都已经实现

后台 页面套的瑞吉外卖的后台模板

前端部分代码

<script setup>
import { ref, onMounted } from 'vue';
import { getAll } from "@/api/CategoryApi.js";
import MainLayoutTop from "@/components/MainLayoutTop.vue";
import router from "@/router/index.js";
import BookSearchView from "@/components/BookSearchView.vue";
import {
  getBookSalesMostService,
  getNewMostSaleBookService,
  getRecentBookService,
  getRecommendService
} from "@/api/BookApi.js";
const categorys = ref([]);
const getAllCategory = async () => {
  let result = await getAll();
  if (result.code === 0) {
    categorys.value = result.data.map(category => ({
      ...category,
      collapsed: true
    }));
  }
};
const gotoCategory=(id)=>{
  router.push({ name: 'categoryBook', params: { categorySecondId:id } })
}

const bookName = ref("")
const toSearchBook=()=>{
  router.push({ name: 'bookSearch', params: { bookName: bookName.value } })

}

const getImage= (imageUrl)=> {
  return `/api/common/download?name=${imageUrl}`
}

const recommendBooks = ref([{
  bookId:0,
  picture:null,
  bookName:null,
  dangdangPrice:0,
  originPrice:0
}])

const salesBooks = ref([{
  bookId:0,
  picture:null,
  bookName:null,
  dangdangPrice:0,
  originPrice:0
}])

const recentBooks = ref([{
  bookId:0,
  picture:null,
  bookName:null,
  dangdangPrice:0,
  originPrice:0
}])

const recentAndSalesMostBooks=ref([{
  bookId:0,
  picture:null,
  bookName:null,
  dangdangPrice:0,
  originPrice:0
}])

const getRecommend=async()=>{
  let result = await getRecommendService();
  recommendBooks.value = result.data
}

const getSalesMost=async()=>{
  let result  = await getBookSalesMostService();
  salesBooks.value = result.data
}

const getRecentBooks = async () =>{
   let result = await getRecentBookService()
   recentBooks.value = result.data
}

const getNewAndSaleMost = async ()=>{
  let result = await getNewMostSaleBookService()
  recentAndSalesMostBooks.value = result.data
}

onMounted(()=>{
  getAllCategory()
  getRecommend()
  getSalesMost()
  getRecentBooks()
  getNewAndSaleMost()
});
</script>

<template>
  <MainLayoutTop></MainLayoutTop>
  <div class="container">

    <BookSearchView></BookSearchView>

    <br>
    <br>

    <div class="row">
      <div class="col-md-3">
        <div class="panel panel-warning">
          <div class="panel-heading">
            <h5 class="panel-title">分类浏览</h5>
          </div>
          <div class="panel-body">
            <div class="panel-group" id="category">

              <div>
                <div class="panel-group" id="category">
                  <div v-for="category in categorys" :key="category.categoryFirstId" class="category-container">
                    <a :href="'#' + category.categoryFirstId" data-toggle="collapse" :data-target="'#' + category.categoryFirstId">
                      <strong class="text-danger">[{{ category.categoryFirstName }}]</strong>
                    </a>
                    <div :class="{'panel-collapse': true, 'collapse': category.collapsed}" :id="category.categoryFirstId">
                      <div class="panel-body bg-success">
                        <h5><a>{{ category.categoryFirstName }}</a></h5>
                        <div class="sub-category-container">
                          <router-link to v-for="subCategory in category.categorySecondList" :key="subCategory.categorySecondId" class="sub-category-item">
                            <span @click="gotoCategory(subCategory.categorySecondId)" class="text-info">{{ subCategory.categorySecondName }}</span>
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div id="top" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#top" data-slide-to="0"></li>
            <li data-target="#top" data-slide-to="1"></li>
            <li data-target="#top" data-slide-to="2"></li>
            <li data-target="#top" data-slide-to="3"></li>
            <li data-target="#top" data-slide-to="4"></li>
            <li data-target="#top" data-slide-to="5"></li>
          </ol>

          <div class="carousel-inner" role="list-box">
            <div class="item active">
              <img src="@/images/top/hzjsj2020618750315.jpg" alt="">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img src="@/images/top/200424_wj_sxzmzt_750x315.jpg" alt="">
              <div class="carousel-caption">
              </div>
            </div>
            <div class="item">
              <img src="@/images/top/200513_rjn2_dptj_750x315.jpg" alt="">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img src="@/images/top/rrkddlzjs750315.jpg" alt="">
              <div class="carousel-caption"></div>
            </div>
            <div class="item">
              <img src="@/images/top/xcjg750_315.jpg" alt="">
              <div></div>
            </div>
            <div class="item">
              <img src="@/images/top/yunjisuan0422750315.jpg" alt="">
              <div></div>
            </div>
          </div>

          <a href="#top" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a href="#top" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <h4>信息公告</h4>
        <ul>
          <li>精品童装限时0元领</li>
          <li>30万图书 5折封顶</li>
          <li>当当阅读器 海量电子书免费读</li>
          <li>多种商品，礼品卡支付更优惠</li>
          <li>当当周年庆 实付200再减30</li>
        </ul>
      </div>
    </div>

    <br>
    <br>
    <div class="row">
      <div class="col-sm-12">

        <ul class="nav nav-tabs" style="display:inline-block">
          <li class="active" @click="handRecord"><a href="#recommend" data-toggle="tab"><strong>编辑推荐</strong></a></li>
          <li><a href="#hot-sale" data-toggle="tab"><strong>热销图书</strong></a></li>
          <li><a href="#new-stores" data-toggle="tab"><strong>最新上架图书</strong></a></li>
          <li><a href="#new-hot-sale" data-toggle="tab"><strong>新书热卖榜</strong></a></li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="tab-content">
        <div class="tab-pane active" id="recommend">

          <!--推荐-->
          <div>
            <div v-if="recommendBooks.length > 0">
              <div v-for="book in recommendBooks" class="col-md-3">
                <div class="thumbnail">
                  <router-link
                      :to="{ name: 'bookDetail', params: { bookId: book.bookId } }"
                  >
                    <img
                        :src="getImage(book.picture)"
                        alt="图片"          style="height: 200px; width: 200px"
                    >
                  </router-link>

                  <div class="caption">
                    <router-link :to="{ name: 'bookDetail', params: { bookId: book.bookId }}">
                      <strong>{{ book.bookName }}</strong>
                    </router-link>
                    <p>
                      <span>￥{{ book.dangdangPrice }}</span>
                      <span>&nbsp;</span>
                      <del style="color:red" class="text-muted small">￥{{ book.originPrice }}</del>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="centered-text">
              <h1>暂无推荐</h1>
            </div>

        </div>
        </div>
        <div class="tab-pane" id="hot-sale">
          <!-- 热销 -->
          <div>
            <div v-if="salesBooks.length > 0">
              <div v-for="book in salesBooks" class="col-md-3">
                <div class="thumbnail">
                  <router-link
                      :to="{ name: 'bookDetail', params: { bookId: book.bookId } }"
                  >
                    <img
                        :src="getImage(book.picture)"
                        alt="图片"          style="height: 200px; width: 200px"
                    >
                  </router-link>

                  <div class="caption">
                    <router-link :to="{ name: 'bookDetail', params: { bookId: book.bookId }}">
                      <strong>{{ book.bookName }}</strong>
                    </router-link>
                    <p>
                      <span>￥{{ book.dangdangPrice }}</span>
                      <span>&nbsp;</span>
                      <del style="color:red" class="text-muted small">￥{{ book.originPrice }}</del>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="centered-text">
              <h1>暂无热销</h1>
            </div>

          </div>

        </div>
        <div class="tab-pane" id="new-stores">
          <!-- 新书上架 -->
          <div>
            <div v-if="recentBooks.length > 0">
              <div v-for="book in recentBooks" class="col-md-3">
                <div class="thumbnail">
                  <router-link
                      :to="{ name: 'bookDetail', params: { bookId: book.bookId } }"
                  >
                    <img
                        :src="getImage(book.picture)"
                        alt="图片"          style="height: 200px; width: 200px"
                    >
                  </router-link>

                  <div class="caption">
                    <router-link :to="{ name: 'bookDetail', params: { bookId: book.bookId }}">
                      <strong>{{ book.bookName }}</strong>
                    </router-link>
                    <p>
                      <span>￥{{ book.dangdangPrice }}</span>
                      <span>&nbsp;</span>
                      <del style="color:red" class="text-muted small">￥{{ book.originPrice }}</del>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="centered-text">
              <h1>暂无热销</h1>
            </div>

          </div>
        </div>
        <div class="tab-pane" id="new-hot-sale">
          <!-- 新书热卖 -->
          <div>
            <div v-if="recentAndSalesMostBooks.length > 0">
              <div v-for="book in recentAndSalesMostBooks" class="col-md-3">
                <div class="thumbnail">
                  <router-link
                      :to="{ name: 'bookDetail', params: { bookId: book.bookId } }"
                  >
                    <img
                        :src="getImage(book.picture)"
                        alt="图片"          style="height: 200px; width: 200px"
                    >
                  </router-link>

                  <div class="caption">
                    <router-link :to="{ name: 'bookDetail', params: { bookId: book.bookId }}">
                      <strong>{{ book.bookName }}</strong>
                    </router-link>
                    <p>
                      <span>￥{{ book.dangdangPrice }}</span>
                      <span>&nbsp;</span>
                      <del style="color:red" class="text-muted small">￥{{ book.originPrice }}</del>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="centered-text">
              <h1>暂无热卖</h1>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

</template>

<style scoped>

.navbar-nav li.divider:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 14px;
  background-color: #a4a4a4;
  top: 18px;
  right: 0;
}
.carousel-indicators li{
  background-color:rgba(167,167,167,0.5);
}

.category-container {
  margin-bottom: 5px; /* 设置标题之间的下边距为 10px */
}

.category-container {
  margin-bottom: 5px; /* 设置标题之间的下边距为 10px */
}

.sub-category-container {
  display: flex;
}

.sub-category-item {
  margin-right: 10px; /* 设置二级标题之间的右间距为 10px */
}

.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 或者设定一个具体的高度，如 300px */
  text-align: center;
}
</style>

后端部分代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.dangdangbackend.mapper.BookMapper">
    <insert id="insertBook" parameterType="com.example.dangdangbackend.entity.Book">

        INSERT INTO book (book_id, book_name, category_id, origin_price, dangdang_price, stocks, writer, publisher, publish_time, order_edition, print_time, print_num, IBSN, format, paper, book_package, page_num, word_num, picture, editor_promote, content_introduction, writer_introduction, basic_directory, media_remark,create_time,update_time)
        VALUES (#{bookId}, #{bookName}, #{categoryId}, #{originPrice}, #{dangdangPrice}, #{stocks}, #{writer}, #{publisher}, #{publishTime}, #{orderEdition}, #{printTime}, #{printNum}, #{IBSN}, #{format}, #{paper}, #{bookPackage}, #{pageNum}, #{wordNum}, #{picture}, #{editorPromote}, #{contentIntroduction}, #{writerIntroduction}, #{basicDirection}, #{mediaRemark},#{createTime},#{updateTime});
    </insert>

    <select id="searchBooks" parameterType="string" resultType="com.example.dangdangbackend.VO.BookTableVO">
        SELECT book_id,book_name,writer,publisher,origin_price,dangdang_price,publish_time,picture,stocks,sales,status
        FROM book
        WHERE 1=1
        <if test="bookName != null and bookName != ''">
            AND book_name LIKE CONCAT('%', #{bookName}, '%')
        </if>
        <if test="publisher != null and publisher != ''">
            AND publisher LIKE CONCAT('%', #{publisher}, '%')
        </if>
        <if test="writer != null and writer != ''">
            AND writer LIKE CONCAT('%', #{writer}, '%')
        </if>
    </select>


    <delete id="deleteBooks" parameterType="java.util.List">
        delete from book where book_id in

        <foreach collection="list" item="item" open="(" close=")" separator=",">
            #{item}
        </foreach>
    </delete>

    <update id="updateBookById" parameterType="com.example.dangdangbackend.DTO.UpdateBookDTO">
        UPDATE book
        SET
        book_name = #{bookName},
        category_id = #{categoryId},
        origin_price = #{originPrice},
        dangdang_price = #{dangdangPrice},
        stocks = #{stocks},
        writer = #{writer},
        publisher = #{publisher},
        publish_time = #{publishTime},
        order_edition = #{orderEdition},
        print_time = #{printTime},
        print_num = #{printNum},
        IBSN = #{IBSN},
        format = #{format},
        paper = #{paper},
        book_package = #{bookPackage},
        page_num = #{pageNum},
        word_num = #{wordNum},
        picture = #{picture},
        editor_promote = #{editorPromote},
        content_introduction = #{contentIntroduction},
        writer_introduction = #{writerIntroduction},
        basic_directory = #{basicDirection},
        media_remark = #{mediaRemark},
        update_time = NOW()
        WHERE book_id = #{bookId}
    </update>

    <select id="selectById" parameterType="int" resultType="com.example.dangdangbackend.DTO.BookDTO">
        select * from book where book_id = #{bookId}
    </select>

    <select id="searchBooksByCategory" parameterType="int" resultType="com.example.dangdangbackend.VO.BookTableVO">
        SELECT book_id,book_name,writer,publisher,origin_price,dangdang_price,publish_time,picture,stocks
        FROM book
        WHERE 1=1
        <if test="categorySecondId != null and categorySecondId != 0">
            AND category_id = #{categorySecondId}
        </if>
    </select>

    <update id="addBookSales" parameterType="java.util.List">
        update book
        <set>
            <foreach collection="list" item="item" separator=",">
                book.sales = book.sales+ #{item.count},
                stocks = stocks - #{item.count},
            </foreach>
        </set>

        where book_id in
        <foreach collection="list" item="item" open="(" close=")" separator=",">
            #{item.bookId}
        </foreach>
    </update>

    <update id="alertStatus" parameterType="int">
        UPDATE book
        SET status = CASE
                         WHEN status = 1 THEN 0
                         ELSE 1
            END,
            update_time = NOW()
        WHERE book_id = #{bookId};
    </update>

<!--    查询最新编辑推荐的书目-->
    <select id="getRecommendBooks" resultType="com.example.dangdangbackend.VO.SelectBooksVO">
        SELECT book_id,picture,book_name,dangdang_price,origin_price
        FROM book
        WHERE status = 1
        ORDER BY update_time DESC
            LIMIT 4;
    </select>

<!--    查询热销图书-->
    <select id="selectSalesMost" resultType="com.example.dangdangbackend.VO.SelectBooksVO">
        SELECT book_id,picture,book_name,dangdang_price,origin_price
        FROM book
        ORDER BY sales DESC
            LIMIT 4;
    </select>

<!--    查询最新上架图书-->
    <select id="selectRecentBooks" resultType="com.example.dangdangbackend.VO.SelectBooksVO">
        SELECT book_id,picture,book_name,dangdang_price,origin_price
        FROM book
        ORDER BY create_time DESC
        LIMIT 4;
    </select>

<!--    新书热卖-->
    <select id="selectNewBookAndSalesMost" resultType="com.example.dangdangbackend.VO.SelectBooksVO">
        SELECT book_id,picture,book_name,dangdang_price,origin_price
        FROM book
        ORDER BY
            create_time DESC,
            sales DESC
            LIMIT 4;
    </select>

</mapper>

有想要的私信我吧，留一个免费的赞吧

灰天768
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值