項目概述

基本業務概述

根據不同的應用場景，電商系統一般都提供了PC端、移動APP、移動Web、微信小程序等多種終端訪問方式

管理系統功能

電商后臺管理系統用于管理賬號、商品分類、商品信息、訂單、數據統計等業務功能

開發模式

電商后臺管理系統整體采用前后端分離的開發模式，其中前后端項目基于Vue技術棧的SPA項目

技術選型

前端技術棧

vue
vue-router
Element-UI
Axios
Echarts

后端技術棧

Node.js
Express
Jwt
Mysql
Sequelize

項目部分效果

這個是實現的一個登錄頁面…

這個是實現的首頁的內容…

這個實現的商品分類頁面的內容…

項目初始化

前端項目初始化

安裝Vue腳手架
通過Vue腳手架創建項目
配置Vue路由
配置Element-UI組件庫
配置axios庫
初始化git遠程倉庫
將本地項目托管到github或碼云中

后端環境安裝

安裝MySQL數據庫
安裝Node.js環境
配置項目相關信息
啟動項目
使用Postman測試后臺項目接口是否正常

實現登錄

登錄頁面布局

-#####通過Element-UI組件實現布局

el-form
el-form-item
el-input
el-button
字體圖標

登錄退出設置背景色

在里面寫入全局樣式表

/* 全局樣式表 */ 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里面導入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>

繪制登錄表單區域

Login.vue

<!-- 登錄表單區域 --><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><!-- 按鈕區域 --><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)

實現主頁布局

整體布局

先上下劃分，再左右劃分

<el-container><!--頭部區域--><el-header></el-header><el-container><!--側邊欄區域--><el-aside></el-aside><!--右側主體區域--><el-main></el-main></el-container> </el-container>

components/Home.vue

<el-container class="home-container"><!-- 頭部區域 --><el-header>Header<el-button type="info" @click="logout">退出</el-button></el-header><!-- 頁面主體區域 --><el-container><!-- 側邊欄 --><el-aside width="200px">Aside</el-aside><!-- 右側內容主體 --><el-main>Main</el-main></el-container></el-container>

美化主頁的header區域

<el-header><div><img src="../assets/heima.png" alt=""><span>電商后臺管理系統</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}

總結

以上是生活随笔為你收集整理的vue后台管理系统实践方案总结(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。