Vue+Spring boot
Vue前端
Vue新建项目
当前我是用的是vue脚手架3.4.1版本
github地址:github.com/liangcongco…
vue create vue-demo //新建项目
cd vue-demo //进入项目文件夹下
yarn serve //运行项目
复制代码
默认请况下,在浏览器上访问http://localhost:8080/,可以看到如下界面:
项目目录
vue是单页面应用组件,是通过路由跳转实现与其他页面交互。在项目模板中,App.vue相当于外面的最大组件,其他组件均是在其下,利用路由跳转到其他页面。
App.vue页面如下,主要由三部分组成
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>//组件路由
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'//组件引入
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
复制代码
前端利用axios访问后端api
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。原理:
// get请求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// post 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(f