6.vue考核练习-商品后台开发第一节

参考网址

http://117.78.19.207:9072/

预期效果

核心布局代码

能做成我这种效果就行

<template>
  <div id="app">
    <el-container style="height: 100vh; border: 1px solid #eee;overflow: hidden;margin: 0;">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246);position: fixed;height: 100vh;overflow-x: hidden;">
        <el-menu :default-openeds="defaultOpeneds"  router :collapse-transition="false"  @close="handleMenuClose">
          <el-submenu index="1" style="text-align: left" >
            <template slot="title"><i class="el-icon-menu"></i>系统管理</template>
              <el-menu-item index="/pro"><i class="el-icon-goods"></i>商品管理</el-menu-item>
              <el-menu-item index="/"><i class="el-icon-eleme"></i>品牌管理</el-menu-item>
              <el-menu-item index="/about"><i class="el-icon-help"></i>about管理</el-menu-item>

          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container style="margin-left: 200px;width: calc(100vw - 200px);height: 100vh;overflow: hidden;position: fixed;">

        <el-header style="text-align: right; font-size: 12px;height: 60px;position:fixed;width: calc(100vw - 200px);">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main style="margin-top: 60px;height: calc(100vh - 500px); ">
          <router-view/>
        </el-main>

        <el-footer><p>作者：飞一样的编程，联系微信号：jf3qcom</p></el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return {
      defaultOpeneds: ['1'], // 默认展开的菜单项
    }
  },
  methods:{
    handleMenuClose(index, indexPath) {

      // 阻止默认的折叠行为
      if (index === '1') {
        this.$nextTick(() => {
          this.defaultOpeneds = ['1'];
        });
      }
    }
  }


}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  //margin-top: 60px;
}
body{margin: 0;padding: 0;}
</style>

文件上传

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.List;

@WebServlet("/upload")
public class SimpleFileUploadServlet extends HttpServlet {
    private static final String UPLOAD_DIRECTORY = "uploads"; // 上传文件的存储目录

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 检查是否是一个文件上传请求
        if (!ServletFileUpload.isMultipartContent(request)) {
            response.getWriter().write("Error: Form must has enctype=multipart/form-data.");
            return;
        }

        // 创建一个基于磁盘文件的FileItem工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 创建一个新的文件上传处理器
        ServletFileUpload upload = new ServletFileUpload(factory);

        // 构造临时文件保存目录
        String uploadPath = getServletContext().getRealPath("") + File.separator + UPLOAD_DIRECTORY;
        File uploadDir = new File(uploadPath);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }

        try {
            // 解析请求的内容提取文件数据
            List<FileItem> formItems = upload.parseRequest(request);

            for (FileItem item : formItems) {
                if (!item.isFormField()) {
                    String fileName = new File(item.getName()).getName();
                    String filePath = uploadPath + File.separator + fileName;
                    File storeFile = new File(filePath);

                    // 保存文件到硬盘
                    item.write(storeFile);
                }
            }

            response.getWriter().write("File uploaded successfully!");
        } catch (Exception ex) {
            response.getWriter().write("File upload failed: " + ex.getMessage());
        }
    }
}

提醒：可以考虑给某个商品添加封面的时候，把 id 传过来，不断覆盖替换旧的封面图片

作业

完成商品管理页面。增删改查，批量删除啥的都要。上下架商品。加入回收站。