空夜

SpringBoot整合ssm+vue.js项目
最近学习vue,感觉直接上手前后端分离项目有点难,于是打算使用ssm+vue.js构建一个前后端不分离的项目。这是...
扫描右侧二维码阅读全文
06
2019/01

SpringBoot整合ssm+vue.js项目

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

这是一个基于SpringBoot2.0 + SSM + Vue.js + ElementUI的Demo项目,简单地实现了用户管理功能,包括:登录、注册、管理用户(增删改查)。

源码

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框架下使用vueElementUI而已。不需要那么复杂。
在GitHub上找到的源码仓库https://github.com/ElemeFE/element,打开Releases,选择最新的发布版下载压缩包。
Alt text

解压打开后如下:
Alt text

将其中不需要的文件夹和文件都删除掉,留下下图这些:
Alt text

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

1.3 引入jquery

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

上述的文件全部被我放入了resources/static文件夹下,如图所示:
Alt text

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

首先我们来看一下项目结构:
Alt text

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

前端:将vueelementUI的文件作为静态资源文件放入static文件夹下。将页面文件放入templates文件夹下,本项目仅有index.htmladmin.html两个页面文件。

2.3 启动项目与运行效果

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

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

如图,我们可以管理个人信息、新增用户、编辑其他人的信息:
Alt text


好了,关于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 →_→:

Last modification:January 6th, 2019 at 06:09 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment