【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base

SSM+ElementUI综合练习-day02

Jar导入版本转换为maven版本(掌握)
SSM抽取Base(掌握)
Maven多模块(掌握)
前后端分离后台-crud实现(掌握)
前后端分离前台基于vue-element-admin模板-crud实现(掌握)

在昨天的课程中完成了前后端分析实现,但是有以下几个问题:

1)后端环境没有实现
2)前端环境管理太丑

所以今天我们要导入一个别人写好的基于vue-cli+elementui的管理界面,并且使用自己写的后台来实现前后端分离crud。

二、单体后台环境搭建

最终的效果:
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第1张图片

1、新建mavenweb项目并且可以启动

1.1、创建maven web App

File->New->Project
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第2张图片
创建好项目后,在src/main目录下创建java和resources
File->Project Structrue
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第3张图片
选中main,右键new folder,然后分别设置为Sources和Resources
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第4张图片
创建测试的目录结构
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第5张图片
到这一步,我们的一个基本的Maven的WEB项目就创建成功。
1.2、配置Tomcat
启动测试index.jsp

2、集成ssm

2.1、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/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0modelVersion>

  <groupId>cn.itsourcegroupId>
  <artifactId>crmartifactId>
  <version>1.0-SNAPSHOTversion>
  <packaging>warpackaging>

  <name>crmname>
  <url>http://www.example.comurl>

  <properties>
    <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
    <maven.compiler.source>1.7maven.compiler.source>
    <maven.compiler.target>1.7maven.compiler.target>
    <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
    
    <spring.version>4.1.2.RELEASEspring.version>
    
    <mybatis.version>3.2.1mybatis.version>
    
    <slf4j.version>1.7.2slf4j.version>
    <log4j.version>1.2.17log4j.version>
    
    <jackson.version>2.5.0jackson.version>
  properties>

  <dependencies>
    
    <dependency>
      <groupId>junitgroupId>
      <artifactId>junitartifactId>
      <version>4.11version>
      <scope>testscope>
    dependency>

    
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-aopartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-aspectsartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-beansartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-contextartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-coreartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-expressionartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-jdbcartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-testartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-txartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>commons-logginggroupId>
      <artifactId>commons-loggingartifactId>
      <version>1.1.1version>
    dependency>

    
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-webartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-webmvcartifactId>
      <version>${spring.version}version>
    dependency>

    
    <dependency>
      <groupId>aopalliancegroupId>
      <artifactId>aopallianceartifactId>
      <version>1.0version>
    dependency>
    <dependency>
      <groupId>org.aspectjgroupId>
      <artifactId>aspectjweaverartifactId>
      <version>1.6.8version>
    dependency>

    
    <dependency>
      <groupId>commons-fileuploadgroupId>
      <artifactId>commons-fileuploadartifactId>
      <version>1.3.1version>
    dependency>
    <dependency>
      <groupId>commons-iogroupId>
      <artifactId>commons-ioartifactId>
      <version>2.2version>
    dependency>
    
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-databindartifactId>
      <version>${jackson.version}version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-coreartifactId>
      <version>${jackson.version}version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-annotationsartifactId>
      <version>${jackson.version}version>
    dependency>

    
    <dependency>
      <groupId>commons-dbcpgroupId>
      <artifactId>commons-dbcpartifactId>
      <version>1.2.2version>
    dependency>
    <dependency>
      <groupId>commons-poolgroupId>
      <artifactId>commons-poolartifactId>
      <version>1.5.3version>
    dependency>

    
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatisartifactId>
      <version>${mybatis.version}version>
    dependency>
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatis-springartifactId>
      <version>1.2.0version>
    dependency>

    
    <dependency>
      <groupId>log4jgroupId>
      <artifactId>log4jartifactId>
      <version>${log4j.version}version>
    dependency>

    
    <dependency>
      <groupId>org.slf4jgroupId>
      <artifactId>slf4j-apiartifactId>
      <version>${slf4j.version}version>
    dependency>
    <dependency>
      <groupId>org.slf4jgroupId>
      <artifactId>slf4j-log4j12artifactId>
      <version>${slf4j.version}version>
      <scope>testscope>
    dependency>

    
    <dependency>
      <groupId>mysqlgroupId>
      <artifactId>mysql-connector-javaartifactId>
      <version>5.1.46version>
    dependency>

    
    <dependency>
      <groupId>jstlgroupId>
      <artifactId>jstlartifactId>
      <version>1.2version>
    dependency>

    
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>javax.servlet-apiartifactId>
      <version>3.0.1version>
      <scope>providedscope>
    dependency>

    <dependency>
      <groupId>javax.servlet.jspgroupId>
      <artifactId>jsp-apiartifactId>
      <version>2.2version>
      <scope>providedscope>
    dependency>
  dependencies>

  <build>
    <finalName>crmfinalName>
    <pluginManagement>
      <plugins>
        <plugin>
          <artifactId>maven-clean-pluginartifactId>
          <version>3.0.0version>
        plugin>
        
        <plugin>
          <artifactId>maven-resources-pluginartifactId>
          <version>3.0.2version>
        plugin>
        <plugin>
          <artifactId>maven-compiler-pluginartifactId>
          <version>3.7.0version>
        plugin>
        <plugin>
          <artifactId>maven-surefire-pluginartifactId>
          <version>2.20.1version>
        plugin>
        <plugin>
          <artifactId>maven-war-pluginartifactId>
          <version>3.2.0version>
        plugin>
        <plugin>
          <artifactId>maven-install-pluginartifactId>
          <version>2.5.2version>
        plugin>
        <plugin>
          <artifactId>maven-deploy-pluginartifactId>
          <version>2.8.2version>
        plugin>
      plugins>
    pluginManagement>
  build>

