我的Vue之旅 09 數據資料庫表的存儲與獲取實現 Mysql + Golang

来源:https://www.cnblogs.com/linxiaoxu/archive/2022/11/02/16852367.html
-Advertisement-
Play Games

第四期 · 將部分數據存儲至Mysql，使用axios通過golang搭建的http伺服器獲取數據。 新建資料庫 DROP DATABASE VUE; create database if not exists vue; use vue; JSON TO MYSQL JSON to MySQL (t ...


第四期 · 將部分數據存儲至Mysql，使用axios通過golang搭建的http伺服器獲取數據。

新建資料庫

DROP DATABASE VUE;
create database if not exists vue;
use vue;

JSON TO MYSQL

JSON to MySQL (transform.tools)

DROP DATABASE VUE;
create database if not exists vue;
use vue;

CREATE TABLE gameblog (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255),
  text VARCHAR(255),
  img VARCHAR(255)
);

insert into gameblog(title,text,img) values 
("Games of the Month: surrealist solitaire puzzles","What’s that? You need more games? I hear you, anonymous hapi fan.We’ve reached the part of the year when games start coming out fast","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102184434_1.jpg"),
("Games of the Month: Puzzles!","Sometimes you need a good puzzle game, just something to throw all of your attention at and ignore anything else going on. Well if that sometime for you is right now, then you’re in luck because in this Games of the Month","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102184434_2.jpg"),
("The next hapi Creator Day is July 29th!","I don’t think I’m allowed to make the entire body of this post “Thenext itch.io Creator Day is taking place on Friday July 29th.” I mean it’s true, we are hosting the next itch.io Creator Day on Friday July 29th but I should probably write more here.","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102184434_3.jpg");

select * from gameblog;


CREATE TABLE game (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255),
  text VARCHAR(255),
  img VARCHAR(255),
  price decimal(6,2) default 0,
  web boolean default 0
  # TODO 發佈時間
  # TODO 瀏覽量
  # TODO 評論量
  # TODO 熱度綜合指標
);

CREATE TABLE tag (
  id INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(255)
);

CREATE TABLE gametag (
  gameid INT,
  tagid INT
);
# TODO 外鍵

insert into game(id,title,text,img,price,web) values
(1,"Late Night Mop","A haunted house cleaning simulator.","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102193135_1.png",0,0),
(2,"an average day at the cat cafe","A haunted house cleaning simulator.","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102193135_2.png",0,1),
(3,"Corebreaker","A fast-paced action-platform shooter game with roguelike elements.","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102193135_3.png",19.99,0),
(4,"Atuel","Traverse a surrealist landscape inspired by the Atuel River in Argentina.","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221102193135_5.png",0,0);

insert into tag values
(1,"Difficult"),
(2,"Fast-Paced");

insert into gametag values
(3,1),
(3,2),
(4,1);

DELIMITER $$
CREATE PROCEDURE gamelist()
BEGIN
	# TODO
END $$
DELIMITER ;

select a.title,a.text,img,price,web,if(group_concat(c.title separator "#") is null ,"", group_concat(c.title separator "#")) as tag from game a left join gametag b on a.id = b.gameid left join tag c on b.tagid = c.id group by a.id;

本地圖片上傳OSS圖床得到靜態資源的持久地址，我使用的是PicGo圖床工具。

image-20221102191456166


SQL TO GOLANG STRUCT

線上sql轉golang struct - 球兒工具 (qetool.com)

config.go

為了方便mysql伺服器的配置，寫一個配置文件。

package mysql_vue

import "database/sql"

func GetMySQLDB() (db *sql.DB, err error) {
	dbDriver := "mysql"
	dbUser := "root"
	dbPass := "sql2008"
	dbName := "vue"
	db, err = sql.Open(dbDriver, dbUser+":"+dbPass+"@/"+dbName)
	return
}

gameblog.go

id暫時不需要，後期路由跳轉需要用到，可以先註釋。

package mysql_vue

import (
	"encoding/json"

	_ "github.com/go-sql-driver/mysql"
)

type Gameblog struct {
	// ID int64 `db:"id" json:"id"`
	Title string `db:"title" json:"title"`
	Text  string `db:"text" json:"text"`
	Img   string `db:"img" json:"img"`
}

