vue后台管理系统实践方案总结(一)

最新推荐文章于 2024-08-19 00:15:00 发布

GaoYao.

最新推荐文章于 2024-08-19 00:15:00 发布

阅读量2.1k

点赞数

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/m0_61255374/article/details/122995469

版权

本文总结了基于Vue的后台管理系统实践方案，包括基本业务概述、管理系统功能、前后端开发模式和技术选型。前端采用Vue、vue-router、Element-UI、Axios和Echarts，后端使用Node.js、Express、Jwt、Mysql和Sequelize。项目展示登录页面、首页及商品分类页面的效果，并详细介绍了项目初始化和登录功能的实现。

摘要由CSDN通过智能技术生成

项目概述

基本业务概述

根据不同的应用场景，电商系统一般都提供了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’

绘制中间部分头像

<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="../assets/logo.png"/>
            </div>
        </div>
    </div>
</template>
<script>