我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin( 二 ) _生活百科

structs/post.go 结构体分类使用在线sql转golang struct 生成 post 结构体保存为post.go 。并将之前各个结构体分别放入 structs 文件夹下统一管理。
package structstype Post struct { IDint64`db:"id" json:"id"` Bgcolorstring `db:"bgcolor" json:"bgcolor"` Textcolor string `db:"textcolor" json:"textcolor"` Headimgstring `db:"headimg" json:"headimg"` Videosrcstring `db:"videosrc" json:"videosrc"` Imgsstring `db:"imgs" json:"imgs"` Htmlstring `db:"html" json:"html"`}controllers/comment.go 迁移评价机制

文章插图

package controllerimport (	"time"	"github.com/gin-gonic/gin"	"wolflong.com/vue_gin/structs"	"wolflong.com/vue_gin/variable")func QueryComment(c *gin.Context) {	db := variable.DB	pid := c.Query("pid")	rows, err := db.Query(`select id,uid,text,pid,date,name from comments join users using(uid) where pid = ?`, pid)	checkError(err)	defer rows.Close()	var res []structs.Comment	for rows.Next() {var c structs.Commenterr = rows.Scan(&c.ID, &c.UID, &c.Text, &c.Pid, &c.Date, &c.Name)checkError(err)res = append(res, c)	}	c.JSON(200, res)}func DeleteComment(c *gin.Context) {	db := variable.DB	cid := c.PostForm("id")	res, err := db.Exec("delete from comments where id = ?", cid)	checkError(err)	n, err := res.RowsAffected()	checkError(err)	if n == 0 {c.JSON(501, gin.H{"message": "failure",})c.Abort()return	}	c.JSON(200, gin.H{"message": "success",	})}func InsertComment(c *gin.Context) {	db := variable.DB	uid := c.PostForm("uid")	pid := c.PostForm("pid")	text := c.PostForm("text")	res, err := db.Exec(`INSERT INTO comments(uid,text,pid,date) values(?,?,?,?)`,uid, text, pid, time.Now().UnixMilli())	checkError(err)	n, err := res.RowsAffected()	checkError(err)	if n == 0 {c.JSON(501, gin.H{"message": "failure",})c.Abort()return	}	n, err = res.LastInsertId()	checkError(err)	rows, err := db.Query(`select id,uid,text,pid,date,name from comments join users using(uid) where id = ?`, n)	checkError(err)	defer rows.Close()	rows.Next()	var cm structs.Comment	rows.Scan(&cm.ID, &cm.UID, &cm.Text, &cm.Pid, &cm.Date, &cm.Name)	c.JSON(200, cm)}

controllers/post.go 获取帖子信息

文章插图

package controllerimport (	"github.com/gin-gonic/gin"	"wolflong.com/vue_gin/structs"	"wolflong.com/vue_gin/variable")func QueryPost(c *gin.Context) {	db := variable.DB	pid := c.Query("pid")	rows, err := db.Query(`select id,bgcolor,textcolor,headimg,videosrc,imgs,html from posts where id = ?`, pid)	checkError(err)	defer rows.Close()	var Post []structs.Post	rows.Next()	var g structs.Post	err = rows.Scan(&g.ID, &g.Bgcolor, &g.Textcolor, &g.Headimg, &g.Videosrc, &g.Imgs, &g.Html)	checkError(err)	Post = append(Post, g)	c.JSON(200, Post)}

router/router.go 配置路由组

package routerimport (	"github.com/gin-gonic/gin"	"wolflong.com/vue_gin/controller")func Router(r *gin.Engine) {	r.GET("/", controller.HelloWorld)	r.GET("/queryGameblog", controller.QueryGameBlog)	r.GET("/queryGamelist", controller.QueryGameList)	comment := r.Group("/comment")	{comment.GET("/query", controller.QueryComment)comment.POST("/delete", controller.DeleteComment)comment.POST("/insert", controller.InsertComment)	}	post := r.Group("/post")	{post.GET("/query", controller.QueryPost)	}}

main.go 启动Gin

package mainimport (	"github.com/gin-gonic/gin"	"wolflong.com/vue_gin/router"	"wolflong.com/vue_gin/utils")func init() {	utils.MySqlDB()}func main() {	r := gin.Default()	router.Router(r)	r.Run(":1314")}

GameView 详情页

文章插图
代码仓库vue10" rel="external nofollow noreferrer">alicepolice/vue10 (github.com)
router/index.ts 动态路由修改路由代码，使其变为动态路由。
{path: '/gameView/:pid',name: 'gameView',component: GameViewVue},views/GameView.vuethis.imgs = JSON.parse(data.imgs);传入解析的字符串数组数据必须是双引号 ["1","2","3"]，否则会出错。
在开头对路由参数this.$route.params.pid做了一次类型判断，因为传入的参数可能是 string | string[]
内容介绍使用 V-HTML 标签实现自定义，将路由参数传递给子评论组件实现不同帖子的评论机制。

