springboot+vue简单的后台管理（1）

一、简介

        楼主是个初学者，无聊的时候做的，代码比较简单，很多功能都没写完，后面会慢慢完善，仅供初学者参考一下。

界面如下（截图有点丑）：

好吧，开始分享怎么搭建这样一个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组件内容部分都会被所包裹，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里面的内容我删除了保留了基本全局样式，部分改动如下：

然后我们开始来创建一些基本的页面吧，打开element官网，打开组件部分，找到布局，element的布局有两种一种是layout(如bootrap类的栅格布局，一行24用el-row,el-col表示)，另一种是现成的container布局适合新手，布局下面会有代码实例，自己看合适的布局复制粘贴就好。

 

 记住新建的vue内容要写在