1. Introduction

Create a new project based on the official example restful_server .

Reference 2: ES32 RESTful_server experiment_NULL_1969's blog-CSDN Blog

2. Compile, download and run the project

Compile and run directly, and the following two errors occur.

2.1 OCD debugging error esp_semihost: OpenOCD is not connected!

The reason is that the default configuration of the project is that a JTAG emulator is required to deploy the website to the host , and my test board does not have related circuits.

The test board also has no SD card circuit, but the module used is ESP32-WROVER-E (4MB), so modify the above configuration as follows and it will be normal (the website is deployed to SPI FLASH).

2.2 The directory does not exist /front/web-demo/dist doesn't exit

The reason for the error is that I did not follow the official instructions to compile the website resources.

cd path_to_this_example/front/web-demo
npm install
npm run build

2.2.1 The npm package tool used to compile website files ( currently acquired by Github ), still use the method recommended on the Internet to download and install the nodejs package containing npm (the default is enough).

2.2.2 Right-click the /front/web-demo directory of the project in VSCODE and select "Open in Integrated Terminal".

2.2.3 Copy the npm install command and press Enter to run

2.2.4 Copy the npm run build command and press Enter to run (npm run serve is used for embedded browser testing)

A successful command will generate a distdirectory containing all website files (eg html, js, css, images).

2.2.5 After one-click compilation and programming, it can run normally, and the browser can also open related webpages.

3. Analysis and research

3.1 V ue related plug-ins of Vscode

3.1.1 Volar

Volar is the official Vscode plugin for Vue and supports Vue 3.

3.1.2 ESLint

ESLint is a syntax rule and code style checking tool.

3.1.3 Live Server

Live Server is a server with real-time loading function, which can open a browser locally for debugging.

3.1.4 Prettier

Prettier is a code formatting tool.

3.2 Project structure

The whole project is divided into two parts: ESP32 program code and front end.

The ESP32 program code part is relatively simple, there are only two source files, which mainly introduce the front-end part: The following is the front-end directory, which is the directory structure of the Vue3 project.

The dist directory is the generated directory after the npm run build command is packaged. When deploying, burn the contents of this directory into the FLASH.

The project dependencies loaded by npm in the node_modules directory .

public directory public resources.

The directory where the src directory is developed.

Other files are project related.

src—>assets: static files, storage image directory

src—>plugins: plugin directory

src—>views: interface component directory

src—>App.vue: root component

src—>main.js: entry file

src—>router.js: store routing, realize interface jump

src—>store.js: store data globally

3.3 Related technologies involved

The front end is a single-page application based on Vue3, which realizes page switching through routing, and the vuex store method realizes multi-page data sharing.

3.3.1 API style

Option-style single-file components.

3.3.2 Router

The components to be routed are defined in router.js.

<router-view></router-view> loads the corresponding components in the root component .

3.3.3 Vuex store (global storage)

Read operation:

Read via this.$store.state.XXX

Write operation:

Method 1: Synchronous operation, using mutation, not recommended.

Method 2: Support asynchronous operations, use actions, pass this.$store.dispatch('xxx')触发，'xxx'为store.js中定义的异步方法。

3.3.4 AJAX axios

Axios is an encapsulation of ajax technology implemented through promise , and it needs to be rewritten as Vue's prototype attribute when used in other components.

Add code to main.js

import axios from 'axios'

Vue.prototype.$ajax = axios

Other components are used as follows

      this.$ajax
        .post("/api/v1/light/brightness", {
          red: this.red,
        })
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.log(error);
        });

ESP32 - WEB service program test (based on the official example restful_server)