vue 模块化+springboot交互

realityinBlack

已于 2022-10-20 18:49:22 修改

阅读量249

点赞数

文章标签： vue.js 学习前端

于 2022-10-17 09:37:01 首次发布

本文链接：https://blog.csdn.net/weixin_45147275/article/details/127357279

版权

demo01

且 Vue有两种创建方式：

 <script>
        const vm ={
            data: function(){
                return{
                    userList: [
                        {id:1,name: 'Maya'},
                        {id:2,name:'Reese'},
                        { id:3,name:'Root'},
                    ],
                }
            },
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>

在线引入：    <script src="https://unpkg.com/vue@3"></script>

<div id="app">
     {{message}}
    </div>

    <script>
        Vue.createApp({
            data(){
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>

内容渲染

<div id="app">
        <p>name : {{username}}</p>
        <p>sex : {{sex}}</p>

        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>

    <script>
        Vue.createApp({
            // 此处可以改写为data(){}
            data: function(){
                return {
                    username: 'Maya',
                    sex: 'female',
                    desc: '<a href="http://www.baidu.com">百度</a>'
                }
            }
        }).mount('#app')
    </script>

属性渲染

<div id="app">
        <a :href = "link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{width:w}" alt="">
    </div>


    <script>
        Vue.createApp({
            data: function () { 
                return{
                    link: "http://www.baidu.com",
                    inputValue: '请输入内容',
                    imgSrc: 'bg918.jpg',
                    w:'500px'
                }
             }
        }).mount('#app')
    </script>

jsp表达式

 <!-- vue实际要控制的DOM区域 -->
    <div id="app">
        <p>{{number + 1}}</p>
        <p>{{ok ? 'True' : 'False'}}</p>    
        <p>{{message.split('B').reverse().join('')}}</p>
        <p :id = "'list-' + id">xxxx</p>
        <p>{{user.name}}</p>
    </div>

    <script>
        Vue.createApp({
            data: function(){
                return{
                    number: 9,
                    ok: false,
                    message:'ABCDE',
                    id: 3,
                    user: {
                        name: 'Maya'
                    }
                }
            }
        }).mount('#app')
    </script>

条件渲染指令

<div id="app">
        <!-- 点击进行flag值取反 -->
        <button @click="flag = !flag">Toggle Flag</button>

        <!-- 若v-if的布尔值为真，则会渲染此标签 -->
        <p v-if="flag">请求成功 --- 被v-if控制</p>
        <!-- 同上，为真时才会被渲染到页面 -->
        <p v-show="flag">请求成功 --- 被v-show控制</p>
    </div>

    <script>
        Vue.createApp({
            data: function(){
                return {
                    flag: false,
                }
            }
        }).mount('#app')
    </script>

v-else和v-else-if指令

原理同java普通if else语句

注意要把标签放进div app 才能被vue管理，，一个坑

<div id="app">
        <p v-if = "num > 0.5">随机数 > 0.5</p>
        <p v-else>随机数 小于等于 0.5</p>
        <hr />
        <p v-if="type === 'A'">优秀</p>
        <p v-else-if = "type === 'B'">良好</p>
        <p v-else-if="type === 'C'">一般</p>
        <p v-else>差</p>
        <p>{{flag}}</p>

        <p v-show = "flag">测试</p> 
        <button @click="flag = !flag">Toggle Flag</button>
    </div>


    <script>
        Vue.createApp({
            data: function(){
                return {
                    flag: false,
                    num: Math.random(),
                    type: 'D',
                }
            }
        }).mount('#app')
    </script>

前端获取后端数据

文件地址：F:\code\vue\component-demo
vue组件：

<template>
    <div>
        <el-table
      :data="tableData"
      style="width: 100%">
      
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="age"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
  </template>

  <script>  
    export default {
      data() {
        return {
          tableData:[
          ]
        }
      },    
    created:function(){        
        this.$http.get("/user/findAll").then((response)=>{
            this.tableData = response.data
            console.log(response)
        })

  }
    }
  </script>

axios处理网络请求

main.js中配置：
axios.defaults.baseURL = "http://localhost:8088"
Vue.prototype.$http=axios

具体vue组件中：
axios.get("http://localhost:8088/user/findAll").then((response)=>{
            this.tableData = response.data
            console.log(response)
        })
或：
this.$http.get("/user/findAll").then((response)=>{
            this.tableData = response.data
            console.log(response)
        })

跨域问题 springboot配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 拦截所有的请求
                .allowedOrigins("*")  // 可跨域的域名，可以为 *
                .allowCredentials(true)
                .allowedMethods("*")   // 允许跨域的方法，可以单独配置
                .allowedHeaders("*");  // 允许跨域的请求头，可以单独配置
    }
}

vue路由

新建Recommend.vue：

<template>
    <div>
        <h3>推荐</h3>
        
        <!-- 子路由记得加前缀！！ -->
        <router-link to="/discover/recommend/product1">商品一</router-link>
        <router-link to="/discover/recommend/product2">商品二</router-link>
        <router-link to="/discover/recommend/product3">商品三</router-link>
        <!-- 记得加视图！！否则无法切换！大坑！ -->
        <hr>
        <router-view></router-view>
    </div>
</template>

新建router文件夹及index.js文件

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from "../components/Discover.vue"
import Friends from "../components/Friends.vue"
import My from "../components/My.vue"
import Recommend from "../components/Recommend.vue"
import PlayList from "../components/PlayList.vue"
import Product from "../components/Product.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性与组件的对应关系
    routes:[
        {path:'/discover',
        component:Discover,
        //设置children属性，嵌套声明子路由
        children:[
            {path:"recommend",
             component:Recommend,
             //3层路由嵌套，需要注意 “路径” “/”的使用	
            children:[
                {path:":id",component:Product,props:true}
            ]},        
            {path:"playlist",component:PlayList}
    ]},
        {path:'/friends',component:Friends},
        {path:'/my',component:My},
        {path:'/',redirect:"/discover"}
    ]
  
})
//同时需要在main.js中引入
export default router