<template><div :style="{ 'background-color': theme.bgColor, color: theme.textColor }"><img :src="http://img.zhejianglong.com/231019/1929352937-4.jpg" class="w-full" /><div class="m-4">A downloadable game for Window</div><div><div class="my_button" style="background-color: #fa5c5c">Download Now<!-- <b-icon-downloadclass="inline-block text-lg align-text-top"></b-icon-download> --></div><span class="ml-3 text-stone-500 text-sm">Name your own price</span></div><div class="h-52 mt-5"><iframe class="h-full w-full" frameborder="0" :src="http://img.zhejianglong.com/231019/192935A10-5.jpg"></iframe></div><div class="mt-5 h-48 flex overflow-x-auto"><img v-for="(value, index) in imgs" :key="index" :src="http://img.zhejianglong.com/231019/19293554A-6.jpg" /></div><div v-html="html"></div><div class="m-4 mt-6 text-2xl font-bold">Download</div><div><div class="my_button" style="background-color: #fa5c5c">Download Now</div><span class="ml-3">Name your own price</span></div><div class="ml-4 mt-6">Click download now to get access to the following files:</div><div class="ml-4 mt-4 font-bold">[BETA] roto_win_v1.2.5.zip 39 MB<b-icon-windowsclass="inline-block text-lg align-text-top"></b-icon-windows></div><div class="m-4 mt-6 text-2xl font-bold">Comments</div><comment-test-view class="m-4" :initpid="pid"></comment-test-view></div><bottom-bar :items="bottomItems"></bottom-bar></template><script lang="ts">import { defineComponent } from "vue";import CommentTestView from "@/views/CommentView.vue";import BottomBar from "@/components/common/BottomBar.vue";export default defineComponent({name: "GameVIew",components: { CommentTestView, BottomBar },data() {return {pid: 100,theme: {bgColor: "#E8E1BC",textColor: "#2f5b71",},headImg:"https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221109232741_head.png",videoSrc: "https://www.youtube.com/embed/zGGTLStyKX0",imgs: ["https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221109233251_1.png","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221109233256_4.png","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221109233253_2.png","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221109233255_3.png","https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/11/20221109233253_2.png",],html: `description`,bottomItems: [{ text: "Studio Name", icon: "b-icon-house-heart", routerName: "home" },{ text: "Follow", icon: "b-icon-person-circle", routerName: "about" },{ text: "Collection", icon: "b-icon-collection", routerName: "about" },{ text: "Comments", icon: "b-icon-chat-dots", routerName: "about" },],};},created() {if (typeof this.$route.params.pid == "string")this.pid = parseInt(this.$route.params.pid);else this.pid = parseInt(this.$route.params.pid[0]);this.axios.get("/post/query", {params: {pid: this.pid,},}).then((response) => {if (!response.data) {console.log("无数据");return;}let data = https://www.huyubaike.com/biancheng/response.data[0];console.log(data);this.theme.bgColor = data.bgcolor;this.theme.textColor = data.textcolor;this.headImg = data.headimg;this.imgs = JSON.parse(data.imgs);this.videoSrc = data.videosrc;this.html = data.html;}).catch((err) => {console.log(err);});},});
上一页
1
2
3
下一页
		  	

    
    




    
    
    


推荐阅读

           
                  
              
                  化学中的极性是什么意思 
                
                   
                
              
            

                  
              
                  手机向上箭头怎么打出来 上箭头怎么打 
                
                   
                
              
            

                  
              
                  【专业】信用卡提取的现金可以分期还吗吗 
                
                   
                
              
            

                  
              
                  干皮肤定妆用什么 
                
                   
                
              
            

                  
              
                  root和无root双运行稳定运行使用 和平精英并肩王牌战士国服叮当v5.9破解上市辅助软件 
                
                   
                
              
            

                  
              
                  奶茶店加盟店要多少钱 喜茶加盟吗 奶茶店加盟店多少钱 
                
                   
                
              
            

                  
              
                  98年属虎本命年佩戴朱砂好吗 怀孕禁佩戴饰品 
                
                   
                
              
            

                  
              
                  关于电气CAD基础教程简述 电气CAD基础教程 
                
                   
                
              
            

                  
              
                  孩子能玩手机吗？对眼睛有伤害吗？ 
                
                   
                
              
            

                  
              
                  视频太大怎么分段压缩 视频太大怎么分段 
                
                   
                
              
            

                  
              
                  候补车票可以退吗 
                
                   
                
              
            

                  
              
                  使命召唤手游据点争夺武器选什么,据点争夺各类武器玩法攻略,高手进阶 
                
                   
                
              
            

                  
              
                  眉毛一个高一个低怎么办 
                
                   
                
              
            

                  
              
                  陌陌注册方式有哪些，陌陌注册页面 
                
                   
                
              
            

                  
              
                  砥砺的意思 砥的意思 
                
                   
                
              
            

                  
              
                  双子座的爱情有多复杂最佳情侣配对？ 
                
                   
                
              
            

                  
              
                  哑铃卧推能锻炼背部吗 什么运动锻炼背部肌肉 
                
                   
                
              
            

                  
              
                  如何了解西餐点餐顺序 点西餐顺序是什么 
                
                   
                
              
            

                  
              
                  2021国庆去武汉玩几天比较合适 
                
                   
                
              
            

                  
              
                  孕妇可以喝蜂蜜吗?孕晚期 孕妇可以喝蜂蜜吗 
                
                   
                
              
            

          

奥比岛2022盛夏之旅活动参与方法 

云原生之旅 - 9）云原生时代网关的后起之秀Envoy Proxy 和基于Envoy 的 Emissary Ingress 

云原生之旅 - 8）云原生时代的网关 Ingress Nginx 

Vue前端框架基础+Element的使用 

云原生之旅 - 7）部署Terrform基础设施代码的自动化利器 Atlantis 

gta怎么加入好友战局（gta为什么别人进不来我的战局) 

7.Vue常用属性 

Vue3的新特性 

我的世界里怎么驯服豹猫（我的世界驯服狞猫) 

我的世界豹猫怎么驯服，为什么给豹猫喂鱼之后不变成猫