項目概述
基本業(yè)務(wù)概述
根據(jù)不同的應(yīng)用場景钮热，電商系統(tǒng)一般都提供了PC端填抬、移動APP、移動Web隧期、微信小程序等多種終端訪問方式
管理系統(tǒng)功能
電商后臺管理系統(tǒng)用于管理賬號飒责、商品分類、商品信息仆潮、訂單宏蛉、數(shù)據(jù)統(tǒng)計等業(yè)務(wù)功能
開發(fā)模式
電商后臺管理系統(tǒng)整體采用前后端分離的開發(fā)模式，其中前后端項目基于Vue技術(shù)棧的SPA項目
技術(shù)選型
前端技術(shù)棧
- vue
- vue-router
- Element-UI
- Axios
- Echarts
后端技術(shù)棧
- Node.js
- Express
- Jwt
- Mysql
- Sequelize
項目部分效果
這個是實現(xiàn)的一個登錄頁面...
image.png
這個是實現(xiàn)的首頁的內(nèi)容...
image.png
這個實現(xiàn)的商品分類頁面的內(nèi)容...
image.png
項目初始化
前端項目初始化
- 安裝Vue腳手架
- 通過Vue腳手架創(chuàng)建項目
- 配置Vue路由
- 配置Element-UI組件庫
- 配置axios庫
- 初始化git遠程倉庫
- 將本地項目托管到github或碼云中
后端環(huán)境安裝
- 安裝MySQL數(shù)據(jù)庫
- 安裝Node.js環(huán)境
- 配置項目相關(guān)信息
- 啟動項目
- 使用Postman測試后臺項目接口是否正常
實現(xiàn)登錄
登錄頁面布局
-#####通過Element-UI組件實現(xiàn)布局
- el-form
- el-form-item
- el-input
- el-button
- 字體圖標(biāo)
登錄退出設(shè)置背景色
在里面寫入全局樣式表
/* 全局樣式表 */
html,
body,
#app{
height: 100%;
margin: 0;
padding: 0;
}
Login.vue頁面
<template>
<div class="login_container"></div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
</style>
在main.js里面導(dǎo)入global.css文件
import './assets/css/global.css'
繪制中間部分頭像
Login.vue
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../assets/logo.png"/>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.avatar_box{
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
</style>
繪制登錄表單區(qū)域
Login.vue
<!-- 登錄表單區(qū)域 -->
<el-form label-width="0px" class="login_form">
<!-- 用戶名 -->
<el-form-item>
<el-input prefix-icon="el-icon-search"></el-input>
</el-form-item>
<!-- 密碼 -->
<el-form-item>
<el-input prefix-icon="el-icon-search"></el-input>
</el-form-item>
<!-- 按鈕區(qū)域 -->
<el-form-item class="btns">
<el-button type="primary">登錄</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
.login_form{
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns{
display: flex;
justify-content: flex-end;
}
在mian.js引入element.js
import Vue from 'vue'
import { Button } from 'element-ui'
import { Form,FormItem} from 'element-ui'
import { Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
效果如下圖：
image.png
實現(xiàn)主頁布局
整體布局
先上下劃分性置，再左右劃分
<el-container>
<!--頭部區(qū)域-->
<el-header></el-header>
<el-container>
<!--側(cè)邊欄區(qū)域-->
<el-aside></el-aside>
<!--右側(cè)主體區(qū)域-->
<el-main></el-main>
</el-container>
</el-container>
components/Home.vue
<el-container class="home-container">
<!-- 頭部區(qū)域 -->
<el-header>Header<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 頁面主體區(qū)域 -->
<el-container>
<!-- 側(cè)邊欄 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右側(cè)內(nèi)容主體 -->
<el-main>Main</el-main>
</el-container>
</el-container>
美化主頁的header區(qū)域
<el-header>
<div>
<img src="../assets/heima.png" alt="">
<span>電商后臺管理系統(tǒng)</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
.home-container{
height: 100%;
}
.el-header{
background-color: #373d41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #fff;
font-size: 20px;
> div {
display: flex;
align-items: center;
span{
margin-left:15px;
}
}
}
.el-aside{
background: #333744;
}
.el-main{
background-color: #eaedf1
}
效果如下：
image.png
左側(cè)菜單布局
菜單分成二級拾并，并且可以折疊
<el-menu>
<el-submenu>
<!--這個template是一級菜單的內(nèi)容模板-->
<i class="el-icon-menu"></i>
<span>一級菜單</span>
<!--在一級菜單中，可以嵌套二級菜單-->
<el-menu-item>
<i class="el-icon-menu"></i>
<span slot="title">二級菜單</span>
</el-menu-item>
<el-submenu>
</el-menu>
在components/Home.vue里面寫入
<el-container>
<!-- 側(cè)邊欄 -->
<el-aside width="200px">
<!-- 側(cè)邊欄菜單區(qū)域 -->
<el-menu
background-color="#333744" text-color="#fff"
active-text-color="#ffd04b">
<!-- 一級菜單 -->
<el-submenu index="1">
<!-- 一級菜單的模板區(qū)域 -->
<template slot="title">
<!-- 圖標(biāo) -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>導(dǎo)航一</span>
</template>
<!-- 二級菜單 -->
<el-menu-item index="1-4-1">
<template slot="title">
<!-- 圖標(biāo) -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>選項1</span>
</template></el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右側(cè)內(nèi)容主體 -->
<el-main>Main</el-main>
</el-container>
通過axios攔截器添加token驗證
通過axios請求攔截器添加token,包裝擁有獲取數(shù)據(jù)的權(quán)限
//axios請求攔截器
axios.interceptors.request.use(config => {
//為請求頭對象鹏浅，添加Token驗證的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
image.png
獲取左側(cè)菜單數(shù)據(jù)
image.png
image.png
通過雙層for循環(huán)渲染左側(cè)菜單
通過兩層for循環(huán)把左側(cè)的結(jié)構(gòu)渲染出來
image.png
image.png
實現(xiàn)商品列表分頁功能
<!-- 分頁區(qū)域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15, 20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total" background>
</el-pagination>
image.png
實現(xiàn)效果如下
image.png
繪制用戶列表組件的基礎(chǔ)布局
在需要用到的組件添加element.js嗅义，為了使用UI組件方便，開始以引入全局
在css/global.css里面寫入樣式
.el-breadcrumb{
margin-bottom: 15px;
font-size: 12px;
}
/* 想要自己的樣式覆蓋它的樣式就要在后邊加一個!important */
.el-card{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
表示的效果如下
image.png
在Users.vue里面添加
image.png
獲取用戶列表數(shù)據(jù)(制作不易困了)
image.png
顯示的效果
image.png
使用el-table組件渲染基本的用戶列表
stripe屬性可以創(chuàng)建帶斑馬紋的表格 table 組件是不具有豎直方向的邊框的
image.png
再把需要用到的組件在plugins/element.js里面引入
實現(xiàn)的效果
image.png
然后在css/global.css里面寫入樣式
.el-table{
margin-top: 15px;
font-size: 12px;
}
實現(xiàn)的效果(盒子到頂部的距離和字體的大小)
image.png
為表格添加索引列
只需要加入type="index"就可以了
image.png
實現(xiàn)的效果
image.png
自定義狀態(tài)列的顯示效果
使用switch開關(guān)
image.png
實現(xiàn)的效果
image.png
通過作用域插槽渲染操作列
需要使用element-ui里面的組件
這個:enterable="false",表示鼠標(biāo)是否可以隐砸、進入tooltip中之碗，false是布爾值，所以要進行數(shù)據(jù)綁定
image.png
最后實現(xiàn)的效果
image.png
總結(jié)
通過本次從零一行一行代碼實現(xiàn)一個完整的常見的后臺管理系統(tǒng)季希，其實絕大部分就是對Element UI的使用褪那。說是簡單幽纷、實則坑很多，期間遇到了不少的bug博敬，大多都是因為細節(jié)不注意眼五，也讓我更加體會 好記性不如爛筆頭 這句話埋嵌，實踐才是真理啊温兼，多動手梁钾，多探索。
