springboot+mybatis+vue WEB项目简易搭建文档

最新推荐文章于 2024-07-06 20:20:43 发布

Jackyi_Jh

最新推荐文章于 2024-07-06 20:20:43 发布

阅读量1.1k

点赞数

分类专栏： Java 文章标签： maven mysql java

本文链接：https://blog.csdn.net/JackyJh97/article/details/120864515

版权

Java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图书管理系统架构文档

摘要

图书管理系统，拟用MySql作数据库，使用SpringBoot作为后端架构，并使用Maven作为后端项目管理组件，Java语言，数据库与后端稳定连接架构MyBatis，Vue作为前端架构。

系统搭建步骤

1、数据库搭建

（1） 安装MySql；

在网上下载mysql安装包，解压并安装（或直接安装）。

（2） 配置MySql（非必要）；

说明：给mysql配置环境变量后我们就可以在cmd里运行mysql（开启、停止等操作）

\1. 和其实环境变量的配置方法一样，我们打开环境变量配置窗口（组合键win+Pause -> 更改设置 -> 系统属性里选择“高级” -> 环境变量）

\2. 选中系统变量中的“path”，在path值开头处输入mysql安装目录下的bin文件夹所在路径：C:\Program Files\MySQL\MySQL Server 5.7\bin，保存退出

注意：mysql server安装的默认路径为：C:\Program Files\MySQL\MySQL Server 5.7

\3. 测试是否配置成功：打开cmd，输入“

mysql -u root -p”回车，然后输入mysql安装时设置的root账号的密码（123456），若提示“Welcome to the MySQL monitor.”说明配置成功了。

（3） 启动mysql服务；

管理员的身份运行cmd（或进入mysql目录），输入“net start xxx”(xxx 为自己在安装时设置的服务器名称)

（4） 创建表，并新增数据；

建议使用navicat运行.sql文件。

2、后端框架搭建

（1）使用Maven搭建SpringBoot项目；

新建项目：

设置项目名：

创建好Maven项目之后如下：

设置Maven仓库及配置文件位置：

（2）安装依赖，及MyBatis组件

将Maven管理项目下的pom.xml文件中添加以下依赖：

<!--spring boot启动父依赖-->
	<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
	<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

	<!--依赖-->
	<dependencies>
        <dependency>	<!--aop切面编程-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        
        <dependency>	<!--数据库-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        
        <dependency>	<!--java_Web项目-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>	<!--项目健康监控-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        
        <dependency>	<!--java项目监控-->
            <groupId>de.codecentric</groupId>
            <artifactId>spring-boot-admin-starter-server</artifactId>
            <version>2.1.0</version>
        </dependency>
        <dependency>
            <groupId>de.codecentric</groupId>
            <artifactId>spring-boot-admin-starter-client</artifactId>
            <version>2.1.0</version>
        </dependency>
        
        <dependency>	<!--javax扩展库_javaEE_Api-->
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>	<!--简化调用com和Win32程序库-->
            <groupId>com.jacob</groupId>
            <artifactId>jacob</artifactId>
            <version>1.19</version>
        </dependency>

        <dependency>	<!--Mybatis启动-->
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

        <dependency>	<!--日志文件-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j</artifactId>
            <version>1.3.8.RELEASE</version>
        </dependency>

        <dependency>	<!--测试-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>	<!--常用工具API集合-->
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.4</version>
        </dependency>
        
        <dependency>	<!--用于操作JAVA BEAN的工具包(Spring Bean是被实例的，组装的及被Spring 容器管理的Java对象)-->
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.9.4</version>
        </dependency>

        <dependency>	<!--mysql数据库连接-->
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.35</version>
        </dependency>
        
        <dependency>	<!-- alibaba的druid数据库连接池 -->
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.9</version>
        </dependency>

        <dependency>	<!--json字符简化操作-->
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.datatype</groupId>
            <artifactId>jackson-datatype-joda</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.module</groupId>
            <artifactId>jackson-module-parameter-names</artifactId>
        </dependency>
       
        <!-- https://mvnrepository.com/artifact/com.microsoft.sqlserver/sqljdbc4 -->
        <dependency>	<!--jdbc数据库连接-->
            <groupId>com.microsoft.sqlserver</groupId>
            <artifactId>sqljdbc4</artifactId>
            <version>4.0</version>
        </dependency>
        
        <!--开发者工具-->
        <dependency>	<!--热部署工具-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
        
        <dependency>	<!--前后端交互简化-->
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
        

        <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
        <!--<dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.12</version>
        </dependency>-->

        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>	<!--简化Json操作-->
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.58</version>
        </dependency>
        
        <dependency>	<!--针对Excel相关操作-->
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.17</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml-schemas</artifactId>
            <version>3.17</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.17</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.1.6</version>
        </dependency>

        <!-- hutool工具类 -->
        <dependency>	<!--国产良心工具包(很方便)-->
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.4.3</version>
        </dependency>


        <dependency>	<!--IO工具库-->
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>	<!--代码打包-->
            <groupId>ant</groupId>
            <artifactId>ant</artifactId>
            <version>1.6.5</version>
        </dependency>

        <dependency>	<!--绘制图表-->
            <groupId>org.jfree</groupId>
            <artifactId>jfreechart</artifactId>
            <version>1.5.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.google.guava/guava -->
        <dependency>	<!--简化集合等基础类型的创建-->
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
            <version>28.0-jre</version>
        </dependency>

        <dependency>	<!--简化JAVA_SDK安装-->
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.0.3</version>
        </dependency>
        
        <dependency>	<!--断言简化-->
            <groupId>org.assertj</groupId>
            <artifactId>assertj-core</artifactId>
        </dependency>
        
        <dependency>	<!--简化代码-->
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
    </dependencies>
	
	
	<build>
        <finalName>ProjectLiberary</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!-- mybatis generator 自动生成代码插件 -->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.2</version>
                <configuration>
                    			
         <configurationFile>${basedir}/src/main/resources/generator/generatorConfig.xml</configurationFile>
                    <overwrite>true</overwrite>
                    <verbose>true</verbose>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.1</version>
                <configuration>
                    <skipTests>true</skipTests>
                </configuration>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <targetPath>${project.build.directory}/classes</targetPath>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/logback.xml</include>
                </includes>
            </resource>
        </resources>
    </build>

