SpringBoot2.0整合ssm+vue.js示例项目

客官°小女子只卖身不卖艺 2022-03-30 14:42 421阅读 0赞

最近学习vue，感觉直接上手前后端分离项目有点难，于是打算使用ssm+vue.js构建一个前后端不分离的项目。

这是一个基于`SpringBoot2.0` \+ `SSM` \+ `Vue.js` \+ `ElementUI`的Demo项目，简单地实现了用户管理功能，包括：登录、注册、管理用户（增删改查）。旨在提供了前端不分离项目中使用Vue.js构建前端页面的样例。

## 源码 ##

Git地址： [https://github.com/laolunsi/SsmDemo2.0][https_github.com_laolunsi_SsmDemo2.0]  
CSDN下载地址：[SpringBoot2.0整合SSM框架，Vue.js示例项目][SpringBoot2.0_SSM_Vue.js]

--------------------

下面详细描述一下我搭建这个项目的过程。

## 一、环境搭建 ##

首先我们搭建一个SpringBoot+SSM项目，可以参考我的另一篇博客[SpringBoot项目创建与第一个SSM项目示例][SpringBoot_SSM]。  
然后下面我们来引入Vue和ElementUI的文件。

### 1.1 引入Vue.js ###

需要引入：`vue.min.js`。  
注意：项目下的`vue-resource.min.js`是vue发送HTTP请求使用的。示例目前还是使用了`ajax`来发送请求。之后可能进行修改。

### 1.2 引入ElementUI ###

介绍：`Element`，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

官网上关于引入`ElementUI`的教程是面向前后端分离项目的，通常都是使用命令行进行构建（`CDN`引入什么的不谈也罢，坑得不行，很多东西都报错）。  
但是我们这里要做的只是在SSM框架下使用`vue`和`ElementUI`而已。不需要那么复杂。  
在GitHub上找到的源码仓库[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]，打开Releases，选择最新的发布版下载压缩包。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]

解压打开后如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]

将其中不需要的文件夹和文件都删除掉，留下下图这些：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 2]

注：这里的范围不好界定，我是把看起来没用的都删了。直接copy我这个是可以使用的啦。

### 1.3 引入jquery ###

为什么还要引入jquery呢？  
vue自己有一套发送HTTP请求的方式，比如`vue-resource.min.js`。  
我这里引入这是为了方便（偷懒嘿嘿），之后可能会删掉。

上述的文件全部被我放入了resources/static文件夹下，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 3]

好了，到此，我们引入vue和ElementUI完毕。下面进入开发工作。

--------------------

## 二、基于SSM+Vue.js实现用户管理系统 ##

### 2.1 建立ssm\_demo数据库 ###

为了运行这个项目，我们需要建立`ssm_demo`数据库（如果需要重命名，请修改`application.yml`文件中的配置）。然后导入user表，SQL文件在`resources`文件夹下，名为`ssm_demo.sql`，请运行该脚本。  
或执行以下SQL语句：

DROP TABLE IF EXISTS `user`;
    CREATE TABLE `user` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(255) NOT NULL,
      `password` varchar(255) NOT NULL,
      `role` int(11) NOT NULL DEFAULT '0',
      `address` varchar(255) DEFAULT NULL,
      `ip` varchar(255) DEFAULT NULL,
      `lastLoginTime` datetime DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
    -- ----------------------------
    -- Records of user
    -- ----------------------------
    INSERT INTO `user` VALUES ('1', 'eknows', '123456', '1', '南京', 'http:///www.eknown.cn', '2018-12-30 09:23:23');

默认系统管理员为`eknows`， 密码为`123456`。

### 2.2 项目架构介绍 ###

首先我们来看一下项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 4]

基于分层架构，将后端分为：`controller`层，负责接收请求、验证数据；`service`层，处理复杂逻辑、调用`DAO`层接口；`dao`层，数据访问层，直接访问数据库；

前端：将`vue`和`elementUI`的文件作为静态资源文件放入`static`文件夹下。将页面文件放入`templates`文件夹下，本项目仅有`index.html`和`admin.html`两个页面文件。

### 2.3 启动项目与运行效果 ###

运行`SsmDemoApplication`类，项目正常启动后，在浏览器中输入：`http://localhost:8080/api/`。会看到如下页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 5]

在首页可以进行登录或注册。  
我们使用默认管理员账户（`eknows`, `123456`）进行登录（新注册账户默认为普通用户）。打开管理后台：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 6]

如图，我们可以管理个人信息、新增用户、编辑其他人的信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 7]

--------------------

好了，关于SSM整合vue.js的示例项目就介绍到此。

## 交流学习 ##

如果大家有兴趣一起学习技术，一起交流讨论，可以加入QQ群：701365388，目前基本没什么人气啦(ฅ´ω\`ฅ)，不过有问题群主会努力解答的。嘿嘿٩(ˊᗜˋ\*)و。

If you have any problem or ideas about my blogs or projects, you can contact me using any ways in the following list →\_→:

*  Personal Site: [http://www.eknown.cn][http_www.eknown.cn]
 *  Github: [https://github.com/laolunsi][https_github.com_laolunsi]
 *  CSDN: [https://blog.csdn.net/qq\_28379809][https_blog.csdn.net_qq_28379809]

[https_github.com_laolunsi_SsmDemo2.0]: https://github.com/laolunsi/SsmDemo2.0
[SpringBoot2.0_SSM_Vue.js]: https://download.csdn.net/download/qq_28379809/10899441
[SpringBoot_SSM]: https://blog.csdn.net/qq_28379809/article/details/83218797
[https_github.com_ElemeFE_element]: https://github.com/ElemeFE/element
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70]: /images/20220330/510a1668d9144450bca08c1110f5da41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 1]: /images/20220330/8e7498cbfabc4d20be9b70b994100375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 2]: /images/20220330/e74cd7a2452c4ca0851f88d38291c811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 3]: /images/20220330/7ad435eb153b421091ccc4ace48e9c76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 4]: /images/20220330/fbcafaafa32e44b4a49a3b0bcaf11f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 5]: /images/20220330/7bb8149f9a124fe499f68016807df6c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 6]: /images/20220330/545200a931ee49c5b10ee8bf415e566c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4Mzc5ODA5_size_16_color_FFFFFF_t_70 7]: /images/20220330/1080903fd675454db09666c11395db86.png
[http_www.eknown.cn]: http://www.eknown.cn
[https_github.com_laolunsi]: https://github.com/laolunsi
[https_blog.csdn.net_qq_28379809]: https://blog.csdn.net/qq_28379809