DOCSEARCHbyAlgolia
Submit Docs

MP Take Out System

repository·master·Indexed 19 days ago

https://github.com/yx159247/mp_take_out

A full-stack food delivery ordering system featuring a SpringBoot backend, a Vue.js admin dashboard (renren-ui v5.0.0), and a uni-app WeChat Mini Program. The project includes RBAC security, cloud storage integration via Minio, and automated API documentation via Swagger/Knife4j. It utilizes components such as mescroll-uni for high-performance scrolling, tuniaoui-wx-user-info for WeChat authorization, and uView UI for the frontend interface.

Tokens
9.9K
Snippets
35
Records
54
Agent score
66%

What's inside mp_take_out

  1. Overview of mescroll-uni

    master

    mescroll-uni is a high-performance pull-to-refresh and pull-to-load component specifically designed for uni-app. It utilizes wxs and renderjs to ensure smooth scrolling and refreshing, particularly addressing stuttering issues in Android mini-programs.

    Key features inherited from mescroll.js include:

    • Automatic pagination handling.
    • Automatic control of 'no data' states.
    • Empty layout prompts.
    • 'Back to top' button functionality.
    • Support for high-performance scrolling via wxs and renderjs on WeChat Mini-programs, App, and H5.

  2. Quickstart: Set up the MP Take Out system

    master

    The MP Take Out system is a full-stack food delivery ordering system consisting of a SpringBoot backend, a Vue.js admin dashboard, and a uni-app WeChat Mini Program.

    Deployment Order:

    1. Run the Backend project first.
    2. Run the Frontend (Admin) project.
    3. Run the Mini Program.

    Default Admin Credentials:

    • URL: http://localhost:8001
    • Username: admin
    • Password: admin

  4. Prepare the development environment

    master

    Ensure the following software and versions are installed:

    Core Dependencies:

    • JDK: 1.8
    • MySQL: 8.0.29 (Use takeout_mysql8.sql for initialization)
    • Redis: 6.0.5
    • Maven: 3.8
    • Node.js: 14.x.x (Avoid higher versions)

    Recommended Tools:

    • IDE: IntelliJ IDEA (Install Lombok plugin), WebStorm/VS Code, HBuilder X (for Mini Program), WeChat DevTools.
    • Database/Cache: Navicat, Another Redis Desktop Manager.

  5. Quick Start: Configure uView UI in uni-app

    master

    To use uView UI in your uni-app project, follow these four configuration steps:

    1. Register the library in main.js: Import uView and use it with Vue.

    2. Import base styles in App.vue: Import the main SCSS file. Ensure your <style> tag includes the lang="scss" attribute.

    3. Import global SCSS variables in uni.scss: Import the theme file to make global variables available.

    4. Configure easycom in pages.json: Set up the easycom rule to enable automatic component loading (on-demand import).

      Important: If you installed via npm, use the path uview-ui/components/u-$1/u-$1.vue. If you downloaded/manually installed the files, use the path @/uview-ui/components/u-$1/u-$1.vue.

    // 1. main.js
import uView from 'uview-ui';
Vue.use(uView);
    /* 2. App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
    /* 3. uni.scss */
@import "uview-ui/theme.scss";
    // 4. pages.json (npm installation version)
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	}
}

  6. Install and configure Minio for file storage

    master

    If you are not using cloud storage (Aliyun, Tencent, or Qiniu), you must install Minio locally using Docker. After installation, create a bucket named images.

    # Pull the image
docker pull minio/minio

# Run the container
docker run \
--name minio \
-p 9000:9000  \
-p 9090:9090  \
-d --restart=always \
-e "MINIO_ROOT_USER=minio" \
-e "MINIO_ROOT_PASSWORD=minio123" \
-v /opt/docker_minio/data:/data \
-v /opt/docker_minio/config:/root/.minio \
minio/minio server  /data --console-address ":9090" --address ":9000"

  7. Upgrade from older versions to uni_modules

    master

    If you are upgrading from a version prior to 1.3.5 to the uni_modules version, follow these steps:

    1. Delete the old @/components/mescroll-uni component.
    2. Remove the mescroll component registration from main.js.
    3. Import the latest mescroll component from the DCloud plugin market (1.3.5+ uni_modules version).
    4. Perform a global search for @/components/mescroll-uni/ and replace it with @/uni_modules/mescroll-uni/components/mescroll-uni/.
    5. Since mescroll-empty follows the easycom specification, you can delete any manual import code for mescroll-empty.vue in your pages.

  9. Use the tuniaoui-wx-user-info component

    master

    The tuniaoui-wx-user-info component provides a modal interface for WeChat user authorization.

    Implementation Steps:

    1. Import the component: Import WxUserInfoModal from the local uni_modules path.
    2. Register the component: Add it to your Vue component's components object.
    3. Control visibility: Use v-model to bind a boolean data property to show or hide the modal.
    4. Handle user data: Listen for the @updated event to receive the authorized user information object.

    Component Props:

    PropTypeDescription
    v-modelBooleanControls the visibility (opening/closing) of the user information modal.

    Component Events:

    EventArgumentDescription
    @updatedinfoEmitted when user information is successfully retrieved. The info argument contains the user data.
    <template>
	<view class="login-page">
    <!-- Trigger button -->
    <view class="submit-btn" @tap.stop="openAuthorizationModal">
      授权登录
    </view>
    
    <!-- The Modal Component -->
    <wx-user-info-modal
      v-model="showAuthorizationModal"
      @updated="updatedUserInfoEvent"
    ></wx-user-info-modal>
	</view>
</template>

<script>
  import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
  
	export default {
    components: { WxUserInfoModal },
    data() {
      return {
        showAuthorizationModal: false
      }
    },
    methods: {
      // Method to open the modal
      openAuthorizationModal() {
        this.showAuthorizationModal = true
      },
      
      // Callback when user info is received
      updatedUserInfoEvent(info) {
        console.log('Received user info:', info)
      }
    }
  }
</script>

  10. Run the WeChat Mini Program (uni-app)

    master
    1. HBuilder X Setup: Open the takeout_mp folder in HBuilder X.
    2. WeChat DevTools Setup:
      • Open WeChat DevTools settings and enable the service port (required for HBuilder X to trigger the tool automatically).
      • Update the AppId in the project to match your registered Mini Program test account.
    3. Launch: Use HBuilder X to compile and run the project into the WeChat DevTools environment.

  12. Run the Backend Management System

    master
    1. Database Setup: Create a database named takeout with UTF-8mb4 encoding and execute takeout_mysql8.sql.
    2. Configuration:
      • Edit application-dev.yml to update MySQL and Redis credentials.
      • In the renren-api module, edit application.yml to set your WeChat Mini Program appid and secret:
        weixin:
  appid: YOUR_APPID
  secret: YOUR_SECRET
    3. Build: Run mvn clean install in the root directory.
    4. Start: Run AdminApplication.java in your IDE to start the renren-admin service.
    mvn clean install