开始尝试从0写一个项目--前端（三）

器材管理板块

添加器材管理导航

src\views\home\Home.vue

src\router\index.js

src\views\equipment\Equipment.vue

<template>
    <div>
        hello!
    </div>

</template>

测试

搜索导航+分页查询

src\views\equipment\Equipment.vue

<template>
    <div>
        <!-- 导航 -->
        <el-form :inline="true" class="demo-form-inline">
            <div style="float: left">
                <label style="margin-right: 5px">器材名称: </label>
                <el-input  v-model="name" placeholder="请输入器材名称" style="width: 40%" />
                <el-button type="primary" style="margin-left: 20px" >查询</el-button>
            </div>
            <div>
                <el-button type="primary" style="float: right" >+添加器材</el-button>
            </div>
        </el-form>

        <!-- 分页查询 -->
        <div>
            <el-table :data="records" stripe style="width: 100%">
                <el-table-column prop="name" label="器材名称" width="180">
                </el-table-column>
                <el-table-column prop="img" label="图片" width="180">
                </el-table-column>
                <el-table-column prop="number" label="数量" width="180">
                </el-table-column>
                <el-table-column prop="comment" label="描述" width="180">
                </el-table-column>
                <el-table-column prop="status" label="器材状态">
                    <template slot-scope="scope">{{ scope.row.status === 0 ? "禁用" : "启用" }}</template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最后操作时间"></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleUpdateStu(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleStartOrStop(scope.row)">{{ scope.row.status === 0 ? "启用" :
            "禁用"
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    

</template>


<script>

export default {
    data() {
        return {
            name: '',        //器材名称，对应上面的输入框
            page: 1,         //页码
            pageSize: 10,    // 每页记录数
            total: 0,         //总记录数
            records: []      //当前页要展示的数据集合
        }
    },    
}

</script>

src\views\equipment\Equipment.vue

<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <div style="float: left">
                <label style="margin-right: 5px">学生姓名: </label>
                <el-input v-model="name" placeholder="请输入学生姓名" style="width: 40%" />
                <el-button type="primary" style="margin-left: 20px" @click="pageQuery()">查询</el-button>
            </div>
            <div>
                <el-button type="primary" style="float: right" @click="handleAddStu">+添加学生</el-button>
            </div>
        </el-form>
        <br>
        <br>
        <br>
        <div>
            <el-table :data="records" stripe style="width: 100%">
                <el-table-column prop="name" label="学生姓名" width="180">
                </el-table-column>
                <el-table-column prop="username" label="账号" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                </el-table-column>
                <el-table-column prop="status" label="账号状态">
                    <template slot-scope="scope">{{ scope.row.status === 0 ? "禁用" : "启用" }}</template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最后操作时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleUpdateStu(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleStartOrStop(scope.row)">{{ scope.row.status === 0 ? "启用" :
            "禁用"
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <br>
        <div>
            <el-pagination class="pageList" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>


<script>
// import request from '@/utils/request'
import { page, startOrStopStatus } from '@/api/Student'

export default {
    data() {
        return {
            name: '',        //学生姓名，对应上面的输入框
            page: 1,         //页码
            pageSize: 10,    // 每页记录数
            total: 0,         //总记录数
            records: []      //当前页要展示的数据集合
        }
    },
    created() {
        this.pageQuery()
    },
    methods: {
        pageQuery() {
            //准备参数
            const params = {
                page: this.page,
                pageSize: this.pageSize,
                name: this.name
            }

            /* request({
                url: "/api/admin/student/page",               // 请求地址
                method: "get",                      // 请求方法
                params: params,                       
                headers: {                            // 请求头
                    "Content-Type": "application/json",
                },
            }) */
            page(params)
                .then((res) => {
                    //解析结果
                    if (res.data.code === 1) {
                        this.total = res.data.data.total
                        this.records = res.data.data.records
                    }
                }).catch(err => {
                    this.$router.push("/login");
                })
        },
        //每页记录数发生变化时触发
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.pageQuery()
        },
        //page发生变化时触发
        handleCurrentChange(page) {
            this.page = page
            this.pageQuery()
        },

        //新增员工
        handleAddStu() {
            this.$router.push('/student/addStudent')
        },

        //启用禁用员工状态
        handleStartOrStop(row) {
            //判断账号是否是管理员账号，不能更改管理员账号
            if (row.username === 'admin') {
                this.$message.error("这是管理员账号，不允许更改！")
                return
            }

            this.$confirm('是否确认修改员工状态？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const p = {
                    id: row.id,
                    status: !row.status ? 1 : 0
                }
                
                startOrStopStatus(p)
                .then(res =>{
                    if(res.data.code === 1){
                        this.$message.success("状态修改成功！")
                        this.pageQuery()
                    }
                })

            })
        },
        //修改编辑学生信息
        handleUpdateStu(row){
            if(row.username === 'admin'){
                this.$message.error("这是管理员账号，不允许修改！！")
                return
            }
            //跳转到修改页面，通过地址栏传递参数
            this.$router.push({ path: '/student/addStudent', query: {id: row.id}})
        }

    }
}
</script>

