SpringBoot+Vue3前后端快速整合入门

前言

最近需要维护一个个人项目，由于笔者是一个大后端，所以借此机会把前端学习过程记录一下，方便后续回顾。

前端项目初始化

安装npm

在前端项目初始化时，我们必须要安装好node，官网地址如下，因为笔者后续会用到vue3所以这里下在的node版本为18.16.0 。

https://nodejs.org/en/download

安装步骤比较简单，就不多赘述了，安装完成后到cmd键入如下命令，若输出node版本号则说明安装成功了。

C:\Users\xxx>node -v
v18.16.0

为了加速后续各种依赖的下载，我们建议注册淘宝镜像，命令为

npm get registry --显示当前的镜像网址
npm config set registry http://registry.npm.taobao.org -- 使用淘宝的镜像网址

完成后全局安装一下vue-cli

npm install -g @vue/cli@5.0.8

创建前端文件，使用命令初始化前端项目

创建一个名为web的前端项目

vue create web

首先进入选择页面，我们直接选择第3个选项,即自定义创建前端项目。

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

然后进入选择页面使用空格键选择对应选项，完成后如下所示，可以看到笔者勾选了

  1. Babel
  2. Router
  3. Vuex
  4. Linter / Formatter

选择的界面如下，带*号的就是笔者所选择的。

? Check the features needed for your project:
 () Choose Vue version
