一、摘要

1.1 項(xiàng)目介紹

基于JAVA+Vue+SpringBoot+MySQL的超市賬單管理系統(tǒng)，包含供應(yīng)商模塊、商品管理模塊、超市賬單模塊，還包含系統(tǒng)自帶的用戶管理、部門管理、角色管理、菜單管理、日志管理、數(shù)據(jù)字典管理、文件管理、圖表展示等基礎(chǔ)模塊，超市賬單管理系統(tǒng)基于角色的訪問控制，給超市管理員、店長使用，可將權(quán)限精確到按鈕級(jí)別，您可以自定義角色并分配權(quán)限，系統(tǒng)適合設(shè)計(jì)精確的權(quán)限約束需求。

1.2 項(xiàng)目錄屏

二、功能模塊

本管理系統(tǒng)主要是適用于中小型超市賬單的管理，既要能讓用戶能夠快速上手，也要保證基本功能的齊全，還要易于系統(tǒng)的維護(hù)。所以一個(gè)比較成熟的超市賬單管理系統(tǒng)應(yīng)包含以下幾個(gè)模塊：

1. 登錄模塊：用戶通過賬號(hào)密碼可以登入不用權(quán)限的賬號(hào)。
2. 用戶管理模塊：查看用戶信息、修改用戶信息、批量或單個(gè)刪除用戶、增加用戶信息、禁用和啟動(dòng)用戶賬號(hào)功能可以在該模塊實(shí)現(xiàn)。
3. 供應(yīng)商管理模塊：查看供應(yīng)商信息、修改供應(yīng)商信息、批量或單獨(dú)刪除供應(yīng)商、增加供應(yīng)商的功能在該模塊實(shí)現(xiàn)。
4. 賬單管理模塊：查看賬單信息、修改賬單信息、批量或單獨(dú)刪除賬單、增加賬單的功能在該模塊實(shí)現(xiàn)。
5. 部門管理模塊：可以建立不同的部門，批量或單獨(dú)刪除某一個(gè)部門，修改部門信息以及可以給某個(gè)部門設(shè)立一個(gè)或者多個(gè)子部門。
6. 權(quán)限管理模塊：不同賬號(hào)所擁有的權(quán)限可以該模塊進(jìn)行分配。
7. 日志管理模塊：系統(tǒng)操作人員登陸系統(tǒng)的時(shí)間會(huì)被記錄在該管理模塊下。
8. 退出登陸模塊:退出當(dāng)前賬戶到登陸頁面。

三、系統(tǒng)設(shè)計(jì)

本系統(tǒng)主要分為前端和后端兩個(gè)組成部分，在前端我將采用當(dāng)下比較流行的技術(shù)VUE和Element UI搭建起簡潔大方的前端頁面，方便用戶操作和用戶的體驗(yàn)感。

在后端我將采用當(dāng)下比較流行的技術(shù)SpringBoot來完成開發(fā)，因?yàn)镾pringBoot兼容了許多框架，可以幫助我快速搭建起整個(gè)系統(tǒng)的框架，其中最核心的框架就是SSM框架，當(dāng)一個(gè)用戶在網(wǎng)站頁面上發(fā)送請(qǐng)求，控制層接收到用戶的請(qǐng)求，調(diào)用業(yè)務(wù)層去實(shí)現(xiàn)，業(yè)務(wù)管理層調(diào)用不同的執(zhí)行方法去處理，然后業(yè)務(wù)層調(diào)用DAO層去數(shù)據(jù)庫里進(jìn)行增刪改查的操作，最后將數(shù)據(jù)結(jié)果給用戶反饋。

在數(shù)據(jù)庫設(shè)計(jì)方面，如何設(shè)計(jì)一個(gè)合理安全的數(shù)據(jù)庫，首先要考慮的就是對(duì)一個(gè)數(shù)據(jù)庫中所有表的屬性設(shè)置，包括屬性的的長度、類型、主外鍵的設(shè)置、索引的設(shè)置等等。然后在實(shí)際設(shè)計(jì)開發(fā)系統(tǒng)的過程中可以參考一些成熟典型的系統(tǒng)的設(shè)計(jì)思想，可以幫助我們大大提高程序的可行性、完整性和安全性。

3.1 總體設(shè)計(jì)

.

