后台管理系统（第一天）

发布时间：2023-05-15 文章分类：WEB开发, 电脑百科投稿人：王小丽字号：默认 | 大 | 超大打印

1、后台管理系统项目简介
什么是后台管理系统项目？

在前端领域当中，开发后台管理系统项目，并非是Java，PHP等后台语言项目在前面课程当中，我们已经开发了一个项目【尚品汇电商平台项目】，这个项目主要针对的是用户（游客），可以让用户在平台当中购买产品。

但是你需要想明白一件事情，用户购买产品信息从何而来呀？比如：前台项目当中的数据来源于卖家（公司），但是需要注意的时候，卖家它不会数据库操作。对于卖家而言，需要把产品的信息上传于服务器，写入数据库。

卖家并非程序员，不会数据库操作（增删改查）。导致卖家，找了一个程序员，开发一个产品，可以让我进行可视化操作数据库（增删改查）

卖家（公司）组成：老板、员工。
老板：开发这个项目，对于老板而言，什么都可以操作。【产品的上架、产品的下架、查看员工的个人业绩、其他等等】
员工：可能就是查看个人业绩

2、后台管理系统：可以让用户通过一个可视化工具，可以实现对于数据库进行增删改查的操作。
而且需要注意，根据不同的角色（老板、员工），看到的、操作内容是不同的。

对于后台管理系统项目，一般而言，是不需要注册的。

模板介绍
简洁版: https://github.com/PanJiaChen/vue-admin-template （推荐）
加强版: https://github.com/PanJiaChen/vue-element-admin

1、解压后发现文件夹里没有node_modules文件夹，我们需要安装依赖npm install

2、在vue.config.js配置文件中添加配置lintOnSave:false

module.exports = {

lintOnSave: false, // eslint-loader 是否在保存的时候检查

}

然后我们运行一下---->去看他的package.json文件下"dev": "vue-cli-service serve",说明我们用dev来运行npm run dev

文件介绍

build
     ----index.js webpack配置文件【很少修改这个文件】
mock
    ----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真是接口
node_modules
     ------项目依赖的模块
public
     ------ico图标,静态页面，publick文件夹里面经常放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹，原封不动的打包到dist文件夹里面
src
    -----程序员源代码的地方
    ------api文件夹:涉及请求相关的
    ------assets文件夹：里面放置一些静态资源（一般共享的），放在aseets文件夹里面静态资源，在webpack打包的时候，会进行编译
    ------components文件夹：一般放置非路由组件获取全局组件
    ------icons这个文件夹的里面放置了一些svg矢量图
    ------layout文件夹：他里面放置一些组件与混入
    ------router文件夹：与路由相关的
    -----store文件夹：一定是与vuex先关的
    -----style文件夹：与样式先关的
    ------utils文件夹：request.js是axios二次封装文件****
    ------views文件夹：里面放置的是路由组件
App.vue:根组件
main.js：入口文件
permission.js:与导航守卫先关、
settings：项目配置项文件
.env.development：开发环境的配置文件
.env.producation：生产环境的配置文件

后台管理系统API接口在线文档

最新后台文档swagger地址:
http://39.98.123.211:8510/swagger-ui.html#/

完成登录业务
静态组件完成
书写API（换成真实的接口）
axios二次封装
换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)

完成静态组件
修改里面的样式以及内容

这里修改了背景图片，以及把英文的都换成了中文

把背景图片大小设置为100% 100%

.login-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  background: url(~@/assets/1.png);
  background-size: 100% 100%;

书写API（换成真实的接口）

这里之前登录的使用模拟的数据（mock），我们换成真实的接口

Swagger UI这里找接口

axios二次封装修改

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'
    })
}

解决代理跨域问题

devServer: {
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            "/dev-api": {
                target: "http://gmall-h5-api.atguigu.cn/",
                pathRewrite: { "^/dev-api": "" }
            }
        }
    },

完成退出登录业务

英文改成中文

路由的搭建