>(*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

然后我们就可以进入后续的配置了:

首先我们的vue选择3.0版本

# 选择vue3.0
? Choose a version of Vue.js that you want to start the project with 3.x

路由选择历史模式

# 使用历史模式的router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

然后是代码检查，这里我们就选择简单的报错检查就行了

# 代码检查仅用于仅用于预防错误
? Pick a linter / formatter config:
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

接下来是配置选择的时机，我们选择保存时检查即可

# ESLint 保存时触发检查
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

然后我们选择将配置存到package.json中


 # router等配置文件单独存放不和package.json一起
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

最后将模板配置为一个web的模板即可

  # 上述初始化操作保存为一个模板，名字为web
? Save this as a preset for future projects? Yes
? Save preset as: web

自此就生成一个前端文件夹，整体文件结构如下:

在这里插入图片描述

此时，我们不妨键入以下命令尝试将项目启动

 $ cd web
 $ npm run serve

然后我们到浏览器键入

http://localhost:8080/

自此我们的前端架子就初始化完成了。

在这里插入图片描述

前端项目结构介绍

整体结构如下所示，每个文件夹的含义分别是：

  1. node_modules:类似后端中maven在pom引入依赖后，导入的依赖一样，这个node_modules就是前端依赖引入的位置。
  2. public:存放静态文件的位置。
  3. assets:log文件存放处。
  4. components:编写自己的通用vue组件的文件夹。例如你的网站有通用的header和footer，就可以抽取一个组件，存放到这个位置，然后引入到需要的页面即可。
  5. router:存放页面请求的每一个路由以及路由到达的vue组件位置。
  6. store:存放全局变量的位置。
  7. views:存放视图文件的位置。

├─node_modules
    └─__tests__
├─public
└─src
    ├─assets
    ├─components
    ├─router
    ├─store
    └─views

我们在前端根目录还会看到一个package.json和package-lock.json这些都说vue配置依赖版本的文件，其中package-lock.json是我们完成依赖安装后索引版本的文件，后续如果我们删除node_modules在进行npm install的话，对应依赖版本都会以这个文件为主。

在这里插入图片描述

整合ant-design-vue

引入依赖

我们在这步骤需要引入ant-design-vue以及它的样式、标签等，所以我们需要依次键入如下命令，注:这些命令都来自官网，如果版本有变，读者可以到官网cv最新的命令。

npm install ant-design-vue --save
npm install --save @ant-design/icons-vue

然后main.js全局引入对应的这些配置即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 全局引入ant-design-vue 以及css样式
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(Antd).use(store).use(router).mount('#app');

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

配置官网完成基本样式、标签整合

这里笔者就是通过官网复制粘贴+调整，就完成了一个网站的初步搭建，感兴趣的读者可以自行查阅调试，由于没有什么很高深的技巧，所以笔者就不多赘述了。

Ant Design Vue

唯一需要注意的就是选择3.0的文档。

在这里插入图片描述

header、footer组件化

我们都知道网站的头部和页脚都是通用的，所以我们建议将这些部分抽取出来，存放到上文所说的component文件夹中

以Footer.vue为例，笔者的代码如下，可以看到代码非常简单，声明样式之后引入defineComponent，并且将这个组件命名为Footer

<template>
    <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
</template>

<script>
    import {defineComponent} from 'vue';

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

<style scoped>

</style>

然后我们在核心组件app.vue中引入，核心代码如下，可以看到使用import 之后就可以使用 <Footer/>就可以将页脚的样式引入了。

<template>
    <a-layout>
        <Header/>
        <router-view/>
        <Footer/>
    </a-layout>


</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import Header from '@/components/Header.vue'; // @ is an alias to /src
    import Footer from '@/components/Footer.vue'; // @ is an alias to /src
    </script >

最后就是核心配置文件main.js,如下所示，他引入的全局都需要用到的组件，通过import 引入，通过use将其整合到app组件中。这就是为什么初始化时我们的app.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';

const app = createApp(App);

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

到此位置我们基本的东西都引入了，我们不妨拿这个vue文件测试一下看看引入是否成功

在这里插入代码片

输入如下内容，可以看到笔者直接从官网抄了两个组件贴上去

<template>
  <div class="about">
    <a-button>Add</a-button> <step-forward-outlined />
  </div>
</template>

而页面确实输出了对应的样式，由此可知我们的配置步骤成功了。

在这里插入图片描述

前端引入axios

为了能够请求后端接口，我们需要使用如下命令完成axios安装

npm install axios --save

完成后，我们即可直接import使用了，如下所示这就是笔者基于axios发起的get命令示例

  import axios from 'axios';
    import {defineComponent} from 'vue';

    export default defineComponent({
        name: 'Header.vue',
        setup() {
            let name="xiaoming";
            axios.get("http://127.0.0.1:8081/hello/"+name).then((resp) => {
                console.log(resp.data);
                alert(resp.data);
            });
        }
    });

后端项目初始化

get请求

为了测试前后端交互，我们编写了一个restful接口。

@RestController
public class HelloController {

    @GetMapping("/hello/{name}")
    public String hello(@PathVariable("name") String name) {
        return "hello" + name;
    }
}

因为前后端处于不同端口存在跨域问题，所以我们后端还需要增加一段代码。+


@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有路由
                .allowedOriginPatterns("*") // 允许所有来源
                .allowedHeaders(CorsConfiguration.ALL) // 允许所有请求头
                .allowedMethods(CorsConfiguration.ALL) // 允许所有请求方法
                .allowCredentials(true) // 允许前端带上凭证（例如 cookie）
                .maxAge(3600); // 1小时内不需要再预检（发 OPTIONS 请求）
    }
}

测试

最后刷新页面，可以看到alert输出后端的响应结果，说明整合成功了。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/243025.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构实验任务八：排序算法的实现与分析

数据结构实验任务八：排序算法的实现与分析

问题描述 统计成绩&#xff1a;给出 n 个学生的考试成绩表&#xff0c;每条信息由姓名和分数组成&#xff0c;试设 计一个算法&#xff1a; 1.按分数高低次序&#xff0c;打印出每个学生在考试中获得的名次&#xff0c;分数相同的为同 一名次&#xff1b; 2.按名次列出每个学生…
阅读更多...
36V/48V转12V 10A直流降压DC-DC芯片-AH1007

36V/48V转12V 10A直流降压DC-DC芯片-AH1007

AH1007是一款36V/48V转12V 10A直流降压&#xff08;DC-DC&#xff09;芯片&#xff0c;它是一种高性能的降压变换器&#xff0c;常用于工业、汽车和电子设备等领域。 AH1007采用了先进的PWM调制技术和开关电源控制算法&#xff0c;能够高效地将输入电压从36V/48V降低到12V&…
阅读更多...
【Spark精讲】Spark内存管理

【Spark精讲】Spark内存管理

