Spring Boot 学习记录笔记【五】之前端Vue

perfei焓

已于 2024-10-18 15:39:17 修改

阅读量1.4k

点赞数

分类专栏：前端学习文章标签： spring boot vue.js 前端前端框架

于 2022-04-18 09:35:27 首次发布

本文链接：https://blog.csdn.net/java_zhangfei/article/details/124153720

版权

学习同时被 2 个专栏收录

12 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

Spring Boot 学习记录笔记【五】

集成 Ant Design Vue
结尾

集成 Ant Design Vue

Ant Design Vue 官方文档

安装命令：npm install ant-design-vue@next --save

安装成功，目录变化
在这里插入图片描述
引入 Ant Design Vue

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(store).use(router).use(Antd).mount('#app')

在这里插入图片描述

页面布局

每个项目在构建自己的页面布局的时候都是不一样的，我们来看一下 ant-design-vue 布局。这里是以我个人选择的布局举例。
在这里插入图片描述
粘贴代码，这里就讲解我已经修改好之后的代码了，里面包括自定义组件，全局使用图标，页面使用组件，路由开发。

官网代码展示

<template>
  <a-layout>
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="1">
          <user-outlined />
          <span class="nav-text">nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <video-camera-outlined />
          <span class="nav-text">nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <upload-outlined />
          <span class="nav-text">nav 3</span>
        </a-menu-item>
        <a-menu-item key="4">
          <user-outlined />
          <span class="nav-text">nav 4</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0 }" />
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import { UserOutlined, VideoCameraOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
  },
  setup() {
    const onCollapse = (collapsed: boolean, type: string) => {
      console.log(collapsed, type);
    };

    const onBreakpoint = (broken: boolean) => {
      console.log(broken);
    };

    return {
      selectedKeys: ref<string[]>(['4']),
      onCollapse,
      onBreakpoint,
    };
  },
});
</script>
<style>
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout-sub-header-background {
  background: #141414;
}
</style>

自定义组件目录

在这里插入图片描述

the-footer.vue 代码展示

<template>
  <a-layout-footer style="text-align: center">
    Copyright ©2022 LOUSHIKEJI All Rights Reserved
  </a-layout-footer>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'the-footer'
});
</script>

the-header.vue 代码展示

<template>
  <a-layout-header style="background: #fff; padding: 0" >
    <div style="text-align: center">
      <h2>后台管理系统</h2>
    </div>
  </a-layout-header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'the-header'
});
</script>

the-left.vue 代码展示

<template>
  <a-layout-sider collapsible>
    <div class="logo" />
    <a-menu theme="dark" mode="inline">
      <a-menu-item key="1">
        <pie-chart-outlined />
        <span>企业微信</span>
      </a-menu-item>
      <a-menu-item key="2">
        <desktop-outlined />
        <span>微信支付</span>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #title>
            <span>
              <user-outlined />
              <span>红包明细</span>
            </span>
        </template>
        <a-menu-item key="3">Tom</a-menu-item>
        <a-menu-item key="4">Bill</a-menu-item>
        <a-menu-item key="5">Alex</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #title>
            <span>
              <team-outlined />
              <span>Team</span>
            </span>
        </template>
        <a-menu-item key="6">Team 1</a-menu-item>
        <a-menu-item key="8">Team 2</a-menu-item>
      </a-sub-menu>
      <a-menu-item key="9">
        <file-outlined />
        <span>系统管理</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script lang="ts">
import { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined, } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  },
  name: 'the-left'
});
</script>

App.vue 代码修改

<template>
  <a-layout style="min-height: 100vh" id="components-layout-demo-side">
    <the-left></the-left>
    <a-layout>
      <the-header></the-header>
      <router-view/>
      <the-footer></the-footer>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TheLeft from "@/components/the-left.vue";
import TheHeader from "@/components/the-header.vue";
import TheFooter from "@/components/the-footer.vue";

export default defineComponent({
  name: 'app',
  components: {
    TheLeft,
    TheHeader,
    TheFooter
  }
});
</script>

<style>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>

HomeView.vue 代码调整

<template>
  <a-layout-content :style="{ margin: '24px 16px 0' }">
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      Bill is a cat.
    </div>
  </a-layout-content>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HomeView',
});
</script>

全局图标

安装命令：npm install --save @ant-design/icons-vue

在这里插入图片描述
配置全局图标，在 main.ts 代码调整

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as Icons from '@ant-design/icons-vue';

const app = createApp(App);
app.use(store).use(router).use(Antd).mount('#app')

// 全局使用图标
const icons: any = Icons;
for (const i in icons) {
    app.component(i, icons[i]);
}

页面解析

我对页面的调整优化如下
在这里插入图片描述

错误解决

在实际操作过程中可能回出现【vue/no-unused-components】错误，也可以在.eslintrc.js 文件里面添加关闭 vue/no-unused-components。
在这里插入图片描述

集成HTTP库Axios

安装命令：npm install axios --save

安装版本
在这里插入图片描述
使用 axios

导入：import axios from “axios”;

在这里插入图片描述
axios 的 get 请求

报错【Access-Control-Allow-Origin】前后端跨域问题，解决办法，在后端添加一个解决拦截跨域的类

package com.zcf.enterprise.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 解决跨域请求问题
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)
                .maxAge(3600); // 1小时内不需要再预检（发OPTIONS请求）
    }

}

数据绑定

在这里插入图片描述

结尾

到这里，Spring Boot 项目中创建了前端vue的web项目，从集成Ant Design Vue进行页面配置和集成HTTP库Axios对前后端数据进行数据绑定，都一一记录了，文章是记录自己的学习笔记，或多或少都有问题和遗漏，欢迎留言，一起进步。继续更新Spring Boot 学习记录笔记【六】