vue2搭建的商品后台管理项目（1）

后台管理系统模板介绍

用到的接口地址：
http://39.98.123.211:8170/swagger-ui.html#/index45controller
http://39.98.123.211:8510/swagger-ui.html#/Banner3164929702
模板地址：https://github.com/PanJiaChen/vue-admin-template
安装包解压缩后：

各个文件介绍

build
    ----index,js webpack配置文件【很少修改这个文件】

mock 
    ----mock数据文件夹【模拟一些假的数据mock.js实现的】

node_modules 
    ----项目依赖的模块

public
    ----icon图标，静态页面，public文件夹放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹，原封不动打包的dist文件夹里

src
    ----程序员源代码的地方
    ----api文件夹，涉及请求相关的
    ----assets文件夹：里面放置一些静态资源（一般是共享的）放在assets文件夹里面静态资源，在webpack打包的时候，会进行编译
    ----components文件夹：一班放置非路由组件获取全局组件
    ----icons文件放置了一些矢量图
    ----layout文件放置一些组件和混入
    ----router文件与路由相关的
    ----store文件 与vuex相关的
    ----style文件 放置一些样式文件
    ----utils文件夹 request文件 二次封装了axios
    ----views文件夹 里面放置的是路由组件

APP.vue
    ---根组件
main.js
    ---入口文件
.editorconfig ----编码设置
.env.development ----开发环境设置的文件
.env.production ----生产环境的设置
.eslintignore ---eslinti不处理的文件设置
.eslintrc ----代码规范性检测的文件
babel.config.js  -----当前项目维度 (Project Wide)的配置文件，相当于一份全局配置，如果 babel 决定应用这个配置文件，则一定会应用到所有文件的转换。
jsconfig.json ---相关设置看：https://www.jianshu.com/p/f82d9d11c32b
package-lock.json --包版本下载指定文件
package.json ----包版本文件
vue.config.js ---一些代理和mock虚拟数据的设置文件（比较重要）

第一步：下载模板
第二步：删除相关不需要静态组件和路由
第三步：配置自己需要的路由和静态组件

登录业务的编写

登入功能：

效果图：

相关业务涉及到的文件夹：
登录功能的静态组件：

api接口文件：

里面有相关的api接口user.js文件夹里面是一些登录业务需要发送请求的接口

import request from '@/utils/request'
//登录接口
export function login(data) {
  return request({
    url: '/admin/acl/index/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/admin/acl/index/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/admin/acl/index/logout',
    method: 'post'
  })
}

这里需要配置代理：不然会报错404：
需要在vue.config.js里面配置

    proxy: {
      '/dev-api/admin/acl': {// 匹配所有以 '/dev-api'开头的请求路径
        target: 'http://39.98.123.211:8170',// 代理目标的基础路径
        pathRewrite: { '^/dev-api': '' }
      },
      }

注意：util下的request.js文件夹是二次封装的请求文件
（红线标记需要改为token）

红线部分需要加个res.code !==200 因为真是接口返回来的是成功code是200

登出功能：

登出静态组件文件：

登出功能与登录功能相差无几：相关代理，请求接口都已设置好，

品牌管理业务的编写：

首先：在这之前先配置路由实现品牌管理、属性、spu、sku组件的切换

 {
    path: '/product',
    component: Layout,
    name: 'Product',
    meta: { title: '商品管理', icon: 'el-icon-goods' },
    children: [{
      path: 'tradmark',
      name: 'Trademark',
      component: () => import('@/views/product/tradmark'),
      meta: { title: '品牌管理' }
    },
    {
      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' }
    }
    ]
  },

品牌管理的静态页面

注意：该项目运用了element-ui组件库
相关链接：https://element.eleme.cn/#/zh-CN
文件夹：

效果图：

要快速搭建一个静态页面需要熟练运用组件库

品牌列表数据的展示

注意：这是需要把运用到的接口注册为全局：
编写相应接口文件在一个文件夹

在index.js文件导入接口文件：

import * as tradmark from "./product/tradmark"
import * as sku from "./product/sku"
import * as spu from "./product/spu"
import * as attr from "./product/attr"
import * as user from "./acl/user"
import role from "./acl/role"
import permission from "./acl/permission"

export default {
    tradmark,
    sku,
    spu,
    attr,
    user,
    role,
    permission
}

main.js

import API from "@/api/index"
Vue.prototype.$API = API

需要编写相应接口文件：

//页面初始化请求品牌列表数据
export const reqtradmarklist = (page, limit) => request({ url: `/admin/cms/banner/${page}/${limit}`, method: 'get' })

在静态组件发送请求获取数据：

  async gettradmark() {
      const { page, limit } = this;
      let result = await this.$API.tradmark.reqtradmarklist(page, limit);
      if (result.code === 200) {
        this.total = result.data.total;
        this.tradlist = result.data.records;
      }
    },

效果图：

注意点：在表格里需要展示图片需要用到作用域插槽

      <el-table-column prop="imageUrl" label="品牌logo" width="width">
        <template slot-scope="{ row }">
          <img :src="row.imageUrl" alt="" style="width: 100px; height: 100px" />
        </template>

添加品牌和删除品牌业务的编写

静态页面：（用的是element-ui的对话框组件）需要注意的是他的表单验证

代码：

      rules: {
        title: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10个字符",
            trigger: "change",
          },
        ],
        imageUrl: [{ required: true, message: "请选择品牌的图片" }],
      },

注意：控制dialog显示与隐藏时需要把之前残留数据给清空

相关接口编写：
修改品牌接口需要带品牌id

//添加品牌数据接口
export const addtradmark = (tradmark) => {
    if (tradmark.id) {
        return request({ url: '/admin/cms/banner/update', method: 'put', data: tradmark })
    } else {
        return request({ url: '/admin/cms/banner/save', method: 'post', data: tradmark })
    }
}

静态组件代码：
（这里写了表单验证处理validate）

    addOrupdatetradmark() {
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          this.dialogFormVisible = false;
          let result = await this.$API.tradmark.addtradmark(this.tForm);
          console.log(this.tForm);
          console.log(result);
          if (result.code === 200) {
            //弹出信息：添加品牌，修改品牌
            this.$message(this.tForm.id ? "修改品牌成功" : "添加品牌成功");
            // 重新获取数据
            this.gettradmark();
          } else {
            this.$message(this.tForm.id ? "修改品牌失败" : "添加品牌失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

删除品牌业务的编写

接口：
（需要传入id）

//删除品牌数据接口
export const deletetradmark = (id) => request({ url: `/admin/cms/banner/remove/${id}`, method: 'delete' })

静态组件：

    //删除品牌回调
    async deletetradmark({ id }) {
      let result = await this.$API.tradmark.deletetradmark(id);
      if (result.code === 200) {
        this.$message("删除成功");
      } else {
        this.$message("删除失败");
      }
      this.gettradmark();
    },