天天看點

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

目錄

​​一、前言介紹:​​

​​二、系統分析:​​

​​2.1 可行性分析​​

​​2.1.1 技術可行性​​

​​2.1.2 經濟可行性 ​​

​​2.1.3 操作可行性​​

​​2.2 系統性能分析​​

​​2.3 系統功能需求分析​​

​​2.3.1管理者用例需求如圖所示​​

​​2.3.2 使用者功能需求如圖所示:​​

​​2.3.3使用者登入注冊時序圖​​

​​2.4 系統的功能結構圖​​

​​ 2.5 系統資料庫設計​​

​​ 2.5.1 圖書回收管理實體E-R圖​​

​​2.5.2 回收預約管理實體E- R圖​​

​​ 三、功能截圖: ​​

​​3.1 登入注冊子產品:​​

​​3.2 前端首頁功能:​​

​​3.2.1 首頁子產品:​​

​​3.2.2 新書榜:​​

​​3.2.3 特價區:​​

​​3.2.4 舊書回收:​​

​​3.2.5 公告資訊:​​

​​3.2.6 個人中心:​​

​​3.2.7 背景管理:​​

​​3.2.8 客服管理:​​

​​3.3 背景管理子產品:​​

​​3.3.1 圖書分類顧客:​​

​​3.3.2 回收類型管理:​​

​​3.3.3 新書榜管理:​​

​​3.3.4 圖書詳情​​

​​3.3.6 使用者資訊管理:​​

​​3.3.7 訂單子產品管理:​​

​​3.3.8 系統子產品管理 :​​

​​四、代碼實作:​​

​​五、文檔目錄:​​

​​六、項目總結: ​​

​​八、源碼擷取:​​

一、前言介紹:

        随着現在網絡的快速發展,網上管理系統也逐漸快速發展起來,網上管理模式很快融入到了許多商家的之中,随之就産生了“網上圖書購物系統”,這樣就讓網上圖書購物系統更加友善簡單。

        對于本網上圖書購物系統的設計來說,系統開發主要是采用java語言技術,在整個系統的設計中應用MySQL資料庫來完成資料存儲,具體根據網上圖書購物系統的現狀來進行開發的,具體根據現實的需求來實作網上圖書購物系統網絡化的管理,各類資訊有序地進行存儲,進入網上圖書購物系統頁面之後,方可開始操作主要界面,主要功能包括管理者:首頁、個人中心、圖書分類管理、回收類别管理、新書榜管理、特價區管理、舊書回收管理、使用者管理、訂單評價管理、回收預約管理、圖書回收管理、管理者管理、系統管理、訂單管理。前台使用:首頁、新書榜、特價區、舊書回收、公告資訊、個人中心、背景管理、購物車、客服。使用者:首頁、個人中心、訂單評價管理、回收預約管理、圖書回收管理、我的收藏管理、訂單管理等功能。

        本系統主要講述了網上圖書購物系統開發背景,該系統它主要是對需求分析和功能需求做了介紹,并且對系統做了詳細的測試和總結。具體從業務流程、資料庫設計和系統結構等多方面的問題。望能利用先進的計算機技術和網絡技術來改變目前的網上圖書購物系統狀況,提高管理效率。

二、系統分析:

2.1 可行性分析

        可行性分析主要是針對這個項目開發是否有意義和價值觀來進行的全面分析,在分析的過程當中發現這個系統所存在的不足之處。就拿這次網上圖書購物系統的設計與實作來說主要是針對一些使用者在釋出網上圖書購物系統資訊時遇到不友善的操作和問題來進行解決問題的,最後能夠讓網上圖書購物系統開發得到最大的用處。而且對于使用者方面我們可以提供給一個簡單友善操作的網上圖書購物系統。是以我們要計算開發這個系統它能否有效的解決好這個系統經濟問題,在開發完成以後所帶來的利益是否大于開發過成當中的成本。是以可行性的研究與分析是這個系統在開發和設計上是必不可缺少的一部分。從該系統文章的全部來看,我們要從以下幾個方面進行分析:

