Ant Design Pro前端 + Golang(Gin) 后端 + 小熊派下位机 : 智能开灯

一. Ant Design Pro 做前端

1. src/pages 增加一个light_up目录, 创建新文件index.tsx

import React from 'react';
import {Switch} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

import {lightCrtl} from "./service";

const LightControl : React.FC<{}> = () => {
  return (
    <PageHeaderWrapper>
      <Switch checkedChildren="开"
              unCheckedChildren="关"
              onChange = {async (value:boolean) => {
                console.log(`trying light up... ${value}`);

                try {
                  await lightCrtl(value);
                  console.log(`control done${  value ? 1 : 0}`)
                  return true;
                } catch (error) {
                  return false;
                }
              }}
              defaultChecked />
    </PageHeaderWrapper>
      );
}

export default LightControl;

2. 创建 一个 service.ts 和 一个model.ts 文件

service.ts

import request from '@/utils/request';

export async function lightCrtl(light : boolean) {
  console.log(`lightCrtl_value ${  light}`)
  return request('/goApi/light', {
      method: 'POST',
      data: {
        "light_up" : light ? 1:0,
      },
  });
}

model.ts

import { Reducer, Effect } from 'umi';

import { lightCrtl } from './service';

export interface LightCtrlModel {
  namespace: string;
  state: boolean;
  effects: {
    lightup: Effect;
  };
  reducers: {
    changeLoginStatus: Reducer<boolean>;
  };
}

const Model: LightCtrlModel = {
  namespace: 'light',

  state: true,

  effects: {
    *lightup({ payload }, { call, put }) {
      console.log(`effects - lightup: ${  payload}`)
      const response = yield call(lightCrtl, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
    },
  },

  reducers: {
    changeLoginStatus(state, { payload }) {
      console.log("reducers: " + payload)
      return {
        ...state,
        status: payload.status,
        type: payload.type,
      };
    },
  },
};

export default Model;

4. config/config.ts 增加新的一页的路由

{
  name: 'light-control',
  icon: "heart",
  path: "/light",
  component: "./light_up"
},

5. config/proxy.ts 增加后台接口 '/goApi/'

dev: {
  '/api/': {
    target: 'https://preview.pro.ant.design',
    changeOrigin: true,
    pathRewrite: { '^': '' },
  },
  '/goApi/': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: { '^': '' },
  }
}

二. Golang - Gin后端

package main

import (
	"encoding/json"
	"fmt"
	"github.com/gin-gonic/gin"
	"github.com/goburrow/serial"
	"io/ioutil"
)

func main() {
	r := gin.Default()
	//r.GET("goApi/ping", ping)
	r.POST("goApi/light", light)
	r.Run(":8080") // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080")
}


type config struct {
	Light int `json:"light_up"`
}

func light(c *gin.Context) {
	data, _ := ioutil.ReadAll(c.Request.Body)

	var s config
	err := json.Unmarshal(data, &s)
	if nil == err {
		lightControl(s.Light)
	} else {
        fmt.Println(err)
        return
    }

	c.JSON(200, gin.H{
		"message": "light ok",
	})
}


func lightControl(cmd int) error {
	port, err := serial.Open(&serial.Config{BaudRate: 115200, DataBits: 8, StopBits: 1, Address: "COM5"})
	if err != nil {
		fmt.Println(err)
		return err
	}
	defer port.Close()

	_, err = port.Write([]byte{byte(cmd)})
	if err != nil {
		fmt.Println(err)
		return err
	}
	return nil
}

三. 小熊派

参考教程

https://mp.weixin.qq.com/s/0ep0ofCUENFVtzzqrvs2BA

1. 修改gpio.c

void MX_GPIO_Init(void)
{

  /* GPIO Ports Clock Enable */
  __HAL_RCC_GPIOC_CLK_ENABLE();
  __HAL_RCC_GPIOH_CLK_ENABLE();
  __HAL_RCC_GPIOA_CLK_ENABLE();
	__HAL_RCC_GPIOB_CLK_ENABLE();
	
	GPIO_InitTypeDef GPIO_InitStruct;
	
  /*Configure GPIO pin Output Level */
	HAL_GPIO_WritePin(GPIOB, GPIO_PIN_9, GPIO_PIN_RESET);

	/*Configure GPIO pin : PtPin */
	GPIO_InitStruct.Pin = GPIO_PIN_9;
	GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
	GPIO_InitStruct.Pull = GPIO_NOPULL;
	GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
	HAL_GPIO_Init(GPIOB, &GPIO_InitStruct);
}

2. HAL_UART_RxCpltCallback 修改

void HAL_UART_RxCpltCallback(UART_HandleTypeDef *huart)
{
    /* ???????????? */
    if(huart ->Instance == USART1)
    {
        //?????????
        //HAL_UART_Transmit(huart, &recv_buf, 1,0);
        //??????????
        HAL_UART_Receive_IT(huart, &recv_buf, 1);
        if (recv_buf == 1)
            HAL_GPIO_WritePin(GPIOB, GPIO_PIN_9, GPIO_PIN_SET);
        else
            HAL_GPIO_WritePin(GPIOB, GPIO_PIN_9, GPIO_PIN_RESET);
					//HAL_GPIO_TogglePin(GPIOB, GPIO_PIN_9);
    }
}

四. 效果

AntDesignPro控制小熊派.mp4

五. 代码

https://download.csdn.net/download/halo_hsuh/12385523

backend.zip - golang 后端代码

 frontend.zip - ant design pro 前端代码

lightUp_uart1.zip - 小熊派串口操作启用灯代码