目录 前言 Java内存管理 Java运行时数据区 Java堆 垃圾回收机制 Executor内存管理 内存类型 堆内内存 堆外内存 内存管理模式 静态内存管理 统一内存管理 ​编辑 执行内存管理 多任务间内存分配 Shuffle 的内存占用 MemoryOverHead详解 任务内存调节 错误类型…
阅读更多...
TCP/IP 四层体系结构

TCP/IP 四层体系结构

目录 ​编辑 导言&#xff1a; 应用层 1. HTTP&#xff08;超文本传输协议&#xff09; 2. FTP&#xff08;文件传输协议&#xff09; 3. SMTP&#xff08;简单邮件传输协议&#xff09; 4. POP3&#xff08;邮局协议第3版&#xff09; 5. IMAP&#xff08;互联网消息访…
阅读更多...
群晖（Synology）新建存储池使用 Home 服务

群晖（Synology）新建存储池使用 Home 服务

每一个用户都可以有一个自己的 Home 服务。 这个在群晖存储新建存储池后可以自动启用这个服务。 启用后&#xff0c;可以看到你的文件系统中有一个 homes 的文件了。 群晖&#xff08;Synology&#xff09;新建存储池使用 Home 服务 - 系统容器 - iSharkFly每一个用户都可以有…
阅读更多...
尚硅谷JavaWeb电子书城项目(Java+Mysql+Tomcat+Jsp)

尚硅谷JavaWeb电子书城项目(Java+Mysql+Tomcat+Jsp)

自己写的在线电子书城项目&#xff0c;可改写&#xff0c;添加功能&#xff0c;如打折&#xff0c;分类&#xff0c;用户管理&#xff0c;评论等功能。 使用方法&#xff1a; 1.使用idea导入项目。 2.数据库要用项目resource文件里的book.sql文件建立。 3.修改jdbc.properi…
阅读更多...
【从零开始学习JVM | 第八篇】学习垃圾回收算法 和 垃圾回收器

【从零开始学习JVM | 第八篇】学习垃圾回收算法 和 垃圾回收器

前言&#xff1a; 现代编程语言通常采用垃圾回收机制来自动管理内存。垃圾回收机制是一种自动化的内存管理技术&#xff0c;可以在程序运行时自动识别和回收不再使用的内存&#xff0c;从而减少内存泄漏和其他内存相关问题的发生。 本文将介绍垃圾回收算法和垃圾回收器的相关…
阅读更多...
【产品】Axure的基本使用（二）

【产品】Axure的基本使用（二）

文章目录 一、元件基本介绍1.1 概述1.2 元件操作1.3 热区的使用 二、表单型元件的使用2.1 文本框2.2 文本域2.3 下拉列表2.4 列表框2.5 单选按钮2.6 复选框2.7 菜单与表格元件的使用 三、实例3.1 登录2.2 个人简历 一、元件基本介绍 1.1 概述 在Axure RP中&#xff0c;元件是…
阅读更多...
模块四（一）：搭建自己的SSR

模块四（一）：搭建自己的SSR

前言&#xff1a;同构渲染是将服务器渲染和客户端渲染相结合的一种渲染方式&#xff0c;在服务端生成初始页面&#xff0c;提升首屏加载速度&#xff0c;并且有利于SEO&#xff1b;在客户端接管HTML&#xff0c;并且将静态HTML激活为数据绑定的动态HTML&#xff0c;为用户提供更…
阅读更多...
算法通关村第五关—LRU的设计与实现(黄金)

算法通关村第五关—LRU的设计与实现(黄金)

LRU的设计与实现 一、理解LRU的原理 LeetCode146:运用你所掌握的数据结构&#xff0c;设计和实现一个LRU(最近最少使用)缓存机制 实现LRUCache类&#xff1a; LRUCache(int capacity) 以正整数作为容量capacity初始化 LRU 缓存 int get(int key) 如果关键字key存在于缓存中&a…
阅读更多...
节流防抖：提升前端性能的秘密武器(下)

