使用idea工具，新建springboot项目
applicatin.properties简单配置一下
server.port=8089项目内建vue模块，
pom.xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>下面我们开始springboot+ vue前后端分离项目的小白学习之路。
在assets文件夹中，新建一个css文件，重置样式
global.css
html,body{
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import * as echarts from 'echarts'
import '@/assets/global.css'
Vue.prototype.$echarts = echarts;
axios.defaults.baseURL='http://localhost:8089';
Vue.prototype.$http = axios;
Vue.use(ElementUI,{size:'small'});
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store,
router
}).$mount('#app');app.vue
<template>
<div id="app">
<el-container class="container">
<el-header class="header-area">
<img src="./assets/logo.png" alt="logo" class="logo">
<span class="title">手牵手带小白做毕设</span>
</el-header>
<el-container class="middle-area">
<el-aside class="left-aside">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router>
<el-menu-item index="/home">
<i class="el-icon-menu"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu>
<template slot="title">
<i class="el-icon-location"></i>
<span>用户管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/admin">管理员信息</el-menu-item>
<el-menu-item index="/user">用户信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>信息管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">xxx信息</el-menu-item>
<el-menu-item index="3-2">yyy信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style lang="scss">
.container{
height: 100vh;
.header-area{
background-color: #4c535a;
.logo {
width: 40px;
position: relative;
top: 10px;
}
.title{
font-size: 20px;
margin-left: 15px;
color: white;
}
}
.middle-area{
.left-aside{
overflow: hidden;
height: 100%;
/*background-color: #545c64;*/
width:230px !important;
.el-menu-vertical-demo{
height: 100%;
}
}
}
}
</style>home.vue
<template>
<div>
<div style="font-size: 18px;margin: 15px 0;">手牵手教小白做毕设</div>
<div style="font-size: 18px;margin: 15px 0;">大家给个一键三连</div>
<div style="font-size: 18px;margin: 15px 0;">感谢大家</div>
</div>
</template>
<script>
export default {
name: "HomeView"
}
</script>
<style scoped>
</style>views文件夹下，新建User文件夹，内建两个vue文件
adminView.vue
<template>
<div>
<!-- 搜索区域 -->
<div style="margin-bottom:15px;">
<el-input v-model="input" style="width:200px;" placeholder="请输入内容"></el-input>
<el-button type="warning" style="margin-left: 10px;" icon="el-icon-search">查询</el-button>
<el-button type="primary" style="margin-left: 10px;" icon="el-icon-plus">新增</el-button>
</div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit">编辑</el-button>
<el-button type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top:15px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "AdminView",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
currentPage:1,
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
}
</script>
<style scoped>
</style>userView.vue
<template>
<div>UserView</div>
</template>
<script>
export default {
name: "UserView"
}
</script>
<style scoped>
</style>在src文件下，新建router文件夹，新建index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'HomeView',
component: ()=> import('@/views/HomeView.vue'),
},
{
path: '/admin',
name: 'AdminView',
component: ()=> import('@/views/User/AdminView.vue'),
},
{
path:'/user',
name:'UserView',
component: ()=> import('@/views/User/UserView.vue'),
},
]
const router = new VueRouter({
routes
})
export default router在src文件夹下，新建store文件夹，内建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})好，至此，一个拥有后台和前端的项目搭建完成。后期我们学习的代码内容，我会在这个项目中陆续添加进去。
测试，运行
