Springboot+vue 实现简单前后端分离
2018-02-01 本文已影响785人
不是一只咸鱼
1.vue 环境搭建与项目创建
vue2.0 推荐开发环境
image.png
安装完node.js后打开cmd小黑窗安装淘宝镜像，用cnpm代替npm,依赖全 速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack
cnpm install webpack -g
安装vue脚手架
npm install vue-cli -g
测试是否安装成功
image.png
在硬盘上找一个文件夹放工程用的，在终端中进入该目录
cd 目录路径
根据模板创建项目
vue init webpack vueDemo
image.png
安装项目依赖
cnpm install
创建完成后的样子
image.png
启动项目
cnpm run dev
帅气界面 默认80端口 没有 go to XXX 链接
image.png
参考简书
2.vue设置路由
如果创建好的vue项目里没有 vue-router 路由依赖需要自行添加，我的创建项目时添加过了，所以省略
cnpm install vue-router --save
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们
新创建vue项目时，会有设置好的主页面和vue组件，为了方便我直接在原有的上面修改
修改组件 添加其他页面的路径 App.vue修改后
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">Go to 首页</router-link>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view/>
设置路由 配置路径对应加载vue组件 src/router/index.js修改后
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Foo from '@/components/Foo'
import Bar from '@/components/Bar'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/foo',
name: 'Foo',
component: Foo
},
{
path: '/bar',
name: 'Bar',
component: Bar
}
]
})
新建 Foo.vue和Bar.vue 为了在路由地址改变后 加载后显示相应的元素
先不贴代码 后面会贴
vue 渲染视图 main.js 修改后
import Vue from 'vue'
import App from './App'
//引入组件
import Foo from './components/Foo'
import Bar from './components/Bar'
import router from './router'
//引入resource
import VueResource from 'vue-resource'
//引入jQuery
import $ from 'jquery'
Vue.use(VueResource);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
3.vue与后台交互 vue-resource jquery 涉及到的问题跨域
如果没有resource 和 jquery 依赖 需先添加
resource
cnpm install vue-resource --save
jquery 设置全局
cnpm install jquery --save
在build文件夹下的webpack.base.conf.js文件中添加：var webpack = require("webpack")
// 增加一个plugins
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
跨域相关 jsonp vue设置proxyTable
jsonp 没有在本地测试 用的 豆瓣公共接口
前面提到的Foo.vue
<template>
<div id="foo">
foo
<ul>
<li v-for="article in articles">
{{article.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Foo',
data () {
return {
articles: []
}
},
mounted: function() {
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: {
},
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调
debugger
this.articles = response.data.subjects
// this.articles = response.data["subjects"] 也可以
}, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}
}
</script>
<style>
</style>
jsonp跨域参考
vue设置proxyTable config/index,js修改, 前面提到的Bar.vue ,SpringBoot Controller
proxyTable: {
'/api': {
target: 'http://localhost:8080',
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
},
Bar.vue
通过ajax请求
export default {
name: 'Bar',
data () {
return {
user: {}
}
},
mounted: function() {
var _self=this;
$.ajax({
url:"/api/article/get/"+"123",
// url:"/api/courseOrder/search",
type:"get",
dataType: "JSON",
async : false,
success:function(result){
debugger
_self.user = result;
},
error:function(jqXHR, textStatus, errorThrown){
console.log("请求失败");
/*弹出jqXHR对象的信息*/
console.log(jqXHR.responseText);
console.log(jqXHR.status);
console.log(jqXHR.readyState);
console.log(jqXHR.statusText);
/*弹出其他两个参数的信息*/
console.log(textStatus);
console.log(errorThrown);
}
});
}
}
通过 resource 请求
export default {
name: 'Bar',
data () {
return {
user: {}
}
},
mounted: function() {
this.$http.get('/api/article/get/'+'123', {}, {
// this.$http.get('/api/courseOrder/search', {}, {
headers: {
},
// emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调
debugger
this.user = response.data
// this.articles = response.data["subjects"] 也可以
}, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}
}
controller
package com.smallcode.springbootvuewsample.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController
public class ArticleController {
@GetMapping("/article/get/{id}")
public Map get(@PathVariable int id) {
Map<String, Object> map = new HashMap<>();
map.put("id", id);
map.put("name", "test");
map.put("desc", "testDesc");
return map;
}
}
vue修改端口号 修改 config/index.js port:8081
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
