电商后台管理项目d01

Posted 2021-05-18 李耀书

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了电商后台管理项目d01相关的知识，希望对你有一定的参考价值。

电商后台管理项目d01

1、项目技术栈

Vue
Vue-Router
Element-UI
Axios
Echarts

2、项目初始化

安装Vue脚手架
通过脚手架创建项目(手动配置)
路由配置
配置Element-UI，安装[babel-plugin-component]，实现按需导入
配置Axios
实现Axios的发呢改装

3、`Element-UI`的按需引入。

在目录src下新建一个util文件夹，在util文件中新建一个elementUI文件。在main.js文件中导入。

import './util/elemt'

在elementUI中，实现按需导入。

import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

4、路由配置：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [{
      path: '/',
      redirect: '/login',
    },
     {
      path: '/login',
      name: 'login',
      component: () => import( /* webpackChunkName: "login_home-welcome" */ './views/Login.vue')
    },]
    },
  ]
})

在确保路由正确的情况下，也要对路由实现优化以及路由重定向。

5、`Axios`的封装

第一步：封装基本路径

首先：实现基准路径的简单封装。在utle文件中新建index.js文件。在index.js文件中。

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(axios)
// 设置请求基准路径
const Serve = axios.create({
    baseURL: 'https://www.liulongbin.top:8888/api/private/v1',
    timeout: 5000,
})
export default Serve

第二步:封装API

在src中新建API文件夹，在API文件中新建Login.js文件，文件名称尽量与组件或页面名称对应。方便日后的维护。

import request from '../util/index'
export default {
    login(form) {
        return request({
            url: '/login',
            method: "post",
            data: form,
        })
    }
}

导入封装好的基准路径，在这里写好请求的路径以及方式。

第三步：使用

在Login.vue页面中导入封装好对应的API文件

import LoginApi from '../api/Login'

在数据请求时：

 login() {
      this.$refs.loginRef.validate(async (valid) => {
        if (!valid) return;
        let { data: res } = await LoginApi.login(this.loginForm)
        if (res.meta.status !== 200) {
          this.$message.error(res.meta.msg);
        }
        sessionStorage.token = res.data.token;
        this.$router.push("/home");
        this.$message.success(res.meta.msg);
      });
    },

做好这些，基本可以开始了…

6、实现登录功能

分析：

输入账号和密码，发送数据，发送时携带token值，对token值进行保存，在后续的请求中用户会通过token值确定用户账号身份。从而实现数据的请求。

**步骤1、**在view中新建Login页面。

**步骤2、**在Login页面中：

<template>
  <div id="login">
    <div class="login-wraper">
      <div class="img"><img src="../assets/logo.png" alt="" /></div>
      <div class="from">
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginRef"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user-solid"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item class="but">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="remove">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import LoginApi from '../api/Login'
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "密码长度在3到10个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      this.$refs.loginRef.validate(async (valid) => {
        if (!valid) return;
        let { data: res } = await LoginApi.login(this.loginForm)
        if (res.meta.status !== 200) {
          this.$message.error(res.meta.msg);
        }
        sessionStorage.token = res.data.token;
        this.$router.push("/home");
        this.$message.success(res.meta.msg);
      });
    },
    remove() {
      this.$refs.loginRef.resetFields();
    },
  },
};
</script>
<style lang='scss' scoped>
#login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/1.jpg");
  background-size: 100%;
  .login-wraper {
    width: 400px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #cccc;
    .img {
      width: 120px;
      height: 120px;
      padding: 10px;
      background-color: rgb(54, 52, 52);
      border-radius: 50%;
      box-shadow: 0px 0px 10px 0px #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
        height: 100%;
        background-color: rgb(163, 163, 163);
        border-radius: 50%;
      }
    }
    .el-form {
      width: 100%;
      position: absolute;
      bottom: 0;
      padding: 20px;
      box-sizing: border-box;
      .el-form-item {
        width: 100%;
        .el-input {
          width: 100%;
        }
      }
    }
    .but {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>

步骤三：

封装的基准路径中设置请求头

// 请求响应器
Serve.interceptors.request.use(config => {
    config.headers.Authorization = sessionStorage.token;
    return config
})

通过请求拦截器设置请求头。

步骤四：

在main.js中设置路由守卫

// 路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    if (sessionStorage.token) {
      next()
    } else {
      next('/login')
    }
  }
})

判断如果当前本地中没有token值，则说明用户没有登录，则跳转到登录页面。

步骤五:

添加Home.vue页面

设置Home页的初始状态。

<template>
    <div>
        <el-button type="info" @click="logout"> 退出 </el-button>
    </div>
</template>

<script>
export default {
  methods: {
    logout() {
      sessionStorage.removeItem("token");
      if (!sessionStorage.token) {
        this.$router.push("/login");
      }
    }
  }
}
</script>
<style lang='less' scoped>
</style>

通过本地清除，在点击退出按钮时能够成功退出。

7、完成首页部分

功能要求

1、首页布局

2、侧边栏导航

3、welcome页面。

1、首页布局

<template>
  <div id="home">
    <el-container>
      <el-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
        </以上是关于电商后台管理项目d01的主要内容，如果未能解决你的问题，请参考以下文章 
 分布式电商项目(03)--后台管理系统整合测试
 项目分享期末大作业——电商后台管理系统
 项目分享期末大作业——电商后台管理系统
 项目分享期末大作业——电商后台管理系统
 JAVA电商平台项目后台实现
 JAVA电商平台项目后台实现

电商后台管理项目d01

电商后台管理项目d01

1、项目技术栈

2、项目初始化

3、Element-UI的按需引入。

4、路由配置：

5、Axios的封装

6、实现登录功能

7、完成首页部分

3、`Element-UI`的按需引入。

5、`Axios`的封装