springboot+vue簡單的後台管理

知識 01-06

一、簡介

樓主是個初學者，無聊的時候做的，代碼比較簡單，很多功能都沒寫完，後面會慢慢完善，僅供初學者參考一下。

界面如下（截圖有點丑）：

好吧，開始分享怎麼搭建這樣一個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裡面的內容我刪除了保留了基本全局樣式，部分改動如下：

<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

}

]