使用vue+springboot 完成前后端分离,实现查询数据库中的数据并展示
1.创建vue项目,创建springboot项目。
使用指令在黑窗口创建vue项目,执行指令
vue init webpack "项目名"
在创建项目的时候,选择安装路由,router,安装npm
然后还需要安装element-ui axios 以及 qs
npm install element-ui -S
npm install axios
npm install qs
安装完成之后,在main.js中引入这三项
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import qs from 'qs'Vue.use(ElementUI)
Vue.prototype.$axios = axios.create({
baseURL:'http://localhost:8083/',
withCredentials:true
});
Vue.prototype.$qs = qs;
对于springboot项目 要引入依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.46</version> <scope>runtime</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <vers