devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

系统架构之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中添加官网的示例代码

  1. import { createApp } from 'vue'
  2. import ElementPlus from 'element-plus';
  3. import 'element-plus/lib/theme-chalk/index.css';
  4. import App from './App.vue';
  5.  
  6. const app = createApp(App)
  7. app.use(ElementPlus)
  8. 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需要手动更改成自己的

  1. server:
  2.   port: 8081
  3.  
  4. spring:
  5.   datasource:
  6.     driver-class-name: com.mysql.jdbc.Driver
  7.     url: jdbc:mysql://localhost:3306/test
  8.     username: root
  9.     password: 123456
  10.  
  11.   #配置 Jpa
  12.   jpa:
  13.     hibernate:
  14.       ddl-auto: update
  15.     # SQL语句打印
  16.     show-sql: true
  17.     # 配置方言
  18.     database-platform: org.hibernate.dialect.MySQL5Dialect
  19.

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

  1.         <dependency>
  2.             <groupId>mysql</groupId>
  3.             <artifactId>mysql-connector-java</artifactId>
  4.             <version>5.1.6</version>
  5.         </dependency>

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

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

 出现这为启动成功

2.整合mybatis

在pom文件中加入并maven重构

  1.         <dependency>
  2.             <groupId>org.springframework.boot</groupId>
  3.             <artifactId>spring-boot-starter-jdbc</artifactId>
  4.         </dependency>
  5.         <dependency>
  6.             <groupId>org.springframework.boot</groupId>
  7.             <artifactId>spring-boot-starter-web</artifactId>
  8.         </dependency>
  9.         <dependency>
  10.             <groupId>org.mybatis.spring.boot</groupId>
  11.             <artifactId>mybatis-spring-boot-starter</artifactId>
  12.             <version>2.1.2</version>
  13.         </dependency>
  14.         <dependency>
  15.             <groupId>com.alibaba</groupId>
  16.             <artifactId>druid-spring-boot-starter</artifactId>
  17.             <version>1.1.20</version>
  18.         </dependency>
  19.         <dependency>
  20.             <groupId>mysql</groupId>
  21.             <artifactId>mysql-connector-java</artifactId>
  22.             <scope>runtime</scope>
  23.         </dependency>
  24.         <dependency>
  25.             <groupId>org.springframework.boot</groupId>
  26.             <artifactId>spring-boot-starter-test</artifactId>
  27.             <scope>test</scope>
  28.             <exclusions>
  29.                 <exclusion>
  30.                     <groupId>org.junit.vintage</groupId>
  31.                     <artifactId>junit-vintage-engine</artifactId>
  32.                 </exclusion>
  33.             </exclusions>
  34.         </dependency>

3.后台流程创建

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

 3.1实体层Entity

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

  1. @Data
  2. public class PersonSltEntity {
  3.     //id
  4.     private Integer id;
  5.     //姓名
  6.     private String name;
  7.     //性别
  8.     private String sex;
  9.     //年龄
  10.     private Integer age; 
  11. }
3.2控制层Controller

@autowired是注入bean

  1. @RestController
  2. @RequestMapping("/person")
  3. public class PersonSltController {
  4.     @Autowired
  5.     PersonSltService personSltService;
  6.  
  7.     @GetMapping("/selectAll")
  8.     public List<PersonSltEntity> getAll(){
  9.         return personSltService.getSelectAll();
  10.     }
  11. }
 3.3服务层Service
  1. public interface PersonSltService {
  2.     List<PersonSltEntity> getSelectAll();
  3. }
3.4服务层实现类ServiceImpl
  1. @Service
  2. public class PersonSltServiceImpl implements PersonSltService {
  3.     @Autowired
  4.     PersonSltMapper personSltMapper;
  5.  
  6.     @Override
  7.     public List<PersonSltEntity> getSelectAll() {
  8.         List<PersonSltEntity> list = personSltMapper.selectAll();
  9.         return list;
  10.     }
  11. }
3.5Mapper

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

  1. @Mapper
  2. public interface PersonSltMapper {
  3.  
  4.     @Select("select * from person")
  5.     List<PersonSltEntity> selectAll();
  6. }
3.6启动类问题解决
创建之后我们启动，并不会报错，这个时候我们的启动类在当前文件夹结构，是扫描不到我们的controller层的，需要把我们的person转移到启动类同级的文件夹目录下

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

浏览器输入

http://localhost:8081/person/selectAll

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

 3.8前后端数据连通

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

  1. <template>
  2.   <div>
  3.     <table>
  4.       <tr>
  5.         <td>编号</td>
  6.         <td>名字</td>
  7.         <td>性别</td>
  8.       </tr>
  9.       <tr v-for="person in personEnt" :key="person">
  10.         <td>{{person.id}}</td>
  11.         <td>{{person.name}}</td>
  12.         <td>{{person.sex}}</td>
  13.       </tr>
  14.     </table>
  15.   </div>
  16. </template>
  17.  
  18. <script>
  19. import axios from "axios";
  20.  
  21. export default {
  22.   // eslint-disable-next-line vue/multi-word-component-names
  23.   name: "Person",
  24.   data(){
  25.     return {
  26.       personEnt:[
  27.         {
  28.           id: 1,
  29.           name: '张三',
  30.           sex: '男'
  31.         },
  32.         {
  33.           id: 2,
  34.           name: '李四',
  35.           sex: '女'
  36.         }
  37.       ]
  38.     }
  39.   },
  40.   created() {
  41.     var that=this;
  42.     axios.get('http://localhost:8081/person/selectAll').then(function (resp) {
  43.       that.personEnt=resp.data;
  44.     })
  45.   }
  46.  
  47. }
  48. </script>
  49.  
  50. <style scoped>
  51.  
  52. </style>

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

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

  1. @Configuration
  2. public class Config implements WebMvcConfigurer {
  3.  
  4.     /**
  5.      * 开启跨域
  6.      */
  7.     @Override
  8.     public void addCorsMappings(CorsRegistry registry) {
  9.         // 设置允许跨域的路由
  10.         registry.addMapping("/**")
  11.                 // 设置允许跨域请求的域名
  12.                 .allowedOriginPatterns("*")
  13.                 // 是否允许证书（cookies）
  14.                 .allowCredentials(true)
  15.                 // 设置允许的方法
  16.                 .allowedMethods("*")
  17.                 // 跨域允许时间
  18.                 .maxAge(3600);
  19.     }
  20.  
  21. }

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

