###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
4.0.0
cn.asghoul
ssm
war
1.0-SNAPSHOT
ssmMavenWebapp
http://maven.apache.org
UTF-8
UTF-8
4.3.5.RELEASE
3.4.1
1.2
javax
javaee-api
7.0
junit
junit
4.12
ch.qos.logback
logback-classic
1.2.2
com.fasterxml.jackson.core
jackson-databind
2.8.7
mysql
mysql-connector-java
5.1.41
runtime
com.mchange
c3p0
0.9.5.2
org.mybatis
mybatis
${mybatis.version}
org.mybatis
mybatis-spring
1.3.1
org.springframework
spring-core
${spring.version}
org.springframework
spring-beans
${spring.version}
org.springframework
spring-context
${spring.version}
org.springframework
spring-jdbc
${spring.version}
org.springframework
spring-tx
${spring.version}
org.springframework
spring-web
${spring.version}
org.springframework
spring-webmvc
${spring.version}
org.springframework
spring-test
${spring.version}
jstl
jstl
${jstl.version}
ssm
org.apache.maven.plugins
maven-compiler-plugin
1.8
Web.xml
myword
ssm_Alpha_0.0.1
encodingFilter
org.springframework.web.filter.CharacterEncodingFilter
encoding
UTF-8
encodingFilter
/*
SpringMVC
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:spring-*.xml
1
true
SpringMVC
/
index.jsp
Spring-mybatis.xml
Spring-mvc.xml
Log4j.properties
%d{HH:mm:ss.SSS}[%thread]%-5level%logger{36}-%msg%n
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服务器的配置方式
进入如下页面,按顺序点击操作
进入如下页面
点击config配置你的tomcat服务器
选择tomcat所在位置即可 ,接下来点开deployement页签
点击OK完成配置。至此,我们的后台基础框架搭建完毕,接下来开始搭建vue
首先在电脑上装好Node.js,具体安装过程不做赘述,不知道的可以百度自行搜索,我们VUE编写用的是vsCode,采用vue-cli脚手架创建项目,过程依然百度,很详细,创建好项目后,开始搭建页面
脚手架自动生成的项目结构,介绍都在下面
接下来对页面的编写也不做赘述,只把过程中遇到的两个问题记录一下
vue的页面跳转采用的是路由的形式,路由定义在router—>index.js下,具体定义方式直接参照脚手架生产项目中的去写就可以
利用超链接跳转
会员登录
在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
在页面引用时用上msg即可
上述解决的页面跳转采用的是axios,解决跨页面传值的问题是用的vuex,看不懂我写的内容的不急的话可以私信或评论,着急的话可以直接百度这两种方式
Ps:本人前端菜鸟一枚,强行搭建起这个,还请大神们嘴下留情。