project>

2.2、web.xml:

<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>crmdisplay-name>
  
  <context-param>
    <param-name>contextConfigLocationparam-name>
    <param-value>classpath:applicationContext.xmlparam-value>
  context-param>
  
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
  listener>

  
  <servlet>
    <servlet-name>springmvcservlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
    <init-param>
      <param-name>contextConfigLocationparam-name>
      <param-value>classpath:applicationContext-mvc.xmlparam-value>
    init-param>
    <load-on-startup>1load-on-startup>
  servlet>
  <servlet-mapping>
    <servlet-name>springmvcservlet-name>
    <url-pattern>/url-pattern>
  servlet-mapping>

  
  <filter>
    <filter-name>encodingFilterfilter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
    <init-param>
      <param-name>encodingparam-name>
      <param-value>UTF-8param-value>
    init-param>
  filter>
  <filter-mapping>
    <filter-name>encodingFilterfilter-name>
    <url-pattern>/*url-pattern>
  filter-mapping>
web-app>

2.3、applicationContext-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: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.itsource.crm.web.controller" />

    
    <mvc:annotation-driven/>

    
    <mvc:default-servlet-handler/>

    
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    bean>

    
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        
        <property name="defaultEncoding" value="utf-8" />
        
        <property name="maxUploadSize" value="10485760000" />
    bean>
beans>

2.4、db.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql:///itsource_dms?useUnicode=true&characterEncoding=utf-8
username=root
password=123456

2.5、log4j.properties

log4j.rootLogger=ERROR, stdout
#log4j.rootLogger=NONE
log4j.logger.cn.itsource=TRACE
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
2.6、applicationContext.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:tx="http://www.springframework.org/schema/tx"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    
    <context:component-scan base-package="cn.itsource.crm.service"/>

    
    <context:property-placeholder location="classpath:db.properties" />

    
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="${jdbc.driverClassName}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        
        <property name="maxActive" value="150" />
        
        <property name="minIdle" value="5" />
        
        <property name="maxIdle" value="20" />
        
        <property name="initialSize" value="30" />
        
        <property name="maxWait" value="1000" />
        
        <property name="timeBetweenEvictionRunsMillis" value="10000" />
        
        <property name="numTestsPerEvictionRun" value="10" />
        
        <property name="minEvictableIdleTimeMillis" value="10000" />
        <property name="validationQuery" value="SELECT NOW() FROM DUAL" />
    bean>

    
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        
        <property name="dataSource" ref="dataSource" />
        
        <property name="mapperLocations" value="classpath*:cn/itsource/crm/mapper/*Mapper.xml" />
        
        <property name="typeAliasesPackage">
            <value>
                cn.itsource.crm.domain
                Cn.itsource.crm.query
            value>
        property>
    bean>

    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.itsource.crm.mapper">property>
    bean>

    
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    bean>

    
    <tx:annotation-driven transaction-manager="transactionManager"/>


beans>
EmployeeMapper.xml


<mapper namespace="cn.itsource.mapper.EmployeeMapper">
    <select id="findAll" resultType="Employee">
        select * from employee
    select>
mapper>

3、集成ssm测试

 正常访问controller

三、后台环境搭建-抽取Base

1、抽取base

在cn.itsource.mapper层 抽取BaseMapper crud方法

package cn.itsource.mapper;

import java.io.Serializable;
import java.util.List;

/**
 * 基础Mapper
 */
