Use Spring + Spring MVC + Mybatis to build a simple framework Demo, the front-end interface is used vue.js+bulma
, and the back- Spring MVC Restful
end uses a controller to realize the separation of front and back ends. Use webpack
packaged front-end resources to achieve the deployment of the specific introduction page, please click on the use Maven to build Spring + SpringMVC + Mybatis + ehcache project article may be long gone, and the current code a little bit out of the main changes is the front-end code.
Configure the following development tools
JDK: 1.7
Maven:3.1.1
Tomcat:7.0.65
Mysql:5.5.20
vue.js: V1.0.26
Fork project clone to local
test
database, or create a new databasejdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3307/test
jdbc.username=root
jdbc.password=root
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');
File-Project Structure
Click on Artifacts
a columnClick +
, select Web-Application-Exploded
and select from maven. Select this project. Web Application Exploded is an uncompressed war package, which is equivalent to the folder Web Application Achieved is a compressed war package
Execute the clean->compile->package
commands of maven Lifecyle in turn, maven will generate war packages in the target directory
maven setup options use Maven Output Directories
to check on
Run-Run Configurations
+
selecttomcat server->local
Configure
configure the Tomcat decompression directory, port number 8082Deployment选项卡
, click the +
number, select an artifact, which is the second war package, and the Application Context is configured asHelloSSM
运行
button on the right side of Tomcat to run tomcatUse Spring’s RestTemplate to test directly RestFulClientTest
click the Junit button on the class to test the interface
cd src/main/webapp/frontend
enter the front-end resources folder, and then npm install
install dependenciesnpm run dev
front-end resources will be deployed up to run in 8080Type in the task bar http://localhost:8080/
and press Enter to display a simple user management page, and a simple project environment with SSM+vuejs front and back ends separated is built.
Author: zhaohongxuan
Source Code: https://github.com/zhaohongxuan/HelloSSM
#vuejs #vue #javascript