根據(jù)本系統(tǒng)的業(yè)務(wù)功能需求分析，設(shè)計(jì)出該系統(tǒng)的簡易功能設(shè)計(jì)圖（如圖3-1），首先在登陸界面輸入賬號(hào)密碼，然后就可以進(jìn)入主界面，根據(jù)不同的賬號(hào)權(quán)限，能呈現(xiàn)出不同的系統(tǒng)界面。在登陸界面中包括了員工管理功能，商品管理功能，供應(yīng)商管理功能，賬單管理功能、部門管理功能、系統(tǒng)操作權(quán)限管理功能和系統(tǒng)日志輸出功能。增刪改查四種操作均可在員工管理界面，商品管理界面，供應(yīng)商管理界面，賬單管理、部門管理界面中使用。在權(quán)限管理界面，如果是管理員身份登陸可以給用戶賦予權(quán)限，也可以撤銷權(quán)限。當(dāng)要查看一些操作記錄和用戶登陸系統(tǒng)時(shí)間的操作可以在系統(tǒng)監(jiān)控功能模塊中的日志輸出查看。

3.2 前端設(shè)計(jì)

一個(gè)簡單的前端頁面構(gòu)成三個(gè)基本要素：HTML、CSS、JavaScript。有了這三要素就可以完成一個(gè)前端頁面的開發(fā)。Vue框架同樣兼容這三個(gè)要素，并且如果真要自己寫出一個(gè)美觀的頁面是十分麻煩的，但Vue支持使用其他的組件庫，例如Element UI，是一款網(wǎng)站快速成型工具，上面有許多美觀的頁面組件。相比于傳統(tǒng)的前端頁面開發(fā)，是通過操作DOM，形成基本的視圖結(jié)構(gòu)，然后再通過CSS的修飾，讓頁面變得美觀，最后在涉及交互部分，就需要用到JavaScript來接收用戶請(qǐng)求，并通事件響應(yīng)來進(jìn)行交互操作，并且在事件的處理函數(shù)中涉及到各種數(shù)據(jù)的修改。我們知道一個(gè)網(wǎng)站包含的頁面元素是非常多的，在結(jié)構(gòu)和很龐大的頁面中，如果視圖和數(shù)據(jù)都混合在一起，要想操作其中的一個(gè)元素的難度就會(huì)很大，正所謂牽一發(fā)而動(dòng)全身。而Vue的核心在于它主關(guān)注視圖層，它將視圖單獨(dú)剝離出來，主要目的就是分離視圖層和數(shù)據(jù)層，而實(shí)現(xiàn)分離是通過MVVM模式，MVVM的核心是ViewModel層，它能夠隨時(shí)觀察到數(shù)據(jù)的變化,并對(duì)視圖對(duì)應(yīng)的內(nèi)容實(shí)時(shí)進(jìn)行更新,當(dāng)視圖發(fā)生改變的同時(shí)，數(shù)據(jù)也會(huì)隨之發(fā)生變化,這就是雙向綁定。

3.3 后端設(shè)計(jì)

在后端方面我將選擇基于SpringBoot框架來進(jìn)行開發(fā)。之所以選擇用框架來開發(fā)是學(xué)過Javaweb的同學(xué)都知道，開發(fā)一個(gè)web應(yīng)用，從最初開始接觸Servlet結(jié)合Tomcat服務(wù)器，然后再通過手動(dòng)連接JDBC來進(jìn)行數(shù)據(jù)連接，在IDEA軟件上寫SQL查詢語句。這樣就會(huì)導(dǎo)致一個(gè)問題，會(huì)產(chǎn)生大量繁雜冗余的代碼，并且代碼出錯(cuò)率高，不容易排查，大大加長了開發(fā)時(shí)間。

所以我將運(yùn)用框架來開發(fā)系統(tǒng)，利用SpringBoot框架進(jìn)行系統(tǒng)開發(fā)，可以快速搭建出系統(tǒng)的框架，只需要我們把依賴和配置文件導(dǎo)入，剩下的就是編寫業(yè)務(wù)邏輯功能。經(jīng)過2個(gè)月我自己對(duì)Spring的學(xué)習(xí)研究，總結(jié)出SpringBoot框架
開發(fā)便捷的原因是從以下三個(gè)策略出發(fā)。