src\api\Equipment.js

import request from '@/utils/request'

/* 分页查询 */
export const pageEquipment = (params) =>
    request({
        'url': '/api/admin/equipment/page',
        'method': 'get',
        params: params
    })

新增器材

src\router\index.js

src\views\equipment\Equipment.vue

src\views\equipment\addEquipment.vue

<template>
    <div>hello</div>
</template>

测试

完善表单

请求

src\api\Equipment.js

import request from '@/utils/request'

/* 分页查询 */
export const pageEquipment = (params) =>
    request({
        'url': '/api/admin/equipment/page',
        'method': 'get',
        params: params
    })



    /* 新增器材 */
export const addEquipment = (params) =>
    request({
        'url': '/api/admin/equipment',
        'method': 'post',
        data: params
    })

新增板块的界面

src\views\equipment\addEquipment.vue

<template>
    <div class="form-container">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="器材名称:" required prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="数量:" required prop="number">
                <el-input v-model="ruleForm.number"></el-input>
            </el-form-item>

            <el-form-item label="描述" prop="comment">
                <el-input v-model="ruleForm.comment"></el-input>
            </el-form-item>

            <el-form-item label="器材图片:" prop="img">
                <div class="img-upload-container">
                    <!-- 监听 update:imageUrl 事件并更新 ruleForm.img -->
                    <img-upload @update:imageUrl="handleImageUrlUpdate" />
                    <!-- <img-upload :prop-image-url="ruleForm.img"></img-upload> -->
                    <span class="img-upload-instructions">图片大小不超过2M<br>仅能上传 PNG JPEG
                        JPG类型图片<br>建议上传200*200或300*300尺寸的图片</span>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="$router.push('/equipment');">返回</el-button>
            </el-form-item>



        </el-form>

    </div>

</template>

<script>
import ImgUpload from '@/components/img-upload/img-upload.vue'
import { addEquipment } from '@/api/Equipment'

