day56(网站图标ico,删除轮播图同时删除文件、商品 ,添加轮播图、商品步骤,管理页面商品列表、首页商品展示,排行榜,配置自定义值,查看分类商品)

day56(网站图标ico,删除轮播图同时删除文件、商品 ,添加轮播图、商品步骤,管理页面商品列表、首页商品展示,排行榜,配置自定义值,查看分类商品)

1.网站图标ico

  • 在工程的static里面他添加favicon.ico图片文件

2.删除轮播图同时删除文件

BannerController

 @RequestMapping("/banner/delete")
   public void delete(int id){
       //先查询到轮播图的url
       String url = mapper.selectUrlById(id);
       // aaa.jpg     F:/files/aaa.jpg
       //得到文件的完整磁盘路径
       String filePath = "F:/files/"+url;
       //创建文件对象并删除
       new File(filePath).delete();

       mapper.deleteById(id);
  }

 

3.添加轮播图

  1. 在admin.html中添加跳转页面的代码

    else if(index=="2-2"){
                      //跳转到添加轮播图页面
                      location.href="/insertBanner.html";}

     

  2. 从微博练习中把insert.html页面复制到新工程中 改名为insertBanner.html, 把微博练习中的UploadController复制到新工程的controller包里面

    UploadController

    package cn.tedu.coolshark.controller;

    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;

    import java.io.File;
    import java.io.IOException;
    import java.util.UUID;

    @RestController
    public class UploadController {
       @RequestMapping("/upload")
       public String upload(MultipartFile picFile) throws IOException {
           System.out.println("picFile = " + picFile);
           //得到文件原始文件名 a.jpg
           String fileName = picFile.getOriginalFilename();
           //得到后缀名 从最后一个.出现的位置截取到最后
           String suffix = fileName.substring(fileName.lastIndexOf("."));
           //得到唯一文件名 UUID.randomUUID()得到一个唯一标识符
           fileName = UUID.randomUUID()+suffix;
           System.out.println("文件名:"+fileName);
           //准备保存图片的文件夹路径
           String dirPath = "F:/files";
           File dirFile = new File(dirPath);
           //如果该文件夹不存在 则创建此文件夹
           if (!dirFile.exists()){
               dirFile.mkdirs();//创建文件夹
          }
           //得到文件的完整路径
           String filePath = dirPath+"/"+fileName;
           //把文件保存到此路径   异常抛出
           picFile.transferTo(new File(filePath));
           System.out.println("文件保存完成! 请去此路径检查文件是否存在 "+filePath);

           return fileName;
      }

       @RequestMapping("/remove")
       public void remove(String name){
           String filePath = "F:/files/"+name;
           new File(filePath).delete();//删除文件
      }
    }

     

  3. 修改insertBanner.html页面 发请求的地址改成了/banner/insert

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <!-- import CSS -->
       <link rel="stylesheet" href="css/eui.css">
    </head>
    <body>

    <div id="app">
       <!--页头组件-->
       <el-page-header style="color: white;line-height: 60px"
               @back="goBack" content="发布轮播图页面"></el-page-header>
       <!--分割线-->
       <el-divider></el-divider>
       <!--name代表上传文件时 文件的参数名
           limit="1" 设置只能选择一张图片
       -->
       <el-card>
           <el-upload
                   action="/upload"
                   name="picFile"
                  :limit="1"
                   list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove">
               <i class="el-icon-plus"></i>
           </el-upload>
           <el-dialog :visible.sync="dialogVisible">
               <img width="100%" :src="dialogImageUrl" alt="">
           </el-dialog>
           <el-button @click="insert()">发布</el-button>
       </el-card>
    </div>
    </body>
    <!-- import Vue before Element -->
    <script src="js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="js/eui.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
       let v = new Vue({
           el: '#app',
           data: function() {
               return {
                   dialogImageUrl: '',
                   dialogVisible: false,
                   banner:{
                       url:""
                  }
              }
          },
           methods: {
               handleRemove(file, fileList) {
                   console.log(file, fileList);
                   //当点击删除图片时方法会执行
                   //file代表要删除的文件
                   //file.response代表文件上传成功时 服务器响应的数据(文件名)
                   console.log("文件名="+file.response);
                   //http://localhost:8080/remove?name=xxx.jpg
                   axios.get("/remove?name="+file.response).then(function (response) {
                       console.log("服务器图片已经删除")
                  })
              },
               handlePictureCardPreview(file) {
                   this.dialogImageUrl = file.url;
                   this.dialogVisible = true;
              },
               insert(){
                   //得到用户输入的微博文本内容和图片名 一起提交给服务器
                   if (v.banner.url==""){
                       alert("图片不能为空!")
                       return;
                  }
                   axios.post("/banner/insert",v.banner).then(function (response) {
                           alert("添加完成!");
                           location.href="/"; //回到首页
                  })
              },
               handleSuccess(response,file,fileList){
                   //response=file.response
                   console.log("文件上传完成, 图片名="+response);
                   v.banner.url = response;
              },
               goBack(){
                   //返回上一页面
                   history.back();
              }
          }
      })
    </script>
    </html>

    <!--
    use cs;
    create table product(id int primary key auto_increment,title varchar(100),url varchar(255),price double(10,2),old_price double(10,2),view_count int,sale_count int,created timestamp, category_id int)charset=utf8;

    -->
  4. 在BannerController里面添加insert方法 处理/banner/insert,方法中调用mapper的insert方法 把banner的数据保存到数据库中

     @RequestMapping("/banner/insert")
       public void insert(@RequestBody Banner banner){
           mapper.insert(banner);
      }
  5. 实现mapper里面的banner方法

      @Insert("insert into banner values(null,#{url})")
       void insert(Banner banner);

 

