数据库MySql
环境搭建MySql
- mysql 安装
推荐下载地址:
https://mirrors.tuna.tsinghua.edu.cn/mysql/downloads/MySQL-5.7/
mysql-5.7.36-winx64.msi 推荐版本
- Navicate 安装
推荐下载地址:
https://www.formysql.com/ 官网下载
推荐使用最新版本
基本操作
- 列表
select * from tabel
select * from device; // 查出设备表里的所有内容
- 增加数据
唯一健不能重复
INSERT INTO table (`column1`, `column2`, ....) VALUES ('value1', 'value2', ....)
INSERT INTO `device`(`uid`, `device_img`, `device_name`, `device_conn_mode`) VALUES ('0108', 'test', 'test', 'test');
- 更新数据
唯一健要指定,使用WHERE来指定是更新哪条
UPDATE table set column1 = value,column2=value where 主健=内容
UPDATE `device` SET `device_img` = 'test1', `device_name` = 'test2' WHERE `uid` = '0108'
- 删除数据
唯一健要指定,使用WHERE来指定是删除哪条
Delete from table where 主健 = 内容
DELETE FROM `device` WHERE `uid` = '0108'
Go语言
简介与IDE
Go 是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。
- https://www.runoob.com/go/go-tutorial.html
GoLand 是 Jetbrains 家族的 Go 语言 IDE，有 30 天的免费试用期。
安装也很简单访问 Gogland 的下载页面，根据你当期的系统环境三大平台（Mac、Linux、Windows）下载对应的软件。
- https://www.runoob.com/go/go-ide.html
的后端系统开发
（一）、连接 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控件使用
Node : http://kik.cn/
Npm: npm instll … npm run dev
Vue: https://cn.vuejs.org/
Axios https://www.axios-http.cn/docs/intro
组件的生命周期:
Creaed mounted 入口
Methods 方法声明
Echarts实现数据图表 https://echarts.apache.org/zh/index.html
v-charts 实现封装Echarts https://vue-echarts.github.io/guide/line.html
（一）、建立VUE项目
前端技术栈: vue2 axios ant-design-vue vue-router echarts v-charts
把已建立好的项目拉过来, 为了方便请示数据,我们直接封装了AXIOS,有关AXIOS发送请求的具体情况,这里不说了,有兴趣的可以去网上找些资料看一看,AXIOS就类似我们之前使用的工具 APIFOX, 把请求发出去到后端,后端响应数据过来,然后VUE在处理这些数据,最后通过HTML+CSS来美化页面,下边的项目的文件基本组成部分
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？今日将为大家讲解一下两者的区别以及优劣势。
现在APP研发有两个主流的方向：原生App及Web App。那麽你是否知道这两者有何区别？什么是原生APP，什么是web APP？今日将为大家讲解一下两者的区别以及优劣势。
原生APP
在智能手机上运行的App应用程序有NativeAPP（基于本地操作系统运行）与Web APP（基于手机浏览器运行），这里面Native App便是原生App的意思，于是原生App开发同样便是指基于本地操作系统的App开发服务。
现在APP研发有两个主流的方向：原生App及Web App。那麽你是否知道这两者有何区别？什么是原生APP，什么是web APP？今日将为大家讲解一下两者的区别以及优劣势。
原生APP
在智能手机上运行的App应用程序有NativeAPP（基于本地操作系统运行）与Web APP（基于手机浏览器运行），这里面Native App便是原生App的意思，于是原生App开发同样便是指基于本地操作系统的App开发服务。
原生APP: 访问与兼容性相对比较好，能够支持在线或许离线消息推送，实现本地资源访问，乃至摄像、拨号、蓝牙、功能的调取。原生APP开发有许多的优点，像原生APP就是针对不一样的平台替用户提供不一样的体验，原生应用能够节约宽带费用、访问本地资源、运行速度快，提供最好的用户体验。
使用JAVA(android)SDK进行开,开发费用高、开发速度慢、维护费用高,不适合MES系统的开发需求
Web App：Web APP能够类比在电脑上的网页。Web APP很多就是页面展示类的APP。只可以使用有限的移动硬件设备功能。很多用来页面展示，侧重在简单的交互，没办法使用很多硬件设备独特的功能。
通过移动设备上的浏览器访问，软件更新只须要更新服务器就够了，用户层面不须要做一切操作。我们的WEBAPP既可通过浏览器访问,也可通过APP访问,2个效果其实是一样的.
MES需求就是展示和下单及拍照需求,H5完全可以满足需求
（二）、用VUE来制作 H5手机端网页
经过上面讲解WEBAPP其实就是手机版的网站,制作方法与MES是一样的,只是在界面上面更适合手机观看. H5制作过程就不说了,同上边是一样的,大家可以直接看效果
在这里插入图片描述
获取数据,并实现下单与显示
（三）、把网页部署到服务器,实现URL远程访问
通过 NGINX 服务 并绑定域名,我们可以让有网的地方 就可以访问 我们的 H5!
简化部署:使用BT面板来进行服务器安装
（四）、通过 Hbuild 打包 webApp
通过 HB 建立的 WEB-VIEW 项目可以轻松把H5网页打包成 APP
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
