基於Java+SpringBoot+vue+element實現前後端分離蛋糕商城系統詳細設計

語言: CN / TW / HK

前言介紹:

隨著社會的快速發展,計算機的影響是全面且深入的。人們生活水平的不斷提高,日常生活中使用者對網上蛋糕商城方面的要求也在不斷提高,網上蛋糕商城得到廣大使用者的青睞,使得網上蛋糕商城的開發成為必需而且緊迫的事情。網上蛋糕商城主要是藉助計算機,通過對網上蛋糕商城所需的資訊管理,增加使用者的選擇,同時也方便對廣大使用者資訊的及時查詢、修改以及對使用者資訊的及時瞭解。網上蛋糕商城對使用者帶來了更多的便利,該系統通過和資料庫管理系統軟體協作來滿足使用者的需求。計算機技術在現代管理中的應用,使計算機成為人們應用現代技術的重要工具。能夠有效的解決獲取資訊便捷化、全面化的問題,提高效率。 

流程分析:

系統開發流程

網上蛋糕商城系統開發時,首先進行需求分析,進而對系統進行總體的設計規劃,設計系統功能模組,資料庫的選擇等,本系統的開發流程如圖所示

圖系統開發流程圖

 使用者登入流程

為了保證系統的安全性,要使用本系統對系統資訊進行管理,必須先登陸到系統中。如圖所示。

圖登入流程圖

系統操作流程

使用者開啟並進入系統後,會先顯示登入介面,輸入正確的使用者名稱和密碼,系統自動檢測資訊,若資訊無誤,則使用者會進入系統功能介面,進行操作,否則會提示錯誤無法登入,操作流程如圖3-3所示。

圖系統操作流程圖 

功能截圖:

使用者前臺展示:

系統首頁:

使用者登陸註冊:使用者要想實現蛋糕購買操作必須進行登入系統,使用者登入介面展示如圖使用者登入介面圖所示;在使用者資訊新增介面,填寫資訊後,通過客戶端驗證後,提交資料到資料庫。後臺對使用者資訊進行儲存操作,儲存資料就,在資料庫中可以檢視到剛才錄入的資料。使用者註冊在操作上屬於資料的插入操作,使用者註冊前,需要驗證該使用者是否存在資料庫,如果有這個使用者,就不能繼續註冊

商家店鋪資訊:

店鋪詳情資訊:

蛋糕商品展示:使用者在蛋糕詳情介面可檢視傢俱詳情,可點選購買按鈕進行購買操作,蛋糕詳情介面展示如圖所示

商品詳情資訊:

加入購物車:使用者可進購物車介面檢視購物車蛋糕資訊,購物車介面展示如圖所示。點選收銀臺按鈕時進入地址填寫介面。

購買和訂單管理:在使用者點選加入購物車後,通過客戶端驗證後,提交資料到資料庫。後臺對使用者資訊進行儲存操作,儲存資料就,在資料庫中可以檢視到剛才插入的資料。

使用者在我的訂單介面可檢視訂單資訊,對已發貨的訂單可進行確認收貨操作,我的訂單介面展示如圖我的訂單介面圖所示。 

蛋糕資訊:

個人中心管理:

普通使用者後臺管理:

管理員後臺管理:

管理員要想進入系統後臺對系統進行管理操作,必須進行登入,管理員登入介面展示如圖所示

使用者管理:管理員可檢視所有會員資訊,並可修改會員資料以及刪除操作,會員管理介面展示如圖所示

蛋糕商家管理:

蛋糕型別管理:管理員可新增、編輯和刪除蛋糕分類資訊,蛋糕分類管理介面展示如圖所示點選蛋糕分類管理連結,錄入蛋糕分類資訊。在蛋糕分類資訊新增介面,填寫資訊後,通過客戶端驗證後,提交資料到資料庫。後臺對蛋糕分類資訊進行儲存操作,儲存資料就,在資料庫中可以檢視到剛才錄入的資料。錄入蛋糕分類資訊後,在蛋糕分類列表中,通過後臺查詢方法,把所有的蛋糕分類資訊讀取到集合物件,把集合物件通過html的方式顯示到介面。查詢有兩種型別,一個是查詢所有的蛋糕分類集合,也可以通過條件查詢蛋糕分類,實現的sql語句不同而已,最終實現的流程一樣。在列表中,可以對蛋糕分類資訊進行刪除,刪除前,需要提示資訊,是否確定刪除。這一步驟的提示屬於客戶端控制,當確定刪除後,呼叫伺服器端刪除方法,實現資料庫資料刪除,並重新整理蛋糕分類列表。

