Vue2后台管理系统（1）

Faithfulzp

已于 2022-08-30 14:48:53 修改

阅读量2.3k

点赞数 3

文章标签： javascript 前端 vue.js vscode 前端框架

于 2022-08-14 23:36:48 首次发布

本文链接：https://blog.csdn.net/qq_51240101/article/details/125865612

版权

这篇博客详细记录了使用Vue2进行后台管理系统开发的过程，包括模板初始化、登录业务实现、退出登录功能、路由配置、品牌管理及商品管理组件的搭建，涉及到API调用、数据动态展示、表单验证及组件交互。同时，博主分享了遇到的Bug及解决方案。

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

Vue2尚硅谷后台管理系统自学笔记

一、后台开发模板

模板下载
1、先解压；
2、解压之后在文件所在文件夹打开cmd；
3、npm安装node依赖，npm install；
4、vscode打开文件 npm run dev运行程序。

二、完成登录业务

1、静态页面的修改（文字、注释、背景图片等）
2、书写API（换成真实接口，接口文档：http://39.98.123.211:8170/swagger-ui.html#/）

代码如下（示例）：

// 登录接口
export const login = (data) => request({
    url: '/admin/acl/index/login', method: 'post', data })

3、axios二次封装

修改X-Token为token

 // 每一个请求都在请求头携带token
config.headers['token'] = getToken()

修改响应拦截器的code

if (res.code !== 20000 && res.code !== 200)

4、解决代理跨域问题

代码如下：

// 配置代理跨域
    proxy: {
   
      '/dev-api': {
   
        target: 'http://gmall-h5-api.atguigu.cn',
        pathRewrite: {
    '^/dev-api': '' },
      }
    },

三、退出登录

1、修改layout文件中Navbar组件的列表文字
在这里插入图片描述

四、路由的搭建

1、删除原有的不需要的路由组件，并创建几个新的组件，如图:
修改后如图
2、修改router

新增 router 代码如下：

  {
   
    path: '/',
    component: Layout, // layout是大的框架
    redirect: '/dashboard',
    children: [{
   
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      // meta里是侧边栏标题和小图标
      meta: {
    title: '首页', icon: 'dashboard' }
    }]
  },
  {
   
    // 这些都是侧边栏路由，所以都在首页
    path: '/product',
    name: 'Product',
    component: Layout, // layout是大的框架
    // 记得设置侧边栏图标，和商品的图标（注：小标题没有小图标）
    meta: {
    title: '商品管理', icon: 'el-icon-goods' },
    children: [
      {
   
        path: 'attr',
        name: 'Attr',
        component: () => import('@/views/product/Attr'),
        meta: {
    title: '平台属性属性' }
      },
      {
   
        path: 'spu',
        name: 'Spu',
        component: () => import('@/views/product/Spu'),
        meta: {
    title: 'Spu管理' }
      },
      {
   
        path: 'sku',
        name: 'Sku',
        component: () => import('@/views/product/Sku'),
        meta: {
    title: 'Sku管理' }
      },
      {
   
        path: 'trademark',
        name: 'TradeMark',
        component: () => import('@/views/product/tradeMark'),
        meta: {
    title: '品牌管理' }
      },
    ]
  },

3、修改模板的style的class错误（改后有了侧边距）
在这里插入图片描述
4、完成结果：

五、品牌管理组件

1、设置静态组件：

使用ele-ui中的button、table、pagination，messagebox提示框、form表单验证、dialog对话框