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接收。
相关推荐
Zha0Zhun8 分钟前
一个使用ViewBinding封装的Dialog
前端
兆子龙8 分钟前
从微信小程序 data-id 到 React 列表性能优化:少用闭包,多用 data-*
前端
滕青山9 分钟前
文本行过滤/筛选 在线工具核心JS实现
前端·javascript·vue.js
时光不负努力11 分钟前
编程常用模式集合
前端·javascript·typescript
时光不负努力12 分钟前
ts+vue3开发规范
vue.js·typescript
大雨还洅下15 分钟前
前端JS: 跨域解决
javascript
恋猫de小郭18 分钟前
Apple 的 ANE 被挖掘,AI 硬件公开,宣传的 38 TOPS 居然是"数字游戏"?
前端·人工智能·ios
小岛前端22 分钟前
Node.js 宣布重大调整,运行十年的规则要改了!
前端·node.js
OpenTiny社区23 分钟前
OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用
前端·javascript·ai编程
梦想CAD控件39 分钟前
在线CAD开发包结构与功能说明
前端·javascript·vue.js