添加Maven依赖之后，需要配置Spring Boot启动配置文件，启动类，Mybatis启动配置文件。

A. Spring Boot启动配置

在resources目录下创建application.yml文件，并配置启动文件为test；
……下创建application-test.yml文件，在此文件中，配置spring boot启动配置，如mybatis文件生成位置、spring容器配置、日志文件配置。（此操作是应对多种开发模式：比如开发者环境、测试环境、生产环境等）
创建spring boot启动类于java目录下，创建的包下：

我的启动类的名称为: ProjectLiberaryApplication;

B. 日志配置文件

在resources目录下创建logback.xml，并配置。

C. Mybatis配置文件

在以上pom.xml文件中的<org.mybatis.generator>标签下的标签中显示的位置，创建MybatisGeneratorConfig.xml文件，即Mybatis数据库连接自动生成配置文件。

（3） 测试

将启动选项配置为选择的ProjectLiberaryApplication，启动。

若成功则会出现：

3、前端框架搭建

搭建Vue框架

一、安装node环境

1、下载地址为：https://nodejs.org/en/

2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

检查是否安装成功：

二、使用vue-cli

1、安装vue-cli[5]服务，如果已经安装过需要卸载之前安装的较低的版本（1.x、2.x）

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

2、node.js需要使用8.9版本以上。

3、安装vue-cli

cnpm install -g @vue/cli //或者yarn global add @vue/cli

4、检查是否安装成功：

5、创建项目，在想要搭建项目的位置打开控制台：

根据可视化创建前端项目;

或输入：vue create todo-app // todo-app是项目名

直接生成vue项目

参考

[1] Maven 翻译为"专家"、“内行”，是 Apache 下的一个纯 Java 开发的开源项目。基于项目对象模型（缩写：POM）概念，Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。Maven 是一个项目管理工具，可以对 Java 项目进行构建、依赖管理。Maven 也可被用于构建和管理各种项目，例如 C#，Ruby，Scala 和其他语言编写的项目。Maven 曾是 Jakarta 项目的子项目，现为由 Apache 软件基金会主持的独立 Apache 项目。

[2] MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code，并且改名为MyBatis 。是一个基于Java提供的持久层框架包括SQL Maps和Data Access Objects（DAOs）.

[3] Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

[4] 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

[5] Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Jackyi_Jh

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
springboot+mybatis+vue WEB项目简易搭建文档

图书管理系统架构文档摘要图书管理系统，拟用MySql作数据库，使用SpringBoot作为后端架构，并使用Maven作为后端项目管理组件，Java语言，数据库与后端稳定连接架构MyBatis，Vue作为前端架构。系统搭建步骤1、数据库搭建（1）安装MySql；在网上下载mysql安装包，解压并安装（或直接安装）。（2）配置MySql（非必要）；说明：给mysql配置环境变量后我们就可以在cmd里运行mysql（开启、停止等操作）\1. 和其实环境变量的配置方法一样，我们打开环境变量
复制链接

扫一扫