springboot+vue小白升级之路01-使用vue快速搭建一个管理系统页面框架和数据渲染
最新推荐文章于 2023-12-14 16:04:47 发布
<div class="operating">
<a class="href-article-edit slide-toggle">版权</a>
</div>
</div>
</div>
</div>
<div id="blogColumnPayAdvert">
<div class="column-group open">
<div class="column-group-item column-group0 ">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/modern358/category_10587053.html" target="_blank" title="Java" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
<span class="title item-target">
<span>
<span class="tit">Java</span>
<span class="dec more" style="display: none;">同时被 3 个专栏收录<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newArrowDown1White.png" alt=""></span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>1267 篇文章</span>
<span>3 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="10587053">订阅专栏</a>
</div>
</div>
<div class="column-group-item column-group1 ">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/modern358/category_12167550.html" target="_blank" title="Vue" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
<span class="title item-target">
<span>
<span class="tit">Vue</span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>661 篇文章</span>
<span>3 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="12167550">订阅专栏</a>
</div>
</div>
<div class="column-group-item column-group2 ">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/modern358/category_12339443.html" target="_blank" title="springboot" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
<span class="title item-target">
<span>
<span class="tit">springboot</span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>112 篇文章</span>
<span>0 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="12339443">订阅专栏</a>
</div>
</div>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css">
<div id="content_views" class="htmledit_views">
<p>使用idea工具，新建springboot项目</p>
applicatin.properties简单配置一下
server.port=8089
项目内建vue模块，
pom.xml
-
<dependencies
>
-
<dependency
>
-
<groupId
>org.springframework.boot
<
/groupId
>
-
<artifactId
>spring-boot-starter-web
<
/artifactId
>
-
<
/dependency
>
-
-
<dependency
>
-
<groupId
>org.springframework.boot
<
/groupId
>
-
<artifactId
>spring-boot-configuration-processor
<
/artifactId
>
-
<
optional
>
true
<
/
optional
>
-
<
/dependency
>
-
<dependency
>
-
<groupId
>org.projectlombok
<
/groupId
>
-
<artifactId
>lombok
<
/artifactId
>
-
<
optional
>
true
<
/
optional
>
-
<
/dependency
>
-
<dependency
>
-
<groupId
>org.springframework.boot
<
/groupId
>
-
<artifactId
>spring-boot-starter-test
<
/artifactId
>
-
<scope
>
test
<
/scope
>
-
<
/dependency
>
-
<
/dependencies
>
下面我们开始springboot+ vue前后端分离项目的小白学习之路。
在assets文件夹中，新建一个css文件，重置样式
global.css
-
-
html,
body{
-
margin:
0;
-
padding:
0;
-
}
-
-
* {
-
box-sizing: border-box;
-
}
-
main.js
-
import
Vue
from
'vue'
-
import
App
from
'./App.vue'
-
import store
from
'@/store'
-
import router
from
"@/router";
-
import
ElementUI
from
'element-ui';
-
import
'element-ui/lib/theme-chalk/index.css';
-
import axios
from
"axios";
-
import *
as echarts
from
'echarts'
-
import
'@/assets/global.css'
-
-
Vue.
prototype.
$echarts = echarts;
-
axios.
defaults.
baseURL=
'http://localhost:8089';
-
Vue.
prototype.
$http = axios;
-
Vue.
use(
ElementUI,{
size:
'small'});
-
Vue.
config.
productionTip =
false;
-
-
new
Vue({
-
render:
h =>
h(
App),
-
store,
-
router
-
}).$mount(
'#app');
app.vue
-
<template
>
-
<div id
=
"app"
>
-
<el-container
class
=
"container"
>
-
<el-header
class
=
"header-area"
>
-
<img src
=
"./assets/logo.png" alt
=
"logo"
class
=
"logo"
>
-
<span
class
=
"title"
>手牵手带小白做毕设
<
/span
>
-
<
/el-header
>
-
<el-container
class
=
"middle-area"
>
-
<el-aside
class
=
"left-aside"
>
-
<el-menu
-
:default-active
=
"$route.path"
-
class
=
"el-menu-vertical-demo"
-
background-color
=
"#545c64"
-
text-color
=
"#fff"
-
active-text-color
=
"#ffd04b"
-
router
>
-
<el-menu-item
index
=
"/home"
>
-
<i
class
=
"el-icon-menu"
>
<
/i
>
-
<span slot
=
"title"
>系统首页
<
/span
>
-
<
/el-menu-item
>
-
<el-submenu
>
-
<template slot
=
"title"
>
-
<i
class
=
"el-icon-location"
>
<
/i
>
-
<span
>用户管理
<
/span
>
-
<
/template
>
-
<el-menu-item-group
>
-
<el-menu-item
index
=
"/admin"
>管理员信息
<
/el-menu-item
>
-
<el-menu-item
index
=
"/user"
>用户信息
<
/el-menu-item
>
-
<
/el-menu-item-group
>
-
<
/el-submenu
>
-
<el-submenu
index
=
"3"
>
-
<template slot
=
"title"
>
-
<i
class
=
"el-icon-location"
>
<
/i
>
-
<span
>信息管理
<
/span
>
-
<
/template
>
-
<el-menu-item-group
>
-
<el-menu-item
index
=
"3-1"
>xxx信息
<
/el-menu-item
>
-
<el-menu-item
index
=
"3-2"
>yyy信息
<
/el-menu-item
>
-
<
/el-menu-item-group
>
-
<
/el-submenu
>
-
<
/el-menu
>
-
<
/el-aside
>
-
<el-main
>
-
<router-view
/
>
-
<
/el-main
>
-
<
/el-container
>
-
<
/el-container
>
-
<
/div
>
-
<
/template
>
-
-
<style lang
=
"scss"
>
-
-
.container{
-
height:
100vh;
-
-
.header-area{
-
background-color: #
4c
535a;
-
-
.logo {
-
width:
40px;
-
position:
relative;
-
top:
10px;
-
}
-
-
.title{
-
font-size:
20px;
-
margin-left:
15px;
-
color: white;
-
}
-
-
}
-
-
.middle-area{
-
-
.left-aside{
-
overflow: hidden;
-
height:
100%;
-
/
*background-color: #
545c
64;
*
/
-
width:
230px !important;
-
-
.el-menu-vertical-demo{
-
height:
100%;
-
}
-
-
-
}
-
-
-
-
}
-
-
}
-
<
/style
>
home.vue
-
<template
>
-
<div
>
-
<div style
=
"font-size: 18px;margin: 15px 0;"
>手牵手教小白做毕设
<
/div
>
-
<div style
=
"font-size: 18px;margin: 15px 0;"
>大家给个一键三连
<
/div
>
-
<div style
=
"font-size: 18px;margin: 15px 0;"
>感谢大家
<
/div
>
-
<
/div
>
-
<
/template
>
-
-
<script
>
-
export
default {
-
name:
"HomeView"
-
}
-
<
/script
>
-
-
<style scoped
>
-
-
<
/style
>
views文件夹下，新建User文件夹，内建两个vue文件
adminView.vue
-
<template
>
-
<div
>
-
<!-- 搜索区域 --
>
-
<div style
=
"margin-bottom:15px;"
>
-
<el-input v-model
=
"input" style
=
"width:200px;" placeholder
=
"请输入内容"
>
<
/el-input
>
-
<el-button
type
=
"warning" style
=
"margin-left: 10px;" icon
=
"el-icon-search"
>查询
<
/el-button
>
-
<el-button
type
=
"primary" style
=
"margin-left: 10px;" icon
=
"el-icon-plus"
>新增
<
/el-button
>
-
<
/div
>
-
-
<el-table
-
:
data
=
"tableData"
-
style
=
"width: 100%"
>
-
<el-table-column
-
prop
=
"date"
-
label
=
"日期"
>
-
<
/el-table-column
>
-
<el-table-column
-
prop
=
"name"
-
label
=
"姓名"
>
-
<
/el-table-column
>
-
<el-table-column
-
prop
=
"address"
-
label
=
"地址"
>
-
<
/el-table-column
>
-
<el-table-column label
=
"操作"
>
-
<template slot-scope
=
"scope"
>
-
<el-button
type
=
"primary" icon
=
"el-icon-edit"
>编辑
<
/el-button
>
-
<el-button
type
=
"danger" icon
=
"el-icon-delete"
>删除
<
/el-button
>
-
<
/template
>
-
<
/el-table-column
>
-
<
/el-table
>
-
<div style
=
"margin-top:15px;"
>
-
<el-pagination
-
@size-change
=
"handleSizeChange"
-
@current-change
=
"handleCurrentChange"
-
:current-page
=
"currentPage"
-
:page-sizes
=
"[10, 20, 30, 40]"
-
:page-size
=
"100"
-
layout
=
"total, sizes, prev, pager, next, jumper"
-
:total
=
"400"
>
-
<
/el-pagination
>
-
<
/div
>
-
<
/div
>
-
<
/template
>
-
-
<script
>
-
export
default {
-
name:
"AdminView",
-
dat
a() {
-
return {
-
tableData: [{
-
date:
'2016-05-02',
-
name:
'王小虎',
-
address:
'上海市普陀区金沙江路 1518 弄'
-
}, {
-
date:
'2016-05-04',
-
name:
'王小虎',
-
address:
'上海市普陀区金沙江路 1517 弄'
-
}, {
-
date:
'2016-05-01',
-
name:
'王小虎',
-
address:
'上海市普陀区金沙江路 1519 弄'
-
}, {
-
date:
'2016-05-03',
-
name:
'王小虎',
-
address:
'上海市普陀区金沙江路 1516 弄'
-
}],
-
currentPage:
1,
-
}
-
},
-
methods: {
-
handleSizeChange(val) {
-
console.log(`每页 ${val} 条`);
-
},
-
handleCurrentChange(val) {
-
console.log(`当前页: ${val}`);
-
}
-
}
-
}
-
<
/script
>
-
-
<style scoped
>
-
-
<
/style
>
userView.vue
-
<template
>
-
<div
>UserView
<
/div
>
-
<
/template
>
-
-
<script
>
-
export
default {
-
name:
"UserView"
-
}
-
<
/script
>
-
-
<style scoped
>
-
-
<
/style
>
在src文件下，新建router文件夹，新建index.js文件
-
import Vue
from
'vue'
-
import VueRouter
from
'vue-router'
-
-
-
Vue.use(VueRouter)
-
-
const routes = [
-
{
-
path:
'/',
-
redirect:
'/home',
-
},
-
{
-
path:
'/home',
-
name:
'HomeView',
-
component:
()=>
import(
'@/views/HomeView.vue'),
-
},
-
{
-
path:
'/admin',
-
name:
'AdminView',
-
component:
()=>
import(
'@/views/User/AdminView.vue'),
-
},
-
{
-
path:
'/user',
-
name:
'UserView',
-
component:
()=>
import(
'@/views/User/UserView.vue'),
-
},
-
]
-
-
const router =
new VueRouter({
-
routes
-
})
-
-
export
default router
在src文件夹下，新建store文件夹，内建index.js
-
import Vue
from
'vue'
-
import Vuex
from
'vuex'
-
-
Vue.
use(Vuex)
-
-
export
default
new
Vuex.
Store({
-
state: {
-
},
-
getters: {
-
},
-
mutations: {
-
},
-
actions: {
-
},
-
modules: {
-
}
-
})
好，至此，一个拥有后台和前端的项目搭建完成。后期我们学习的代码内容，我会在这个项目中陆续添加进去。
测试，运行
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
