vue项目的选择星级样式和axios依赖调用

样式:

复制代码
<select v-model="score">
        <option v-for="s in scoreList" :key="s" :value="s">
          {{ s }} 星
        </option>
      </select>

代码

复制代码
mounted() {
    this.loadComments()
  },

渲染页面完成后,调用函数。

导入axios使用http链接

复制代码
import axios from 'axios'

使用例子如下:

复制代码
  axios.get('http://localhost:8080/comment/list', {
        params: {
          productId: this.productId
        }
      }).then(res => {
        this.commentList = res.data.data
      })

就是链接请求:

举例:

复制代码
http://localhost:8080/comment/list? productId=1001;

axios的post

复制代码
axios.post('/comment/add', {
        productId: this.productId,
        userId: this.userId,
        content: this.content,
        score: this.score
      }).then(() => {
        alert('评论成功')
        this.content = ''
        this.score = 5
        this.loadComments()
      })

其中的productId,userId,content,score以json传给后端,

后端以

复制代码
RequestBody接收。
相关推荐
jay神35 分钟前
【计算机毕业设计】基于Flask+Vue的电影数据可视化与智能推荐系统
前端·vue.js·python·信息可视化·flask·毕业设计·课程设计
FreeTinker7 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_452396237 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
海兰7 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
wangruofeng8 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne8 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel9 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
小磊哥er9 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
何以解忧,唯有..9 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
小磊哥er9 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程