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

骑猪看日落 2024-02-26 02:18 11阅读 0赞

>     <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')