基于SSM和Vue从头搭建前后端分离项目

古城微笑少年丶 2023-01-15 03:49 292阅读 0赞

前后端分离是现在做web开发的主流方法，本文记录从头搭建前后端分离项目的详细流程，相信完整阅读本文之后，你就能够明白如何使用后端的SSM框架和前端框架Vue以及Element UI进行基础的项目搭建。本文涉及到的内容包括：SpringBoot，Mybatis，Maven，MySQL，Vue以及Element UI，其中涉及到的基础知识如Java基础、按照项目开发顺序进行撰写，包括数据库配置、基本的框架搭建、Vue基础介绍、核心逻辑开发等部分。

# 1 后端框架配置 #

## 1.1 MySQL安装部署 ##

本文使用MySQL 5.7.27版本数据库（[下载地址][Link 1]）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70]  
下载后将压缩包解压至某一文件夹，然后进入bin目录，使用管理员权限运行cmd，执行下面的语句初始化数据库文件：

mysqld --initialize

初始化成功后，会在根目录的data文件夹下生成一些文件，其中以err结尾的文件夹中生成了初始密码（和具体MySQL数据库版本有关，部分版本没有初始密码），如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 1]  
接下来，执行下面的语句注册MySQL服务

mysqld -install mysql

执行下面的语句启动MySQL服务器

net start mysql

如果控制台中出现了如下语句说明服务器启动成功！  
![在这里插入图片描述][20210421154754386.png]  
执行下面的语句连接服务器：

mysql -u root -p

接下来输入密码，初始密码可能为空，也可能在前面介绍的.err文件里面，自己尝试一下即可。成功登录之后需要修改初始密码，执行下面的SQL语句修改密码：

ALTER USER 'root'@'localhost' IDENTIFIED BY 'new_password';

至此，MySQL的安装配置工作完成，详细的数据库建表内容因具体业务而易本文不详细介绍。

## 1.2 SpringBoot环境搭建 ##

前言：该部分环境搭建过程参考自其他优秀的博客，如果按照本文的配置顺序出现无法解决的问题可以参考这些参考博文。

*  [使用IDEA搭建一个简单的SpringBoot项目——详细过程][IDEA_SpringBoot]
 *  [Intellij IDEA——配置MySQL的驱动程序][Intellij IDEA_MySQL]
 *  [使用IntelliJ IDEA 配置Maven（入门）][IntelliJ IDEA _Maven]

本文使用IDEA 社区版，[下载地址][Link 2]，社区版阉割了很多功能，不过开发一个小项目够用了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 2]

## 1.3 使用Spring Assistant创建项目 ##

我是用的IDEA Community版本中新建项目的时候没有Spring相关的选项，因此首先要在IDEA的File->Settings->plugins中搜索Spring相关的插件，我在搜索的时候没有找到其他博客中提到的Spring Boot，搜索结果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 3]  
按照[这个博客][Link 3]的步骤，安装Spring Assistant后重启再新建项目就可以看到Spring Assistant这个选项了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 4]  
Project SDK选择合适的即可，我选择的JDK8。之后点击next进入下面的页面的配置页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 5]  
点击Next之后选择相关的Web依赖，选择下面的几个选项：

*  Web
    
     *  Spring Web
 *  Template Engines
    
     *  Thymeleaf
 *  SQL
    
     *  MySQL Driver
     *  JDBC API
     *  MyBatis Framework

之后点击Next简单配置即可完成SpringBoot项目的创建。

## 1.4 Maven ##

接下来需要进行Maven相应的设置，本节操作参考自[这里][IntelliJ IDEA _Maven]。首先到Apache Maven官网下载Maven:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 6]  
将压缩包解压到本地之后再新建一个文件夹作为本地仓库：![在这里插入图片描述][20210421173951568.png]  
配置本地仓库路径：在解压根目录下conf/settings.xml文件中添加本地仓库地址，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 7]  
之后在系统中配置Maven环境变量：将Maven解压文件夹中bin文件夹的路径添加到Path路径中，之后在命令行执行

mvn -version

检查maven环境变量是否配置成功。如果配置成功，到IDEA中配置Maven路径：File -> Settings，将解压的Maven根目录路径填到Maven home directory中，将Maven中的配置文件路径填到User settings file中，Local repository不管，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 8]  
如此配置完后，IDEA应该会自动导包（IDEA下面的进度条出现），等导包完成。

