基于Java+SpringMVC+vue+element寵物管理系統設計實作

目錄

​​ 一、前言介紹：​​

​​二、系統設計：​​

​​2.1 系統設計原則：​​

​​2.2 整體架構設計：​​

​​2.3 系統功能設計：​​

​​2.4 登入注冊時序圖設計​​

​​三、功能截圖： ​​

​​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.2.9 使用者後端：​​

​​3.3 背景管理：​​

​​3.3.1 使用者管理：​​

​​3.3.2 商品管理：​​

​​3.3.3 領養管理：​​

​​3.3.4 寄存管理：​​

​​3.3.5 訂單管理：  ​​

​​四、資料設計：​​

​​4.1 寵物領養管理實體如圖所示 ：​​

​​ 4.2 寵物挂失管理實體如圖所示：​​

​​ 4.3 訂單管理實體屬性如圖所示：​​

​​ 4.4 寵物寄存管理實體如圖所示：​​

​​五、代碼實作：​​

​​六、論文參考：​​

​​七、項目總結： ​​

​​八、源碼擷取：​​

 一、前言介紹：      

        随着現代網絡技術發展，對于寵物管理系統的設計現在正處于發展的階段，是以對的要求也是比較嚴格的，要從系統的功能和使用者實際需求來進行對系統制定開發的發展方式，依靠網絡技術的的快速發展和現代通訊技術的結合為人們帶來友善，可以友善使用者網上檢視，還可以通過這些技術實作寵物管理系統系統等過程。當今社會網際網路急速發展，寵物管理系統也在國内爆炸式的發展起來。這種網絡模式對長期使用網際網路社會産生了深遠的的影響，在這種社會環境下開發一個适用于使用者都可以操作的、簡單的、便捷的寵物管理系統的發展前景是非常好的。

        以往的寵物管理系統相關資訊管理，都是從業人員手工統計。這種方式不但時效性低，而且需要查找和變更的時候很不友善。随着科學的進步，技術的成熟，計算機資訊化也日新月異的發展，社會也已經深刻的認識，計算機功能非常的強大，計算機已經進入了人類社會發展的各個領域，并且發揮着十分重要的作用。本系統利用網絡溝通、計算機資訊存儲管理，有着與傳統的方式所無法替代的優點。比如計算檢索速度特别快、可靠性特别高、存儲容量特别大、保密性特别好、可儲存時間特别長、成本特别低等。在工作效率上，能夠得到極大地提高，延伸至服務水準也會有好的收獲，有了網絡，寵物管理系統的各方面的管理更加科學和系統，更加規範和簡便。

二、系統設計：

2.1 系統設計原則：

一個系統要在開發和維護的過程中友善使用，必須采取一定的設計原則，其主要設計原則有：

簡單性：系統功能簡單易懂，隻需要掌握基本的計算機操作能力即可使用。

針對性：針對特定的寵物管理系統使用者，沒有多餘的其他功能，使使用者可以專心使用。

實用性：能夠滿足使用者對寵物資訊方面的需求。

一緻性：設計風格、命名規範一緻，整個系統的各個功能子產品色彩、擺放位置、功能等都是一緻的。

先進性：本系統的代碼采用讀取資料的方式，友善後續開發、拓展。

2.2 整體架構設計：

2.3 系統功能設計：

主要功能設計包含：首頁、個人中心、寵物分類管理、商品分類管理、寵物用品管理、寵物商店管理、寵物領養管理、使用者管理、寵物寄存管理、使用者領養管理、寵物挂失管理、論壇管理、管理者管理、系統管理、訂單管理等資訊等

2.4 登入注冊時序圖設計

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

三、功能截圖： 

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.2.9 使用者後端：

3.3 背景管理：

管理者登入進入寵物管理系統可以檢視首頁、個人中心、寵物分類管理、商品分類管理、寵物用品管理、寵物商店管理、寵物領養管理、使用者管理、寵物寄存管理、使用者領養管理、寵物挂失管理、論壇管理、管理者管理、系統管理、訂單管理等資訊。

3.3.1 使用者管理：

3.3.2 商品管理：

寵物用品管理，在寵物用品管理頁面中可以檢視商品名稱、分類、圖檔、規格、品牌、保存期限、生産日期、價格等資訊，并可根據需要對已有寵物用品管理進行修改或删除等操作。

3.3.3 領養管理：

寵物領養管理，在寵物領養管理頁面中可以檢視寵物名稱、分類、圖檔、種類、年齡、性别、性情、寵物狀态、疫苗情況、領養費用等内容，并且根據需要對已有寵物領養管理進行添加，修改或删除等詳細操作。

3.3.4 寄存管理：

寵物寄存管理，在寵物寄存管理頁面中可以檢視寄存标題、寵物名稱、分類、圖檔、性别、年齡、商店編号、商店名稱、聯系電話、寄存日期、備注、使用者名、手機、稽核回複、稽核狀态、稽核等内容，并且根據需要對已有寵物寄存管理進行添加，修改或删除等詳細操作。