func (Gameblog) TableName() string {
	return "gameblog"
}

func (Gameblog) QueryGameblog() (json_ []byte, err error) {
	// db, err := sql.Open("mysql", "root:sql2008@tcp(127.0.0.1:3306)/vue")
	db, err := GetMySQLDB()
	checkError(err)
	defer db.Close()
	// ^ 必須按照順序選取,下麵的Scan需要一一對應,如果多了或少了欄位會導致Scan錯誤.
	results, err := db.Query("SELECT title,text,img FROM gameblog order by id desc")
	checkError(err)
	var gameBlogs []Gameblog
	for results.Next() {
		var gameBlog Gameblog
		err = results.Scan(&gameBlog.Title, &gameBlog.Text, &gameBlog.Img)
		checkError(err)
		gameBlogs = append(gameBlogs, gameBlog)
	}
	json_, err = json.Marshal(gameBlogs)
	checkError(err)
	return json_, nil
}

http

Simplify server.go

前面我們把評論相關的請求處理代碼寫在了 server.go，移出到 comment.go，併在init初始化中綁定各個請求路徑處理函數。

comment.go

package server

import (
	"fmt"
	"net/http"
	"strconv"
)

type Comment interface {
	QueryComment(pid int64) (json_ []byte, err error)
	InsertComment(uid, pid int64, text string) (json_ []byte, err error)
	DeleteComment(id int64) error
}

func init() {
	http.HandleFunc("/insertComment", insertComment)
	http.HandleFunc("/deleteComment", deleteComment)
	http.HandleFunc("/queryComment", queryComment)
}

func insertComment(w http.ResponseWriter, r *http.Request) {
	....
}

func deleteComment(w http.ResponseWriter, r *http.Request) {
	....
}

func queryComment(w http.ResponseWriter, r *http.Request) {
	....
}

gameblog.go

介面用於確保某個資料庫對象實現了處理函數，否則編譯不通過。

package server

import (
	"fmt"
	"net/http"
)

type Gameblog interface {
	QueryGameblog() (json_ []byte, err error)
}

func init() {
	http.HandleFunc("/queryGameblog", QueryGameblog)
}

func QueryGameblog(w http.ResponseWriter, r *http.Request) {
	if r.Method != "GET" {
		fmt.Fprintf(w, "Only GET Method")
		return
	}
	json, err := gameblog.QueryGameblog()
	if err != nil {
		fmt.Fprintf(w, "Error Delete")
		return
	}
	fmt.Fprint(w, string(json))
}

server.go

package server

import (
	"log"
	"net/http"

	mysql_vue "wolflong.com/vue_http/lib/mysql"
	sq3_vue "wolflong.com/vue_http/lib/sqlite"
)

var comment Comment = sq3_vue.Comment{}
var gameblog Gameblog = mysql_vue.Gameblog{}

func StartServer() {
	err := http.ListenAndServe(":1314", nil)
	if err != nil {
		log.Fatal("ListenAndServe: ", err)
	}
}

postman test api

使用 postman 測試當前介面。

image-20221102192358579


Axios

