前后端培训

已于 2022-08-22 17:02:48 修改
阅读量661 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： go 文章标签： golang
于 2022-08-17 18:37:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/z_robot/article/details/126375777
本文介绍了使用Go语言的Gin框架进行后端开发，包括连接MySQL数据库、数据表操作（增删查改）以及错误处理。同时，展示了Vue前端应用如何通过Axios与后端接口进行数据交换，实现数据的展示、修改和删除。最后提到了Android原生APP与WebAPP的区别，并探讨了Vue制作H5页面和将其部署为WebApp的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

在这里插入图片描述

3.1、Go语言WEB框架(Gin)的后端系统开发
（一）、连接 MYSQL 数据库

package main

import (
	"fmt"
	_ "github.com/go-sql-driver/mysql"
	"github.com/go-xorm/xorm"
)

func main() {
	var connStr string = "zyzhan:xxx@tcp(xxx:3306)/ioaol_huo_dong?charset=utf8&parseTime=true"

	var engine *xorm.Engine //连接数据库
	engine, err := xorm.NewEngine("mysql", connStr)
	if err != nil {
		fmt.Println(err)
		return
	} //连接测试
	if err := engine.Ping(); err != nil {
		fmt.Println(err)
		return
	}
	defer func(engine *xorm.Engine) {
		err := engine.Close()
		if err != nil {

		}
	}(engine) //延迟关闭数据库
	fmt.Println("数据库链接成功")
}

（二）、数据表结构解析,建立数据表连接

package main

import (
	"github.com/gin-gonic/gin"
	"github.com/go-xorm/xorm"
	sv "myStudy/service"
	"net/http"
)

/*


 */
func main() {
	router := gin.Default()            // 实例方法
	router.GET("/device", QueryDevice) // 实例接口
	err := router.Run("0.0.0.0:9000")  //启动HTTP 服务
	if err != nil {
		return
	}
}

// MsgReturn /*定义返回的数据格式*/
type MsgReturn struct {
	Msg  string      `json: "Msg"`
	Data interface{} `json "Data"`
}

// ModDevice MsgReturn /*定义数据库的数据格式*/
type ModDevice struct {
	Uid              string `xorm:"DEFAULT NULL varchar(45)"`
	DeviceName       string `xorm:"DEFAULT NULL varchar(45)"`
	DeviceImg        string `xorm:"DEFAULT NULL varchar(45)"`
	DeviceConnMode   string `xorm:"DEFAULT NULL varchar(45)"`
	DeviceIp         string `xorm:"DEFAULT NULL varchar(45)"`
	DevicePort       string `xorm:"DEFAULT NULL varchar(45)"`
	DeviceConnStatus string `xorm:"DEFAULT NULL varchar(45)"`
	Comment          string `xorm:"DEFAULT NULL varchar(80)"`
}

func (v *ModDevice) TableName() string {
	return "device"
}

// QueryDevice /*实现连接数据库并从数据表从取出数据*/
func QueryDevice(c *gin.Context) {
	mysql, err := sv.GetEngine()
	if err != nil {
		c.JSON(409, &MsgReturn{Msg: "Open DataBase Failed", Data: nil})
		return
	}
	defer func(mysql *xorm.Engine) {
		err := mysql.Close()
		if err != nil {
			return
		}
	}(mysql)
	mysql.ShowSQL(true)

	var collArr []*ModDevice
	err = mysql.Find(&collArr)
	c.JSON(http.StatusOK, &MsgReturn{Msg: "OK", Data: collArr})
}

（三）、建立接口,并通过APIFOX预览
在这里插入图片描述

（四）、通过 SQL 语句实现JSON格式数据返回

	err = mysql.SQL("SELECT * FROM `device`").Find(&collArr) // 通过 SQL

{
    "Msg": "OK",
    "Data": [
        {
            "Uid": "0101",
            "DeviceName": "视觉分拣机器人",
            "DeviceImg": "device1.png",
            "DeviceConnMode": "modbus",
            "DeviceIp": "1",
            "DevicePort": "9600",
            "DeviceConnStatus": "1",
            "Comment": "0:断开连接，1：连接"
        },
       
    ]
}

（五）、实现传参取数

// QueryIdDevice /* 通过参数来获取指定数据 */
func QueryIdDevice(c *gin.Context) {
	Id := c.Query("id")
	mysql, err := sv.GetEngine()
	if err != nil {
		c.JSON(409, &MsgReturn{Msg: "Open DataBase Failed", Data: nil})
		return
	}
	defer func(mysql *xorm.Engine) {
		err := mysql.Close()
		if err != nil {
			return
		}
	}(mysql)
	mysql.ShowSQL(true)

	var collArr []*ModDevice
	if Id != "" {
		err = mysql.Where("uid=?", Id).Find(&collArr) // 通过XORM
	} else {
		err = mysql.Find(&collArr) // 通过XORM
	}

	c.JSON(http.StatusOK, &MsgReturn{Msg: "OK", Data: collArr})
}

在这里插入图片描述

（六）、向数据表中添加数据