节流防抖：提升前端性能的秘密武器(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
小程序开发实战案例之三 | 小程序底部导航栏如何设置

小程序开发实战案例之三 | 小程序底部导航栏如何设置

小程序中最常见的功能就是底部导航栏了&#xff0c;今天就来看一下怎么设置一个好看的导航栏&#xff5e;这里我们使用的是支付宝官方小程序 IDE 做示范。 官方提供的底部导航栏 第一步&#xff1a;页面创建 一般的小程序会有四个 tab&#xff0c;我们这次也是配置四个 tab 的…
阅读更多...
学习深度强化学习---第3部分----RL蒙特卡罗相关算法

学习深度强化学习---第3部分----RL蒙特卡罗相关算法

文章目录 3.1节 蒙特卡罗法简介3.2节 蒙特卡罗策略评估3.3节 蒙特卡罗强化学习3.4节 异策略蒙特卡罗法 本部分视频所在地址&#xff1a;深度强化学习的理论与实践 3.1节 蒙特卡罗法简介 在其他学科中的蒙特卡罗法是一种抽样的方法。 如果状态转移概率是已知的&#xff0c;则是…
阅读更多...
FMETP STREAM 2.0

FMETP STREAM 2.0

FMETPSTREAM简化了Unity3D中的直播，无需编码。设置和测试仅需5分钟。 "编码器模块"将Unity游戏视图、网络摄像头、桌面、声音和麦克风输入转换为字节数据，使其完美适用于各种流媒体场景。 优化的网络模块支持Server-clients连接类型，并允许您使用单个命令向 Serve…
阅读更多...
Facebook的DINO，无监督模型，可用于分类和分割任务

Facebook的DINO，无监督模型，可用于分类和分割任务

Facebook的DINO 参考&#xff1a;https://blog.csdn.net/hello_dear_you/article/details/133695006 代码&#xff1a;https://github.com/facebookresearch/dino/tree/main DINO本质上是一种自监督学习方法&#xff0c;其核心思想是通过在大规模的无标签数据集上进行对比学习&…
阅读更多...
数据结构与算法：衡量算法好坏的指标——复杂度

数据结构与算法：衡量算法好坏的指标——复杂度

1.复杂度 复杂度&#xff0c;用来分析算法执行过程中&#xff0c;所需要的资源。 时间复杂度是衡量所需要的时间。 空间复杂度&#xff0c;是衡量所需要的(内存)空间。 1.1 时间复杂度 特性 1.衡量算法执行所需时间 2.根据「常数操作」次数推定 3.一般以最大数据量N作为衡量…
阅读更多...
关于标准库中的list（涉及STL的精华-迭代器的底层）

关于标准库中的list（涉及STL的精华-迭代器的底层）

目录 关于list list常见接口实现 STL的精华之迭代器 关于list list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立…
阅读更多...
解析视频美颜SDK的算法：美肤、滤镜与实时处理

解析视频美颜SDK的算法：美肤、滤镜与实时处理

如今&#xff0c;美颜技术在视频处理中扮演着关键的角色&#xff0c;为用户提供更加精致的视觉体验。本文将深入探讨视频美颜SDK的算法&#xff0c;聚焦于美肤、滤镜与实时处理等方面&#xff0c;揭示背后的科技奥秘。 一、美肤算法的魅力 视频美颜的一个核心功能就是美肤&am…
阅读更多...
Linux自动注册zabbix客户端（脚本化）

Linux自动注册zabbix客户端（脚本化）

参考文档&#xff1a;https://www.zabbix.com/documentation/6.0/zh/manual/api/reference/host/create 根据zabbix版本选择适合的API文档参考 #!/bin/bashusername"Admin" password"zabbix" zabbix_api"http://www.qingtongqing.cc:19080/api_json…
阅读更多...
Repo sync 时出现fatal_ couldn‘t find remote ref refs_heads_master问题解决

Repo sync 时出现fatal_ couldn‘t find remote ref refs_heads_master问题解决

repo sync默认的origin分支是master&#xff0c;它默认会依赖master&#xff0c;但是我们的manifests分支是main&#xff0c;需要解决这个问题主要执行下面的几步&#xff1a; 更新repo到最新版本 cd .repo/repo git pull # 更新repo前往git库创建origin master 在manifests…
阅读更多...
最新文章

Copyright @ 2022~2023