java SSM和vue整合
SSM整合流程
spring spring-mvc mybatis maven
- web前端项目的源码vue-admin
- 数据库的sql文件vue_admin.sql
IDE idea
- File => new Project => maven => create from archetype => maven-archetype-webapp
- 一直点击next直到finished，maven会自动创建一个项目目录
- 最终项目目录结构图
- 最终项目目录结构图
│ .gitignore
│ pom.xml
│ README.md
│ tree.txt
│
├─src
│ └─main
│ ├─java
│ │ └─cn
│ │ └─lvsen
│ │ └─test
│ │ ├─controller
│ │ │ TableController.java
│ │ │ UserController.java
│ │ │
│ │ ├─dao
│ │ │ TableDataMapper.java
│ │ │ UserMapper.java
│ │ │
│ │ ├─interceptor
│ │ │ AuthInterceptor.java
│ │ │
│ │ ├─mapping
│ │ │ TableDataMapper.xml
│ │ │ UserMapper.xml
│ │ │
│ │ ├─model
│ │ │ TableData.java
│ │ │ TableDataExample.java
│ │ │ User.java
│ │ │ UserExample.java
│ │ │
│ │ └─service
│ │ │ TableService.java
│ │ │ UserService.java
│ │ │
│ │ └─impl
│ │ TableServiceImpl.java
│ │ UserServiceImpl.java
│ │
│ ├─resources
│ │ │ generatorConfig.xml
│ │ │ jdbc.properties
│ │ │ logback.xml.bak
│ │ │
│ │ └─spring
│ │ spring-mvc.xml
│ │ spring-mybatis.xml
│ │
│ └─webapp
│ │ index.html
│ │ index.jsp
│ │
│ ├─static
│ │ ├─css
│ │ │ app.f3c8e005c2be0a746136766675898059.css
│ │ │ app.f3c8e005c2be0a746136766675898059.css.gz
│ │ │
│ │ ├─fonts
│ │ │ element-icons.b02bdc1.ttf
│ │ │
│ │ └─js
│ │ 0.105cd4667842b0092158.js
│ │ 1.3f78774435db7aa5de2a.js
│ │ app.3ec6fa4bebfb1bb58a2b.js
│ │ app.3ec6fa4bebfb1bb58a2b.js.gz
│ │ manifest.b0bb778337a7d07c6313.js
│ │ vendor.bbf93d5282d3216eb30e.js
│ │ vendor.bbf93d5282d3216eb30e.js.gz
│ │
│ └─WEB-INF
│ web.xml
│
└─test
TestHello.java- 在创建的POM里面添加依赖
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0modelVersion>
<groupId>articlegroupId>
<artifactId>articleartifactId>
<packaging>warpackaging>
<version>1.0-SNAPSHOTversion>
<name>article Maven Webappname>
<url>http://maven.apache.orgurl>
<properties>
<spring.version>4.2.5.RELEASEspring.version>
properties>
<dependencies>
<dependency>
<groupId>junitgroupId>
<artifactId>junitartifactId>
<version>4.12version>
<scope>testscope>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-coreartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-jdbcartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-txartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-testartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-contextartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-webmvcartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.springframeworkgroupId>
<artifactId>spring-aopartifactId>
<version>${spring.version}version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatis-springartifactId>
<version>1.2.4version>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<version>5.1.38version>
dependency>
<dependency>
<groupId>commons-dbcpgroupId>
<artifactId>commons-dbcpartifactId>
<version>1.4version>
dependency>
<dependency>
<groupId>org.mybatisgroupId>
<artifactId>mybatisartifactId>
<version>3.3.1version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>fastjsonartifactId>
<version>1.2.7version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-coreartifactId>
<version>2.8.7version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-annotationsartifactId>
<version>2.8.0version>
dependency>
<dependency>
<groupId>com.fasterxml.jackson.coregroupId>
<artifactId>jackson-databindartifactId>
<version>2.8.7version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>5.0.0version>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>javax.servlet-apiartifactId>
<version>3.1.0version>
dependency>
<dependency>
<groupId>org.slf4jgroupId>
<artifactId>slf4j-apiartifactId>
<version>1.7.24version>
dependency>
<dependency>
<groupId>ch.qos.logbackgroupId>
<artifactId>logback-classicartifactId>
<version>1.1.11version>
dependency>
dependencies>
<build>
<finalName>articlefinalName>
<resources>
<resource>
<directory>src/main/javadirectory>
<includes>
<include>**/*.xmlinclude>
includes>
<filtering>truefiltering>
resource>
resources>
<plugins>
<plugin>
<groupId>org.mybatis.generatorgroupId>
<artifactId>mybatis-generator-maven-pluginartifactId>
<version>1.3.5version>
<configuration>
<configurationFile>src/main/resources/generatorConfig.xmlconfigurationFile>
<verbose>trueverbose>
<overwrite>trueoverwrite>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-compiler-pluginartifactId>
<configuration>
<source>1.6source>
<target>1.6target>
configuration>
plugin>
plugins>
build>
project>- 配置mybatisGeneratorConfig，需要连接数据库，
将准备的sql文件导入数据库中vue_admin.sql
generatorConfig.xml
<generatorConfiguration>
<classPathEntry
location="C:/Users/**/.m2/repository/mysql/mysql-connector-java/5.1.29/mysql-connector-java-5.1.29.jar" />
<context id="default" targetRuntime="MyBatis3">
<jdbcConnection driverClass="com.mysql.jdbc.Driver"
connectionURL="jdbc:mysql://localhost:3306/vue_admin"
userId="**"
password="**"/>
<javaModelGenerator targetPackage="cn.lvsen.test.model" targetProject="src/main/java">
javaModelGenerator>
<sqlMapGenerator targetPackage="cn.lvsen.test.mapping" targetProject="src/main/java">
sqlMapGenerator>
<javaClientGenerator type="XMLMAPPER" targetPackage="cn.lvsen.test.dao" targetProject="src/main/java">
javaClientGenerator>
<table tableName="t_table" domainObjectName="TableData"/>
<table tableName="t_user" domainObjectName="User" />
context>
generatorConfiguration>- 配置resources/spring/spring-mvc.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="cn.lvsen.test"/>
<mvc:annotation-driven/>
<mvc:resources mapping="/**" location="static" />
<mvc:default-servlet-handler />
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/api/**"/>
<bean class="cn.lvsen.test.interceptor.AuthInterceptor"/>
mvc:interceptor>
mvc:interceptors>
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/" p:suffix=".html"/>
beans>- 配置resources/spring/spring-mybatis.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="location" value="classpath:jdbc.properties" />
bean>
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
<property name="driverClassName" value="${jdbc.driver}" />
<property name="url" value="${jdbc.url}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="mapperLocations" value="classpath:cn/lvsen/test/mapping/*Mapper.xml" />
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<value>value>
property>
bean>
array>
property>
bean>
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="cn.lvsen.test.dao"/>
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
bean>
beans>- spring-mybatis.xml配置时用了jdbc.properties这是为了方便管理连接
resources/jdbc.properties的配置
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/vue_admin?useUnicode=true&characterEncoding=UTF-8
jdbc.username=**
jdbc.password=**- web.xml配置，web.xml是这个web项目的入口
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>Archetype Created Web Applicationdisplay-name>
<context-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/spring-mybatis.xmlparam-value>
context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
listener>
<filter>
<filter-name>SpringEncodingFilterfilter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
<init-param>
<param-name>encodingparam-name>
<param-value>UTF-8param-value>
init-param>
<init-param>
<param-name>forceEncodingparam-name>
<param-value>trueparam-value>
init-param>
filter>
<filter-mapping>
<filter-name>SpringEncodingFilterfilter-name>
<url-pattern>/url-pattern>
filter-mapping>
<servlet-mapping>
<servlet-name>defaultservlet-name>
<url-pattern>*.htmlurl-pattern>
servlet-mapping>
<servlet>
<servlet-name>SpringMvcservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/spring-mvc.xmlparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>SpringMvcservlet-name>
<url-pattern>/url-pattern>
servlet-mapping>
<welcome-file-list>
<welcome-file>index.htmlwelcome-file>
welcome-file-list>
web-app>SSM基本配置完了，其他功能需要的时候再加，现在新建文件夹
- java/cn.xx.xx/controller // controller层
- java/cn.xx.xx/service // service层
- java/cn.xx.xx/service/impl // service层接口的实现类
- webapp/index.html
在controller里面新建一个UserController类，
进行restAPI的书写,api使用url: api/user/hello
@Controller
@RequestMapping("api/user")
public class UserController {
@RequestMapping(value = "hello", method = RequestMethod.GET)
@ResponseBody // 要返回json数据
public Map login(HttpSession httpSession) {
Map map = new HashMap();
try {
map.put("errorCode", 0);
map.put("message", "hello");
} catch (Exception e) {
map.put("errorCode", 1);
map.put("errorMessage", "未知错误");
}
return map;
} - 一个接口写好，然后配置服务器启动项目
1.
2.
3.
然后点击apply => OK
项目启动，打开地址栏，追加输入api/user/hello，拿到数据OK，后台走通
前端部分
- 后台暂时放置，开始写前端前端部分代码
前端框架用的VUE，UI框架用的饿了么开源的element_ui
- 总概况：vue+vue-router+vue-resource+vuex+element_ui