// QueryIdDevice /* 通过参数来获取指定数据 */
func QueryIdDevice(c *gin.Context) {
	resDt := &ModDevice{}
	err := c.BindJSON(resDt) // 所JSON对像解析一下

	mysql, err := sv.GetEngine()
	if err != nil {
		c.JSON(409, &MsgReturn{Msg: "Open DataBase Failed", Data: nil})
		return
	}
	defer func(mysql *xorm.Engine) {
		err := mysql.Close()
		if err != nil {
			return
		}
	}(mysql)
	mysql.ShowSQL(true)

	_, err = mysql.Cols("uid", "device_img", "device_name", "device_conn_mode", "device_ip", "device_port", "device_conn_status", "comment").InsertOne(&ModDevice{Uid: resDt.Uid, DeviceImg: resDt.DeviceImg, DeviceName: resDt.DeviceName, DeviceConnMode: resDt.DeviceConnMode, DeviceIp: resDt.DeviceIp, DevicePort: resDt.DevicePort, DeviceConnStatus: resDt.DeviceConnStatus, Comment: resDt.Comment})

	c.JSON(http.StatusOK, &MsgReturn{Msg: "OK", Data: "添加成功"})
}

在这里插入图片描述
在这里插入图片描述
失败原因: 数据类型不匹配

（七）、修改数据表中的数据

// QueryIdDevice /* 通过参数来获取指定数据 */
func QueryIdDevice(c *gin.Context) {
	resDt := &ModDevice{}
	err := c.BindJSON(resDt) // 所JSON对像解析一下

	mysql, err := sv.GetEngine()
	if err != nil {
		c.JSON(409, &MsgReturn{Msg: "Open DataBase Failed", Data: nil})
		return
	}
	defer func(mysql *xorm.Engine) {
		err := mysql.Close()
		if err != nil {
			return
		}
	}(mysql)
	mysql.ShowSQL(true)

	_, err = mysql.Where("uid=?", resDt.Uid).Update(&ModDevice{DeviceImg: resDt.DeviceImg, DeviceName: resDt.DeviceName, DeviceConnMode: resDt.DeviceConnMode, DeviceIp: resDt.DeviceIp, DevicePort: resDt.DevicePort, DeviceConnStatus: resDt.DeviceConnStatus, Comment: resDt.Comment})

	c.JSON(http.StatusOK, &MsgReturn{Msg: "OK", Data: "编辑成功"})
}

（八）、删除数据表中的数据

// QueryIdDevice /* 通过参数来获取指定数据 */
func QueryIdDevice(c *gin.Context) {
	Id := c.Query("uid")
	if Id == "" {
		c.JSON(http.StatusBadRequest, &MsgReturn{Msg: "error", Data: "没有此ID!"})
		return
	}
	mysql, err := sv.GetEngine()
	if err != nil {
		c.JSON(409, &MsgReturn{Msg: "Open DataBase Failed", Data: nil})
		return
	}
	defer func(mysql *xorm.Engine) {
		err := mysql.Close()
		if err != nil {
			return
		}
	}(mysql)
	mysql.ShowSQL(true)

	_, err = mysql.Where("uid=?", Id).Delete(&ModDevice{})

	c.JSON(http.StatusOK, &MsgReturn{Msg: "OK", Data: "删除"+Id+"成功"})
}

在这里插入图片描述

3.2、vue的前端应用UI控件使用
（一）、建立VUE项目
在这里插入图片描述
public 静态入口
assets 静态文件主要是图片
components 公用组件
http axios 请求接口封装
router 网站路由
view 网站页面
main.js 入口文件
vue.config.js 配置文件
package.json 配置文件

（二）、通过 AXIOS 与后端进行数据交换
在这里插入图片描述

定义后端接口, 并定义好接口URL

（三）、获取接口数据,并展示到页面中,例: 展示机器的工作状态

<template>
  <div class="">
    {{ list }}
  </div>
</template>

<script>
export default {
  name: "Home.vue",
  data() {
    return {
      list: []
    };
  },
  created() {
    console.log(16);
    this.getData();
  },
  methods: {
    async getData() {
      const res = await this.$Http.device();
      this.list = res["Data"];
    }
  }
};
</script>

<style scoped>

</style>

在这里插入图片描述

（四）、通过按钮修改数据库中的数据,
在这里插入图片描述

（五）、实现增加数据.
在这里插入图片描述在这里插入图片描述

（六）、实现删除
在这里插入图片描述

（七）、 通过ECHART组件实现图表

 let a = 0, b = 0;
      this.list.forEach(d => {
        if(d.DeviceConnStatus === '1') {
          a++;
        } else {
          b++;
        }
      });
      this.chartData.rows[0].value = a;
      this.chartData.rows[1].value = b;

在这里插入图片描述

第四章：移动互联APP的工业应用实践与开发
4.1、Android 与前端应用
（一）、WEBAPP( Vue )与原生APP(flutter, JAVA)
现在APP研发有两个主流的方向：原生App及Web App。那麽你是否知道这两者有何区别？什么是原生APP，什么是web APP？今日将为大家讲解一下两者的区别以及优劣势。

Web App：Web APP能够类比在电脑上的网页。Web APP很多就是页面展示类的APP。只可以使用有限的移动硬件设备功能。很多用来页面展示，侧重在简单的交互，没办法使用很多硬件设备独特的功能。
Web App：通过移动设备上的浏览器访问，软件更新只须要更新服务器就够了，用户层面不须要做一切操作。我们的WEBAPP既可通过浏览器访问,也可通过APP访问,2个效果其实是一样的.
在这里插入图片描述

（二）、用VUE来制作 H5手机端网页
经过上面讲解WEBAPP其实就是手机版的网站,制作方法与MES是一样的,只是在界面上面更适合手机观看. H5制作过程就不说了,同上边是一样的,大家可以直接看效果
在这里插入图片描述

获取数据,并实现下单与显示
（三）、把网页部署到服务器,实现URL远程访问
通过 NGINX 服务 并绑定域名,我们可以让有网的地方 就可以访问 我们的 H5!

（四）、通过 Hbuild 打包 webApp
通过 HB 建立的 WEB-VIEW 项目可以轻松把H5网页打包成 APP
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值