简单的Spring+SpringMVC+Mybatis+vuejs+webpack的整合项目的源码

By | 五月 16, 2019

Build Status

使用Spring +Spring MVC +Mybatis 构建的简单的框架的Demo,前端界面使用vue.js+bulma,后台使用Spring MVC Restful控制器实现前后端分离。
使用webpack打包实现前端资源的部署
具体介绍页面请点击 使用Maven搭建Spring+SpringMVC+Mybatis+ehcache项目
文章可能已经过去很久了,和目前的代码稍微有点出入,主要是前端代码的变化。

主要功能

  1. 实现Spring、SpringMVC、Mybatis三个框架的整合
  2. 使用ehcache缓存
  3. vue.js的简单使用
  4. Maven Profile的使用,方面环境切换
  5. Mybatis Generator的使用

一、配置开发环境

配置好以下开发工具

JDK: 1.7
Maven:3.1.1
Tomcat:7.0.65
Mysql:5.5.20
vue.js: V1.0.26

Fork项目Clone到本地

二.创建数据库表

1.本地安装好mysql数据库,使用自带的test数据库,或者新建数据库

jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3307/test
jdbc.username=root
jdbc.password=root

2.在数据库中创建表

  CREATE TABLE `user` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `user_name` varchar(40) NOT NULL,  
  `password` varchar(255) NOT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;  

insert  into `user`(`user_name`,`password`) values ('赵宏轩','123456');  
insert  into `user`(`user_name`,`password`) values ('赵小轩','123456');

三.添加tomcat服务器并部署war包

1.File-Project Structure点击Artifacts一栏

点击+,选择Web-Application-Exploded然后选择from maven选中本项目
Web Application Exploded是没有压缩的war包,相当于文件夹
Web Application Achieved是压缩后的war包

2.生成war包

依次执行maven Lifecyle的clean->compile->package命令
maven会在target目录生成war包

Tips:

maven的设置选项 use Maven Output Directories 要勾选上

3.配置Tomcat

  1. 点击Run-Run Configurations
  2. 点击+选择tomcat server->local
  3. 点击Configure 配置好Tomcat的解压目录,端口号8082
  4. 点击Deployment选项卡,点击+号,选择一个artifact,就是第二部的war包,Application Context 配置为HelloSSM
  5. 点击 Tomcat的右边的运行按钮,运行tomcat

四.访问Rest接口

使用Spring的RestTemplate来进行测试
直接在RestFulClientTest类上点击Junit的按钮进行接口测试

五、前端

  1. 首先要确保你的电脑上安装了npm进入前端资源文件夹 假如现在的目录就在HelloSSM的目录下面,则需要 cd src/main/webapp/frontend 进入到前端资源的文件夹下面,然后npm install 安装依赖
  2. 然后执行命令 npm run dev 前端资源就会部署起来了,运行在8080端口

六、页面管理

在任务栏输入http://localhost:8080/,回车出现用户管理的简单页面,一个简单的SSM+vuejs 前后端分离的项目环境就搭建好了。

Github下载地址