public interface BaseMapper<T> {

    /**
     * 保存一个对象
     * @param t
     */
    void save(T t);

    /**
     * 移除一个对象
     * @param id
     */
    void remove(Serializable id);

    /**
     * 更新一个对象
     * @param t
     */
    void update(T t);

    /**
     * 通过id加载一个对象
     * @param id
     * @return
     */
    T loadById(Serializable id);

    /**
     * 加载所有对象
     * @return
     */
    List<T> loadAll();
}

2 抽取BaseDomain

package cn.itsource.domain;
public class BaseDomain {

    private Long id;
    
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
}

3 IBaseService

package cn.itsource.service;

import java.io.Serializable;
import java.util.List;

public interface IBaseService<T> {
    /**
     * 添加一个对象
     * @param t
     */
    void add(T t);

    /**
     * 删除一个对象
     * @param id
     */
    void del(Serializable id);

    /**
     * 更新一个对象
     * @param t
     */
    void update(T t);

    /**
     * 通过id获取一个对象
     * @param id
     * @return
     */
    T getById(Serializable id);

    /**
     * 获取所有对象
     * @return
     */
    List<T> getAll();
}

BaseServiceImpl实现

package cn.itsource.service.impl;

import cn.itsource.mapper.BaseMapper;
import cn.itsource.service.IBaseService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.io.Serializable;
import java.util.List;
//不需要加@Service,子类继承是添加
//类级别事务为读事务,分别在增删改的方法上面加写事务
//Propagation.SUPPORTS,
@Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
public class BaseServiceImpl<T> implements IBaseService<T> {

    @Autowired
    private BaseMapper<T> baseMapper;

//    @Transactional(readOnly = false,propagation = Propagation.REQUIRED)
    @Transactional
    @Override
    public void add(T t) {
        baseMapper.save(t);
//        int i = 1/0;
    }

    @Transactional
    @Override
    public void del(Serializable id) {
        baseMapper.remove(id);
    }
    @Transactional
    @Override
    public void update(T t) {
         baseMapper.update(t);
    }

    @Override
    public T getById(Serializable id) {
        return baseMapper.loadById(id);
    }

    @Override
    public List<T> getAll() {
        return baseMapper.loadAll();
    }
}

BaseDomain BaseMapper IBaseService,BaseServiceImpl

2、测试

正常访问

四、后台环境搭建-ssm+maven多模块

1、为什么需要划分

1.1、引入

像我们之前的这个项目,很常见的Spring+SpringMVC+Mybatis整合开发的web应用,在这个应用中,我们习惯性的把项目分了这么几层:
(1) Web层,负责与客户端交互,主要是一些Controller类
(2) Service层,处理业务逻辑,放一些Service接口和实现类
(3) Mapper层负责与数据库的交互
(4) Domain层,存放封装数据的实体类
对应的结构图如下:
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第6张图片
但随着项目的进行,我们可能遇到下面一系列的问题:
(1) 大部分的domain或者一些service以及mapper在多个项目中是通用的
(2) Pom.xml中的依赖越来越长
(3) Build整个项目的时间越来越长,尽管你只是一直在web层工作,但是不得不build整个项目
(4) 某个模块,比如mapper,你只想让一些经验丰富的人来维护,但是现在每个开发者都能修改这个模块,这导致关键模块的代码质量达不到你的要求

一个大项目拆分为多个小项目(maven模块)组成,而且它们是有依赖关系的.

1.2、结论
开闭原则
对扩展开放
对修改关闭
总而言之,我们前面设计的项目并没有遵循一个很重要的设计原则“高内聚,低耦合”。为了解决这些问题,我们可以使用maven对项目模块进行重新的划分。
使用Maven管理的比较大的项目都是分模块的,每个模块都对应自己的pom.xml,这样方便项目的管理和开发,避免所有的功能都糅合在一起,这也是公司里比较常见的开发模式。

2、多模块搭建

现在,我们对上面的ssm项目进行改造,将web和service和mapper层分成三个模块,再抽出base的几个模块作为公共模块使用,具体模块结构划分如下图所示:
模块名 放那些内容

