>汽车>>正文

springboot+vue简单的后台管理

原标题: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

版权声明:本文为博主原创文章,转载请附上博文链接!

返回搜狐,查看更多

责任编辑:

声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。
阅读 ()
投诉
免费获取
今日搜狐热点
今日推荐