export default {

    components: {
        ImgUpload,
    },

    data() {

        return {
            // imageUrl: '',
            ruleForm: {
                name: '',
                img: '',
                number: '',
                comment: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入器材名称', trigger: 'blur' }],
                number: [
                    { required: true, message: '请输入器材数量', trigger: 'blur' }],
            },

        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert(this.ruleForm.img)
                    if (!this.ruleForm.img)
                        return this.$message.error('套餐图片不能为空')
                    addEquipment(this.ruleForm)
                        .then((res) => {
                            if (res.data.code === 1) {
                                this.$message.success("添加成功！")
                                this.$router.push('/equipment')
                            } else {
                                this.$message.error("res.data.msg")
                            }
                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleImageUrlUpdate(newImageUrl) {
            alert(newImageUrl)
            this.ruleForm.img = newImageUrl;
        }
    },
}

</script>

<style scoped>
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    /* 或者你想要的任何高度 */
    width: 100%;
    max-width: 600px;
    /* 限制最大宽度以适应较小的屏幕 */
    margin: 0 auto;
    /* 水平居中 */
    padding: 20px;
    /* 内边距 */
    background-color: #ffffff;
    /* 背景颜色 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}



/* 为提示文字设置样式 */
.img-upload-instructions {
    font-size: 12px;
    /* 根据需要调整字体大小 */
    color: #666;
    /* 根据需要调整颜色 */
    margin-bottom: 5px;
    /* 可选: 添加底部边距 */
}

/* 为整个上传组件设置样式 */
.img-upload-container {
    display: flex;
    /* 使用Flex布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 10px;
    /* 间距 */
}
</style>

上传文件OSS的逻辑

src\components\img-upload\img-upload.vue

<template>
  <div class="upload-item">
    <el-upload ref="uploadfiles" :accept="type" :class="{ borderNone: imageUrl }" class="avatar-uploader"
      action="/api/admin/common/upload" :show-file-list="false" :on-success="handleAvatarSuccess"
      :on-remove="handleRemove" :on-error="handleError" :before-upload="beforeAvatarUpload" :headers="headers">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">

      <i v-else class="el-icon-plus avatar-uploader-icon" />
      <span v-if="imageUrl" class="el-upload-list__item-actions">
        <span class="el-upload-span" @click.stop="oploadImgDel">
          删除图片
        </span>
        <span class="el-upload-span"> 重新上传 </span>
      </span>
    </el-upload>
    <p class="upload-tips">
      <slot />
    </p>
  </div>
</template>

<script>
import { getToken } from '@/utils/cookies'

export default {
  name: 'UploadImage',
  props: {
    type: {
      type: String,
      default: '.jpg,.jpeg,.png'
    },
    size: {
      type: Number,
      default: 2
    },
    propImageUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      headers: {
        token: getToken()
      },
      imageUrl: ''
    };
  },
  methods: {
    handleRemove() {
      // 方法实现
    },
    oploadImgDel() {
      this.imageUrl = '';
      this.$emit('imageChange', this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < this.size;
      if (!isLt2M) {
        this.$message({
          message: `上传文件大小不能超过${this.size}M!`,
          type: 'error'
        });
        return false;
      }
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList, 'handleError');
      this.$message({
        message: '图片上传失败',
        type: 'error'
      });
    },
    handleAvatarSuccess(response) {
      this.imageUrl = `${response.data}`;
      // 发出一个事件，包含新的图片 URL  
      this.$emit('update:imageUrl', this.imageUrl);  
    }
  },
  watch: {
    propImageUrl: function (val) {
      this.imageUrl = val;
    }
  }
};
</script>


<style lang='scss'>
.borderNone {
  .el-upload {
    border: 1px solid #d9d9d9 !important;
  }
}
</style>
<style scoped lang="scss">
.avatar-uploader .el-icon-plus:after {
  position: absolute;
  display: inline-block;
  content: ' ' !important;
  left: calc(50% - 20px);
  top: calc(50% - 40px);
  width: 40px;
  height: 40px;
  // background: url('./../../assets/icons/icon_upload@2x.png') center center no-repeat;
  background-size: 20px;
}

.el-upload-list__item-actions:hover .upload-icon {
  display: inline-block;
}

.el-icon-zoom-in:before {
  content: '\E626';
}

.el-icon-delete:before {
  content: '\E612';
}

.el-upload-list__item-actions:hover {
  opacity: 1;
}

.upload-item {


  .el-form-item__content {
    width: 500px !important;
  }

  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  /* 添加边框*/
  width: 200px;
  /* 设置宽度 */
  height: 200px;
  /* 设置高度，使之与宽度相同 */
}

.upload-tips {
  font-size: 12px;
  color: #666666;
  display: inline-block;
  line-height: 17px;
  margin-left: 36px;
}

.el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload:hover {
  border-color: #ffc200;
}

.el-upload-span {
  width: 100px;
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}

.el-upload-span:first-child {
  margin-bottom: 20px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.avatar {
  width: 200px;
  height: 160px;
  display: block;
}
</style>

上传oss图片文件时需要的jwt令牌获取

src\utils\cookies.js

import Cookies from 'js-cookie';


// 获取令牌
export const getToken = () => sessionStorage.getItem('jwtToken');

ps：如果出现模块找不到，不存在的时候，直接

npm install 模块

例如：

Module not found: Error: Can't resolve 'js-cookie' in 'D:\bishe\project\sems-front\src\utils'

解决方法：

这个错误表明你的项目无法找到js-cookie模块，这意味着你可能还没有安装它或者路径配置有问题。js-cookie是一个用于操作浏览器Cookies的小型JavaScript库。

解决方案

安装 js-cookie

确保你已经安装了js-cookie。你可以通过运行以下命令来安装它：

npm install js-cookie --save

或者如果你使用的是Yarn：

yarn add js-cookie

测试：

ps：OSS折磨死我了，踩了无数的坑，全靠各种搜索资料，卡了我2天，呜呜呜，麻了，有什么不知道的真可以问我，呜呜呜，你们踩的坑我应该都踩过，麻了

未完。。。