basic-util 工具类: Ajaxresult PageList StringUtils
basic-core 基础核心:核心实现 baseMapper baseService baseDomain …
项目名-common 项目对应的公共东西,domian,query
项目名-mapper 映射器,*Mapper.java *Mapper.xml
项目名-service 业务模块
项目名-web web模块提供数据(接口层)

还要注意配置文件拆分:

web.xml配置
mvc:web配置
service :service配置
mapper: db,数据源配置,mapper配置

2.1、crm-parent

 它没有一个java代码,只是用来对子模块分类 类型是pom,war,jar

父亲里面配置一个公共jar给儿子继承

<properties>
        <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
        <maven.compiler.source>1.8maven.compiler.source>
        <maven.compiler.target>1.8maven.compiler.target>
        
        <spring.version>4.1.2.RELEASEspring.version>
        
        <mybatis.version>3.2.1mybatis.version>
        
        <slf4j.version>1.7.2slf4j.version>
        <log4j.version>1.2.17log4j.version>
        
        <jackson.version>2.5.0jackson.version>
    properties>
<dependencies>
        
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-aopartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-aspectsartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-beansartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-contextartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-coreartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-expressionartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-testartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>commons-logginggroupId>
            <artifactId>commons-loggingartifactId>
            <version>1.1.1version>
        dependency>

        
        <dependency>
            <groupId>aopalliancegroupId>
            <artifactId>aopallianceartifactId>
            <version>1.0version>
        dependency>
        <dependency>
            <groupId>org.aspectjgroupId>
            <artifactId>aspectjweaverartifactId>
            <version>1.6.8version>
        dependency>
    dependencies>

2.2、basic-uitl

作为各项目的公共工具的抽取

PageList:total,rows
AjaxResult:success,message
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第7张图片

AjaxResult.java


public class AjaxResult {
    private boolean success = true;
    private String message = "操作成功!";
    public boolean isSuccess() {
        return success;
    }
    //链式编程,可以继续. 设置完成后自己对象返回
    public AjaxResult setSuccess(boolean success) {
        this.success = success;
        return this;
    }
    public String getMessage() {
        return message;
    }
    public AjaxResult setMessage(String message) {
        this.message = message;
        return this;
    }
    //默认成功
    public AjaxResult() {
    }
    //失败调用
    public AjaxResult(String message) {
        this.success = false;
        this.message = message;
    }
    //不要让我创建太多对象
    public static AjaxResult me(){
        return new AjaxResult();
    }
    public static void main(String[] args) {
        AjaxResult.me().setMessage("xxx").setSuccess(false);
    }
}

PageList.java

public class PageList<T> {
   //总数
    private Long total = 0L;
    //当前页数据
    private List<T> rows = new ArrayList<T>();
    public Long getTotal() {
        return total;
    }
    public void setTotal(Long total) {
        this.total = total;
    }
    public List<T> getRows() {
        return rows;
    }
    public void setRows(List<T> rows) {
        this.rows = rows;
    }
    public PageList() {
    }
    public PageList(Long total, List<T> rows) {
        this.total = total;
        this.rows = rows;
    }
}

2.3、basic-core

作为各项目的公共的抽取,依赖basic-utils模块

BaseDomain
BaseService
BaseMapper
BaseQuery

public class BaseQuery {
    private Long page;
    public Long getPage() {
        return page;
    }
    public void setPage(Long page) {
        this.page = page;
    }
}

这个里面的代码 和上面单体代码一摸一样,上去看就是了
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第8张图片

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第9张图片


        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-beansartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-beansartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-txartifactId>
            <version>${spring.version}version>
        dependency>

2.4、crm-common

crm-common本模块作为一个项目三层的公共部分的抽取,依赖basic-core
在该模块下面创建包

domain: query:

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第10张图片

依赖传递

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第11张图片

2.5、crm-mapper

crm-dao本模块作为一个项目持久层,依赖crm-common和basic-core:
包含mapper接口和映射;和持久层的配置
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第12张图片