蛋糕商品詳情:管理員可進行蛋糕管理操作,可新增、刪除和編輯蛋糕資訊,蛋糕管理介面展示如圖所示

訂單資訊管理:管理員可進行訂單管理操作,可檢視所有訂單資訊,並可對其訂單進行發貨和刪除操作,訂單管理介面展示如圖所示。

蛋糕資訊以及系統輪播圖等維護管理:

資料設計:

本系統採用MYSQL資料庫作為資料儲存,下面介紹資料庫中的各個表的詳細資訊。

管理員表是儲存線上蛋糕銷售的使用者資訊表,其中表結構如4.1所示。

表4-1 admin管理員表

| 列名 | 解釋 | 型別 | 大小 | 主鍵 | 空 | | -------------- | --- | ------- | -- | --- | ---- | | Idyaopin | 主鍵 | int | 4 | 是主鍵 | 不能為空 | | Usernameyaopin | 使用者名稱 | varchar | 50 | 不是 | 可以為空 | | Passwordyaopin | 密碼 | varchar | 50 | 不是 | 可以為空 | | typeyaopin | 型別 | varchar | 30 | 不是 | 可以為空 |

訂單表是儲存線上蛋糕銷售的訂單資訊表,其中id為主鍵,表結構如4.2所示。

表4-2 orders訂單表

| 列名 | 解釋 | 型別 | 大小 | 主鍵 | 空 | | --------------- | ----- | ------- | ---- | --- | ---- | | idyaopin | 主鍵 | int | 11 | 是主鍵 | 不能為空 | | onumberyaopin | 訂單號 | varchar | 50 | 不是 | 可以為空 | | Spcyaopin | 商品 | varchar | 50 | 不是 | 可以為空 | | Slcyaopin | 數量 | varchar | 50 | 不是 | 可以為空 | | addressyaopin | 地址 | varchar | 50 | 不是 | 可以為空 | | teyaopin | 電話 | varchar | 13 | 不是 | 可以為空 | | emailyaopin | 使用者郵箱 | varchar | 20 | 不是 | 可以為空 | | shffyaopin | 收貨 | varchar | 60 | 不是 | 可以為空 | | zfffyaopin | 使用者支付 | varchar | 10 | 不是 | 可以為空 | | leavewordyaopin | 使用者留言 | varchar | 2000 | 不是 | 可以為空 | | addtimeyaopin | 日期 | time | | 不是 | 可以為空 | | xnameyaopin | 下單人 | varchar | 10 | 不是 | 可以為空 | | ztyaopin | 訂單的狀態 | varchar | 2 | 不是 | 可以為空 | | totalyaopin | 總價格 | varchar | 10 | 不是 | 可以為空 | | kuaidiyaopin | 快遞名稱 | varchar | 20 | 不是 | 可以為空 | | knumberyaopin | 單號 | int | 20 | 不是 | 可以為空 | | Receiveryaopin | 收貨人姓名 | varchar | 10 | 不是 | 可以為空 |

類別表是儲存蛋糕銷售的類別資訊表,其中id為主鍵,表結構如4.3所示。

表4-3 category類別表

| 列名 | 解釋 | 型別 | 大小 | 主鍵 | 空 | | ----------- | ---- | ------- | -- | --- | ---- | | idyaopin | 主鍵 | int | 4 | 是主鍵 | 不能為空 | | pidyaopin | 分類型別 | int | 6 | 不是 | 可以為空 | | titleyaopin | 分類名稱 | varchar | 60 | 不是 | 可以為空 |

商品表是儲存蛋糕銷售的商品資訊表,其中id為主鍵,表結構如4.4所示。

表4-4 goods商品表