修改 HomeView.vue 的選項卡api，在 created 鉤子函數添加axios請求訪問。

  created() {
    this.axios
      .get("queryGameblog")
      .then((response) => {
        if (!response.data) {
          this.gameBlog = [];
          return;
        }
        this.gameBlog = response.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },

image-20221102192826749


gamelist.go

查詢語句使用兩次左連接，並用 group_concat 聚合函數，聚合 tag，分解tag的過程可以從服務端遷移到客戶端進行降低性能消耗。

package mysql_vue

import (
	"encoding/json"
	"strings"
)

type Gamelist struct {
	// ID    int64    `db:"id" json:"id"`
	Title string   `db:"title" json:"title"`
	Text  string   `db:"text" json:"text"`
	Img   string   `db:"img" json:"img"`
	Price float64  `db:"price" json:"price"`
	Tag   []string `db:"tag" json:"tag"` // 新添加
	Web   bool     `db:"Web" json:"web"`
}

// type Tag struct {
// 	ID    int64  `db:"id" json:"id"`
// 	Title string `db:"title" json:"title"`
// }

func (Gamelist) QueryGamelist() (json_ []byte, err error) {
	db, err := GetMySQLDB()
	checkError(err)
	defer db.Close()
	results, err := db.Query(`select a.title,a.text,img,price,web,if(group_concat(c.title separator "#") is null ,"", group_concat(c.title separator "#")) as tag from game a left join gametag b on a.id = b.gameid left join tag c on b.tagid = c.id group by a.id;`)
	checkError(err)
	var GameList []Gamelist
	for results.Next() {
		var g Gamelist
		var tag string
		err = results.Scan(&g.Title, &g.Text, &g.Img, &g.Price, &g.Web, &tag)
		g.Tag = strings.Split(tag, "#") // 這裡暫且由服務端完成分解
		checkError(err)
		GameList = append(GameList, g)
	}
	json_, err = json.Marshal(GameList)
	checkError(err)
	return json_, nil
}

HTTP

gamelist.go

package server

import (
	"fmt"
	"net/http"
)

type Gamelist interface {
	QueryGamelist() (json_ []byte, err error)
}

func init() {
	http.HandleFunc("/queryGamelist", QueryGamelist)
}

func QueryGamelist(w http.ResponseWriter, r *http.Request) {
	if r.Method != "GET" {
		fmt.Fprintf(w, "Only GET Method")
		return
	}
	json, err := gamelist.QueryGamelist()
	if err != nil {
		fmt.Fprintf(w, "Error Delete")
		return
	}
	fmt.Fprint(w, string(json))
}

server.go

添加語句 var gamelist Gamelist = mysql_vue.Gamelist{}


image-20221102202355506

Axios

this.axios
  .get("queryGamelist")
  .then((response) => {
    if (!response.data) {
      this.latestGames.games = [];
      this.mostFeatureGames.games = [];
      return;
    }
    this.latestGames.games = response.data;
    this.mostFeatureGames.games = response.data;
  })
  .catch((err) => {
    console.log(err);
  });

image-20221102201946754



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 淺談 MySQL 新的身份驗證插件 caching_sha2_password
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 介紹 從 MySQL 8.0.4 開始，MySQL 預設身份驗證插件從 mysql_native_password 改為 caching_sha2_pa ...
  • Oracle中查詢表結構的六種方法
    首發微信公眾號：SQL資料庫運維 原文鏈接：https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • [Android開發學iOS系列] Auto Layout
    [Android開發學iOS系列] Auto Layout 內容: 介紹什麼是Auto Layout. 基本使用方法 在代碼中寫約束的方法 Auto Layout的原理 尺寸和優先順序 Auto Layout的使用細則 重要的屬性 StackView Layout Guide Performance ...
  • kotlin協程小記
    例子一： GlobalScope.launch(Dispatchers.Main) { //開啟子協程 withContext(Dispatchers.IO) { for (i in 0 until 1000) { } Log.d("MainActivityXX", "withContext-> t ...
  • ViewPager2 + TabLayout實現簡單的Tab標簽頁面
    是在此篇博文Viewpager遷移至ViewPager2實現Tab標簽頁面_Code-Porter的博客-CSDN博客的基礎上對一些細節進行了補充，請支持原作者。 使用的編譯軟體是Android Studio 2019 一、使用Androidx的依賴，同時引入TabLayout 進入Module的b ...
  • 谷歌瀏覽器插件MV3報錯"Uncaught ReferenceError: window is not defined"
    當我們使用vuex的時候，時不時能看到“更改Vuex中的store中的狀態唯一辦法就是提交mutations”，但是有沒有試想過，我們不提交mutations其實也能修改state的值？答案是可以的 我們可以直接使用如下方式； this.$store.state.num=666; 其中，這樣修改的話 ...
  • 【Web】ES6新特性
    ECMAScript簡介 ECMAScript6.0 ，簡稱 ES6 。ECMAScript 是一種由 ECMA 國際通過 ECMA-262 標準化的腳本，為 JavaScript 語言的下一代標準， 在 2015 年 6 月正式發佈。 類比於 Java ，經典程度堪比 JDK 1.8 版本。 但是 ...
  • css3寫一個載入動畫
    先製作一個正方形，讓圓點在正方形的最外側 <style> body { margin: 0; } .loading { width: 200px; height: 200px; background: skyblue; margin: 100px auto 0px; position: relati ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類