<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.mybatisgroupId>
            <artifactId>mybatisartifactId>
            <version>${mybatis.version}version>
        dependency>
        <dependency>
            <groupId>org.mybatisgroupId>
            <artifactId>mybatis-springartifactId>
            <version>1.2.0version>
        dependency>
        
        <dependency>
            <groupId>log4jgroupId>
            <artifactId>log4jartifactId>
            <version>${log4j.version}version>
        dependency>

        
        <dependency>
            <groupId>org.slf4jgroupId>
            <artifactId>slf4j-apiartifactId>
            <version>${slf4j.version}version>
        dependency>
        <dependency>
            <groupId>org.slf4jgroupId>
            <artifactId>slf4j-log4j12artifactId>
            <version>${slf4j.version}version>
            <scope>testscope>
        dependency>

        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>5.1.46version>
        dependency>
        
        <dependency>
            <groupId>commons-dbcpgroupId>
            <artifactId>commons-dbcpartifactId>
            <version>1.2.2version>
        dependency>
        <dependency>
            <groupId>commons-poolgroupId>
            <artifactId>commons-poolartifactId>
            <version>1.5.3version>
        dependency>

配置文件:

ApplicationContext-mybasic.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:tx="http://www.springframework.org/schema/tx"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    
    <import resource="applicationContext-datasource-dbcp.xml"/>

    
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        
        <property name="dataSource" ref="dataSource" />
        
        <property name="mapperLocations" value="classpath*:cn/itsource/crm1/mapper/*Mapper.xml" />
        
        <property name="typeAliasesPackage">
            <value>
                cn.itsource.domain
                cn.itsource.query
            value>
        property>
    bean>

    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.itsource.crm1.mapper">property>
    bean>


beans>

配置文件:applicationContext-datasource-dbcp.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:tx="http://www.springframework.org/schema/tx"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">


    
    <context:property-placeholder location="classpath:db.properties" />

    
    <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}" />
        
        <property name="maxActive" value="150" />
        
        <property name="minIdle" value="5" />
        
        <property name="maxIdle" value="20" />
        
        <property name="initialSize" value="30" />
        
        <property name="maxWait" value="1000" />
        
        <property name="timeBetweenEvictionRunsMillis" value="10000" />
        
        <property name="numTestsPerEvictionRun" value="10" />
        
        <property name="minEvictableIdleTimeMillis" value="10000" />
        <property name="validationQuery" value="SELECT NOW() FROM DUAL" />
    bean>

beans>

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第13张图片

2.6、crm-service

crm-service本模块作为一个项目业务层,依赖crm-mapper
业务

ApplicationContext-service.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:tx="http://www.springframework.org/schema/tx"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">


    
    <import resource="classpath:applicationContext-mybatis.xml"/>
    
    <context:component-scan base-package="cn.itsource.crm1.service"/>

    
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    bean>

    
    <tx:annotation-driven transaction-manager="transactionManager"/>


beans>

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第14张图片

2.7、crm-web-mavenweb项目

crm-service本模块作为一个项目表现层,依赖crm-service

Controller

而现在我们的整体架构为前后端分离架构,所有的静态资源全部在前端项目中

        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-webartifactId>
            <version>${spring.version}version>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-webmvcartifactId>
            <version>${spring.version}version>
        dependency>

        
        <dependency>
            <groupId>commons-fileuploadgroupId>
            <artifactId>commons-fileuploadartifactId>
            <version>1.3.1version>
        dependency>
        <dependency>
            <groupId>commons-iogroupId>
            <artifactId>commons-ioartifactId>
            <version>2.2version>
        dependency>
        
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
            <version>${jackson.version}version>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-coreartifactId>
            <version>${jackson.version}version>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-annotationsartifactId>
            <version>${jackson.version}version>
        dependency>
        
        <dependency>
            <groupId>jstlgroupId>
            <artifactId>jstlartifactId>
            <version>1.2version>
        dependency>

        
        <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.0.1version>
            <scope>providedscope>
        dependency>

        <dependency>
            <groupId>javax.servlet.jspgroupId>
            <artifactId>jsp-apiartifactId>
            <version>2.2version>
            <scope>providedscope>
        dependency>
        <dependency>
            <groupId>junitgroupId>
            <artifactId>junitartifactId>
            <version>4.11version>
            <scope>testscope>
        dependency>

3、测试

正常访问controller

五、前后端分离后台实现-Crud

接口就是提供数据东西.最简单实现接口的方式就是springmvc中controller,是通过restful协议暴露,通过json作为数据传输格式.

restfull就是就是http协议的扩展,是以资源为核心,通过url定位资源,通过不同请求方式表示操作.(

PUT-add添加,
POST-update更新,
DELET-del删除,
GET-获取(查询)一个,
PATCH,查询所有
HEAD,
OPTION

)

