ソースコード付きのアラカルトWeChatアプレット開発、実用的なケース

WeChat アプレットの注文の開発の概要

インターネット技術が徐々に生活に浸透するにつれて、人々の生活消費習慣は大きく変化しました。レストランでの食事に関しては、インターネット技術やモバイルインターネット技術の応用も普及しており、たとえば、数年前に登場したレストランの注文システムは、従来の注文方法を情報技術によって紙のメニューに置き換えました。第一に、この方法は顧客が注文して番号を呼び出すのに便利であり、第二に、マーチャントが人と注文を一元管理するのに便利であり、注文のエラー率を減らし、ユーザーエクスペリエンスを向上させるため、広く使用できます。使用され普及した。

モバイルインターネットの出現により、スマートフォンのエンパワーメントはより広範囲になり、Tencent WeChat は WeChat ミニプログラムをタイムリーに開始し、現在広く使用されているミニプログラムモールなど、スマートフォンユーザーが WeChat を通じて対応する情報管理と参加を行えるようにしました。商用形式は、従来の PC インターネットからモバイルインターネットに直接組み込まれ、この種の軽量 APP アプリケーションはユーザーにとって非常に便利であり、WeChat を通じて商人に多くのトラフィックをもたらします。

WeChat Mini Programs の立ち上げは、全国で 2 億人を超える WeChat ユーザーを大いに促進し、このエコシステム上に小さなビジネス帝国を構築しました。Mini Programs によって開発されたアプリケーションは、さまざまな業界に急速に浸透しました。ケータリング業界の情報アプリケーションでは、体系的な変化も起こっており、たとえば、ユーザーのセルフサービス注文機能が WeChat アプレットを介して実現され、ユーザーの利便性が大幅に向上し、注文の距離制限が短縮されています。ユーザーはレストランで携帯電話の電源を入れることができます.WeChatミニプログラムで食べ物を注文することができます.また、レストランに行く途中や自宅でも食べ物を注文することができます.柔軟で便利。このWeChatミニプログラム注文システムは、WeChatミニプログラムに関する研究に基づいて、調査とフィールド分析を経て、外食産業の情報化構築に貢献するために開発されました。

上記の WeChat ミニ番組注文システムの機能要件の分析に従って、以下の図 1-1 に示すように、WeChat ミニ番組注文システムの機能構造図を設計します。
WeChatミニプログラム開発を注文するフォアグラウンドユーザーは、WeChat アカウントをバインドしてログインすることによって実装されるアプレットにログインします。現在、テストアカウントではこの権限が有効になっていないため、開発者としてのみテストできます。フロントエンドユーザーは、システムによってリリースされた食事を携帯電話アプレットで閲覧して、完全な注文プロセスを実現できます。対応する食事をショッピングカートに追加し、購入を注文すると、関連する注文情報を表示できます。

バックグラウンドユーザーは、主に対応するビジネスデータ管理のために、対応する操作を実行するためにログインする必要があります。

ユーザー管理: フロントエンドとバックエンドのユーザー情報を管理し、対応するデータの追加、削除、変更、クエリ操作を実行できます。

食品管理：食品発注システムが公開する食品情報を管理し、対応するデータの追加、削除、修正、照会操作を行うことができます。

注文管理: フロントエンドユーザーの注文情報に対応する管理操作を実行します。

カテゴリー管理：主にフロントエンドの注文画面に表示される食品のカテゴリー管理を実現します。

システム管理：主にシステムの関連する基本情報の管理と運用を実現できます。

食べ物を注文するためのWeChatミニプログラム環境の紹介

背景開発:

ロケール: Java: jdk1.8

データベース: Mysql: mysql5.7

アプリケーションサーバー: Tomcat: tomcat8.5.31

開発ツール: IDEA または Eclipse

フロントエンド開発:

開発ツール: WeChat 開発者ツール

開発技術: WeChat ミニプログラム

全体はフロントエンドとバックエンドの別々の開発を採用し、フロントエンドとバックエンドは別々にテストされます

WeChat ミニプログラムシステムディスプレイの注文

3.1 WeChat ミニプログラム機能モジュールの表示

3.1.1 フロントページ表示

