VUE框架前端部分配置axios实现跨域并查询所有电影信息并展示在前端页面上------VUE框架

旧约Alatus

已于 2023-11-24 14:30:47 修改

阅读量126

点赞数 1

分类专栏： # VUE框架前端文章标签：前端 javascript vue vue.js node.js 前端框架 ajax

于 2023-10-05 11:24:49 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/133578206

版权

前端同时被 2 个专栏收录

350 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js中使用组件（如Movie.vue,Hello.vue,Hello1.vue）进行数据绑定，并通过axios发送HTTP请求从服务器获取数据。还展示了如何使用ElementUI构建表格并根据数据状态设置行样式。

摘要由CSDN通过智能技术生成

<template>
  
  <div id="app">
     <Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
     <Hello></Hello>
     <Hello1></Hello1>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Movie from './components/Movie.vue'
import Hello from './components/Hello.vue'
import Hello1 from './components/Hello1.vue'
Movie,name
export default {
  name: 'App',
  data:function(){
    return{
      movies:[]
    }
  },
  created:function(){
    this.$http.get("/Movie/find")
    .then((response)=>{
      this.movies = response.data
    })
  },
  mounted:function(){
  },
  components: {
    // HelloWorld
    Movie,
    Hello,
    Hello1
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<template>



<div id="app">

<Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>

<Hello></Hello>

<Hello1></Hello1>

</div>

</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'

import Movie from './components/Movie.vue'

import Hello from './components/Hello.vue'

import Hello1 from './components/Hello1.vue'

Movie,name

export default {

name: 'App',

data:function(){

return{

movies:[]

}

},

created:function(){

this.$http.get("/Movie/find")

.then((response)=>{

this.movies = response.data

})

},

mounted:function(){

},

components: {

// HelloWorld

Movie,

Hello,

Hello1

}

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="rating"
      label="评分">
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    created:function(){
    this.$http.get("/Movie/find")
    .then((response)=>{
      this.tableData = response.data
    })
    },
    data() {
      return {
        tableData: []
      }
    }
  }
</script>
<template>

<el-table

:data="tableData"

style="width: 100%"

:row-class-name="tableRowClassName">

<el-table-column

prop="id"

label="ID"

width="180">

</el-table-column>

<el-table-column

prop="title"

label="名称"

width="180">

</el-table-column>

<el-table-column

prop="rating"

label="评分">

</el-table-column>

</el-table>

</template>

<style>

.el-table .warning-row {

background: oldlace;

}

.el-table .success-row {

background: #f0f9eb;

}

</style>

<script>

export default {

methods: {

tableRowClassName({row, rowIndex}) {

if (rowIndex === 1) {

return 'warning-row';

} else if (rowIndex === 3) {

return 'success-row';

}

return '';

}

},

created:function(){

this.$http.get("/Movie/find")

.then((response)=>{

this.tableData = response.data

})

},

data() {

return {

tableData: []

}

}

}

</script>

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

axios.defaults.baseURL = "http://localhost:8088"
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
}).$mount('#app')
import Vue from 'vue';

import App from './App.vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import 'font-awesome/css/font-awesome.min.css';

import axios from 'axios';

axios.defaults.baseURL = "http://localhost:8088"

Vue.prototype.$http = axios

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({

render: h => h(App),

}).$mount('#app')