###VUE+SSM 以VUE做项目前端，SSM做后端框架，难点在于数据的传输处理，下面我记录一下一个简单的登录退出功能的实现，如果有缺陷还请大佬指出，个人菜鸟 一个，正在学习当中，以此记录一下自己的学习
首先我们要搭建好后台
我的后台采用的是SSM框架，下面把创建依赖maven的SSM项目的过程记录一下
1、创建maven项目
File—>new—>project

选择maven，再选择下图选中的2，一定要选maven的web-app

选中上述内容后，点击next,进入下图页面

填写完毕后点击next，进入如下页面，这些内容最好采用默认的，否则会有意想不到的坑，我因为更改了maven的一些设置，在这里卡了很久，建议读者不要做更改，如果必须更改建议先仔细学习关于idea下maven的一些设置

配置完成后，点击next

点击finish
项目至此创建完毕，接下来是创建项目的目录结构
目录 结构如下图

注：关于文件夹也是有说法的，你要自己定义他的用途，方式如下图标注，但是一部分idea可以自动完成这步工作

创建好目录结构之后，我们就要开始逐个写入我们的配置文件内容了
首先最重要的pom.xml

<projectxmlns="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.0http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.asghoul</groupId>
<artifactId>ssm</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>ssmMavenWebapp</name>
<url>http://maven.apache.org</url>
<properties>
<!--设置项目编码编码-->
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<!--spring版本号-->
<spring.version>4.3.5.RELEASE</spring.version>
<!--mybatis版本号-->
<mybatis.version>3.4.1</mybatis.version>
<!--jstl版本号-->
<jstl.version>1.2</jstl.version>
</properties>
 
<dependencies>
<!--javaee-->
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
</dependency>
 
<!--单元测试-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
 
<!--实现slf4j接口并整合-->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.2.2</version>
</dependency>
 
<!--JSON-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.7</version>
</dependency>
 
<!--数据库-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.41</version>
<scope>runtime</scope>
</dependency>
 
<!--数据库连接池-->
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
</dependency>
 
<!--MyBatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
 
<!--mybatis/spring整合包-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
 
<!--Spring-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<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>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>
 
<!--JSP相关-->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
 
</dependencies>
 
<build>
<finalName>ssm</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<!--设置JDK版本-->
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>
</project>

Web.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<web-appxmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
 
 
 
 
 
 
 
 
 
 
<display-name>myword</display-name>
<description>ssm_Alpha_0.0.1</description>
 
<!--编码过滤器-->
<filter>
<filter-name>encodingFilter</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>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
 
<!--配置DispatcherServlet-->
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--配置springMVC需要加载的配置文件-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-*.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<!--匹配所有请求，此处也可以配置成*.do形式-->
<url-pattern>/</url-pattern>
</servlet-mapping>
 
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
 

Spring-mybatis.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<beansxmlns="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">
 
<!--扫描service包下所有使用注解的类型-->
<context:component-scanbase-package="com.nmd.myword.service"/>
 
<!--配置数据库相关参数properties的属性：${url}-->
<context:property-placeholderlocation="classpath:jdbc.properties"/>
 
<!--数据库连接池-->
<beanid="dataSource"class="com.mchange.v2.c3p0.ComboPooledDataSource">
<propertyname="driverClass"value="${jdbc.driver}"/>
<propertyname="jdbcUrl"value="${jdbc.url}"/>
<propertyname="user"value="${jdbc.username}"/>
<propertyname="password"value="${jdbc.password}"/>
<propertyname="maxPoolSize"value="${c3p0.maxPoolSize}"/>
<propertyname="minPoolSize"value="${c3p0.minPoolSize}"/>
<propertyname="autoCommitOnClose"value="${c3p0.autoCommitOnClose}"/>
<propertyname="checkoutTimeout"value="${c3p0.checkoutTimeout}"/>
<propertyname="acquireRetryAttempts"value="${c3p0.acquireRetryAttempts}"/>
</bean>
 
<!--配置SqlSessionFactory对象-->
<beanid="sqlSessionFactory"class="org.mybatis.spring.SqlSessionFactoryBean">
<!--注入数据库连接池-->
<propertyname="dataSource"ref="dataSource"/>
<!--扫描model包使用别名-->
<propertyname="typeAliasesPackage"value="com.nmd.myword.pojo"/>
<!--扫描sql配置文件:mapper需要的xml文件-->
<propertyname="mapperLocations"value="classpath:mapper/*.xml"/>
</bean>
 
<!--配置扫描Dao接口包，动态实现Dao接口，注入到spring容器中-->
<beanclass="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--注入sqlSessionFactory-->
<propertyname="sqlSessionFactoryBeanName"value="sqlSessionFactory"/>
<!--给出需要扫描Dao接口包-->
<propertyname="basePackage"value="com.nmd.myword.dao"/>
</bean>
 
