2024山东大学软件学院项目实训开发日志（9）-前端vue情感分析/新闻

vue前端配置

在电脑下载相关环境配置和编写前端

<template>
  <div>
    <header class="header">
      <h1>金融新闻情感分析</h1>
    </header>
    <div class="main-container">
      <div class="left-container">
        <h1 class="title">金融新闻情感分析</h1>
        <textarea v-model="chineseText" class="input-box" placeholder="请输入中文文本"></textarea>
        <button @click="analyzeSentiment" class="analyze-button">分析情感</button>
        <div v-if="isLoading" class="loading-container">
          <p>等待分析结果...</p>
        </div>
        <div v-if="sentiment !== null" class="result-container">
          <h2>情感分析结果：</h2>
          <p>情感倾向：{{ sentiment }}</p>
        </div>
        <div class="button-container">
          <button class="round-button positive-button">Positive</button>
          <button class="round-button negative-button">Negative</button>
          <button class="round-button neutral-button">Neutral</button>
        </div>
      </div>
      <div class="right-container">
        <div class="news-container">
          <h2>实时金融新闻</h2>
          <div v-if="newsList.length === 0" class="loading-container">
            <p>正在加载新闻...</p>
          </div>
          <ul>
            <li v-for="item in newsList" :key="item.id" class="news-item">{{ item.content }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      chineseText: '',
      sentiment: null,
      newsList: [],
      isLoading: false,
    };
  },
  mounted() {
    this.getFinancialNews();
  },
  methods: {
    async analyzeSentiment() {
      if (this.chineseText.trim() === '') {
        alert('请输入中文文本');
        return;
      }
      this.isLoading = true;
      try {
        const response = await axios.post('http://localhost:5000/api/sentiment', {
          chinese_text: this.chineseText
        });
        this.sentiment = response.data.sentiment;
      } catch (error) {
        console.error('Error analyzing sentiment:', error);
        alert('情感分析失败，请稍后再试');
      } finally {
        this.isLoading = false;
      }
    },
    async getFinancialNews() {
      try {
        const response = await axios.get('http://localhost:5000/api/financial-news');
        console.log(response.data); // 输出 API 返回的数据到控制台
        this.newsList = response.data.data;
      } catch (error) {
        console.error('Error fetching financial news:', error);
      }
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #6A0DAD;
  color: white;
  padding: 10px;
  text-align: center;
}

.main-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: calc(100vh - 60px);
  padding: 20px;
}

.left-container {
  flex: 1;
  margin-right: 20px;
}

.title {
  text-align: center;
}

.input-box {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
  border: 2px solid #6A0DAD;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
}

.analyze-button {
  width: 100%;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background-color: #6A0DAD;
  color: white;
}

.analyze-button:hover {
  background-color: #4B0864;
}

.result-container, .loading-container {
  text-align: center;
  margin-top: 20px;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.round-button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.positive-button {
  background-color: #6A0DAD; /* 紫色 */
  color: white;
}

.negative-button {
  background-color: #F44336; /* 红色 */
  color: white;
}

.neutral-button {
  background-color: #607D8B; /* 蓝灰色 */
  color: white;
}

.right-container {
  flex: 1;
  margin-left: 20px;
}

.news-container {
  background-color: #F0F0F0;
  padding: 20px;
  text-align: center;
  width: 100%;
}

.news-container h2 {
  margin-bottom: 10px;
}

.news-item {
  margin-bottom: 10px;
}
</style>