javaSSM和vue整合

作者：麦芽糖的-寂寞 | 来源：互联网 | 2023-09-10 11:12

javaSSM和vue整合,Go语言社区,Golang程序员人脉社

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

推荐阅读

controller
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
controller
javaweb多图片打包下载，弹出提示框问题_html/css_WEBITnose

在springmvc框架中，前台ajax调用方法，对图片批量下载，如何弹出提示保存位置选框？Controller方法 ... [详细]

蜡笔小新 2023-12-12 14:56:31
js
如何使用Java获取服务器硬件信息和磁盘负载率

本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

蜡笔小新 2023-12-14 13:56:20
controller
开发笔记:Java是如何读取和写入浏览器Cookies的

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Java是如何读取和写入浏览器Cookies的相关的知识，希望对你有一定的参考价值。首先我 ... [详细]

蜡笔小新 2023-12-12 20:18:02
object
通过Go SDK（Amazon S3）从Bucket生成Torrent - Generate Torrent from Bucket via Go SDK (Amazon S3)

Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]

蜡笔小新 2023-12-12 14:13:01
object
基于Axis、XFire、CXF的webservice客户端调用示例

本文介绍了如何使用Axis、XFire、CXF等工具来实现webservice客户端的调用，以及提供了使用Java代码进行调用的示例。示例代码中设置了服务接口类、地址，并调用了sayHello方法。 ... [详细]

蜡笔小新 2023-12-12 12:43:43
command
vue cli 3.x移除console采坑记

本文记录了在vue cli 3.x中移除console的一些采坑经验，通过使用uglifyjs-webpack-plugin插件，在vue.config.js中进行相关配置，包括设置minimizer、UglifyJsPlugin和compress等参数，最终成功移除了console。同时，还包括了一些可能出现的报错情况和解决方法。 ... [详细]

蜡笔小新 2023-12-11 21:16:05
js
Sencha Touch学习使用心得 Unit 1 搭架构

本文介绍了Sencha Touch的学习使用心得，主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性，并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用，以及如何通过链接样式表来改变全局风格。 ... [详细]

蜡笔小新 2023-12-11 12:42:44
install
MVP架构模式及其在国庆技术博客中的应用

本文介绍了MVP架构模式及其在国庆技术博客中的应用。MVP架构模式是一种演变自MVC架构的新模式，其中View和Model之间的通信通过Presenter进行。相比MVC架构，MVP架构将交互逻辑放在Presenter内部，而View直接从Model中读取数据而不是通过Controller。本文还探讨了MVP架构在国庆技术博客中的具体应用。 ... [详细]

蜡笔小新 2023-12-11 11:57:58
controller
ASP.NET Core MVC入门及基础使用教程

本文介绍了ASP.NET Core MVC的入门及基础使用教程，根据微软的文档学习，建议阅读英文文档以便更好理解，微软的工具化使用方便且开发速度快。通过vs2017新建项目，可以创建一个基础的ASP.NET网站，也可以实现动态网站开发。ASP.NET MVC框架及其工具简化了开发过程，包括建立业务的数据模型和控制器等步骤。 ... [详细]

蜡笔小新 2023-12-10 16:58:35
js
shiro java配置问题：加入Shiro listener后启动失败

本文讨论了在shiro java配置中加入Shiro listener后启动失败的问题。作者引入了一系列jar包，并在web.xml中配置了相关内容，但启动后却无法正常运行。文章提供了具体引入的jar包和web.xml的配置内容，并指出可能的错误原因。该问题可能与jar包版本不兼容、web.xml配置错误等有关。 ... [详细]

蜡笔小新 2023-12-10 09:43:05
js
从零学Java（10）之方法详解，喷打野你真的没我6！

本文介绍了从零学Java系列中的第10篇文章，详解了Java中的方法。同时讨论了打野过程中喷打野的影响，以及金色打野刀对经济的增加和线上队友经济的影响。指出喷打野会导致线上经济的消减和影响队伍的团结。 ... [详细]

蜡笔小新 2023-12-13 13:44:16
controller
ASP.global_asax不存在于命名空间ASP中的问题

本文讨论了在ASP中创建RazorFunctions.cshtml文件时出现的问题，即ASP.global_asax不存在于命名空间ASP中。文章提供了解决该问题的代码示例，并详细解释了代码中涉及的关键概念，如HttpContext、Request和RouteData等。通过阅读本文，读者可以了解如何解决该问题并理解相关的ASP概念。 ... [详细]

蜡笔小新 2023-12-09 19:22:03
controller
SpringMVC工作流程概述

SpringMVC工作流程概述 ... [详细]

蜡笔小新 2023-12-09 18:43:26
install
Linux虚拟化部署中的VLAN配置方法详解

本文详细介绍了在Linux虚拟化部署中进行VLAN配置的方法。首先要确认Linux系统内核是否已经支持VLAN功能，然后配置物理网卡、子网卡和虚拟VLAN网卡的关系。接着介绍了在Linux配置VLAN Trunk的步骤，包括将物理网卡添加到VLAN、检查添加的VLAN虚拟网卡信息以及重启网络服务等。最后，通过验证连通性来确认配置是否成功。 ... [详细]

蜡笔小新 2023-12-09 03:55:11

麦芽糖的-寂寞

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章