SpringBootとVue.jsを使用した百貨店管理システムの実装

概要

電子商取引の急速な発展に伴い、従来の百貨店の管理方法は効率が低く、情報化が不足しているという問題が明らかになっています。このため、現代の情報技術を活用して百貨店の管理効率を向上させ、商品販売、在庫管理、および顧客サービスのプロセスを最適化する必要があります。本システムは、オンラインとオフラインのリソースを統合し、商品情報の一元管理、注文処理の効率化、およびユーザーデータの正確な分析を可能にすることで、全体的な運営効率を向上させます。

本システムは、SpringBootをバックエンドフレームワークとして、Vue.jsをフロントエンド技術として使用しています。バックエンドはJavaで開発され、MySQLを使用して商品、注文、ユーザーなどの情報を保存します。これにより、データの安全性と一貫性が確保されます。システムの機能には、商品分類管理、在庫監視、注文処理、ユーザー権限管理、およびデータ分析モジュールが含まれており、複数の役割によるログインと権限分配をサポートしています。フロントエンドはVue.jsを使用して動的なインタラクションを実現し、ユーザー体験を向上させます。

データテーブル

商品情報データテーブル

商品情報データテーブルは、百貨店の各種商品の詳細情報を保存するために使用されます。商品名、分類、価格、在庫量などの属性を含みます。商品IDは主キーであり、作成時間はシステム関数によって自動生成されます。

フィールド名 タイプ 説明
product_id INT 商品ID(主キー)
product_name VARCHAR(100) 商品名
category VARCHAR(50) 商品分類
price DECIMAL(10,2) 商品価格
stock_quantity INT 在庫数量
create_time DATETIME 作成時間(自動生成)
description TEXT 商品説明

注文情報データテーブル

注文情報データテーブルは、ユーザーが購入した商品の注文データを記録します。注文ID、ユーザー情報、商品リスト、注文状態などが含まれます。注文IDは主キーであり、支払い時間はシステムによって自動的に記録されます。

フィールド名 タイプ 説明
order_id INT 注文ID(主キー)
user_id INT ユーザーID(外部キー)
product_list TEXT 商品リスト(JSON形式)
total_amount DECIMAL(10,2) 注文総額
order_status VARCHAR(20) 注文状態
payment_time DATETIME 支払い時間

ユーザー情報データテーブル

ユーザー情報データテーブルは、システムユーザーのアカウント情報、権限ロール、および個人情報を保存します。ユーザーIDは主キーであり、登録時間はシステムによって自動生成されます。

フィールド名 タイプ 説明
user_id INT ユーザーID(主キー)
username VARCHAR(50) ユーザー名
password VARCHAR(100) パスワード(暗号化保存)
role VARCHAR(20) ユーザー役割
register_time DATETIME 登録時間(自動生成)
contact_info VARCHAR(100) 連絡先情報

技術アーキテクチャ

バックエンド技術: Spring Boot

Spring Bootは、現代のJavaエンタープライズ開発の中心的なフレームワークであり、「約束优于配置」の設計哲学に基づいてアプリケーション開発モデルを再定義しています。主な特徴は以下の通りです:

  • ゼロ設定起動:自動構成メカニズムを統合し、XML設定ファイルの作成を大幅に削減
  • 組み込みサーバー:Tomcat/Jetty/Undertowを内蔵し、独立したJARパッケージのデプロイをサポート
  • 生産環境対応:Actuator監視コンポーネントを統合し、健康チェック、指標収集などのエンタープライズ特性を提供
  • マイクロサービス対応:分散アーキテクチャを天然サポートし、Spring Cloudエコシステムとシームレスに統合

フロントエンド技術: Vue.js

Vue.jsは、その漸進的フレームワーク設計と優れた開発体験により、現代のフロントエンド開発の選択肢となっています。主な特徴は以下の通りです:

  • 反応型データフロー:依存関係追跡に基づく反応型システムにより、効率的なビュー更新を実現
  • コンポーネント化アーキテクチャ:単一ファイルコンポーネント(SFC)設計により、スタイル、ロジック、テンプレートの完全なパッケージ化を実現
  • 柔軟な漸進的設計:単純なビュー層ライブラリから完全なSPAソリューションまで拡張可能
  • 豊富なエコシステム:Vue Router、Vuex/Pinia、Vue CLIなどの公式ツールチェーンが完備