main.js如下

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

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

路由嵌套

children下的子路由路径前无需添加 “/”

第二层
<template>
    <div>
        <h1>发现音乐</h1>
        <router-link to="/discover/recommend">推荐</router-link>
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>


第三层
<template>
    <div>
        <h3>推荐</h3>
        <!-- 子路由记得加前缀！！ -->
        
        <router-link to="/discover/recommend/product1">商品一</router-link>
        <router-link to="/discover/recommend/product2">商品二</router-link>
        <router-link to="/discover/recommend/product3">商品三</router-link>
        <!-- 记得加视图！！大坑！ -->
        <hr>
        <router-view></router-view>
    </div>
</template>


index.js文件：

const router = new VueRouter({
    //指定hash属性与组件的对应关系
    routes:[
        {path:'/discover',
        component:Discover,
        //设置children属性，嵌套声明子路由
        children:[
            {path:"recommend",
             component:Recommend,
            children:[
                {path:":id",component:Product,props:true}
            ]},        
            {path:"playlist",component:PlayList}
    ]},
        {path:'/friends',component:Friends},
        {path:'/my',component:My},
        {path:'/',redirect:"/discover"}
    ]
  
})

实现动态路由，比如：3个组件路由到同一个vue中

{path:":id",component:Product,props:true}

VueX状态管理

参考文档地址: https://v3.vuex.vuejs.org/
获取state中的值，通过触发store中的commit函数进行提交

<template>
    <div>
        <!-- {{this.$store.state.count}} -->
        {{count}}
        <button @click="add">+1</button>
    </div>
</template>

<script>
export default {
    name:"HelloVue",
    computed:{
        count(){
            return this.$store.state.count
        }
    },
    methods:{
        add(){
            //this.$store.state.count +=1 同样可以实现
            //触发mutation来进行提交
            this.$store.commit("increment")
        }
    }
}
</script>

Getters
可对获取到的值进行过滤

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
      count: 0,
      todos: [
        { id: 1, text: '吃点饭', done: true },
        { id: 2, text: '睡会觉', done: false }
      ]
    },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    getters:{
      doneTodos:state => {
        return state.todos.filter(todo => todo.done)
      }
    }
  })
export default store

<template>
    <div>
        <!-- {{this.$store.state.count}} -->
        {{count}}
        <button @click="add">+1</button>

        <ul>
            <!-- 循环获取 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数： 只要done：True-->
            <li v-for="todo in doneTodos" :key="todo.id">{{todo.text}}</li>
            
        </ul>
    </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex'

export default {
    name:"HelloVue",
    computed:{
        ...mapState([
        //映射this.count 为 store.state.count
        'count',
        'todos'
    ]),
        ...mapGetters([
            'doneTodos'
        ])          
    },             
    methods:{
        add(){
            //this.$store.state.count +=1 同样可以实现
            //触发mutation来进行提交
            this.$store.commit("increment")
        }
    }
}
</script>

mutations

提交荷载

 mutations: {
      increment (state,n) {
        state.count+=n
      }
    },
================================
在vue中
this.$store.commit("increment",5)