springboot+vue简单的后台管理
一、简介
楼主是个初学者，无聊的时候做的，代码比较简单，很多功能都没写完，后面会慢慢完善，仅供初学者参考一下。
界面如下（截图有点丑）：
好吧，开始分享怎么搭建这样一个demo的前后端。
1.前端方面用的vue+element-ui,工具的话vscode或者webstrom都行，页面布局element官网都有自己可以取看看。
2.后端方面用的springboot+jpa,工具的话idea,因为idea做springboot工程比较简单，eclipse也行。
二、项目搭建
1、后端方面：
建立项目，打开idea，创建project这里记得选Spring Initializr
然后走正常流程，下一步，下一步......建完了可以看一下你们的springboot 版本 一般都是2.0以上了，楼主用的1.59,2.0以上会有一些不同的地方，这个版本可以自己改的。然后把配置文件application.properties后缀名改成yml,配置文件如下(这个我不知到怎么做成可以复制粘贴的，只会截图):
整个后端的代码非常简单就呢么几个类，具体代码我打包好了，自己下载吧，前端麻烦点，这里主要描述一下前端吧，因为我也是个学后端，前端布局真的十分令我头痛的问题。。。
2、前端部分：
要搭建一个vue项目首先是要装npm的，安装node.js的时候会自动配置，整个搭建过程可以百度，教程比较多，也比较简单。这里讲一些重点，建好项目后记得安装一个路由模块，命令：
npm install vue-router
然后安装一个element模块：
npm i element-ui -S
新项目除了保留main.js和app.vue其余的组件可以删除，components 是声明有哪些组件，template 是使用哪个组件，一般你写的vue组件内容部分都会被<template ></template >所包裹，App.vue里面是一些全局样式，不要的部分可以删除。在src创建一个router.js文件，如果在安装vue的时候全局安装了router项目里会有一个router文件夹，在下面的index.js配置路由。如何过没有就自己建router.js吧，main.js的配置如下：
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router'
import router from "./router.js"
Vue.use(ElementUI);
Vue.use(VueRouter)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue里面的内容我删除了保留了基本全局样式，部分改动如下：
<template>
<div id="app">
<router-view/>
</div>
</template>
然后我们开始来创建一些基本的页面吧，打开element官网，打开组件部分，找到布局，element的布局有两种一种是layout(如bootrap类的栅格布局，一行24用el-row,el-col表示)，另一种是现成的container布局适合新手，布局下面会有代码实例，自己看合适的布局复制粘贴就好。
记住新建的vue内容要写在<template>里，接下来如何展示在网页上呢？我们需要为新建的页面配置路由(假设新建的vue名字叫test.vue在views文件夹下):
import Vue from "vue";
import VueRouter from "vue-router";
import Router from 'vue-router';
// 引入组件
import test from "./views/test.vue";
const routes = [
{
path:"/test",
component: test
}
]
var router = new VueRouter({
routes
})
export default router;
这样就可成功的访问到了http://localhost:8080/#/test。
---------------------
作者：crazycatlong
原文：https://blog.csdn.net/qq_39337367/article/details/85562194
版权声明：本文为博主原创文章，转载请附上博文链接！
