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

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

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

源码

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

---

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

一、环境搭建

首先我们搭建一个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，打开Releases，选择最新的发布版下载压缩包。

解压打开后如下：

将其中不需要的文件夹和文件都删除掉，留下下图这些：

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

1.3 引入jquery

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

上述的文件全部被我放入了resources/static文件夹下，如图所示：

好了，到此，我们引入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 项目架构介绍

首先我们来看一下项目结构：

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

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

2.3 启动项目与运行效果

运行SsmDemoApplication类，项目正常启动后，在浏览器中输入：http://localhost:8080/api/。会看到如下页面：

在首页可以进行登录或注册。
我们使用默认管理员账户（eknows, 123456）进行登录（新注册账户默认为普通用户）。打开管理后台：

如图，我们可以管理个人信息、新增用户、编辑其他人的信息：

---

好了，关于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
• Github: https://github.com/laolunsi
• CSDN: https://blog.csdn.net/qq_28379809