<!--配置事务管理器-->
<beanid="transactionManager"class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!--注入数据库连接池-->
<propertyname="dataSource"ref="dataSource"/>
</bean>
 
<!--配置基于注解的声明式事务-->
<tx:annotation-driventransaction-manager="transactionManager"/>
 
</beans>
 
Spring-mvc.xml
<?xmlversion="1.0"encoding="UTF-8"?>
<beansxmlns="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-3.0.xsd">
 
<!--扫描web相关的bean-->
<context:component-scanbase-package="com.nmd.myword.controller"/>
 
<!--开启SpringMVC注解模式-->
<mvc:annotation-driven/>
 
<!--静态资源默认servlet配置-->
<mvc:default-servlet-handler/>
 
<!--配置jsp显示ViewResolver-->
<beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver">
<propertyname="viewClass"value="org.springframework.web.servlet.view.JstlView"/>
<propertyname="prefix"value="/views/"/>
<propertyname="suffix"value=".jsp"/>
</bean>
 
</beans>

Log4j.properties

<?xmlversion="1.0"encoding="UTF-8"?>
<configurationdebug="true">
<appendername="STDOUT"class="ch.qos.logback.core.ConsoleAppender">
<encoder>
<pattern>%d{HH:mm:ss.SSS}[%thread]%-5level%logger{36}-%msg%n</pattern>
</encoder>
</appender>
<rootlevel="debug">
<appender-refref="STDOUT"/>
</root>
</configuration>
 
Jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver
#数据库地址
jdbc.url=jdbc:mysql://localhost:3306/myword?useUnicode=true&characterEncoding=utf8
#用户名
jdbc.username=root
#密码
jdbc.password=123456
#最大连接数
c3p0.maxPoolSize=30
#最小连接数
c3p0.minPoolSize=10
#关闭连接后不自动commit
c3p0.autoCommitOnClose=false
#获取连接超时时间
c3p0.checkoutTimeout=10000
#当获取连接失败重试次数
c3p0.acquireRetryAttempts=2

接下来关于接口的书写就不做具体的描述，下面发一下tomcat服务器的配置方式

点击idea右上角

进入如下页面，按顺序点击操作

进入如下页面

点击config配置你的tomcat服务器

选择tomcat所在位置即可 ，接下来点开deployement页签

点击OK完成配置。至此，我们的后台基础框架搭建完毕，接下来开始搭建vue

首先在电脑上装好Node.js，具体安装过程不做赘述，不知道的可以百度自行搜索，我们VUE编写用的是vsCode，采用vue-cli脚手架创建项目，过程依然百度，很详细，创建好项目后，开始搭建页面
脚手架自动生成的项目结构，介绍都在下面

接下来对页面的编写也不做赘述，只把过程中遇到的两个问题记录一下

vue的页面跳转采用的是路由的形式，路由定义在router—>index.js下，具体定义方式直接参照脚手架生产项目中的去写就可以

利用超链接跳转

<router-link to="/login"><span>会员登录</span></router-link>

在function中跳转

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

path处指定路由地址就可以

关于跨域问题，只要你的前后端是分开的，那么就会有跨域问题，解决方式也简单

注：autoOpenBrowser属性改为true
代码附上

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
"/api":{
target:"http://localhost:8088/myword",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
}
 

配置完上述之后，一定一定要记得，在main.js下加上这样一句话（写在import下面就可以）

Vue.prototype.HOST='/api'

向接口发送请求参考下图

附上图代码：

login:function(){
var prame = {
uid: this.username,
pwd: this.password
}
axios.post(this.HOST+'/LoginController/login',prame)
  .then(res=>{
this.$store.commit('SET_MSG',res)
this.$router.push({path:'/'});
  })
  .catch(function (error) {
    console.log(error);
  });
}
 

完成上述我们就已经可以链接后台，我们接下来要做的就是对数据的渲染，在前端进行展现
对于数据渲染会遇到跨页面传值的问题，下面我们来解决一下
在src下创建文件夹vuex,创建文件夹store.js

这里的代码对于后端的大佬应该很轻松就能看的懂，我就不解释了，直接上代码
Store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
uRealName: '',
token: ""
},
mutations: {
"SET_MSG": function(state, prame) {
console.log('保存', prame)
state.uRealName = prame.data.data.uRealName
state.token = prame.data.token
console.log('保存', state.uRealName)
console.log('保存', state.token)
}
},
getters: {
"GET_MSG": function(state) {
return state
}
},
actions: {
"SET_MSG": function(state, prame) {
state.uRealName = prame.uRealName
state.token = prame.token
console.log('保存', state.uRealName)
}
}
})
export default store

在main.js中加入这两句

发送数据

接受数据

在页面引用时用上msg即可

上述解决的页面跳转采用的是axios，解决跨页面传值的问题是用的vuex，看不懂我写的内容的不急的话可以私信或评论，着急的话可以直接百度这两种方式

Ps:本人前端菜鸟一枚，强行搭建起这个，还请大神们嘴下留情。