盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

系统架构之springboot+vue

作者：盐析白兔 | 2024-07-17 14:16:32

踩

springboot+vue

前端：Vue+Element-plus+axios

后端：Springboot+Mybatis-plus

数据库：MySql+Redis

开发工具可以根据自己喜好：我使用的是IDEA+WebStorm

基础准备：

前端

nodejs：Node.js 中文网 (nodejs.cn)下载nodejs，具体教程其他帖子有

vue-cli：vue的脚手架工具，nodejs安装完毕后，npm安装cli

npm install -g @vue/cli

本地如果有yarn，可以用命令yarn安装

yarn global add @vue/cli

cmd打开命令行，直接用命令行开始，我用的npm

可能出现情况，报错4048，解决方案如下

管理员身份打开cmd，清除缓存 npm cache clean --force

如果出现disable，执行下一步，升级npm npm install -g npm@latest

然后重新安装npm-cli

后端(根据自己实际情况安装，这是我本地的情况)

jdk：8

redis：5.0.14.1

mysql：5.7.41

maven：3.6.3

maven和jdk需要配置环境变量，具体安装细节其他帖子有

一、数据库初始化

1.安装mysql和navicat，百度即可

2.打开navicat，右键，新建数据库，如果没有连接，新建连接，我直接新建数据库test

3.我们数据库名填test，字符集用utf8mb4,排序规则用unicode_ci，这是unicode的标准的方案，如果说考虑性能问题，选择general，这种我们的demo基本不考虑，标准的即可，然后确定

4.新建后，我们打开test，现在表是空的，新建表

5.设计表，如下，字段填写后，将id设置主键。勾选自动递增，点击保存，输入表名person，确定

6.补充表信息，随意即可

二、前端创建项目

1. 直接使用命令行创建项目，到自己所需创建的目录下打开cmd，输入

vue create springboot_vue-show

后面是创建的项目名，自己随意就行，出现如下提示，输入 Y 然后回车

2.选择版本，我选择当前这行版本，不同版本的脚手架位置顺序会不一样，我选择3，回车

3.包管理工具的选择

npm：不推荐，串行安装，而且删除modules文件夹后无法重新利用缓存，可以更换为国内淘宝镜像

pnpm：推荐，本地集中式仓库，单依赖重新引用只会改变版本，并不会重新copy一个文件夹，然后更新版本号，毕竟pnpm 的项目初衷是节约磁盘空间并提升安装速度

4.等待创建完毕

OK了，我们可以在本地的文件夹看到所创建的文件，不要关闭命令行

5.使用webstorm打开cli创建的项目

6.命令行中继续根据提示对着敲，进入到对应的文件夹，启动服务

7.启动成功后我们看到如下，然后浏览器输入http://localhost:8080/

8.OK了

三、前端配置

1.依赖安装

由于vue-cli3没有路由选择等，所以我们需要手动敲命令行安装依赖，首先安装路由，在安装路由之前，执行下列命令，如果用的npm包管理，则用npm安装依赖

pnpm install

安装后，控制台展示这样

2.路由安装

我们安装路由,控制台会出现一些弃用版本，不用管

pnpm install vue-router

安装成功后，我们在package.json会出现路由

3.ElementUI

我们直接完全引入，webstrom打开命令行

vue3需要适配elementplus，所以不能用原来的elementui

pnpm install element-plus --save

也可以按需引入，具体详见饿了么UI官网

安装成功后

然后需要在main.js中添加官网的示例代码


import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4.axios

和后台交互，当然不能缺少axios，控制台直接敲

pnpm install axios

成功后如图

四、前端文件目录解读

1.node_modules

这个是存储我们依赖中安装的一些包，一个node.js对应着一个模块，存有一个编译后的扩展文件，net、http都是由node.js提供，包含核心模块和文件模块，核心模块直接用变量名解读，文件模块直接用相对路径来获取

2.public

存放一些公用的js文件

3.src

Source源文件，我们在开发过程中最常用的文件夹，存储我们的源码

3.1 assets

存放图片

3.2 components

子组件目录夹，vue是组件开发，在开发过程中存储着一些子组件

3.3 App.vue

父组件，我开发的习惯是把父组件放在外层，并创建同级的components，用于存放子组件

3.4 main.js