技術可行性:在技術方面我們要從現有自己掌握的技術能否設計出我們當初所預定的目标。

經濟可行性:在這次系統開發和設計過程當中所用的經費是否大于以後給社會帶來的價值觀。

操作可行性:系統在使用者使用過程當中是否友善、簡單,能否達到大部分的使用者會使用。

2.1.1 技術可行性

        技術的可行性分析主要是針對開發該系統所用到技術進行分析,對于網上圖書購物系統的設計,可以在任何一個地方都進行使用和管理。通過目前我們所學的程式開發和語言介紹利用以上的技術開發該系統是比較合适的。而且我們在使用的資料庫也是要保證這個系統的完整性、資料安全性好的條件。

2.1.2 經濟可行性 

        經濟可行性主要是決定這個系統是否具有價值存在,是否具有開發意義,如果開發的項目不能夠節約物品和資源,反而使用的大量的人力、财力和物力不成正比甚至小于投資成本,那麼該項目是不具備開發意義和價值的。在開發本項目的初期,節約成本是最基本的,設計和開發都是由本人一人完成的,并且在開發中使我學習到了很多的知識,也開拓了自己的眼界,在通過可行性分析之後,該項目的利大于弊,是以該項目是具有開發意義和價值的。

2.1.3 操作可行性

        網上圖書購物系統的開發登入界面它是我們最常見的一種登入視窗來完成的,使用者可以使電腦來進行登入并簡單的通路不需要做任何的操作。對于此次的系統開發它主要是基于B/S結構和java技術及MySQL資料庫來完成,讓系統開發更加完美和完善,是以我們開出的系統界面更加人性化,使用者使用也更加友善。而且系統在使用過程當中也擁有友善操作、易管理等特點。

經過以上的叙述,是以開發此系統在經濟上、技術上是滿足開發條件的。

2.2 系統性能分析

1.如果我們想要對前背景處理的層次分明那麼我們就要采用B/S模式來進行系統的開發這樣就可以友善使用者的使用。

2.對于系統的開發和設計我們就要采用大家日常所需要的要求,這樣一來可以提高系統的适用性也能保證系統利用價值。對于一個系統來說一個好的架構是很重要的,因為一個好的架構它可以提高系統的穩定和高效性。

3.在系統界面上也要設計一個友善快捷的登入界面,這樣就可以提高使用者對系統操作性和适用性。

4.在系統子產品設計當中我們要對系統各個子產品進行合理簡化和設計,這樣就能提高系統使用性。

5.對于一個完整的系統來說對于它的測評和測試是比較重要的,是以我們在軟體設計程式中要保持軟體占用的時間和速度快的特點。

6.對于這個系統來說我們首先要考慮所設計出的系統它具有那些突破和展現,是以我們盡力去改進這個系統去适應使用者。

2.3 系統功能需求分析

        對于一個新的網站來說開發新網站我們就要做出這個系統的任務需求分析,因為對系統分析的品質好壞它可以決定這個網站開發的意義,俗話說得好一個好的開頭是成功的一半,對于開發這個網上圖書購物系統來說前期的分析是比較重要的,是以任務分析它可以決定這系統的開展和設計,這樣就可以保證使用者滿意性。

任務的需求它能決定這個系統開發過程當中一個重要環節,是以我們在系統開發過程所用品質是比較重要的,因為我們在系統應用過程當中不一定那會出現問題,是以我們在進行對系統分析是比較重要的,因為它可以決定這個系統功能和需求。

本課題要求實作一套網上圖書購物系統的開發與實作,主要實作功能包括管理者:首頁、個人中心、圖書分類管理、回收類别管理、新書榜管理、特價區管理、舊書回收管理、使用者管理、訂單評價管理、回收預約管理、圖書回收管理、管理者管理、系統管理、訂單管理,

前台使用:首頁、新書榜、特價區、舊書回收、公告資訊、個人中心、背景管理、購物車、客服,

