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

版权声明：本文为博主原创文章，转载请附上博文链接！