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接收。
相关推荐
沛沛老爹2 小时前
Web开发者实战AI Agent:基于Dify的多模态文生图与文生视频智能体项目
前端·人工智能·llm·agent·rag·web转型
哟哟耶耶2 小时前
Plugin-前端相关插件了解
前端
不一样的少年_2 小时前
老王请假、客户开喷、我救火:一场递归树的性能突围战
前端·javascript·性能优化
搬砖的阿wei2 小时前
JavaScript 请求数据的四种方法:Ajax、jQuery 、Fetch和 Axios
javascript·ajax·axios·jquery
梵得儿SHI2 小时前
Vue Router 进阶实战:嵌套路由 / 导航守卫 / 懒加载全解析(含性能优化 + 避坑指南)
前端·javascript·vue.js·嵌套路由与命名视图·实现复杂页面结构·子路由配置要点·全局/路由/组件三种守卫用法
xjt_09012 小时前
Chrome 截取 整个网页(全页截图 非滚动手动截图)
前端·chrome
AC赳赳老秦3 小时前
DeepSeek教育科技应用:智能生成个性化学习规划与知识点拆解教程
前端·网络·数据库·人工智能·学习·matplotlib·deepseek
计算机毕设VX:Fegn08958 小时前
计算机毕业设计|基于springboot + vue在线考试系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
布列瑟农的星空10 小时前
Playwright使用体验
前端·单元测试