## 1.5 连接MySQL数据库 ##

使用IDEA 社区版的时候，我发现社区版没有Database，作为替代方案可以在File -> settings -> plugins中搜索Database Navigator。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 9]

安装后重启IEDA生效，即可按照下图的操作顺序发现DB Browser。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 10]  
在DB Browser界面点击左上角的加号添加MySQL数据库，按照下图所示进行配置，其中的Driver source选项可以先不修改，使用默认的Built-in library（下图是我修改过的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 11]  
之后点击Test Connection进行连接测试，如果发生下图所示的错误，说明MySQL的连接驱动有问题。  
![在这里插入图片描述][20210421160154614.png]  
对应的解决方法：到[MySQL官网][MySQL]下载连接驱动，我使用的5.1.27版本没有出现问题（选择zip压缩包格式的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 12]  
下载解压后得到mysql-connector-java-5.1.27-bin.jar，之后到前面的DB Browser中设置Driver source为External library，将mysql-connector的位置填入Driver library中后能够自动识别到对应的Driver文件。之后再点击Test Connection应该就能够正常的连接到数据库中了，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 13]

# 2 前端框架部署 #

## 2.1 安装Vue-CLI ##

前端使用Vue-cli脚手架搭建，进入[官网][Link 4]最下面可以看到vue-cli安装方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 14]  
由于vue-cli是运行在node.js环境下的，因此首先需要安装node.js，具体的安装方法见node.js官网。  
安装成功之后可以执行 `vue --version`检查是否能够正常使用vue-cli。之后执行

vue create project-name

创建新的前端项目，创建项目的过程比较漫长，创建成功之后命令行是这样子的：  
![在这里插入图片描述][20210421193118655.png]

## 2.2 安装Element UI框架 ##

在vue中引入Element UI框架：

npm i element-ui -S

之后在main.js中引入element：

import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(Element)

即可直接在组件中使用Element UI。

## 2.3 安装axios ##

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。安装命令：

npm i axios

[Link 1]: https://downloads.mysql.com/archives/community/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70]: /images/20221022/610224d9a0f2451e93e42ad0227e3ea4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 1]: /images/20221022/94b6883a14314361ae963c02101b7aaf.png
[20210421154754386.png]: /images/20221022/7a1340723f44427c97807e7b9cab63f3.png
[IDEA_SpringBoot]: https://blog.csdn.net/baidu_39298625/article/details/98102453
[Intellij IDEA_MySQL]: https://blog.csdn.net/fox372/article/details/109527407
[IntelliJ IDEA _Maven]: https://blog.csdn.net/qq_32588349/article/details/51461182
[Link 2]: https://www.jetbrains.com/idea/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 2]: /images/20221022/0ac6cf3903a04446a1f8f1b21f0a815a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 3]: /images/20221022/df22bf27d3944e6fbbc0e7913d902479.png
[Link 3]: https://blog.csdn.net/chy555chy/article/details/84970042
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 4]: /images/20221022/f1440022a0f443d1bee6336b103497a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 5]: /images/20221022/4593a7b04c0745e0a47ca540f841d59a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 6]: /images/20221022/9ac3de8913374ed2be8fecff9e8c123f.png
[20210421173951568.png]: /images/20221022/dc19ba86b99e4cd8be0281ae1beb39d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 7]: /images/20221022/e9bfe9acd54f45a091cee56b9eea7083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 8]: /images/20221022/f40c72cc51f94fd3843de5971b8f0685.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 9]: /images/20221022/628f06285da6428e8b21a41b2b6f8ac9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 10]: /images/20221022/b5e811ac91c642e9aa410f06f793d926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 11]: /images/20221022/1189121349cb457687d95ed2fc056f21.png
[20210421160154614.png]: /images/20221022/ecb9a9ae061644d1a7ae7a01d4c515f5.png
[MySQL]: https://downloads.mysql.com/archives/c-j/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 12]: /images/20221022/915c17c1f2b74e1484b9f13d0459d60b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 13]: /images/20221022/b6f88f1c9a524d668c88f6560578bb1c.png
[Link 4]: https://cli.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODIyMDI5_size_16_color_FFFFFF_t_70 14]: /images/20221022/6362f8a3f5594379ad79b1dd062478c5.png
[20210421193118655.png]: /images/20221022/6859b2f7218f41ac8e53db1839f76e7a.png