使用者:首頁、個人中心、訂單評價管理、回收預約管理、圖書回收管理、我的收藏管理、訂單管理  網上圖書購物系統。

2.3.1管理者用例需求如圖所示

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

2.3.2 使用者功能需求如圖所示:

2.3.3使用者登入注冊時序圖

前端使用者發送登入請求-驗證輸入的賬号虛線-執行資料查詢-傳回查詢結果-判斷使用者是否存在-前端根據結果集執行不同的操作。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

2.4 系統的功能結構圖

        通過系統需求分析,本網上圖書購物系統主要實作功能包括;管理者:首頁、個人中心、圖書分類管理、回收類别管理、新書榜管理、特價區管理、舊書回收管理、使用者管理、訂單評價管理、回收預約管理、圖書回收管理、管理者管理、系統管理、訂單管理。使用者:首頁、個人中心、訂單評價管理、回收預約管理、圖書回收管理、我的收藏管理、訂單管理等功能。其功能結構圖如下圖所示。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

2.5 系統資料庫設計

        在該系統的資訊中,由于資料庫的支援,我們可以對資料庫進行收集、整理、更新和加工等操作。由于資料庫的存儲功能強大,是以資料庫已經成為了計算機必不可少的,一個資料庫的好壞直接影響該系統的品質和效率。一個系統中的資料庫是必不可少的,并且起着決定性因素。通過之前的系統分析,可以規劃出本系統中使用的主要等,下面設計出這幾個關鍵實體的實體關系圖。

訂單管理實體E-R圖如圖4-2所示

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

圖書回收管理實體E-R圖如圖所示

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

2.5.2 回收預約管理實體E- R圖,如圖所示:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

 三、功能截圖: 

3.1 登入注冊子產品:

通過填寫使用者名、密碼、角色等資訊,輸入完成後選擇登入即可進入網上圖書購物系統。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2 前端首頁功能:

網上圖書購物系統,在系統首頁可以檢視首頁、新書榜、特價區、舊書回收、公告資訊、個人中心、背景管理、購物車、客服等内容。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2.1 首頁子產品:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2.2 新書榜:

新書榜,在新書榜頁面可以填寫圖書名稱、分類、标簽、圖檔、作者、出版社、發行日期、價格等内容進行立即購買。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

 圖書頁面,可以收藏,加入購物車,檢視詳情以及評論和購買等操作。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

 購物車詳情,可以添加數量和删除。點選購買進行模拟支付結賬。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

選擇收貨位址後點選支付下單:

 支付成功後檢視物流狀态資訊:

3.2.3 特價區:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2.4 舊書回收:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

檢視回收詳情,點選回收預約填寫相關資訊,完成後管理者進行稽核。 

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2.5 公告資訊:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2.6 個人中心:

個人中心可以檢視修改個人資訊,檢視訂單得各種狀态,以及對收貨位址進行檢視修改和收藏進行檢視。也可以收貨位址頁面可以填寫聯系人、手機号碼、位址、預設等内容進行添加位址

3.2.7 背景管理:

普通使用者背景管理:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.2.8 客服管理:

可以對客服進行留言聊天。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3 背景管理子產品:

3.3.1 圖書分類顧客:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3.2 回收類型管理:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3.3 新書榜管理:

管理者對新書榜管理檢視圖書名稱、分類、标簽、圖檔、作者、出版社、發行日期、價格等資訊進行詳情、删除、修改、檢視等操作。

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3.4 圖書詳情

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3.6 使用者資訊管理:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3.7 訂單子產品管理:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

3.3.8 系統子產品管理 :

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

四、代碼實作:

/**
 * 新書榜
 * 後端接口
 * @author 
 * @email 
 * @date 2022-01-18 07:36:34
 */
@RestController
@RequestMapping("/xinshubang")
public class XinshubangController {
    @Autowired
    private XinshubangService xinshubangService;
    