主要なコード


package com;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
@MapperScan(basePackages = {"com.dao"})
public class SpringbootSchemaApplication extends SpringBootServletInitializer {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootSchemaApplication.class, args);
    }

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder applicationBuilder) {
        return applicationBuilder.sources(SpringbootSchemaApplication.class);
    }
}


package com.controller;

import java.math.BigDecimal;
import java.text.SimpleDateFormat;
import java.text.ParseException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.UserEntity;
import com.entity.view.UserView;

import com.service.UserService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MPUtil;
import com.utils.MapUtils;
import com.utils.CommonUtil;
import java.io.IOException;

/**
 * ユーザー
 * バックエンドインターフェース
 * @author 
 * @email 
 * @date 2024-04-24 17:59:31
 */
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    @Autowired
    private TokenService tokenService;

    /**
     * ログイン
     */
    @IgnoreAuth
    @RequestMapping(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, "user", "ユーザー");
        return R.ok().put("token", token);
    }

    /**
     * 登録
     */
    @IgnoreAuth
    @RequestMapping("/register")
    public R register(@RequestBody UserEntity user) {
        UserEntity existingUser = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
        if (existingUser != null) {
            return R.error("既に存在するユーザーです");
        }
        Long userId = new Date().getTime();
        user.setId(userId);
        userService.insert(user);
        return R.ok();
    }

    /**
     * ログアウト
     */
    @RequestMapping("/logout")
    public R logout(HttpServletRequest request) {
        request.getSession().invalidate();
        return R.ok("ログアウトしました");
    }

    /**
     * セッション内のユーザー情報を取得
     */
    @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);
    }

    /**
     * パスワードリセット
     */
    @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.updateById(user);
        return R.ok("パスワードをリセットしました:123456");
    }

    /**
     * バックエンドリスト
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map params, UserEntity user, HttpServletRequest request) {
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
        PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, user), params), params));
        return R.ok().put("data", page);
    }

    /**
     * フロントエンドリスト
     */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map params, UserEntity user, HttpServletRequest request) {
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
        PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, user), params), params));
        return R.ok().put("data", page);
    }

    /**
     * リスト
     */
    @RequestMapping("/lists")
    public R list(UserEntity user) {
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
        ew.allEq(MPUtil.allEQMapPre(user, "user"));
        return R.ok().put("data", userService.selectListView(ew));
    }

    /**
     * クエリ
     */
    @RequestMapping("/query")
    public R query(UserEntity user) {
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
        ew.allEq(MPUtil.allEQMapPre(user, "user"));
        UserView userView = userService.selectView(ew);
        return R.ok("ユーザーの検索に成功しました").put("data", userView);
    }

    /**
     * バックエンド詳細
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id) {
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }

    /**
     * フロントエンド詳細
     */
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id) {
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }

    /**
     * バックエンド保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody UserEntity user, HttpServletRequest request) {
        if (userService.selectCount(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) > 0) {
            return R.error("ユーザー名が既に存在します");
        }
        user.setId(new Date().getTime() + (long) Math.floor(Math.random() * 1000));
        UserEntity existingUser = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
        if (existingUser != null) {
            return R.error("ユーザーが既に存在します");
        }
        user.setId(new Date().getTime());
        userService.insert(user);
        return R.ok();
    }

    /**
     * フロントエンド保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody UserEntity user, HttpServletRequest request) {
        if (userService.selectCount(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) > 0) {
            return R.error("ユーザー名が既に存在します");
        }
        user.setId(new Date().getTime() + (long) Math.floor(Math.random() * 1000));
        UserEntity existingUser = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
        if (existingUser != null) {
            return R.error("ユーザーが既に存在します");
        }
        user.setId(new Date().getTime());
        userService.insert(user);
        return R.ok();
    }

    /**
     * 更新
     */
    @RequestMapping("/update")
    @Transactional
    public R update(@RequestBody UserEntity user, HttpServletRequest request) {
        if (userService.selectCount(new EntityWrapper<UserEntity>().ne("id", user.getId()).eq("username", user.getUsername())) > 0) {
            return R.error("ユーザー名が既に存在します");
        }
        userService.updateById(user);
        return R.ok();
    }

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

タグ: SpringBoot vue.js MySQL 権限管理 動的インタラクション

7月24日 06:38 投稿