WeChatアプレット注文のフロントエンドは、主に注文操作を実現することであり、主に予約注文、メニュー閲覧、電話注文、顧客サービスなどのモジュールが含まれます。特定の操作インターフェースを下の図 4-1 に示します。
WeChatミニプログラム開発を注文する `パッケージcom.imooc.controller;

com.imooc.constant.CookieConstant をインポートします。
com.imooc.constant.RedisConstant をインポートします。
com.imooc.dataobject.SellerInfo をインポートします。
com.imooc.enums.ResultEnum をインポートします。
com.imooc.exception.SellException をインポートします。
com.imooc.form.SellerForm をインポートします。
com.imooc.repository.SellerInfoRepository をインポートします。
com.imooc.utils.CookieUtil をインポートします。

org.springframework.beans.BeanUtils をインポートします。
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

java.util.List をインポートします。
java.util.Map をインポートします。
java.util.UUID をインポートします。

javax.servlet.http.Cookie をインポートします。
import javax.servlet.http.HttpServletRequest;
javax.servlet.http.HttpServletResponse をインポートします。
import javax.validation.Valid;

lombok.extern.slf4j.Slf4j をインポートします。

@RestController
@RequestMapping(“/admin”)
@Slf4j
public class AdminUserController {

@Autowired
SellerInfoRepository repository;

/**
 * 后台用户登陆操作
 * @param phone
 * @param password
 * @param response
 * @return
 */
@GetMapping("/loginAdmin")
public String loginAdmin(@RequestParam("phone") String phone,
                         @RequestParam("password") String password,
                         HttpServletResponse response) {
    SellerInfo sellerInfo = repository.findByPhone(phone);
    log.info("商家信息={}", sellerInfo);
    if (sellerInfo != null && sellerInfo.getPassword().equals(password)) {
        String token = UUID.randomUUID().toString();
        log.info("登录成功的token={}", token);
        Integer expire = RedisConstant.EXPIRE;
        //3. 设置token至cookie
        CookieUtil.set(response, CookieConstant.TOKEN, token, expire);
        return "登录成功";
    } else {
        throw new SellException(ResultEnum.LOGIN_FAIL);
    }
}

@GetMapping("/logout")
public ModelAndView logout(HttpServletRequest request,
                           HttpServletResponse response,
                           Map<String, Object> map) {
    //1. 从cookie里查询
    Cookie cookie = CookieUtil.get(request, CookieConstant.TOKEN);
    if (cookie != null) {
        //2. 清除cookie
        CookieUtil.set(response, CookieConstant.TOKEN, null, 0);
    }
    map.put("msg", ResultEnum.LOGOUT_SUCCESS.getMessage());
    map.put("url", "/sell/seller/order/list");
    return new ModelAndView("common/success", map);
}

/*
 * 页面相关
 * */

@GetMapping("/list")
public ModelAndView list(Map<String, Object> map) {
    List<SellerInfo> categoryList = repository.findAll();
    map.put("categoryList", categoryList);
    return new ModelAndView("admin/list", map);
}

@GetMapping("/index")
public ModelAndView index(@RequestParam(value = "sellerId", required = false) Integer sellerId,
                          Map<String, Object> map) {
    SellerInfo sellerInfo = repository.findBySellerId(sellerId);
    map.put("category", sellerInfo);

    return new ModelAndView("admin/index", map);
}

/**
 * 保存/更新
 */
@PostMapping("/save")
public ModelAndView save(@Valid SellerForm form,
                         BindingResult bindingResult,
                         Map<String, Object> map) {
    log.info("SellerForm={}", form);
    if (bindingResult.hasErrors()) {
        map.put("msg", bindingResult.getFieldError().getDefaultMessage());
        map.put("url", "/sell/admin/index");
        return new ModelAndView("common/error", map);
    }
    SellerInfo sellerInfo = new SellerInfo();
    try {
        if (form.getSellerId() != null) {
            sellerInfo = repository.findBySellerId(form.getSellerId());
        }
        BeanUtils.copyProperties(form, sellerInfo);
        repository.save(sellerInfo);
    } catch (SellException e) {
        map.put("msg", e.getMessage());
        map.put("url", "/sell/admin/index");
        return new ModelAndView("common/error", map);
    }

    map.put("url", "/sell/admin/list");
    return new ModelAndView("common/success", map);
}

プロジェクト概要

WeChat アプレット注文システムのユーザーには、主に 2 つのユーザー役割があり、1 つは管理者役割、もう 1 つはフロントエンドユーザー役割であり、これら 2 つの役割の具体的な機能は次のとおりです。

管理者の役割: 管理者は、WeChat ミニプログラム注文システムのバックグラウンド管理にログインした後、対応する管理操作を実行できます。主に、ユーザー管理、食事管理、注文管理、カテゴリ管理などがあります。

フロントエンドユーザーの役割: フロントエンドユーザーは、WeChat ミニプログラム注文システムにログインした後、食品の閲覧、ショッピングカートの追加、オンライン注文、および個人注文の管理を行うことができます。

システム全体の機能が完成し、WeChat アプレット注文システムの需要分析に基づき、WeChat アプレット注文システムの概略設計を行い、これを基に詳細設計を行う。プロジェクト全体の詳細な設計が完了すると、プロジェクトのコーディングフェーズが始まります。

ソースコード付きのアラカルトWeChatアプレット開発、実用的なケース

WeChat アプレットの注文の開発の概要

おすすめ