接口地址: http地址
参数: {},String long
返回值:{}
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第15张图片

1、接口实现

package cn.itsource.web.controller;

import cn.itsource.basic.AjaxResult;
import cn.itsource.basic.PageList;
import cn.itsource.domain.Employee;
import cn.itsource.query.EmployeeQuery;
import cn.itsource.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * 员工接口:先不考虑持久层
 *     crud接口
 */
@Controller
@RequestMapping("/employee") //定位资源
public class EmployeeController {
    @Autowired
    private IEmployeeService employeeService;

    //创建员工接口:url 参数,返回值
    //@RequestBody 在请求主体里面传递过,前端要传递json就用这种方式
    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult add(@RequestBody Employee employee)
    {
        System.out.println("添加成功");
        return AjaxResult.me();
    }

    //删除接口:url 参数,返回值
    // 前台传递del /employee/1
    @RequestMapping(value = "{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult del(@PathVariable("id")Long id){
        System.out.println("删除成功"+id);
        return AjaxResult.me();
    }
    //删除接口:url 参数,返回值
    // 前台传递del /employee/1
    @RequestMapping(value = "{id}",method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@PathVariable("id")Long id,@RequestBody Employee employee){
        System.out.println("修改成功"+id+employee);
        return AjaxResult.me();
    }

    //查询一个
    @ResponseBody
    @RequestMapping(value = "/{id}",method = RequestMethod.GET)
    public  Employee getById(@PathVariable("id") Long id){
        Employee employee = new Employee("zs");
        employee.setId(id);
        return employee;
    }
    //查询所有

    @ResponseBody
    @RequestMapping(method = RequestMethod.PATCH)
    public  List<Employee> list(){
        return employeeService.getAll();
    }


    // 高级查询
    @ResponseBody
    @RequestMapping(method = RequestMethod.GET)
    public PageList<Employee> query(@RequestBody EmployeeQuery query){
        return new PageList<>();
    }
}

2、接口规范swagger

2.1、为什么需要

1)接口测试人员要通过接口描述测试接口 黑盒测试
2)前端开发人员要通过接口描述使用接口.

怎么描述???
1)写接口doc文档
直接罗列所有接口,每个接口有访问地址(访问方式),参数及返回值.
2)可以直接通过后端代码产生能够让前台开发或测试人员能够看懂就ok—swagger文档 json,yml,页面展示 采纳

2.2、实现

 <springfox.version>2.4.0springfox.version>
    properties>

    <dependencies>
        <dependency>
            <groupId>io.springfoxgroupId>
            <artifactId>springfox-swagger2artifactId>
            <version>${springfox.version}version>
        dependency>
        <dependency>
            <groupId>io.springfoxgroupId>
            <artifactId>springfox-swagger-uiartifactId>
            <version>${springfox.version}version>
        dependency>

在web层 新创建包cn.itsource.crm1.web.config和类:SwaggerConfig


//对swagger进行配置
@Configuration//相当于 applicationContext.xml
@EnableWebMvc
@EnableSwagger2//启动Swagger2
//扫描个包下面controller来生成接口描述
@ComponentScan(basePackages="cn.itsource.web.controller")
public class SwaggerConfig {
    //配置文件bean
    @Bean
    public Docket api(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(this.apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("cn.itsource.web.controller"))
                .paths(PathSelectors.any())
                .build();
    }
    

    private ApiInfo apiInfo(){
         @SuppressWarnings("deprecation")
        ApiInfo info=new ApiInfo(
                 "itsource20190427crud测试",
                 "一个完成crud",
                 "v1",
                 "http://www.itsource.cn",
                 "zytest",
                 "apache",
                 "http://www.itsource.cn");
         return info;
    }
}

不要忘记扫描包
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第16张图片

运行:
在这里插入图片描述
http://localhost/swagger-ui.html

2.3、swaggerAPI文档导入EasyMock

(1)将我们的SwaggerAPI文档扩展名改为yml
http://localhost/v2/api-docs 改为json

(2)在easyMock中点击“设置”选项卡

(3)SwaggerDocs API 选择Upload
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第17张图片
(4)将SwaggerAPI文档拖动到上图的虚线区域,点击保存
(5)回到主界面后点击“同步Swagger”
最终产生很多在线接口模拟

3、接口测试

我们基于springmvc写的controller对于前端来说就是接口,而且都是通过http协议访问,那后台写完后怎么测试呢?浏览器,只支持get。 要使用一些能够发送http各种请求的工具,其中postman就是很重要的一个。