    /**
     * 後端清單
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,XinshubangEntity xinshubang, HttpServletRequest request){

        EntityWrapper<XinshubangEntity> ew = new EntityWrapper<XinshubangEntity>();
        PageUtils page = xinshubangService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xinshubang), params), params));
        return R.ok().put("data", page);
    }
      
     /**
     * 查詢
     */
    @RequestMapping("/query")
    public R query(XinshubangEntity xinshubang){
        EntityWrapper< XinshubangEntity> ew = new EntityWrapper< XinshubangEntity>();
        ew.allEq(MPUtil.allEQMapPre( xinshubang, "xinshubang")); 
        XinshubangView xinshubangView =  xinshubangService.selectView(ew);
        return R.ok("查詢新書榜成功").put("data", xinshubangView);
    }
    
    /**
     * 後端詳情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        XinshubangEntity xinshubang = xinshubangService.selectById(id);
        xinshubang.setClicknum(xinshubang.getClicknum()+1);
        xinshubang.setClicktime(new Date());
        xinshubangService.updateById(xinshubang);
        return R.ok().put("data", xinshubang);
    }

      
    /**
     * 前端儲存
     */
    @RequestMapping("/add")
    public R add(@RequestBody XinshubangEntity xinshubang, HttpServletRequest request){
        xinshubang.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
        //ValidatorUtils.validateEntity(xinshubang);

        xinshubangService.insert(xinshubang);
        return R.ok();
    }

  
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        xinshubangService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 前端智能排序
     */
    @IgnoreAuth
    @RequestMapping("/autoSort")
    public R autoSort(@RequestParam Map<String, Object> params,XinshubangEntity xinshubang, HttpServletRequest request,String pre){
        EntityWrapper<XinshubangEntity> ew = new EntityWrapper<XinshubangEntity>();
        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 = xinshubangService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xinshubang), params), params));
        return R.ok().put("data", page);
    }


}      
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>新書榜</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
</head>                                                                                                                                                                                         </div>
        <div class="pager" id="pager" :style="{textAlign:1==1?'left':1==2?'center':'right'}"></div>
    </div>
  </div
  </div>
  <script src="../../layui/layui.js"></script>
  <script src="../../js/vue.js"></script>
  <script src="../../js/config.js"></script>
  <script src="../../modules/config.js"></script>
  <script src="../../js/utils.js"></script>
<script>
      // 擷取輪播圖 資料
      http.request('config/list', 'get', {
        page: 1,
        limit: 5
      }, function(res) {
        if (res.data.list.length > 0) {
          let swiperList = [];
          res.data.list.forEach(element => {
            if (element.value != null) {
              swiperList.push({
                img: element.value
              });
            }
          });
          vue.swiperList = swiperList;

      vue.$nextTick(() => {
        carousel.render({
          elem: '#test1',
              width: '100%',
          height: '430px',
          arrow: 'hover',
          anim: 'default',
          autoplay: 'true',
          interval: '3000',
          indicator: 'inside'
        });
      });

  //類型查詢
      categoryList();
  //類型搜尋
      $(document).on("click", ".category-search", function(e){
      vue.swiperIndex = $(this).attr('index')
        pageList(e.target.innerText);
      });
          // 擷取清單資料
        http.request('xinshubang/list', 'get', param, function(res) {
          vue.dataList = res.data.list
          // 分頁
          laypage.render({
            elem: 'pager',
            count: res.data.total,
            limit: limit,
            groups: 3,
            layout: ["prev","page","next"],
            theme: '#065279',
            jump: function(obj, first) {
              param.page = obj.curr;
              //首次不執行
              if (!first) {
                http.request('xinshubang/list', 'get', param, function(res) {
                  vue.dataList = res.data.list
                })
         }
    });
    window.xznSlide = function() {
      jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,interTime:5000});
      jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_piclist ul",effect:"leftLoop", delayTime:200, autoPlay:true,triggerTime:0});
      jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_tx ul",delayTime:0, autoPlay:true});
      jQuery(".product_list").slide({mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:5,trigger:"click",interTime:4000});
    };
  </script>
</body>
</html>      

五、文檔目錄:

基于Java+SpringBoot+vue+elementui圖書商城系統設計實作

六、項目總結: