电商后台管理

程序猿_“大神”

已于 2022-11-02 08:07:25 修改

阅读量900

点赞数

文章标签： vue.js 前端

于 2022-11-01 21:47:35 首次发布

本文链接：https://blog.csdn.net/dyx001007/article/details/127640030

版权

本文详细介绍了使用vue.js和前端技术开发电商后台管理系统的全过程，包括项目介绍、技术选型、开发流程、axios封装、API配置、首页及主页面设计、权限管理、难点解析等。涉及用户管理、角色权限、商品分类、订单处理等功能模块。

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

还有商品列表，分类参数，订单列表，数据报表，这几个模块使用的都是请求接口渲染，和增删改查

九、项目难点：

项目介绍

这是一个电商类的后台管理系统，主要作用是用来进行用户的管理，商品订单的管理，和权限管理，是内部员工进行商品记录，和分类

在这个项目用到的技术

vue2全家桶,element ui,axios,vue-table-with-tree-grid

一、项目的主要模块

有登录页面和主页

主页有用户管理，权限管理，商品管理，订单管理

二、开发准备工作

创建项目并下载项目中所需要用的第三方组件

三、开发流程

看接口是否用到跨域，如果需要跨域需要到跨域需要创建vue.config.js文件，在里面配置devServer，在devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称代理地址开启跨域重写路径，这个项目是不用跨域的
二次封装axios和配置api
配置路由
下载项目所需要的组件比如element ui

四、二次封装axios

在src下创建一个http文件夹，在这个文件夹下面创建request.js文件，在request文件import引入axios，引入element ui用来实现loading加载

引入axios，和需要的组件

//封装axios
import axios from "axios";
// element ui 提示信息和loading加载
import { Message, Loading } from 'element-ui';
//引入路由
import router from "../router"

封装loading开启和结束的函数

// 封装loading开启和结束函数
let loading;
function startLoading(){
  loading = Loading.service({
    lock:true,
    text:'拼命加载中...',
    background:'rgba(0,0,0,0.7)'
  })
}
function endLoading(){
  loading.close()
}

创建axios实例

//创建axios实例
const service = axios.create({
  //基地址
  baseURL:" 接口地址",
  //baseURL:env.dev.baseUrl,
  settimeout: 5000,
});

请求拦截：请求拦截使用interceptors.request .use（）在发送请求之前添加请求头并且开启loading，请求失败关闭loading，

//2:请求拦截
service.interceptors.request
  .use((config) => {
    //在发送请求之前做些什么，比如验证token之类的
    if(localStorage.eleToken){
      config.headers.Authorization = localStorage.eleToken
    }
    startLoading();
    return config;
  },(error) => {
    //对错误请求做些什么
    // endLoading();
    loading.close();
    return Promise.reject(error)
  })

响应拦截：响应拦截使用interceptors.response.use（），响应成功返回数据并关闭loading，请求失败返回失败的原因，比如用户过期需要删除存放的token，并且提示用户用户过期，然后返回到登录页面

//3:响应拦截
service.interceptors.response.use(
    //请求成功关闭loading 并返回数据
  (response) =>{
    endLoading();
    return response;
  },
  (error) => {
    //对错误请求做些什么
    const {status} = error.response
    //判断用户是否过期，如果过期了清楚token
    if(status == 401){
      Message.error('用户过期，请重新登录！')
      localStorage.removeItem("eleToken")
      router.push("/login")
    }
    //关闭loading 返回信息提示用户登录过期
    endLoading();
    console.log(error)
    Message.error(error.response.data.msg)
    return Promise.reject(error)
})

抛出对象

//抛出axios对象实例
export default  service;

五、配置api

在http文件夹新建api.js文件，在文件引入封装好的axios

// 封装api
// 引入封装好的axios
import request from "./request"

// 向各个接口分发axios
export function getList (){
  return request({
      url:'', // 这个地址是去掉公共地址剩下的地址
      method:'',// 请求方式 支持多种方式  get post put delete 等等
  })
}

六、首页

首页样式

实现方式：

登录样式

<template>
  <div class="login_container">
    <!-- 父元素 -->
    <div class="login_box">
      <!-- 头像框 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 登录 -->
      <div class="">
        <el-form
          :model="loginForm"
          :rules="loginFormRules"
          ref="loginFormRef"
          class="login_form"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user-solid"
              type="text"
              v-model="loginForm.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-s-goods"
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="loginFormBtn('loginFormRef')" >登录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.login_container {
  background: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 360px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    padding: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px #ddd;
    background: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #eee;
    }
  }
  .login_form {
    width: 100%;
    position: absolute;
    bottom: 60px;
    padding: 0 40px;
    .btns {
      display: flex;
      justify-content: center;
    }
  }
}
</style>

input框的校验

  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      // 校验
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 10, message: "用户名在4到10个字符之间" ,trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "bl