3.1、什么是postman

 就是一个工具,可以来发送各种http请求,可以用它来测试http协议接口.

postman就是httm协议接口测试工具

3.2、入门

3.2.1、下载安装

略过

3.2.2、注册和登录

略过

3.2.3、测试crud接口

查询所有
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第18张图片
添加
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第19张图片

删除
略过
修改
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第20张图片

4、小结

按照restfull规范写一个一个crud接口,通过postman来做接口测试,通过swagger来描述接口.

六、前后端分离前台实现-crud

1、vue-element-admin

1.1、介绍

vue-element-admin 是一个后台前端解决方案,它基于 vue-cli 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。
本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin

1.2、安装

1.2.1、下载模板源代码

Github地址:
https://github.com/PanJiaChen/vue-element-admin

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第21张图片

我们直接使用今天resources目录中已经下载好模板
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第22张图片

1.2.2、解压,启动项目

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第23张图片

修改端口号

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第24张图片
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第25张图片
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第26张图片

1.3、修改首页面为图表页

(1)修改:在routes.js的里面修改

{
    path: '/',
    component: Home,
    name: '首页',
    iconCls: 'fa fa-bar-chart',
    leaf: true,//只有一个节点
    children: [
        { path: '/echarts', component: echarts, name: '主页' }
    ]
},

(2)修改login.vue登录后跳转

this.$router.push({ path: '/echarts' });

1.3.1、少量修改

1)登录后跳转地址
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第27张图片
2)首页
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第28张图片

1.3.2、左侧导航菜单

routes.js
import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import Table from './views/nav1/Table.vue'
import echarts from './views/charts/echarts.vue'

let routes = [
    {
        path: '/login',
        component: Login,
        name: '',
        hidden: true
    },
    {
        path: '/404',
        component: NotFound,
        name: '',
        hidden: true
    },
    //{ path: '/main', component: Main },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-address-card',
        leaf: true,//只有一个节点
        children: [
            { path: '/index', component: echarts, name: '首页' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: '系统管理',
        iconCls: 'el-icon-message',//图标样式class
        children: [
            { path: '/employee', component: Table, name: '员工管理' },
            { path: '/department', component: Table, name: '部门管理' },
        ]
    },
    {
        path: '*',
        hidden: true,
        redirect: { path: '/404' }
    }
];

export default routes;

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第29张图片

1.3.3、添加员工管理和部门管理模板
【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第30张图片

1.3.4、修改路由

routes.js


import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import echarts from './views/charts/echarts.vue'
import Employee from './views/Employee.vue'
import Department from './views/Department.vue'

let routes = [
    {
        path: '/login',
        component: Login,
        name: '',
        hidden: true
    },
    {
        path: '/404',
        component: NotFound,
        name: '',
        hidden: true
    },
    //{ path: '/main', component: Main },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-address-card',
        leaf: true,//只有一个节点
        children: [
            { path: '/index', component: echarts, name: '首页' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: '系统管理',
        iconCls: 'el-icon-message',//图标样式class
        children: [
            { path: '/employee', component: Employee, name: '员工管理' },
            { path: '/department', component: Department, name: '部门管理' },
        ]
    },
    {
        path: '*',
        hidden: true,
        redirect: { path: '/404' }
    }
];

export default routes;

【SSM+ElementUI】 Propagation postman swagger 前后端分离后台实现 多模块搭建 抽取base_第31张图片

扩展:事务

Spring中种Propagation类的事务属性详解:

REQUIRED:支持当前事务,如果当前没有事务,就新建一个事务。这是最常见的选择。 required(默认值)

SUPPORTS:支持当前事务,如果当前没有事务,就以非事务方式执行。 supports

MANDATORY:支持当前事务,如果当前没有事务,就抛出异常。 mandatory

REQUIRES_NEW:新建事务,如果当前存在事务,把当前事务挂起。 requires_new

NOT_SUPPORTED:以非事务方式执行操作,如果当前存在事务,就把当前事务挂起。 not_supported

NEVER:以非事务方式执行,如果当前存在事务,则抛出异常。 never

NESTED:支持当前事务,如果当前事务存在,则执行一个嵌套事务,如果当前没有事务,就新建一个事务。 nested

用到了拿来记一下(注:这个配置会影响数据存储,根据情况选择)

你可能感兴趣的:(ssm,element)