4.vue应用

4.1整合vuex

应用vue的集中管理模式

pnpm install vuex
4.2编写bable.config.js

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

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

  1. module.exports = {
  2.   presets: [
  3.     '@vue/cli-plugin-babel/preset'
  4.   ],
  5.   // 新增代码
  6.   plugins: [
  7.     [
  8.       "import",
  9.       {
  10.         libraryName: 'element-plus',
  11.         customStyleName: (name) => {
  12.           return `element-plus/lib/theme-chalk/${name}.css`;
  13.         }
  14.       }
  15.     ]
  16.   ]
  17. }
  18.
4.3store配置

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

index.js文件下代码

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

mask.js代码

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

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

整合后目录图片

4.4app.vue粘贴下列代码

  1. <template>
  2.   <div>
  3.     <table>
  4.       <tr>
  5.         <td>编号</td>
  6.         <td>名字</td>
  7.         <td>性别</td>
  8.       </tr>
  9.       <tr v-for="App in personEnt" :key="App">
  10.         <td>{{ App.id }}</td>
  11.         <td>{{ App.name }}</td>
  12.         <td>{{ App.sex }}</td>
  13.       </tr>
  14.     </table>
  15.   </div>
  16.  
  17.   <div class="hello">
  18.     <h1>{{ msg }}</h1>
  19.     <el-row>
  20.       <el-button>默认按钮</el-button>
  21.       <el-button type="primary">主要按钮</el-button>
  22.       <el-button type="success">成功按钮</el-button>
  23.       <el-button type="info">信息按钮</el-button>
  24.       <el-button type="warning">警告按钮</el-button>
  25.       <el-button type="danger">危险按钮</el-button>
  26.     </el-row>
  27.  
  28.     <el-row>
  29.       <el-button plain>朴素按钮</el-button>
  30.       <el-button type="primary" plain>主要按钮</el-button>
  31.       <el-button type="success" plain>成功按钮</el-button>
  32.       <el-button type="info" plain>信息按钮</el-button>
  33.       <el-button type="warning" plain>警告按钮</el-button>
  34.       <el-button type="danger" plain>危险按钮</el-button>
  35.     </el-row>
  36.  
  37.     <el-row>
  38.       <el-button round>圆角按钮</el-button>
  39.       <el-button type="primary" round>主要按钮</el-button>
  40.       <el-button type="success" round>成功按钮</el-button>
  41.       <el-button type="info" round>信息按钮</el-button>
  42.       <el-button type="warning" round>警告按钮</el-button>
  43.       <el-button type="danger" round>危险按钮</el-button>
  44.     </el-row>
  45.  
  46.     <el-row>
  47.       <el-button icon="el-icon-search" circle></el-button>
  48.       <el-button type="primary" icon="el-icon-edit" circle></el-button>
  49.       <el-button type="success" icon="el-icon-check" circle></el-button>
  50.       <el-button type="info" icon="el-icon-message" circle></el-button>
  51.       <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  52.       <el-button type="danger" icon="el-icon-delete" circle></el-button>
  53.     </el-row>
  54.   </div>
  55. </template>
  56.  
  57.  
  58.  
  59.  
  60. <script>
  61. import axios from "axios";
  62.  
  63. export default {
  64.   // eslint-disable-next-line vue/multi-word-component-names
  65.   name: "App",
  66.   data(){
  67.     return {
  68.       personEnt:[
  69.         {
  70.           id: 1,
  71.           name: '张三',
  72.           sex: '男'
  73.         },
  74.         {
  75.           id: 2,
  76.           name: '李四',
  77.           sex: '女'
  78.         }
  79.       ]
  80.     }
  81.   },
  82.   created() {
  83.     var that=this;
  84.     axios.get('http://localhost:8081/person/selectAll').then(function (resp) {
  85.       that.personEnt=resp.data;
  86.     })
  87.   }
  88.  
  89. }
  90. </script>
  91.  
  92. <style scoped>
  93.  
  94. </style>

 el是引用elementplus后的代码

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

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

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

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

  1. // main.js
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import router from './person/router/router'
  5. import store from '/store/index.js'
  6. import ElementPlus from '../node_modules/element-plus';
  7.  
  8. // 新增代码：引入全部组件及样式
  9. import 'element-plus/dist/index.css'
  10.  
  11. const app = createApp(App)
  12. app.use(store)
  13. app.use(router)
  14. app.use(ElementPlus)
  15. app.mount('#app')
  16.

展示之后是这样的

 

 OK！收工！

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

下一个从零开始搭建springcloud

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号