提高开发效率的组件下公用js文件，作用有三，一是存放全局变量，方便调用，二是作为入口，来实例化vue，三用来存储全局css样式以及插件，通常来作为入口

五、Springboot创建

创建方式有两种，一是使用IDEA自带的脚手架工具创建，二是官网选择配置后down，然后引入IDEA，我就直接用IDEA了，方便快捷，前提是我们不管是哪种方式，要能连上spring官网(患常就抽风，上不去)

1.打开IDEA-New Project

然后就能看到IDEA新建时候的一些选项，我们选择spring的脚手架工具，修改项目名，根据自己本地的jdk修改版本，打包方式Jar，然后点击next

2.到我们的springboot的配置阶段，我们选择lombok、springweb和spring data jpa，然后点击finish

lombok能简化开发，@Data注解可以不用写setter和getter还有equals方法，以及自动化日志变量，springweb是web启动器，spring data是spring提供的数据库访问技术，jpa是标准的orm解决方案

3.创建完成后，左侧是我们的工作目录，中间是工作区，右侧是我们的包管理工具maven，maven平级的是database，可在idea中安装驱动直接连数据库，很好用（根据idea版本的不同，早一些的版本需要手动安装database插件）

4.修改我们的maven本地仓库路径，左上角File-Settings,然后修改成本地maven路径，勾选上后面的Override，setting文件指向本地，repository是我们本地存储包的路径，默认是C盘，我们需要手动更改，然后reply，ok，然后我们退出来后maven会自动下载需要的jar，如果报错，用idea打开maven的setting.xml文件，检查一下格式

六、整合

前提：我们从脚手架down下来的springboot版本是比较新的，在3.0版本以上，只能使用jdk17版本，所以我们要么升级本地的jdk，修改配置文件，要么修改springboot版本

我本地是8，所以需要降版本，前往spring官网，找到GA版本的springboot，然后修改pom中的版本号 2.7.13，然后编译器build

1.后台连接数据库

首先我们要在idea中连接数据库，先把脚手架为我们生成的删掉 ,手动建一个application.yml,两者功能一样，但是语法不同，我比较喜欢yml

手动粘贴下列代码，username和password需要手动更改成自己的


server:
  port: 8081
 
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test
    username: root
    password: 123456
 
  #配置 Jpa
  jpa:
    hibernate:
      ddl-auto: update
    # SQL语句打印
    show-sql: true
    # 配置方言
    database-platform: org.hibernate.dialect.MySQL5Dialect

如果出现粘贴后爆红，需要在pom中增加依赖，在pom中粘贴下列代码，需要修改version的版本号，根据自己本地修改


        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>

粘贴位置如下，要放在里面，然后maven重构，我们启动项目，验证是否可以连接到本地的数据库并成功启动后台

我们这里的端口指向的是yml的配置文件中的port，然后打开浏览器验证

出现这为启动成功

2.整合mybatis

在pom文件中加入并maven重构


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.20</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

3.后台流程创建

我们需要后台建立我们的四个层，controller，service，Mapper层+实体层，目录如下,我们采用的是注解开发，所以没有dao层对应的xml文件

3.1实体层Entity

@Data注解是我们引入的lombok插件


@Data
public class PersonSltEntity {
    //id
    private Integer id;
    //姓名
    private String name;
    //性别
    private String sex;
    //年龄
    private Integer age; 
}

3.2控制层Controller

@autowired是注入bean


@RestController
@RequestMapping("/person")
public class PersonSltController {
    @Autowired
    PersonSltService personSltService;
 
    @GetMapping("/selectAll")
    public List<PersonSltEntity> getAll(){
        return personSltService.getSelectAll();
    }
}

3.3服务层Service


public interface PersonSltService {
    List<PersonSltEntity> getSelectAll();
}

3.4服务层实现类ServiceImpl


@Service
public class PersonSltServiceImpl implements PersonSltService {
    @Autowired
    PersonSltMapper personSltMapper;
 
    @Override
    public List<PersonSltEntity> getSelectAll() {
        List<PersonSltEntity> list = personSltMapper.selectAll();
        return list;
    }
}

3.5Mapper

如果没有引入mybatis-plus或者mybatis，我们是不能用@mapper注解的


@Mapper
public interface PersonSltMapper {
 
