Simple Spring+SpringMVC+Mybatis+vuejs+webpack integrated project source code

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 Restfulend uses a controller to realize the separation of front and back ends. Use webpackpackaged 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.

The main function

  1. Realize the integration of Spring, SpringMVC, and Mybatis framework
  2. Use ehcache cache
  3. Simple use of vue.js
  4. The use of Maven Profile, aspect switching
  5. Use of Mybatis Generator

One, configure the development environment

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

2. Create a database table

1. Install the mysql database locally, use the built-in testdatabase, or create a new database

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

2. Create a table in the database

  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');  

3. Add tomcat server and deploy war package

1. File-Project StructureClick on Artifactsa column

Click +, select Web-Application-Explodedand 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

2. Generate war package

Execute the clean->compile->packagecommands of maven Lifecyle in turn, maven will generate war packages in the target directory

Tips:

maven setup options use Maven Output Directoriesto check on

3. Configure Tomcat
  1. Click onRun-Run Configurations
  2. Click to +selecttomcat server->local
  3. Click to Configureconfigure the Tomcat decompression directory, port number 8082
  4. Click Deployment选项卡, click the +number, select an artifact, which is the second war package, and the Application Context is configured asHelloSSM
  5. Click the 运行button on the right side of Tomcat to run tomcat

Four. Access Rest interface

Use Spring’s RestTemplate to test directly RestFulClientTestclick the Junit button on the class to test the interface

Five, front end

  1. First, make sure that is installed on your computer npm into the front-end resource folder if the current directory in the following directory HelloSSM, you need to cd src/main/webapp/frontendenter the front-end resources folder, and then npm installinstall dependencies
  2. Then execute the command npm run devfront-end resources will be deployed up to run in 8080

Six, page management

Type 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.

Download Details:

Author: zhaohongxuan

Source Code: https://github.com/zhaohongxuan/HelloSSM

#vuejs #vue #javascript

Simple Spring+SpringMVC+Mybatis+vuejs+webpack integrated project source code
17.55 GEEK