经验总结

  1. 首页 > 生活 > >

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

生活百科

将 deleteComment 绑定到commentArea的delete-comment事件上，将 insertComment 、 queryComment 分别绑定到两个按钮的click事件上 。
insertComment 成功执行将拿到插入的评论json对象并放入当前数组中 。
deleteComment 成功执行将通过数组的filter函数删除当前评论json对象 。
下方代码相比前几期多了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 创建数据库跟表

我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制

文章插图

我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制

文章插图

我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制

文章插图
Golang 服务端C:.│comment.json│go.mod│go.sum│main.go│├───data│data.db│└───lib├───http│server.go│├───mysql└───sqlitesq3_comment.gosq3_init.gosq3_users.goJSON2GO我们把消息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"`}

经验总结扩展阅读


上一篇：2023年10月8日适合打更吗 2023年农历八月廿四打更吉日

下一篇：郑州被淹原因