3.3.5 訂單管理：  

在訂單管理頁面中可以檢視訂單編号、商品名稱、商品圖檔、購買數量、價格/積分、折扣價格、總價格/總積分、折扣總價格、支付類型、狀态、位址等内容，并且根據需要對已有訂單管理進行添加，修改或删除等詳細操作，如圖所示

四、資料設計：

4.1 寵物領養管理實體屬性如下圖所示

寵物挂失管理實體屬性如下圖所示：

訂單管理實體屬性如下圖所示：

寵物寄存管理實體屬性如下圖所示：

五、代碼實作：

/**
     * 登入
     */
    @IgnoreAuth
    @PostMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
        if(user==null || !user.getPassword().equals(password)) {
            return R.error("賬号或密碼不正确");
        }
        String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
        return R.ok().put("token", token);
    }
    
    /**
     * 注冊
     */
    @IgnoreAuth
    @PostMapping(value = "/register")
    public R register(@RequestBody UserEntity user){
        if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
            return R.error("使用者已存在");
        }
        userService.insert(user);
        return R.ok();
    }

    /**
     * 退出
     */
    @GetMapping(value = "logout")
    public R logout(HttpServletRequest request) {
        request.getSession().invalidate();
        return R.ok("退出成功");
    }
    
    /**
     * 密碼重置
     */
    @IgnoreAuth
    @RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
        UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
        if(user==null) {
            return R.error("賬号不存在");
        }
        user.setPassword("123456");
        userService.update(user,null);
        return R.ok("密碼已重置為：123456");
    }
    
    /**
     * 清單
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,UserEntity user){
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
        PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
        return R.ok().put("data", page);
    }


    /**
     * 資訊
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 擷取使用者的session使用者資訊
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
        Long id = (Long)request.getSession().getAttribute("userId");
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }

    /**
     * 儲存
     */
    @PostMapping("/save")
    public R save(@RequestBody UserEntity user){
        if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
            return R.error("使用者已存在");
        }
        userService.insert(user);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UserEntity user){
        userService.updateById(user);//全部更新
        return R.ok();
    }

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

// 登入
            form.on('submit(login)', function(data) {
                data = data.field;
                if (!data.role) {
                    layer.msg('請選擇登入使用者類型', {
                        time: 2000,
                        icon: 5
                    });
                    return false;
                }
                http.request(data.role + '/login', 'get', data, function(res) {
                    layer.msg('登入成功', {
                        time: 2000,
                        icon: 6
                    });
                    // 登入憑證
                    localStorage.setItem('Token', res.token);
                    localStorage.setItem('role', jquery('#role:checked').attr('title'));
                    // 目前登入使用者角色
                    localStorage.setItem('userTable', data.role);
                    localStorage.setItem('sessionTable', data.role);
                    // 使用者名稱
                    localStorage.setItem('adminName', data.username);
                    http.request(data.role + '/session', 'get', {}, function(res) {
                        // 使用者id
                        localStorage.setItem('userid', res.data.id);
                        // 路徑通路設定
                        window.location.href = '../../index.html';
                    })
                    
                });
                return false
            });      

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <mvc:default-servlet-handler/>
    <!-- Controller包(自動注入) -->
    <context:component-scan base-package="com.controller"/>
    <!-- FastJson注入 -->
    <mvc:annotation-driven>
          </mvc:annotation-driven>
    <!-- 靜态資源配置 -->
    <mvc:resources mapping="/resources/**" location="/resources/"/>
    <!-- 對模型視圖名稱的解析,即在模型視圖名稱添加前字尾 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
        <!-- 攔截器配置 -->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/upload"/>
            <bean class="com.interceptor.AuthorizationInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>
    <!-- 上傳限制 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 上傳檔案大小限制為31M，31*1024*1024 -->
        <property name="maxUploadSize" value="32505856"/>
    </bean>
</beans>      

六、論文參考：

七、項目總結： 

        2021年的今天，計算機技術已經相當成熟。它的發展推動了許多行業改頭換面，計算機的出現使社會有了進一步降低人力物力和資源的方法，提高了社會的生産力，轉變了社會生産方式。目前各大寵物店都在積極備戰，發展計算機和網際網路，結合自身優勢進軍網際網路行業成為各大商家的重點項目。

        本文利用SSM和MySQL資料庫技術，通過分析現實寵物管理系統的寵物領養業務流程的基礎上，并完成了線上寵物管理系統。經調試結果顯示，本系統基本可以滿足一個線上寵物管理系統的業務需要。系統界面簡潔而有美感， 易操作，做出了自己的特點，然而因為時間倉促再加上缺乏系統開發經驗和僅依靠少數問卷調查方式，是以本系統還存在不少缺陷、不足，比如：

        1. 資料輸入的格式并沒有全部檢驗，是以很難保證資料的準确，可能有一些不符合規則的資料也可以通過檢驗。