Java SpringBootとVueをベースにしたスナック販売サイトのデザイン

        時代の発展に伴い、従来のスーパーマーケットでの買い物方法では人々のニーズに応えることができなくなり、顧客にとっては買い物の列に並ぶことや買い物料金の支払いといった問題の解決が急務となっています。実店舗のスーパーマーケットは、ネット通販の競争圧力にさらされており、スーパーマーケットの経営者としては、コスト削減、省人化、顧客の買い物や計算のしやすさを求め、ネットスーパーシステムの設計・開発を提案しています。本稿では、スーパーマーケットの現状の課金形態を分析し、顧客がウェブサイトシステムを利用して支払いを行い、独自の課金方法を変更し、セルフサービス購入、タイムリーな支払い、および決済を実現するネットスーパーにおける無人販売システムの設計と開発を提案する。リアルタイムクエリ。スーパーの省人化だけでなく、顧客の精算待ち時間の短縮にもつながります。ネットワーク技術の発展と普及により、人々の生活は急速に変化してきました。特に経済社会のさまざまな分野でのコンピュータの応用により、消費者のオンラインショッピングプロセスを簡単、便利、安全、迅速にするために、オンラインショッピングは新たな人気の買い物方法となっています。

        近年、「インターネット＋」や「ビッグデータ」などのテクノロジーの急速な普及により、オンラインストアは急速な発展期を迎えており、Eコマースの出現は明らかに人々の買い物スタイルに大きな影響を与えています。初回店舗ショッピングからネットショッピングへ。B2Cオンラインショッピングモールシステムとは、インターネット上に仮想的なショッピングモールを構築し、ユーザーのオンラインショッピングニーズに応えるシステムを指します。時代の発展に伴い、従来のスーパーマーケットでの買い物方法では人々のニーズに応えることができなくなり、顧客にとっては買い物の列に並ぶことや買い物料金の支払いといった問題の解決が急務となっています。

 

 

実装された機能:

システムは、一般ユーザー、販売者、管理者の 3 つの役割に分かれています。

このシステムの機能には、ユーザーのログインと登録、注文管理、ウォレット管理、商品管理、トランザクション管理、リチャージ管理、ユーザー管理およびその他の機能が含まれます。

登録とログイン: 未登録ユーザーは、通常のユーザー登録と販売者登録を含む登録を行うことができ、アカウントを取得した後、Web サイトにログインできます。

注文管理: 一般ユーザーは自分の注文書を表示および管理でき、販売者は購入者の注文書を表示できます。

ウォレット管理: 一般ユーザーと販売者はウォレット残高やその他の情報を確認できます。

商品管理: 主に、販売者は商品をアップロード、編集、配置、削除することができ、管理者は販売者の商品をレビューでき、レビューに合格すると Web サイトのトップページに表示できます。

トランザクション管理: 主に管理者は、一般ユーザーと販売者のトランザクション情報を表示できます。

リチャージ管理: 管理者は一般ユーザーや加盟店のウォレットにリチャージでき、使いやすいです。

ユーザー管理: 管理者はユーザーの登録情報を審査し、審査に合格した場合のみ Web サイトにログインできます。

 

 

使用されているテクノロジー:

バックエンド Java 言語、SpringBoot フレームワーク、MySql データベース、Maven 依存関係管理。

フロントエンド Vue、Element-UI など

 

 コード表示の一部

/**
 * 订单(Order)表控制层
 *
 */
@Slf4j
@RestController
@RequestMapping("order")
public class OrderController extends ApiController {
    /**
     * 服务对象
     */
    @Autowired
    private OrderService orderService;
    @Autowired
    private UserService userService;
    @Autowired
    private ShopService shopService;
    @Autowired
    private MiddleCountService middleCountService;
    @Autowired
    private CommodityService commodityService;

    /**
     * 通过主键查询单条数据
     *
     * @param id 主键
     * @return 单条数据
     */
    @GetMapping("{id}")
    public R selectOne(@PathVariable Serializable id) {
        return success(this.orderService.getById(id));
    }

    @GetMapping("user/{userId}")
    public R selectByUserID(@RequestParam("page") long page, @PathVariable Serializable userId) {
        return success(this.orderService.page(new Page<>(page, 20),
                new LambdaQueryWrapper<Orders>().eq(Orders::getUserId, userId)));
    }

    @GetMapping("shop/{shopId}")
    public R selectByShopID(@RequestParam("page") long page, @PathVariable Serializable shopId) {
        return success(this.orderService.page(new Page<>(page, 20),
                new LambdaQueryWrapper<Orders>().eq(Orders::getShopId, shopId).between(Orders::getStatus,2,8)));
    }