4.添加商品步骤:

  1. 建表

    use cs;

    create table product(id int primary key auto_increment,title varchar(100),url varchar(255),price double(10,2),old_price double(10,2),view_count int,sale_count int,created timestamp, category_id int)charset=utf8;

  2. 创建添加商品的页面insertProduct.html

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <!-- import CSS -->
       <link rel="stylesheet" href="css/eui.css">
    </head>
    <body>

    <div id="app">
       <!--页头组件-->
       <el-page-header style="color: white;line-height: 60px"
               @back="goBack" content="发布商品页面"></el-page-header>
       <!--分割线-->
       <el-divider></el-divider>
       <!--name代表上传文件时 文件的参数名
           limit="1" 设置只能选择一张图片
       -->
       <el-card>
           <el-form>
               <el-form-item label="商品标题" label-width="80px">
                   <el-input v-model="product.title"></el-input>
               </el-form-item>
               <el-form-item label="价格" label-width="80px">
                   <el-input v-model="product.price"></el-input>
               </el-form-item>
               <el-form-item label="原价" label-width="80px">
                   <el-input v-model="product.oldPrice"></el-input>
               </el-form-item>
               <el-form-item label="销量" label-width="80px">
                   <el-input v-model="product.saleCount"></el-input>
               </el-form-item>
               <el-form-item label="分类" label-width="80px">
                   <template>
                       <el-select v-model="product.categoryId" placeholder="请选择">
                           <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                           <el-option v-for="c in categoryArr"
                                      :label="c.name"
                                      :value="c.id">
                           </el-option>
                       </el-select>
                   </template>
               </el-form-item>
               <el-form-item label="商品图片" label-width="80px">
                   <el-upload
                           action="/upload"
                           name="picFile"
                           :limit="1"
                           list-type="picture-card"
                           :on-preview="handlePictureCardPreview"
                           :on-success="handleSuccess"
                           :on-remove="handleRemove">
                       <i class="el-icon-plus"></i>
                   </el-upload>
                   <el-dialog :visible.sync="dialogVisible">
                       <img width="100%" :src="dialogImageUrl" alt="">
                   </el-dialog>
               </el-form-item>
           </el-form>
           <el-button @click="insert()">发布</el-button>
       </el-card>
    </div>
    </body>
    <!-- import Vue before Element -->
    <script src="js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="js/eui.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
       let v = new Vue({
           el: '#app',
           data: function() {
               return {
                   dialogImageUrl: '',
                   dialogVisible: false,
                   product:{
                       title:"",
                       url:"",
                       price:0,
                       oldPrice:0,
                       saleCount:0,
                       categoryId:""
                  },
                   categoryArr:[]
              }
          },
           methods: {
               handleRemove(file, fileList) {
                   console.log(file, fileList);
                   //当点击删除图片时方法会执行
                   //file代表要删除的文件
                   //file.response代表文件上传成功时 服务器响应的数据(文件名)
                   console.log("文件名="+file.response);
                   //http://localhost:8080/remove?name=xxx.jpg
                   axios.get("/remove?name="+file.response).then(function (response) {
                       console.log("服务器图片已经删除")
                  })
              },
               handlePictureCardPreview(file) {
                   this.dialogImageUrl = file.url;
                   this.dialogVisible = true;
              },
               insert(){
                   //得到用户输入的微博文本内容和图片名 一起提交给服务器
                   if (v.product.url==""){
                       alert("图片不能为空!")
                       return;
                  }
                   axios.post("/product/insert",v.product).then(function (response) {
                           alert("添加完成!");
                           //history.back(); 通过返回上一页面的方法 是不会发出请求的
                       //需要再次刷新才能显示最新的内容
                           location.href="/admin.html"; //显示管理页面
                  })
              },
               handleSuccess(response,file,fileList){
                   //response=file.response
                   console.log("文件上传完成, 图片名="+response);
                   v.product.url = response;
              },
               goBack(){
                   //返回上一页面
                   history.back();
              }
          },
           created:function () {
               //发请求得到所有的分类信息
               axios.get("/category/select").then(function (response) {
                   v.categoryArr = response.data;
              })
          }
      })
    </script>
    </html>

    <!--
    use cs;
    create table product(id int primary key auto_increment,title varchar(100),url varchar(255),price double(10,2),old_price double(10,2),view_count int,sale_count int,created timestamp, category_id int)charset=utf8;

    -->

     

  3. 修改admin.html页面中点击添加商品侧边栏时 操作的代码

    <el-submenu index="3">
                           <template slot="title">
                               <i class="el-icon-shopping-cart-2"></i>
                              商品管理
                           </template>
                           <el-menu-item index="3-1">商品列表</el-menu-item>
                           <el-menu-item index="3-2">添加商品</el-menu-item>
                       </el-submenu>
    else if(index=="3-2"){
                       //跳转到添加商品页面
                       location.href="/insertProduct.html";}
  4. 在insertProduct.html页面中添加created方法,在方法中向/category/select发请求 得到所有的分类信息 赋值给Vue里面的categoryArr数组

    created:function () {
               //发请求得到所有的分类信息
               axios.get("/category/select").then(function (response) {
                   v.categoryArr = response.data;
              })
          }

     

  5. 遍历categoryArr数组 在下拉选中添加显示的分类

     <el-select v-model="product.categoryId" placeholder="请选择">
                           <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                           <el-option v-for="c in categoryArr"
                                      :label="c.name"
                                      :value="c.id">
                           </el-option>
                       </el-select>
  6. 点击发布按钮时请求的地址改为/product/insert

       <el-button @click="insert()">发布</el-button>
     insert(){
                   //得到用户输入的微博文本内容和图片名 一起提交给服务器
                   if (v.product.url==""){
                       alert("图片不能为空!")
                       return;
                  }
                   axios.post("/product/insert",v.product).then(function (response) {
                           alert("添加完成!");
                           //history.back(); 通过返回上一页面的方法 是不会发出请求的
                       //需要再次刷新才能显示最新的内容
                           location.href="/admin.html"; //显示管理页面
                  })
              }

     

  7. 在ProductController中 处理/product/insert请求 方法中调用mapper的insert方法

    @RequestMapping("/product/insert")
       public void insert(@RequestBody Product product){
           System.out.println("product = " + product);
    //设置商品的发布时间为当前系统时间
         product.setCreated(new Date());
    //       //调用mapper的insert方法
          mapper.insert(product);

      }
  8. 创建ProductMapper实现insert方法

  //0是代表浏览量
   @Insert("insert into product values(null,#{title},#{url}," +
           "#{price},#{oldPrice},0,#{saleCount},#{created},#{categoryId})")
   void insert(Product product);

