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接收。
相关推荐
林深现海24 分钟前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
EchoEcho36 分钟前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
黄诂多38 分钟前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界41 分钟前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
文艺理科生42 分钟前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构
千寻girling43 分钟前
主管:”人家 Node 框架都用 Nest.js 了 , 你怎么还在用 Express ?“
前端·后端·面试
C澒1 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
xiaoxue..1 小时前
合并两个升序链表 与 合并k个升序链表
java·javascript·数据结构·链表·面试
清山博客1 小时前
OpenCV 人脸识别和比对工具
前端·webpack·node.js
要加油哦~1 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能