我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制( 二 ) _生活百科

下方代码相比前几期多了style代码块，可以将相同标签使用的共同功能类组合提取出来（两个按钮，五个输入框），简化代码。
<script>import CommentArea from '@/components/common/CommentArea.vue';export default {components: { CommentArea },name: 'CommentTestView',data: function () {return {pid: 100,uid: 1003,text: "",comments: [// {//id: 1,//uid: 1001,//name: "西红柿炒芹菜",//text: "真的很不错啊。SQLite 是一个开源的嵌入式关系数据库，实现自包容、零配置、支持事务的 SQL 数据库引擎。",//date: 1665912139673,//img: require("@/assets/avater/hamster.jpg")// }]}},methods: {insertComment() {const params = new URLSearchParams();params.append('uid', this.uid)params.append('pid', this.pid)params.append('text', this.text)this.axios.post("insertComment", params).then(response => {console.log(response.data)this.comments.unshift(response.data)console.log(this.comments)}).catch(err => {console.log(err)})},deleteComment(id) {const params = new URLSearchParams();params.append('id', id)this.axios.post("deleteComment", params).then(response => {console.log(response.data)this.comments = this.comments.filter(elem => {return elem.id != id})}).catch(err => {console.log(err)})},queryComment() {this.axios.get("queryComment", {params: {pid: this.pid}}).then(response => {if (!response.data) {this.comments = []return}this.comments = response.datathis.comments.reverse()}).catch(err => {console.log(err)})}},created() {let old = localStorage.getItem(`comment_${this.pid}`)if (old) {this.text = old}},watch: {text() {localStorage.setItem(`comment_${this.pid}`, this.text)}}}</script><style scoped>.input_text {@apply mt-2inline-blockbg-whitefocus:outline-none focus:ring focus:border-blue-200py-1.5pl-3border border-stone-400text-sm;}.input_button {@apply border border-rose-400text-smfont-boldtext-rose-500rounded-smpx-4py-1mt-2ml-4active:bg-rose-400 active:text-white;}</style>请求体编码axios post 请求客户端可以直接发吗，不能！在这里使用了URLSearchParams对象以application/x-www-form-urlencoded格式发送数据。
const params = new URLSearchParams();params.append('uid', this.uid)params.append('pid', this.pid)params.append('text', this.text)其他方式可看请求体编码 | Axios Docs (axios-http.com)
保存没写完的评论写到一半关闭页面后重新打开就不在了，可以用 localStorage 本地存储临时保存写的内容，只能保存字符串。
created() {let old = localStorage.getItem(`comment_${this.pid}`)if (old) {this.text = old}},watch: {text() {localStorage.setItem(`comment_${this.pid}`, this.text)}}创建数据库和表使用 Navicat Premium 创建数据库跟表

文章插图

文章插图
Golang 服务端

C:.│comment.json│go.mod│go.sum│main.go│├───data│data.db│└───lib├───http│server.go│├───mysql└───sqlitesq3_comment.gosq3_init.gosq3_users.go

JSON2GO我们把消息JSON格式拟定出来
[{"id": 1,"uid": 1001,"name": "小王","text": "看起来很好玩的样子。","pid": 100,"date": 1665908807784}]JSON 转GO，JSON转GO代码， go json解析 (sojson.com)

type AutoGenerated []struct {	ID int `json:"id"`	UID int `json:"uid"`	Name string `json:"name"`	Text string `json:"text"`	Pid int `json:"pid"`	Date int64 `json:"date"`}

解决sqlite3 gcc：exec: "gcc": executable file not found in %PATH%Windows 如果使用 Go 语言使用 sqlite3 时，需要gcd来编译sqlite3模块相关c代码。
解决方法：安装tdm64-gcc-9.2.0.exe， https://jmeubank.github.io/tdm-gcc/download/
数据库处理逻辑 sq3_vue包sq3_init.goinit() 初始化函数获取main执行目录，并按操作系统连接文件位置，读取文件。

package sq3_vueimport (	"database/sql"	"os"	"path"	_ "github.com/mattn/go-sqlite3")var db *sql.DBfunc init() {	p, err := os.Getwd()	checkError(err)	db, err = sql.Open("sqlite3", path.Join(p, "data/data.db"))	checkError(err)}func checkError(err error) {	if err != nil {panic(err)	}}

sq3_comment.go为具体的数据库处理逻辑，插入返回comment的json字节切片 {}，查询返回comment数组的json字节切片 [{},{},{}] 。
*sql.DB 是Go标准库规定的接口，方便操作。
stmt、rows 需要 defer close()

package sq3_vueimport (	"encoding/json"	"fmt"	"time")type Comment struct {	IDint`json:"id"`	UIDint`json:"uid"`	Name string `json:"name"`	Text string `json:"text"`	Pidint`json:"pid"`	Date int64`json:"date"`}const insertStmt = `INSERT INTO comments(uid,text,pid,date) values(?,?,?,?)`const lastedStmt = `select id,uid,text,pid,date,name from comments join users using(uid) where id = ?`func (Comment) InsertComment(uid, pid int64, text string) (json_ []byte, err error) {	stmt, err := db.Prepare(insertStmt)	checkError(err)	defer stmt.Close()	res, err := stmt.Exec(uid, text, pid, time.Now().UnixMilli())	checkError(err)	n, err := res.RowsAffected()	checkError(err)	if n == 0 {return nil, fmt.Errorf("插入失败")	}	n, err = res.LastInsertId()	checkError(err)	stmt, err = db.Prepare(lastedStmt)	checkError(err)	defer stmt.Close()	rows, err := stmt.Query(n)	checkError(err)	defer rows.Close()	rows.Next()	var c Comment	rows.Scan(&c.ID, &c.UID, &c.Text, &c.Pid, &c.Date, &c.Name)	checkError(err)	json_, err = json.Marshal(c)	checkError(err)	return json_, nil}const deleteStmt = `delete from comments where id = ?`func (Comment) DeleteComment(id int64) error {	stmt, err := db.Prepare(deleteStmt)	checkError(err)	defer stmt.Close()	res, err := stmt.Exec(id)	checkError(err)	n, err := res.RowsAffected()	checkError(err)	if n == 0 {return fmt.Errorf("删除失败")	}	return nil}const queryStmt = `select id,uid,text,pid,date,name from comments join users using(uid) where pid = ?`func (Comment) QueryComment(pid int64) (json_ []byte, err error) {	var res []Comment	stmt, err := db.Prepare(queryStmt)	checkError(err)	defer stmt.Close()	rows, err := stmt.Query(pid)	checkError(err)	defer rows.Close()	for rows.Next() {var c Commenterr = rows.Scan(&c.ID, &c.UID, &c.Text, &c.Pid, &c.Date, &c.Name)checkError(err)res = append(res, c)	}	json_, err = json.Marshal(res)	checkError(err)	return}
上一页
1
2
3
下一页
		  	

    
    




    
    
    


推荐阅读

           
                  
              
                  带梓的女孩名字及寓意 
                
                   
                
              
            

                  
              
                  学生会活动策划方案范文 经典学生会活动策划范文 
                
                   
                
              
            

                  
              
                  12星座女谁是小野猫谁是小奶猫 
                
                   
                
              
            

                  
              
                  月光石手链有什么寓意 月光石有什么寓意 
                
                   
                
              
            

                  
              
                  粉色的粘土小玫瑰diy 
                
                   
                
              
            

                  
              
                  倚的组词 倚的组词组 
                
                   
                
              
            

                  
              
                  2023武汉中考志愿填报规则详解 2021年武汉中考志愿填报时间 
                
                   
                
              
            

                  
              
                  关于深圳市万科教育发展基金会简述 深圳市万科教育发展基金会 
                
                   
                
              
            

                  
              
                  没有足够的可用内存来运行此程序 没有足够的可用内存来运行程序 
                
                   
                
              
            

                  
              
                  缓刑是什么意思还要坐牢吗 缓刑是什么意思 
                
                   
                
              
            

                  
              
                  有一个“撩妹高手”的儿子，是种什么样的体验？ 
                
                   
                
              
            

                  
              
                  南阳多少人「南阳多少人口2020总人数」 
                
                   
                
              
            

                  
              
                  什么是事故车,如何鉴定 车子撞到什么程度算事故车 
                
                   
                
              
            

                  
              
                  秋季喝什么汤最好 秋季喝什么汤最养生 
                
                   
                
              
            

                  
              
                  绝地求生刺激战场军团名字怎么改？军团名字修改攻略[多图] 
                
                   
                
              
            

                  
              
                  梦见大鱼吃小鱼 
                
                   
                
              
            

                  
              
                  文房四宝指什么 文房四宝指什么数字 
                
                   
                
              
            

                  
              
                  OPPO Reno6简单评测 oppo reno6有nfc吗 
                
                   
                
              
            

                  
              
                  怎么判断二手车的真实行驶里程? 要看哪些细节 
                
                   
                
              
            

                  
              
                  双子座成功人士知多少？ 
                
                   
                
              
            

          

《Vue3.x+TypeScript实践指南》已出版 

上海二手奢侈品店探店笔记，我的大牌日记 大牌包一直是我的心头爱 

一篇文章带你了解网页框架——Vue简单入门 

vue项目Eslint和prettier结合使用 

Vue3 JS 与 SCSS 变量相互使用 

带走一盏-“带走一盏渔火，让它温暖我的双眼……”选自《涛声依旧》，其歌词和意境借 ... 

Vue 中为什么要有nextTick？ 

手机怎样连接我的电脑（手机怎么访问自己电脑) 

我的世界中怎么驯服马（马吃什么驯服我的世界) 

我的世界如何驯马（我的世界里马如何驯骑)