1. SpringBoot可以通過啟動(dòng)器來管理項(xiàng)目所需要的依賴，無需指定依賴的版本。
2. SpringBoot利用幾個(gè)核心注解做到了根據(jù)添加的依賴進(jìn)行自動(dòng)配置，不需要配置xml文件。
3. SpringBoot內(nèi)置了許多項(xiàng)目所需要的功能，例如數(shù)據(jù)監(jiān)控、用戶認(rèn)證。

在還沒有使用SpringBoot框架之前，我也早早聽說了這個(gè)框架厲害的傳聞，并且一直流傳著一句話“約定大于配置”,在還沒有深入學(xué)習(xí)之前，我還是對(duì)這句話一知半解，但隨著深入學(xué)習(xí)，我開始慢慢理解這句話的含義，簡單的理解來說就是在使用SpringBoot框架的項(xiàng)目中，在沒有規(guī)定配置的地方，都是采用默認(rèn)的配置，而開發(fā)人員僅僅需要做的就是當(dāng)有特殊需求的時(shí)候，通過config模塊中根據(jù)需求自定義配置就可以了，這樣就幫助開發(fā)人員大大減少了配置工作，這就是所謂的“約定”。

并且SpringBoot集成了很多框架配置和應(yīng)用模板，當(dāng)需要什么框架和模板，直接開箱就能使用。但在SpringBoot項(xiàng)目開發(fā)中，本質(zhì)最主要的還是SSM框架，SSM框架就是Spring、SpringMVC、Mybatis，在使用SpringBoot時(shí)，它就會(huì)默認(rèn)配置好這個(gè)框架的使用方式。整個(gè)系統(tǒng)的執(zhí)行流程（如圖4-1），從客戶端發(fā)送請(qǐng)求到服務(wù)器，控制層接收到用戶的請(qǐng)求，調(diào)用業(yè)務(wù)層去實(shí)現(xiàn)，業(yè)務(wù)管理層調(diào)用不同的執(zhí)行方法去處理，業(yè)務(wù)層調(diào)用DAO層去數(shù)據(jù)庫里進(jìn)行增刪改查的操作，然后將數(shù)據(jù)結(jié)果反饋給用戶。

四、系統(tǒng)展示

五、核心代碼

5.1 查詢供應(yīng)商

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "分頁獲取供應(yīng)商")
public Result<IPage<Supplier>> getByPage(@ModelAttribute Supplier supplier, @ModelAttribute PageVo page){

    QueryWrapper<Supplier> qw = new QueryWrapper<>();
    if(StrUtil.isNotBlank(supplier.getAddress())) {
        qw.eq("address",supplier.getAddress());
    }
    if(StrUtil.isNotBlank(supplier.getMobile())) {
        qw.eq("mobile",supplier.getMobile());
    }
    if(StrUtil.isNotBlank(supplier.getName())) {
        qw.eq("name",supplier.getName());
    }
    if(StrUtil.isNotBlank(supplier.getType())) {
        qw.eq("type",supplier.getType());
    }
    IPage<Supplier> data = iSupplierService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<Supplier>>().setData(data);
}

5.2 查詢商品

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查詢商品")
public Result<IPage<Commodity>> getByPage(@ModelAttribute Commodity commodity, @ModelAttribute PageVo page){
    QueryWrapper<Commodity> qw = new QueryWrapper<>();
    if(StrUtil.isNotBlank(commodity.getName())) {
        qw.eq("name",commodity.getName());
    }
    if(StrUtil.isNotBlank(commodity.getType())) {
        qw.eq("type",commodity.getType());
    }
    if(StrUtil.isNotBlank(commodity.getStock())) {
        qw.eq("stock",commodity.getStock());
    }
    if(StrUtil.isNotBlank(commodity.getSupplierId())) {
        qw.eq("supplier_id",commodity.getSupplierId());
    }
    if(StrUtil.isNotBlank(commodity.getUnitPrice())) {
        qw.eq("unit_price",commodity.getUnitPrice());
    }
    IPage<Commodity> data = iCommodityService.page(PageUtil.initMpPage(page),qw);
    for (Commodity com : data.getRecords()) {
        Supplier supplier = iSupplierService.getById(com.getSupplierId());
        if(supplier != null) {
            com.setSupplierName(supplier.getName());
        }
    }
    return new ResultUtil<IPage<Commodity>>().setData(data);
}

