vue控制台不打印axios.get('/listDevice').then( (listDevice) => { console.log('设备状态列表') console.log(listDevice.data) } )

Vue控制台不打印axios.get('/listDevice').then()中的内容，是因为axios.get()方法返回的是一个Promise对象，而Promise对象是异步的，不会阻塞后续代码的执行，因此在控制台中不会立即打印出内容。

如果你想要在控制台中打印出axios.get()方法返回的内容，可以将console.log()语句放在then()方法中，例如：

axios.get('/listDevice').then((listDevice) => {
  console.log('设备状态列表')
  console.log(listDevice.data)
}).catch((error) => {
  console.log(error)
})

这样，在axios.get()方法成功获取到数据时，就会在控制台中打印出相应的内容。如果axios.get()方法出现错误，就会打印出错误信息。

相关问题

基于vue和elementui、axios、和springboot写一个评论区的模块，有点赞数+评论

好的，下面是一个简单的实现过程。

前端部分：

1. 使用 Vue CLI 创建一个新项目，然后安装 Element UI、Axios 和 Vue Router。

vue create my-project
cd my-project
npm install element-ui axios vue-router --save

2. 在 `src` 目录下创建一个 `views` 文件夹，里面放置一个 `Comment.vue` 组件。

<template>
  <div>
    <div class="comment-header">
      <h3>评论</h3>
      <el-button type="primary" @click="showForm = true">添加评论</el-button>
    </div>
    <div class="comment-body">
      <el-card v-for="comment in comments" :key="comment.id">
        <div class="comment-info">
          <span class="comment-author">{{ comment.author }}</span>
          <span class="comment-date">{{ comment.date }}</span>
        </div>
        <div class="comment-content">{{ comment.content }}</div>
        <div class="comment-actions">
          <el-button size="small" type="text" @click="editComment(comment)">编辑</el-button>
          <el-button size="small" type="text" @click="deleteComment(comment)">删除</el-button>
          <el-button size="small" type="text" @click="likeComment(comment)">
            {{ comment.likes }} <i class="el-icon-thumb-up"></i>
          </el-button>
        </div>
      </el-card>
    </div>
    <el-dialog title="添加评论" :visible.sync="showForm" width="50%" center>
      <el-form :model="newComment" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="newComment.author"></el-input>
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input type="textarea" v-model="newComment.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showForm = false">取消</el-button>
        <el-button type="primary" @click="addComment">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Comment',
  data() {
    return {
      comments: [],
      showForm: false,
      newComment: {
        author: '',
        content: ''
      }
    };
  },
  methods: {
    fetchComments() {
      axios.get('/api/comments').then(response => {
        this.comments = response.data;
      }).catch(error => {
        console.log(error);
      });
    },
    addComment() {
      axios.post('/api/comments', this.newComment).then(response => {
        this.comments.push(response.data);
        this.newComment.author = '';
        this.newComment.content = '';
        this.showForm = false;
      }).catch(error => {
        console.log(error);
      });
    },
    editComment(comment) {
      // TODO
    },
    deleteComment(comment) {
      axios.delete(`/api/comments/${comment.id}`).then(response => {
        const index = this.comments.indexOf(comment);
        this.comments.splice(index, 1);
      }).catch(error => {
        console.log(error);
      });
    },
    likeComment(comment) {
      axios.post(`/api/comments/${comment.id}/like`).then(response => {
        comment.likes = response.data.likes;
      }).catch(error => {
        console.log(error);
      });
    }
  },
  mounted() {
    this.fetchComments();
  }
};
</script>

<style scoped>
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.comment-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: bold;
}

.comment-date {
  color: #999;
}

.comment-content {
  margin-bottom: 8px;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
}
</style>

3. 在 `src` 目录下创建一个 `router` 文件夹，里面放置一个 `index.js` 路由配置文件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Comment from '@/views/Comment.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Comment',
    component: Comment
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

4. 在 `src` 目录下创建一个 `main.js` 入口文件，里面配置 Axios 和 Element UI。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

axios.defaults.baseURL = 'http://localhost:8080';
Vue.prototype.$http = axios;

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

5. 创建一个 `public` 文件夹，里面放置一个 `index.html` 文件，用于渲染 Vue 应用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/js/chunk-vendors.js"></script>
  <script src="/dist/js/app.js"></script>
</body>
</html>

后端部分：

1. 使用 Spring Initializr 创建一个新项目，然后添加 Spring Web、Spring Data JPA 和 H2 Database 的依赖。

2. 在 `src/main/java` 目录下创建一个 `com.example.myproject` 包，里面放置一个 `MyProjectApplication.java` 入口文件。

package com.example.myproject;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyProjectApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyProjectApplication.class, args);
    }

}

3. 在 `src/main/java` 目录下创建一个 `com.example.myproject.controller` 包，里面放置一个 `CommentController.java` 控制器，用于处理评论相关的 API 请求。