    @Select("select * from person")
    List<PersonSltEntity> selectAll();
}

3.6启动类问题解决

创建之后我们启动，并不会报错，这个时候我们的启动类在当前文件夹结构，是扫描不到我们的controller层的，需要把我们的person转移到启动类同级的文件夹目录下

3.7启动项目，验证后台连接是否正常

浏览器输入

http://localhost:8081/person/selectAll

如果出现如下，我们后台连接就ok了！

3.8前后端数据连通

我们在前端父组件中加入下列代码，来访问后台数据库


<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>名字</td>
        <td>性别</td>
      </tr>
      <tr v-for="person in personEnt" :key="person">
        <td>{{person.id}}</td>
        <td>{{person.name}}</td>
        <td>{{person.sex}}</td>
      </tr>
    </table>
  </div>
</template>
 
<script>
import axios from "axios";
 
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Person",
  data(){
    return {
      personEnt:[
        {
          id: 1,
          name: '张三',
          sex: '男'
        },
        {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ]
    }
  },
  created() {
    var that=this;
    axios.get('http://localhost:8081/person/selectAll').then(function (resp) {
      that.personEnt=resp.data;
    })
  }
 
}
</script>
 
<style scoped>
 
</style>

在这里配置url，跟我们后端的url一致

这个时候我们访问后台会出现跨域问题，后台端口是8081，前台端口是8080，我们需要在后端代码中配置跨域，我们新建一个类，在common文件夹下，然后粘上代码


@Configuration
public class Config implements WebMvcConfigurer {
 
    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }
 
}

OK，我们重启后台，成功~

4.vue应用

4.1整合vuex

应用vue的集中管理模式

pnpm install vuex

4.2编写bable.config.js

在父目录下，创建文件bable.config.js，并将代码copy

Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的 JavaScript 代码，主要是规避一些问题


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增代码
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`;
        }
      }
    ]
  ]
}

4.3store配置

在父目录下，创建store文件夹，store下创建modul，然后和modul平级创建index.js，modul下创建mask.js

index.js文件下代码


import { createStore } from "vuex";
import mask from "./modul/mask";//引入模块拆分化之后的一个文件夹，每一个模块都可以有自己的state,mutations,actions,modules
 
export default createStore({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        mask,
    },
});

mask.js代码

初始化命名空间和一些方法


export default {
    namespaced: true,
    //开启命名空间，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名
    state: {//定义一个数据
        audit: false,
    },
    mutations: {//store中更改state数据状态的唯一方法（mutations必须是同步函数）
        disaf(state) {
            state.audit = true;//改变数据的方法，方法名为audit
        },
        disaf1(state) {
            state.audit = false;
        },
    },
 
    actions: {},//action： 包含异步操作（请求API方法）、回调函数提交mutaions更改state数据状态，使之可以异步。
 
 getter:{},//getter:从基本数据(state)派生的数据，相当于state的计算属性
modules: {},//module： 模块化Vuex（将store分割成不同的模块）
};

整合后目录图片

4.4app.vue粘贴下列代码


<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>名字</td>
        <td>性别</td>
      </tr>
      <tr v-for="App in personEnt" :key="App">
        <td>{{ App.id }}</td>
        <td>{{ App.name }}</td>
        <td>{{ App.sex }}</td>
      </tr>
    </table>
  </div>
 
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
 
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
 
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
 
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
  </div>
</template>
 
 
 
 
<script>
import axios from "axios";
 
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "App",
  data(){
    return {
      personEnt:[
        {
          id: 1,
          name: '张三',
          sex: '男'
        },
        {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ]
    }
  },
  created() {
    var that=this;
    axios.get('http://localhost:8081/person/selectAll').then(function (resp) {
      that.personEnt=resp.data;
    })
  }
 
}
</script>
 
<style scoped>
 
</style>

el是引用elementplus后的代码

然后，我们需要修改main.js文件的代码！！！

因为这个时候我们的elementplus的路径是无法真正引入的，所以我们要手动引入


// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './person/router/router'
import store from '/store/index.js'
import ElementPlus from '../node_modules/element-plus';
 
// 新增代码：引入全部组件及样式
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

展示之后是这样的

OK！收工！

目前框架内是空的，后续会整合策略模式，redis引用，fastdfs整合等

下一个从零开始搭建springcloud

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】