java SSM和vue整合 - Go语言中文社区

java SSM和vue整合


SSM整合流程

spring spring-mvc mybatis maven

IDE idea

  1. File => new Project => maven => create from archetype => maven-archetype-webapp
    1
  2. 一直点击next直到finished,maven会自动创建一个项目目录
    2
    • 最终项目目录结构图
.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
  1. 在创建的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.0</modelVersion>
  <groupId>article</groupId>
  <artifactId>article</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>article Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <properties>
    <spring.version>4.2.5.RELEASE</spring.version>
  </properties>

  <dependencies>
    <!--测试-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <!--spring-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- jdbc连接池 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- 事务管理 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!--spring测试用-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- 注解扫描 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- MVC -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- 切面,将日志记录,事务等分离开来 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- mybatis和spring结合用 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.2.4</version>
    </dependency>
    <!-- mysql连接驱动 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>
    <!-- 连接数据库 -->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>1.4</version>
    </dependency>
  <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.3.1</version>
    </dependency>
    <!-- 转换json用 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.7</version>
    </dependency>
    <!-- jackson转换json用 @ResponseBody默认调用jackson,将java对象转为json -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.8.7</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.8.0</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.8.7</version>
    </dependency>
    <!-- 分页插件 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.0.0</version>
    </dependency>
    <!-- javaHttp基础包 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <!-- 日志 -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>1.7.24</version>
    </dependency>
    <!-- slf4j要配合其他日志包运行,slf4j起个管理的作用 -->
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
      <version>1.1.11</version>
    </dependency>

  </dependencies>


  <build>
    <finalName>article</finalName>
    <!-- 防止package打包不到XML-->
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
    </resources>

    <plugins>
      <!-- mybatis生成代码插件 -->
      <plugin>
        <groupId>org.mybatis.generator</groupId>
        <artifactId>mybatis-generator-maven-plugin</artifactId>
        <version>1.3.5</version>
        <configuration>
          <!-- 生成文件的配置 -->
          <configurationFile>src/main/resources/generatorConfig.xml</configurationFile>
          <verbose>true</verbose>
          <overwrite>true</overwrite>
        </configuration>
      </plugin>
      <plugin>
        <!-- maven插件 -->
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.6</source>
          <target>1.6</target>
        </configuration>
      </plugin>
    </plugins>

  </build>
</project>
  1. 配置mybatisGeneratorConfig,需要连接数据库,
    将准备的sql文件导入数据库中vue_admin.sql
    generatorConfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
    PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
    "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>

  <!--<properties resource="jdbc.properties"/>-->

  <!--连接mysql的jar包-->
  <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">
    <!-- jdbc连接 -->
    <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                    connectionURL="jdbc:mysql://localhost:3306/vue_admin"
                    userId="**"
                    password="**"/>
    <!-- 生成model =》 数据层 -->
    <javaModelGenerator targetPackage="cn.lvsen.test.model" targetProject="src/main/java">
    </javaModelGenerator>
    <!-- 生成mapper 存有mybatis的数据库操作xml -->
    <sqlMapGenerator targetPackage="cn.lvsen.test.mapping" targetProject="src/main/java">
    </sqlMapGenerator>
    <!-- 存有mappper的接口类,mybatis会自动生成实体类,将mapper和dao连接起来 -->
    <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>
  1. 配置resources/spring/spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<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"/>

  <!--映射器与适配器,去掉@ResponseBody就会出问题-->
  <mvc:annotation-driven/>
  <!-- 静态资源放置地 -->
  <mvc:resources mapping="/**" location="static" />
  <!--<mvc:resources mapping="/css/**" 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>
  1. 配置resources/spring/spring-mybatis.xml
<?xml version="1.0" encoding="UTF-8"?>
<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">
  <!--引入jdbc的配置文件-->
  <bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
    <property name="location" value="classpath:jdbc.properties" />
  </bean>
  <!--jdbc连接数据库基本配置-->
  <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>
  <!--spring和mybatis结合的配置-->
  <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>

  <!--dao接口,sping会自动查找其中的类 dao ——> 数据访问层 dao映射的mapper,去掉启动报错-->
  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="cn.lvsen.test.dao"/>
    <!--对应上面id="sqlSessionFactory"-->
    <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
  </bean>
</beans>
  1. 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=**
  1. web.xml配置,web.xml是这个web项目的入口
<?xml version="1.0" encoding="utf-8" ?>
<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 Application</display-name>
  <!--spring和mybatis的配置文件-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring/spring-mybatis.xml</param-value>
  </context-param>

  <!--spring监听器-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <!--解决乱码-->
  <filter>
    <filter-name>SpringEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <!--映射的路径-->
  <filter-mapping>
    <filter-name>SpringEncodingFilter</filter-name>
    <url-pattern>/</url-pattern>
  </filter-mapping>
  <!-- 声明静态资源类型,加入spring扫描 -->
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>

  <!--spring MVC 核心分发器-->
  <servlet>
    <servlet-name>SpringMvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring/spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>SpringMvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  <!-- 首页,可以多个,根据顺来显示-->
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>
  1. SSM基本配置完了,其他功能需要的时候再加,现在新建文件夹

    • java/cn.xx.xx/controller // controller层
    • java/cn.xx.xx/service // service层
    • java/cn.xx.xx/service/impl // service层接口的实现类
    • webapp/index.html
  2. 在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<String, Object> map = new HashMap<String, Object>();

        try {
          map.put("errorCode", 0);
          map.put("message", "hello");
        } catch (Exception e) {
            map.put("errorCode", 1);
            map.put("errorMessage", "未知错误");
        }
        return map;
    }
  1. 一个接口写好,然后配置服务器启动项目
    1.3
    2.4
    3.5
    然后点击apply => OK
    项目启动,打开地址栏,追加输入api/user/hello,拿到数据OK,后台走通

前端部分

  1. 后台暂时放置,开始写前端前端部分代码

前端框架用的VUE,UI框架用的饿了么开源的element_ui

  • 总概况:vue+vue-router+vue-resource+vuex+element_ui
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_27254949/article/details/78400357
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-06 23:08:11
  • 阅读 ( 1644 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