    @GetMapping
    public R selectAll(@RequestParam("page") long page){
        return success(this.orderService.pageByStatus(new Page<>(page, 20),8));
    }

    /**
     * 修改数据
     *
     * @param orders 实体对象
     * @return 修改结果
     */
    @PostMapping("update")
    public R update(@RequestBody Orders orders) {
        if (orders.getCanReturn() == 1) {
            if (orders.getStatus() == 5 || orders.getStatus() == 6) {
                return failed("支付超过24h,无法退货");
            }
        }
        else if (orders.getStatus() == 6) {
            MiddleCount middleCount = middleCountService.getMiddleCountByOrderId(orders.getId());
            User user = userService.getById(orders.getUserId());
            user.setWallet(user.getWallet() + middleCount.getAmount());
            middleCountService.removeById(middleCount.getId());
        }
        if (orders.getStatus() == 1 || orders.getStatus() == 6) {
            Commodity commodity = commodityService.getById(orders.getCommodityId());
            commodity.setInventory(commodity.getInventory() + orders.getQuantity());
            commodityService.updateById(commodity);
        }
        return success(this.orderService.updateById(orders));
    }

    @PostMapping("pay")
    public R payOrders(@RequestBody List<Orders> orders) {
        User user = userService.getById(orders.get(0).getUserId());
        double sum = orders.stream().mapToDouble(Orders::getAmount).sum();
        if (user.getWallet() < sum) {
            return failed("余额不足");
        }
        for (Orders order : orders) {
            MiddleCount middleCount = new MiddleCount();
            middleCount.setOrderId(order.getId());
            middleCount.setUserId(user.getId());
            middleCount.setAmount(order.getAmount());
            middleCount.setSellerId(shopService.getById(order.getShopId()).getSellerId());
            middleCountService.save(middleCount);
            user.setWallet(user.getWallet() - order.getAmount());
            order.setStatus(2);
            orderService.updateById(order);
        }
        return success(userService.updateById(user));
    }
}