| 列名 | 解釋 | 型別 | 大小 | 主鍵 | 空 | | ---------------- | ----- | --------- | -- | --- | ---- | | idyaopin | 主鍵 | int | 4 | 是主鍵 | 不能為空 | | pidyaopin | 型別編號 | int | 4 | 不是 | 可以為空 | | categoryidyaopin | 分類編號 | int | 4 | 不是 | 可以為空 | | pnumberyaopin | 商品的編號 | varchar | 10 | 不是 | 可以為空 | | titleyaopin | 商品的名稱 | varchar | 10 | 不是 | 可以為空 | | amountyaopin | 庫存數量 | int | 10 | 不是 | 可以為空 | | cishuyaopin | 銷量 | int | 10 | 不是 | 可以為空 | | mpriceyaopin | 市場的價格 | decimal | 10 | 不是 | 可以為空 | | spriceyaopin | 會員的價格 | decimal | 10 | 不是 | 可以為空 | | contentyaopin | 詳細介紹 | text | | 不是 | 可以為空 | | apvyaopin | 點選 | int | 4 | 不是 | 可以為空 | | imgyaopin | 圖片 | varchar | 50 | 不是 | 可以為空 | | statusyaopin | 狀態 | int | 2 | 不是 | 可以為空 | | addtimeyaopin | 新增時間 | timestamp | | 不是 | 可以為空 |

部分程式碼:

```java

/* * 訂單 * 後端介面 * @author * @email * @date 2022-03-27 17:11:41 / @RestController @RequestMapping("/orders") public class OrdersController { @Autowired private OrdersService ordersService;

/**
 * 後端列表
 */
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,OrdersEntity orders,
    HttpServletRequest request){
    if(!request.getSession().getAttribute("role").toString().equals("管理員")) {
        orders.setUserid((Long)request.getSession().getAttribute("userId"));
    }
    EntityWrapper<OrdersEntity> ew = new EntityWrapper<OrdersEntity>();
    PageUtils page = ordersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, orders), params), params));

    return R.ok().put("data", page);
}

/**
 * 前端列表
 */
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,OrdersEntity orders, HttpServletRequest request){
    EntityWrapper<OrdersEntity> ew = new EntityWrapper<OrdersEntity>();
    PageUtils page = ordersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, orders), params), params));
    return R.ok().put("data", page);
}

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

 /**
 * 查詢
 */
@RequestMapping("/query")
public R query(OrdersEntity orders){
    EntityWrapper< OrdersEntity> ew = new EntityWrapper< OrdersEntity>();
    ew.allEq(MPUtil.allEQMapPre( orders, "orders")); 
    OrdersView ordersView =  ordersService.selectView(ew);
    return R.ok("查詢訂單成功").put("data", ordersView);
}

/**
 * 後端詳情
 */
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
    OrdersEntity orders = ordersService.selectById(id);
    return R.ok().put("data", orders);
}

/**
 * 前端詳情
 */
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
    OrdersEntity orders = ordersService.selectById(id);
    return R.ok().put("data", orders);
}




/**
 * 後端儲存
 */
@RequestMapping("/save")
public R save(@RequestBody OrdersEntity orders, HttpServletRequest request){
    orders.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    //ValidatorUtils.validateEntity(orders);
    orders.setUserid((Long)request.getSession().getAttribute("userId"));
    ordersService.insert(orders);
    return R.ok();
}

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

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


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

/**
 * 提醒介面
 */
@RequestMapping("/remind/{columnName}/{type}")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
                     @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
    map.put("column", columnName);
    map.put("type", type);

    if(type.equals("2")) {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Calendar c = Calendar.getInstance();
        Date remindStartDate = null;
        Date remindEndDate = null;
        if(map.get("remindstart")!=null) {
            Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
            c.setTime(new Date()); 
            c.add(Calendar.DAY_OF_MONTH,remindStart);
            remindStartDate = c.getTime();
            map.put("remindstart", sdf.format(remindStartDate));
        }
        if(map.get("remindend")!=null) {
            Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
            c.setTime(new Date());
            c.add(Calendar.DAY_OF_MONTH,remindEnd);
            remindEndDate = c.getTime();
            map.put("remindend", sdf.format(remindEndDate));
        }
    }

    Wrapper<OrdersEntity> wrapper = new EntityWrapper<OrdersEntity>();
    if(map.get("remindstart")!=null) {
        wrapper.ge(columnName, map.get("remindstart"));
    }
    if(map.get("remindend")!=null) {
        wrapper.le(columnName, map.get("remindend"));
    }
    if(!request.getSession().getAttribute("role").toString().equals("管理員")) {
        wrapper.eq("userid", (Long)request.getSession().getAttribute("userId"));
    }


    int count = ordersService.selectCount(wrapper);
    return R.ok().put("count", count);
}

}

```

獲取原始碼:

大家點贊、收藏、關注、評論啦 、檢視主頁獲取聯絡

打卡 文章 更新 246/  365天

「其他文章」