element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提：
(1) 相關博文地址：
SpringBoot + Vue + ElementUI 實現后臺管理系統模板 -- 前端篇(一)：搭建基本環境：https://www.cnblogs.com/l-y-h/p/12930895.html
(2)代碼地址：
https://github.com/lyh-man/admin-vue-template.git
一、定義公共組件頁面
簡單的頁面效果如下所示：(做的比較粗糙，大致理解頁面即可)
1、安裝 element-ui
(1)簡介
一款 ui 框架。使用 element-ui 用于實現頁面的繪制。
【官網：】
https://element.eleme.cn/#/zh-CN
【文檔：】
https://element.eleme.cn/#/zh-CN/component/installation
(2)安裝
可以通過 npm 或者 cdn 方式使用，此處使用 npm 方式安裝。
【安裝方式一：(npm 安裝)】
npm install element-ui
【安裝方式二：(CDN 方式引入)】
(3)引入 element-ui
在 main.js 中引入(也可以自定義一個 js，然后在 main.js 中引入自定義的 js)。
//引入 element-ui
import ElementUI from 'element-ui'
//引入 element-ui 的 css 文件
import 'element-ui/lib/theme-chalk/index.css';//聲明使用 element-ui
Vue.use(ElementUI);
2、修改 App.vue
(1)簡介
頁面主入口。
通過 router 將組件 顯示在 router-view 標簽處。(基本路由規則到本文末尾可以看)
(2)修改頁面內容
font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}/*解決子組件中 height: 100% 不生效問題*/html,body,#app{
height:100%;
margin:0;
padding:0;
overflow: hidden;
}
3、404.vue
(1)簡介
定義錯誤頁面。
當錯誤發生時，用于跳轉到 404 頁面。
(2)定義頁面內容
404
抱歉！您訪問的頁面失聯啦 ...
返回上一頁
進入首頁
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow: hidden;
}
.not-found-title {
margin: 20px015px;
font-size: 10em;
font-weight: 400;
color: rgb(55, 71, 79);
}
.not-found-desc {
margin:0 030px;
font-size: 26px;
color: rgb(118, 131, 143);
}
.not-found-desc>em {
font-style: normal;
color: #ee8145;
}
.not-found-btn-gohome {
margin-left: 30px;
}
(3)頁面顯示如下：
4、Login.vue
(1)簡介
定義登陸頁面。
訪問系統時，用于跳轉到登錄界面。
背景圖(來源于網絡)：
(2)定義頁面內容：
管理員登錄
登錄
data() {return{
dataForm: {
userName:'',
password:''},
dataRule: {
userName: [{
required:true,
message:'帳號不能為空',
trigger:'blur'}],
password: [{
required:true,
message:'密碼不能為空',
trigger:'blur'}]
}
}
},
methods: {//提交表單
dataFormSubmit() {//TODO：登錄代碼邏輯待完善
alert("登錄代碼邏輯未完善")this.$router.replace({name: 'Home'})
}
}
}
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow: hidden;
background-color: rgba(38, 50, 56, .6);
background: url(~@/assets/login_bg.jpg) no-repeat;
background-size: 100% 100%;
}
.login-content {
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
height: 300px;
width: 400px;
background-color: #112234;
opacity: .8;
}
.login-main {
color: beige;
padding: 20px 20px 10px 20px;
}
(3)頁面顯示如下：
二、定義主頁面
主頁面 可以拆分成多個組件，每個組件負責一部分頁面的顯示。
拆分成 Header、Aside、Content 三個頁面。
其中：
Header? ? ? ? ? 用于定義導航欄信息
Aside? ? ? ? ? ? ?用于定義菜單欄信息
Content? ? ? ? ?用于顯示各個菜單選項的頁面
1、Home.vue
(1)簡介
定義主界面。
通過 Login 登錄系統后，需要跳轉到 主頁面。
(2)定義頁面內容
name:'Home',
components: {
Header,
Aside,
Content
},
data() {return{
foldAside:true}
},
methods: {
foldOrOpen(data) {this.foldAside =data
}
}
}
height:100%;
}
(3)頁面顯示如下：
2、Header.vue
(1)簡介
用于定義主頁面的導航欄。
通過導航欄，可以進行一些操作。比如：折疊側邊欄、修改密碼、退出登錄等。
(2)定義頁面內容
設置
幫助
博客地址
代碼地址
{{ userName }}
修改密碼
退出
name:'Header',
data() {return{//是否展開側邊欄
foldAside: true,//默認用戶名
userName: 'admin',//是否展開密碼框
UpdatePasswordVisible: false}
},
components: {//引入密碼框組件
UpdatePassword
},
methods: {//展開密碼修改框
showPasswordBox() {this.UpdatePasswordVisible = true
//this.$nextTick 表示數據渲染后，執行密碼框初始化
this.$nextTick(() =>{this.$refs.updatePassowrd.init()
})
},//展開、折疊側邊欄
foldOrOpen() {this.foldAside = !this.foldAside//this.$emit 用于觸發父組件的方法，并傳遞參數值
this.$emit("foldOrOpenAside", this.foldAside)
},//退出登錄，回到登錄界面
logout() {//TODO：退出邏輯待完成
alert("退出邏輯未完成");this.$router.push({
name:"Login"})
}
}
}
padding:010px;
display: flex;
height: 50px;
line-height: 50px;
}
.header-title {
height: 50px;
width: 50px;float: left;
font-size: 50px;
cursor: pointer;
}
.header-menu {
height: 50px;
width:100%;
flex:1;
line-height: 50px;
font-size: 30px;
}
.header-menu-submenu {float: right;
}
.header-submenu-a {
text-decoration: none;
color: #4CC4B8;
font-weight: bold;
font-size: 16px;
}
.header-submenu-a:hover {
background-color: #2C3E50;
}
.el-menu--horizontal>.el-menu-item,
.el-menu--horizontal>.el-submenu .el-submenu__title {
height: 50px!important;
line-height: 50px !important;
}
.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
min-width: auto !important;
}
.header-span img {
width: 40px;
height: 40px;
line-height: 40px;
margin: 5px 10px 10px 10px;
}
.header-span {
font-size: 20px;
}
(3)頁面顯示如下
3、UpdatePassword.vue
(1)簡介
定義密碼修改框，用于修改用戶密碼。
(2)定義頁面內容
{{ userName }}
取消
確定
data() {return{
userName:'admin',
visible:false,
dataForm: {
password:'',
newPassword:'',
confirmPassword:''},
dataRule: {
password: [{
required:true,
message:'原密碼不能為空',
trigger:'blur'}],
newPassword: [{
required:true,
message:'新密碼不能為空',
trigger:'blur'}],
confirmPassword: [{
required:true,
message:'確認密碼不能為空',
trigger:'blur'}]
}
}
},
methods: {//初始化
init() {this.visible = true
//初始化清空表單內容
this.$nextTick(() =>{this.$refs['dataForm'].resetFields()
})
},//表單提交，回到登錄界面
dataFormSubmit() {//TODO: 表達提交邏輯待完成
alert("表達提交邏輯未完成")this.visible = false;this.$nextTick(() =>{this.$router.push({
name:"Login"})
})
}
}
}
(3)頁面顯示如下
4、this.$nextTick 與 this.$emit 簡單介紹
(1)this.$nextTick
其用于數據渲染之后執行。
比如：
修改了某個數據，這個數據需要 dom 更新之后才會顯示出來，此時就可以使用 this.$nextTick。其傳遞一個回調函數，在數據渲染之后執行。
在 Header.vue 中，就使用到了這個。如下所示：
密碼修改框通過 UpdatePasswordVisible 來控制是否顯示。
showPasswordBox() 方法被執行時，UpdatePassword 組件開始加載，數據渲染完成后觸發 this.$nextTick 的回調函數，進行密碼框的初始化。
//展開密碼修改框
showPasswordBox() {this.UpdatePasswordVisible = true
//this.$nextTick 表示數據渲染后，執行密碼框初始化
this.$nextTick(() =>{this.$refs.updatePassowrd.init()
})
},
若立即使用 this.$refs.updatePassowrd.init() 調用 UpdatePassword 的 init 方法，會報錯，因為此時的 UpdatePassword? 數據還未渲染，若想成功執行，需要使用 this.$nextTick，表示在數據渲染成功后執行。
//展開密碼修改框
showPasswordBox() {this.UpdatePasswordVisible = true
this.$refs.updatePassowrd.init()
},
(2)this.$emit
用于子組件向父組件傳遞數據，并觸發父組件的方法。
在Home.vue 與 Header.vue 中，就使用到了這個。如下所示：
在 Home 組件里引入了 Header 組件，并定義了 @foldOrOpenAside 方法，
在 Header 組件里通過 this.$emit 調用 foldOrOpenAside 方法，并傳遞數據(可選)。
【Home.vue】
foldOrOpen(data) {this.foldAside =data
}
【Header.vue】
//展開、折疊側邊欄
foldOrOpen() {this.foldAside = !this.foldAside//this.$emit 用于觸發父組件的方法，并傳遞參數值
this.$emit("foldOrOpenAside", this.foldAside)
},
5、Aside.vue
(1)簡介
用于定義側邊欄，顯示菜單。
(2)定義頁面內容
后臺管理中心
后臺
首頁
demo
echarts
ueditor
name:'Aside',
props: ['foldAside'],
data() {return{//保存當前選中的菜單
menuActiveName: 'home',//保存當前側邊欄的寬度
asideWidth: '200px',//用于拼接當前圖標的 class 樣式
iconSize: 'true'}
},
watch: {//監視是否折疊側邊欄，折疊則寬度為 64px。
foldAside(val) {this.asideWidth = val ? '200px' : '64px'
this.iconSize =val
}
}
}
margin-bottom: 0;
height:100%;
max-height: calc(100% -50px);
width:100%;
max-width: 200px;
background-color: #263238;
text-align: left;
right:0;
}
.header-logo {
background-color: #17b3a3;
text-align: center;
height: 50px;
line-height: 50px;
width: 200px;
font-size: 24px;
color: #fff;
font-weight: bold;
margin-bottom: 0;
cursor: pointer;
}
.el-submenu .el-menu-item {
max-width: 200px !important;
}
.el-scrollbar__wrap {
overflow-x: hidden !important;
}
.icon-size-falsei {
font-size: 30px !important;
}
.icon-size-truei {
font-size: 18px !important;
}
(3)頁面顯示如下
6、props 簡單介紹
其用于父組件向子組件傳遞數據。
在 Home.vue 和 Aside.vue 中，就使用到了這個。如下所示：
在 Home.vue 中引入 Aside.vue 組件，并定義了 :foldAside 屬性。
在 Aside.vue 組件中，使用 props 可以獲取到 這個 屬性。
【Home.vue】
【Aside.vue】
props: ['foldAside'],
7、Content.vue
(1)簡介
用于定義各個菜單點擊后的頁面顯示。
同樣需要使用 router 進行頁面跳轉(嵌套路由，通過 children 中的規則定義跳轉路徑)，基本路由規則本文最后有介紹。
(2)定義頁面內容
name:'Content'}
background-color: #f1f4f5;
}
.card {
height:100%;
}
(3)頁面顯示如下
8、定義 content 顯示頁面(僅供測試)
【Ueditor.vue】
Ueditor
【HomePage.vue】
HomePage
【Echarts.vue】
Echarts
點擊 Aside 中各個菜單，在 Content 會顯示不同的 頁面。
9、基本路由問題
(1)簡介
想要各個組件頁面間能夠順利跳轉，就需要 router 來操作了。
此處簡單寫了路由跳轉規則，后續會進行修改。
(2)定義路由跳轉規則
path 指的是 路徑。
redirect 指的是 需要跳轉的路徑。
name 指的是 路由的名字(此項目中，均使用 name 進行路由跳轉)。
component 指的是 路由的組件，用于顯示頁面( 會加載組件)。
children 指的是 子路由(路由中顯示另一個路由)。
import Vue from 'vue'import VueRouter from'vue-router'import Home from'../views/Home.vue'Vue.use(VueRouter)
const routes=[{
path:'/',
redirect: {
name:"Login"}
},
{
path:'/404',
name:'404',
component: ()=> import('@/components/common/404.vue')
},
{
path:'/Login',
name:'Login',
component: ()=> import('@/components/common/Login.vue')
},
{
path:'/Home',
name:'Home',
component: ()=> import('@/views/Home.vue'),
redirect: {
name:'HomePage'},
children: [{
path:'/Home/Page',
name:'HomePage',
component: ()=> import('@/views/menu/HomePage.vue')
},
{
path:'/Home/Demo/Echarts',
name:'Echarts',
component: ()=> import('@/views/menu/Echarts.vue')
},
{
path:'/Home/Demo/Ueditor',
name:'Ueditor',
component: ()=> import('@/views/menu/Ueditor.vue')
}
]
},
]
const router= newVueRouter({//routes 用于定義 路由跳轉 規則
routes,//mode 用于去除地址中的 #
mode: 'history',//scrollBehavior 用于定義路由切換時，頁面滾動。
scrollBehavior: () =>({
y:0})
})//解決相同路徑跳轉報錯
const routerPush =VueRouter.prototype.push;
VueRouter.prototype.push= functionpush(location, onResolve, onReject) {if (onResolve ||onReject)return routerPush.call(this, location, onResolve, onReject)return routerPush.call(this, location).catch(error =>error)
};
exportdefault router
總結
以上是生活随笔為你收集整理的element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 直播吧(NBA直播吧)
- 下一篇： 吃金币一直跑的游戏叫什么 每天都在纠结吃