// src/router/index.js
  { // 一级路由
    path:'/product',
    component:Layout, // 在Layout的骨架下！！
    name:'Product',
    meta:{title:'商品管理',icon:'el-icon-goods'}, // // title是设置侧边栏的文字
    children:[
      // 二级路由
      {
        path:'trademark',
        name:'TradeMark',
        component:()=>import('@/views/product/tradeMark'),
        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管理'},
      },
    ],
  },

路由的呈现

完成品牌管理业务tradeMark

由于后端将图片路径改变了，所以图片显示不出来

首先完成品牌管理业务之前，需要完成静态组件

1、添加button按钮


<!-- 按钮 -->
<el-button type="primary" icon="el-icon-plus" style="margin:10px 0">添加</el-button>

2、表格（按列排布）

 <!-- 表格组件 -->
 <el-table border>
   <el-table-column label="序号" width="80" align="center"></el-table-column>
   <el-table-column label="品牌类型" align="center"></el-table-column>
   <el-table-column label="品牌LOGO" align="center"></el-table-column>
   <el-table-column label="操作" align="center"></el-table-column>
 </el-table>

总共有四列，每列代表不同的意思

3、分页器

    <!-- 分页器 -->
    <!--@size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
    <el-pagination
      :current-page="6"
      :page-sizes="[3, 5, 10]"
      :page-size="3"
       layout=" prev, pager, next, jumper,->,sizes, total"
      :total="90"
      style="margin-top:20px;text-align:center"
    >
    </el-pagination>

书写相关API接口

//  src/api/product/tradeMark.js
// 品牌管理的相关接口
// 我们发请求需要用的是封装好的axios
import request from '@/utils/request'
// 获取品牌分页列表数据    dev-api/admin/product/baseTrademark/{page}/{limit}      GET    
export const reqTradeMarkList = (page, limit) => {
    return request({ url: `dev-list/admin/product/baseTrademark/${page}/${limit}`, method: 'GET' })
}

接口统一暴露

import * as trademark from './product/tradeMark'
import * as attr from './product/attr'
import * as sku from './product/sku'
import * as spu from './product/spu'
//对外暴露
export default {
    trademark,
    attr,
    sku,
    spu
}

放在Vue的原型对象中，使得可以任意使用这个接口函数

//   src/main.js
// 引入相关API请求接口---挂载在原型上
import API from '@/api/index'
// 组件实例的原型的原型指向的是Vue.prototype
// 任意组件可以使用API相关的接口
Vue.prototype.$API = API;

发送请求，获取到相应的数据

mounted() {
    this.getPageList();
  },
  methods: {
    async getPageList(pager = 1) {
      this.page = pager;
      const { page, limit } = this;
      let result = await this.$API.trademark.reqTradeMarkList(page, limit);
      console.log(result);
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.records;
      }
    },
}

第一列我们要展示的是序列号，可以用 type="index"表示从1 开始展示索引号

第二列我们展示的是品牌类型，在list 里面的tmName，我们可以用prop:对应列内容的字段名

第三列展示的是品牌logo，是个图片，我们有地址，我们可以用【作用域插槽】来展示图片

slot-scope="{ row, $index }"代表的是子组件回传过来的数据，也就是list

然后我们进行动态展示图片:src

第四列有两个按钮

<el-table style="width: 100%" border :data="list">
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tmName"
        label="品牌名称"
        width="width"
      ></el-table-column>
      <el-table-column prop="logoUrl" label="品牌LOGO" width="width">
        <template slot-scope="{ row, $index }">
          <img src="row.logoUrl" alt="" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="updateTradeMark"
            >修改</el-button
          >
          <el-button type="danger" icon="el-icon-delete" size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

分页器

    <el-pagination
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,sizes, total"
      :total="total"
      style="margin-top: 20px; text-align: center"
      :page-count="7"
    >
    </el-pagination>

完成相关点击事件

    // 点击页码进行切换
    handleCurrentChange(pager) {
      // pager你点击的页数
      // 修改参数，然后再发请求
      this.page = pager ;
      this.getPageList();
    },

标签 java, 管理系统, 索引