5.3 新增超市賬單

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增賬單")
public Result<Bill> insert(Bill bill) {
    bill.setDateTime(DateUtils.getCompleteNowDate());
    bill.setUserId(securityUtil.getCurrUser().getId());
    String price = bill.getPrice();
    String number = bill.getNumber();
    Double sum = Double.parseDouble(price) * Double.parseDouble(number);
    sum = Math.ceil(sum * 10.0) / 10.0;
    bill.setSum(sum + "");
    if(iBillService.saveOrUpdate(bill)){
        return new ResultUtil<Bill>().setData(bill);
    }
    return new ResultUtil<Bill>().setErrorMsg("新增賬單失敗");
}

5.4 編輯超市賬單

@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "編輯賬單")
public Result<Bill> update(Bill bill) {
    if(iBillService.saveOrUpdate(bill)){
        return new ResultUtil<Bill>().setData(bill);
    }
    return new ResultUtil<Bill>().setErrorMsg("編輯賬單失敗");
}

5.5 查詢超市賬單

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查詢賬單")
public Result<IPage<Bill>> getByPage(@ModelAttribute Bill bill, @ModelAttribute PageVo page){
    QueryWrapper<Bill> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(bill.getUserId())) {
        qw.eq("user_id",bill.getUserId());
    }
    if(!ZwzNullUtils.isNull(bill.getCommodityId())) {
        qw.eq("commodity_id",bill.getCommodityId());
    }
    if(!ZwzNullUtils.isNull(bill.getSupplierId())) {
        qw.eq("supplier_id",bill.getSupplierId());
    }
    IPage<Bill> data = iBillService.page(PageUtil.initMpPage(page),qw);
    for (Bill bill1 : data.getRecords()) {
        Supplier supplier = iSupplierService.getById(bill1.getSupplierId());
        if(supplier != null) {
            bill1.setSupplierName(supplier.getName());
        } else {
            bill1.setSupplierName("無");
        }
        Commodity commodity = iCommodityService.getById(bill1.getCommodityId());
        if(commodity != null) {
            bill1.setCommodityName(commodity.getName());
        } else {
            bill1.setCommodityName("無");
        }
        User user = iUserService.getById(bill1.getUserId());
        if(user != null) {
            bill1.setUserName(user.getNickname());
        } else {
            bill1.setUserName("無");
        }
    }
    return new ResultUtil<IPage<Bill>>().setData(data);
}

六、免責(zé)說明

• 本項(xiàng)目僅供個(gè)人學(xué)習(xí)使用，商用授權(quán)請(qǐng)聯(lián)系博主，否則后果自負(fù)。
• 博主擁有本軟件構(gòu)建后的應(yīng)用系統(tǒng)全部內(nèi)容所有權(quán)及獨(dú)立的知識(shí)產(chǎn)權(quán)，擁有最終解釋權(quán)。
• 如有問題，歡迎在倉庫 Issue 留言，看到后會(huì)第一時(shí)間回復(fù)，相關(guān)意見會(huì)酌情考慮，但沒有一定被采納的承諾或保證。

下載本系統(tǒng)代碼或使用本系統(tǒng)的用戶，必須同意以下內(nèi)容，否則請(qǐng)勿下載！

1. 出于自愿而使用/開發(fā)本軟件，了解使用本軟件的風(fēng)險(xiǎn)，且同意自己承擔(dān)使用本軟件的風(fēng)險(xiǎn)。
2. 利用本軟件構(gòu)建的網(wǎng)站的任何信息內(nèi)容以及導(dǎo)致的任何版權(quán)糾紛和法律爭議及后果和博主無關(guān)，博主對(duì)此不承擔(dān)任何責(zé)任。
3. 在任何情況下，對(duì)于因使用或無法使用本軟件而導(dǎo)致的任何難以合理預(yù)估的損失（包括但不僅限于商業(yè)利潤損失、業(yè)務(wù)中斷與業(yè)務(wù)信息丟失），博主概不承擔(dān)任何責(zé)任。
4. 必須了解使用本軟件的風(fēng)險(xiǎn)，博主不承諾提供一對(duì)一的技術(shù)支持、使用擔(dān)保，也不承擔(dān)任何因本軟件而產(chǎn)生的難以預(yù)料的問題的相關(guān)責(zé)任。

文章來源地址http://www.zghlxwxcb.cn/news/detail-788270.html

到了這里，關(guān)于【開源】基于JAVA+Vue+SpringBoot的超市賬單管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！