package com.example.myproject.controller;

import com.example.myproject.entity.Comment;
import com.example.myproject.repository.CommentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import javax.transaction.Transactional;
import java.util.List;

@RestController
@RequestMapping("/api/comments")
public class CommentController {

    @Autowired
    private CommentRepository commentRepository;

    @GetMapping
    public List<Comment> getAllComments() {
        return commentRepository.findAll();
    }

    @PostMapping
    public Comment createComment(@RequestBody Comment comment) {
        return commentRepository.save(comment);
    }

    @PutMapping("/{id}")
    public ResponseEntity<Comment> updateComment(@PathVariable Long id, @RequestBody Comment comment) {
        Comment existingComment = commentRepository.findById(id).orElse(null);
        if (existingComment == null) {
            return ResponseEntity.notFound().build();
        }
        existingComment.setAuthor(comment.getAuthor());
        existingComment.setContent(comment.getContent());
        Comment updatedComment = commentRepository.save(existingComment);
        return ResponseEntity.ok(updatedComment);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<Comment> deleteComment(@PathVariable Long id) {
        Comment comment = commentRepository.findById(id).orElse(null);
        if (comment == null) {
            return ResponseEntity.notFound().build();
        }
        commentRepository.delete(comment);
        return ResponseEntity.ok(comment);
    }

    @Transactional
    @PostMapping("/{id}/like")
    public ResponseEntity<Comment> likeComment(@PathVariable Long id) {
        Comment comment = commentRepository.findById(id).orElse(null);
        if (comment == null) {
            return ResponseEntity.notFound().build();
        }
        comment.setLikes(comment.getLikes() + 1);
        Comment updatedComment = commentRepository.save(comment);
        return ResponseEntity.ok(updatedComment);
    }

}

4. 在 `src/main/java` 目录下创建一个 `com.example.myproject.entity` 包，里面放置一个 `Comment.java` 实体类，用于表示评论。

package com.example.myproject.entity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import java.util.Date;

@Entity
public class Comment {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String author;

    private String content;

    private Integer likes = 0;

    private Date date = new Date();

    public Comment() {}

    public Comment(String author, String content) {
        this.author = author;
        this.content = content;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Integer getLikes() {
        return likes;
    }

    public void setLikes(Integer likes) {
        this.likes = likes;
    }

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

}

5. 在 `src/main/java` 目录下创建一个 `com.example.myproject.repository` 包，里面放置一个 `CommentRepository.java` 接口，用于与数据库交互。

package com.example.myproject.repository;

import com.example.myproject.entity.Comment;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface CommentRepository extends JpaRepository<Comment, Long> {

}

6. 在 `src/main/resources` 目录下创建一个 `application.properties` 配置文件，用于配置 H2 Database。

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.jpa.show-sql=true
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

7. 运行项目，访问 `http://localhost:8080/h2-console` 可以进入 H2 Database 控制台，查看评论表的数据。

8. 运行项目，访问 `http://localhost:8080/` 可以进入 Vue 应用，查看评论区的界面效果。

以上就是一个简单的基于 Vue 和 Spring Boot 的评论区模块的实现过程。

vue 萤石云接入，通道切换

Vue.js是一个流行的前端框架，用于构建用户界面。萤石云（EgisTrend Open Platform）是一款智能视频监控平台。在Vue项目中集成萤石云通常涉及API调用和组件交互。

要接入萤石云并实现实时通道切换，你需要完成以下步骤：

1. **注册并获取API密钥**: 首先，你需要在萤石云官网注册账号，并创建应用以便获得API Key和Secret Key。

2. **安装依赖**: 安装axios库作为HTTP请求工具，可以方便地与萤石云的REST API通信。

npm install axios

3. **创建服务**:
- 创建一个Vue的服务文件（如`vue-egistrend-api.js`），封装萤石云相关的函数，例如登录、设备列表获取和通道切换等。

import axios from 'axios';

export const egistrendApi = {
  login(username, password) {
    // 发送POST请求登录
  },
  getDeviceList() {
    return axios.get('your-endpoint/device/list');
  },
  switchChannel(deviceId, channelId) {
    return axios.put(`your-endpoint/device/${deviceId}/channel`, { channel_id: channelId });
  }
};

4. **在组件中使用**:
- 在需要显示和切换通道的组件里，注入这个服务，然后处理用户的操作，比如点击事件触发通道切换。

<template>
  <button @click="switchToChannel(2)">切换到通道2</button>
</template>

<script>
import { egistrendApi } from '@/services/vue-egistrend-api';

export default {
  methods: {
    switchToChannel(channelId) {
      egistrendApi.switchChannel('device-id', channelId).then(response => {
        console.log('切换成功:', response);
      }).catch(error => {
        console.error('切换失败:', error);
      });
    }
  }
}
</script>