我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang( 二 ) _生活百科

gameblog.go接口用于确保某个数据库对象实现了处理函数，否则编译不通过。
package serverimport ( "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.gopackage serverimport ( "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 测试当前接口。

文章插图
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);});},

文章插图
gamelist.go查询语句使用两次左连接，并用 group_concat 聚合函数，聚合 tag ，分解tag的过程可以从服务端迁移到客户端进行降低性能消耗。

package mysql_vueimport (	"encoding/json"	"strings")type Gamelist struct {	// IDint64`db:"id" json:"id"`	Title string`db:"title" json:"title"`	Textstring`db:"text" json:"text"`	Imgstring`db:"img" json:"img"`	Price float64`db:"price" json:"price"`	Tag[]string `db:"tag" json:"tag"` // 新添加	Webbool`db:"Web" json:"web"`}// type Tag struct {//IDint64`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 Gamelistvar tag stringerr = 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}

HTTPgamelist.go

package serverimport (	"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{}

文章插图
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);});