5.管理页面商品列表展示功能

  1. 在admin.html页面中的created方法里面 向/product/select发出请求 把查询到的数据给到productArr数组

     created:function () {
           
               axios.get("/product/select").then(function (response) {
                   v.productArr = response.data;
              })
          }
  2. 在ProductController里面添加select方法 处理/product/select请求, 在方法中调用mapper的select方法

    @RequestMapping("/product/select")
       public List<Product> select(){
           return mapper.select();
      }
  3. 实现mapper里面的select方法

      @Select("select id,title,price,sale_count,url from product")
       @Result(property = "saleCount",column = "sale_count")
       List<Product> select();

6.删除商品步骤: 整体流程参考删除轮播图

  1. 在admin.html页面中修改点击删除时调用的方法 把handleDelete改成productDelete

     <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                                              title="这是一段内容确定删除吗?">
                                   <el-button size="mini"
                                              type="danger" slot="reference">删除
                                   </el-button>
        </el-popconfirm>

     

  2. 在methods里面添加productDelete方法,在方法中向/product/delete发出请求 同时把商品的id传递过去

    productDelete(index,product){
                   axios.get("/product/delete?id="+product.id).then(function () {
                       //删除数组中的数据
                       v.productArr.splice(index,1);
                  })
              }

     

  3. 在ProductController中添加delete方法处理/product/delete请求,方法中先通过id查询到商品图片的url,然后得到商品图片的完整路径 删除图片文件, 然后在调用mapper的deleteById方法

      @RequestMapping("/product/delete")
       public void delete(int id){
           //通过id查询到商品的图片路径
           String url = mapper.selectUrlById(id);
          String filePath = "D:/files/"+url;
           new File(filePath).delete();
           //删除数据库里面的数据
           mapper.deleteById(id);
      }

     

  4. 实现mapper里面deleteById方法

   @Select("select url from product where id=#{id}")
   String selectUrlById(int id);
   @Delete("delete from product where id=#{id}")
   void deleteById(int id);