<template>
    <div class="order">
        <el-table :data="orders" stripe style="width: 100%">
            <el-table-column width="30"></el-table-column>
            <el-table-column prop="commodityId"  label="商品ID"  width="80"></el-table-column>
            <el-table-column prop="quantity"  label="数量"  width="80"></el-table-column>
            <el-table-column prop="amount" label="总价"  width="100"></el-table-column>
            <el-table-column  prop="creatTime" label="订单开始时间" width="200"></el-table-column>
            <el-table-column prop="endTime" label="订单结束时间"  width="200"></el-table-column>
            <el-table-column prop="status" label="标签" width="140"
                :filters="[{ text: '待支付', value: 0}, { text: '取消订单', value: 1 },
                            { text: '待发货', value: 2}, { text: '已收货', value: 4 },
                            { text: '退货审核中', value: 5 },{ text: '已退货', value: 6},
                            { text: '拒绝退货', value: 7},{ text: '已完成', value: 8} ]"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.status === 8 ? 'success' : 'primary'"
                    disable-transitions>{
   
   {scope.row.status | formatStatus }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button v-if="determineType(scope.row.status,'付款')" size="mini" type="danger" @click="handlePay(scope.row)">付款</el-button>
                    <el-button v-if="determineType(scope.row.status,'取消订单')" size="mini"  @click="handleCancelPay(scope.row)">取消订单</el-button>
                    <el-button v-if="determineType(scope.row.status,'退货')" size="mini" type="danger"  @click="handleReturnGoods(scope.row)">退货</el-button>
                    <el-button v-if="determineType(scope.row.status,'确认订单')" size="mini"  @click="handleConfirm(scope.row)">确认订单</el-button>
                    <el-button v-if="determineType(scope.row.status,'取消退货')" size="mini"  @click="handleCancelReturn(scope.row)">取消退货</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:"order",
    data(){
        return{
            orders:[],
        }
    },
    created(){
        this.axios.get("/order/user/"+this.user.id,{params:{page:1}}).then(response => {
            if(response.status == 200){
                this.orders = response.data.data.records;
            }
        })
    },
    computed:{
        ...mapState('user',['user']),
    },
    methods:{
        filterTag(value, row) {
            return row.status === value;
        },

        //付款
        handlePay(row){
            this.$confirm("确认支付?").then(() =>{
                this.axios.post("/order/pay",[row]).then(response => {
                    if(response.data.code == 0){
                        this.$message({type:'success',message:"支付成功！"})
                        row.status = 2
                    }else{
                        this.$message(response.data.msg)
                    }
                }).catch(() => {error => alert(error)});
            }).catch(()=>{})
        },

        //取消订单
        handleCancelPay(row){
            this.$confirm("确认取消清单?").then(() =>{
                 let old = row.status;
                 row.status = 1
                 let ordEndTime = row.endTime
                 row.endTime = this.formatDate(new Date(),'YY-MM-DD hh:mm:ss')
                 this.axios.post("/order/update",row).then(response => {
                    if(response.data.code == 0){
                        this.$message({type:'success',message:"取消订单成功！"})
                    }else{
                        this.$message(response.data.msg)
                        row.status = old
                        row.endTime = ordEndTime
                    }
                }).catch(() => {error => alert(error)});
            }).catch(()=>{})
        },

        //退货
        handleReturnGoods(row){
            this.$confirm("确认提交退货申请?").then(() =>{
                 let old = row.status;
                 row.status = 5
                 this.axios.post("/order/update",row).then(response => {
                    if(response.data.code == 0){
                        this.$message({type:'success',message:"申请退货成功，请等待商家回应！"})
                    }else{
                        this.$message(response.data.msg)
                        row.status = old
                    }
                }).catch(() => {error => alert(error)});
            }).catch(()=>{})
        },
        
        //取消退货
        handleCancelReturn(row){
            this.$confirm("确认取消退货? 确认后订单不能再次退货！").then(() =>{
                 let oldStatus = row.status;
                 row.status = 8
                 let ordEndTime = row.endTime
                 row.endTime = this.formatDate(new Date(),'YY-MM-DD hh:mm:ss')
                 this.axios.post("/order/update",row).then(response => {
                    if(response.data.code == 0){
                        this.$message({type:'success',message:"取消退货成功，该订单已完成！"})
                    }else{
                        this.$message(response.data.msg)
                        row.status = oldStatus
                        row.endTime = ordEndTime
                    }
                }).catch(() => {error => alert(error)});
            }).catch(()=>{})
        },
        //确认订单
        handleConfirm(row){
            this.$confirm("确认订单已完成？").then(() =>{
                 let old = row.status;
                 row.status = 8
                 let ordEndTime = row.endTime
                 row.endTime = this.formatDate(new Date(),'YY-MM-DD hh:mm:ss')
                 this.axios.post("/order/update",row).then(response => {
                    if(response.data.code == 0){
                        this.$message({type:'success',message:"确认成功，该订单已完成！"})
                    }else{
                        this.$message(response.data.msg)
                        row.status = old
                        row.endTime = ordEndTime
                    }
                }).catch(() => {error => alert(error)});
            }).catch(()=>{})
        },
        
        //判断订单处于哪一阶段，显示该阶段的操作
        determineType(status, operation){
            if(operation == "付款"){
                if(status == 0) return true
            }else if(operation == "取消订单"){
                if(status == 0) return true
            }else if(operation == "退货"){
                if(status == 4 || status == 3) return true
            }else if(operation == "取消退货"){
                if(status == 5) return true
            }else{
                if(status == 4 || status == 6 || status == 3) return true
            }
            return false
        },

        //格式化时间
//      formatDate(new Date().getTime());//2017-05-12 10:05:44
//      formatDate(new Date().getTime(),'YY年MM月DD日');//2017年05月12日
//      formatDate(new Date().getTime(),'今天是YY/MM/DD hh:mm:ss');//今天是2017/05/12 10:07:45
        formatDate(time,format='YY-MM-DD hh:mm:ss'){
            var date = new Date(time);
        
            var year = date.getFullYear(),
                month = date.getMonth()+1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
                return '0'+index;
            });开个长度为10的数组 格式为 00 01 02 03       
            var newTime = format.replace(/YY/g,year)
                                .replace(/MM/g,preArr[month]||month)
                                .replace(/DD/g,preArr[day]||day)
                                .replace(/hh/g,preArr[hour]||hour)
                                .replace(/mm/g,preArr[min]||min)
                                .replace(/ss/g,preArr[sec]||sec);        
            return newTime;         
        }
    },
    filters:{
        formatStatus(val){
            let value = "";
            switch(val) {
                case 0:
                    value = "待支付";
                    break;
                case 1:
                    value = "已取消";
                    break;
                case 2:
                    value = "待发货";
                    break;
                case 3:
                    value = "运输中";
                    break;
                case 4:
                    value = "已收货";
                    break;
                case 5:
                    value = "退货审核中";
                    break;
                case 6:
                    value = "已退货";
                    break;
                case 7:
                    value = "拒绝退货";
                    break;
                case 8:
                    value = "已完成";
                    break;                    
            }
            return value;
        }
    }
}
</script>

<style scoped>
    .order{
        width: 1030px;
        margin: 0 auto;
        margin-top: 50px;
    }
</style>

JAVA SpringBoot と vue スナック販売 Web サイトのデザインに基づいています