7.首页展示商品步骤:

  1. 在index.html页面的created方法中向/product/select/index发出请求,把得到的数据赋值给productArr数组

      //发出请求获取所有的商品信息
               axios.get("/product/select/index").then(function (response) {
                   v.productArr = response.data;
              })

     

  2. 在ProductController中添加selectIndex方法处理/product/select/index请求, 在方法中调用mapper的selectIndex方法

    //首页展示商品
       @RequestMapping("/product/select/index")
       public List<Product> selectIndex(){
           return mapper.selectIndex();
      }

     

  3. 在mapper中实现selectIndex方法(首页展示什么则查询什么)

     @Select("select id,title,url,price,old_price,sale_count from product")
       @Result(property = "oldPrice",column = "old_price")
       @Result(property = "saleCount",column = "sale_count")
       List<Product> selectIndex();

8.排行榜步骤:

  1. 在首页created方法里面 向/product/select/top发出请求 把得到的数据赋值给topArr数组

      //发出请求获取排行榜商品信息
               axios.get("/product/select/top").then(function (response) {
                   v.topArr = response.data;
              })

     

  2. 在ProductController里面添加selectTop处理/product/select/top请求,在处理请求的方法中调用mapper的selectTop方法

     //排行榜
       @RequestMapping("/product/select/top")
       public List<Product> selectTop() {
           List<Product> list = mapper.selectTop();
           //遍历list集合
           for (Product p : list) {
               if (p.getTitle().length() > 3) {
                   String title = p.getTitle().substring(0, 3) + "...";
                   p.setTitle(title);
              }
          }
           return list;
      }

     

  3. 在Mapper里面实现selectTop方法, 查询数据时按照销量排序并且只查询6条数据

     @Select("select id,title,sale_count from " +
               "product order by sale_count desc limit 0,6")
       @Result(property = "saleCount", column = "sale_count")
       List<Product> selectTop();

     

  4. 在index.html页面中查询到数据的时候如果长度超过3个字符则变成前三个字符+... 非常漂亮的上衣 非常漂... 处理代码写在ProductController中的selectTop方法中

     //排行榜
       @RequestMapping("/product/select/top")
       public List<Product> selectTop() {
           List<Product> list = mapper.selectTop();
           //遍历list集合
           for (Product p : list) {
               if (p.getTitle().length() > 3) {
                   String title = p.getTitle().substring(0, 3) + "...";
                   p.setTitle(title);
              }
          }
           return list;
      }

9.在application.properties里面配置自定义的值

spring.web.resources.static-locations=file:${dirPath},classpath:static

dirPath=D:/files

10.点击分类查看分类下的商品

  1. 复制index.html页面 改名为result.html页面, 把新页面中的轮播图和排行榜删除

  2. 在index.html页面点击某个分类的时候跳转到result.html页面并且把分类的id传递过来

    handleSelect(index){
                   console.log(index);
                   //此时的index代表的是分类的id 跳转页面并且把点击的分类id传递
                   location.href="/result.html?cid="+index;
              }

     

  3. 在result.html页面的created方法中,之前请求所有商品,现在改成请求某个分类下的商品

     handleSelect(index){
                   console.log(index);
                   //查询点击分类下的商品信息
    axios.get("/product/select/category?cid="+index).then(function (response) {
                       v.productArr = response.data;
                  })
              }

     

  4. 在ProductController中创建selectByCid方法 处理/product/select/category请求, 方法中调用mapper的selectByCid方法

     //点击分类查看分类下的商品
       @RequestMapping("/product/select/category")
       public List<Product> selectByCid(int cid) {
           return mapper.selectByCid(cid);
      }

     

  5. 实现mapper里面的selectByCid方法

    //点击分类查看分类下的商品
       @Select("select id,title,url,price,old_price,sale_count from product where category_id=#{cid}")
       @Result(property = "oldPrice", column = "old_price")
       @Result(property = "saleCount", column = "sale_count")
       List<Product> selectByCid(int cid);

     

  6.  
posted @ 2022-05-19 13:51  约拿小叶  阅读(104)  评论(0)    收藏  举报