day55(上传图片注意事项,酷鲨商城项目步骤:登陆，分类，轮播图展示与删除)

day55(上传图片注意事项,酷鲨商城项目步骤:登陆，分类，轮播图展示与删除)

1.上传图片注意事项

1. 在application.properties里面填写最大上传文件大小的配置信息

   spring.servlet.multipart.max-file-size=10MB

    

2. 在application.properties里面填写配置静态资源文件夹的信息

   #配置静态文件夹,默认是static文件夹，classpath:static代表默认的
   spring.web.resources.static-locations=file:D:/files,classpath:static

2.酷鲨商城项目步骤:

1. 创建coolshark项目, 打3个勾

2. 从上一个工程中复制application.propertise 里面所有内容到新工程,然后停掉之前工程 运行新工程测试是否能够正常启动(如果不能启动 删除工程重新创)

3. 把讲前端时做好的页面添加到工程中, 3个文件夹和4个页面, 添加完之后Rebuild工程 , 然后运行工程访问首页检查是否正常显示

4. 修改application.propertise里面数据库的名字为cs

   spring.datasource.url=jdbc:mysql://localhost:3306/cs?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false

5. 建库建表

   create database cs charset=utf8;

   use cs;

   create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50))charset=utf8;

   insert into user values(null,'admin','123456','管理员');

3.登录功能步骤:

1. 修改登录页面 给按钮添加点击事件, 点击时向/login发出请求

2. 创建UserController 添加login方法处理/login请求

3. 创建User实体类

4. 创建UserMapper 添加 登录相关方法

4.首页分类展示功能步骤:

1. 创建表和准备数据

   • create table category(id int primary key auto_increment,name varchar(50))charset=utf8;

   • insert into category values(null,"男装"),(null,"女装"),(null,"医药"),(null,"美食"),(null,"百货"),(null,"数码");

2. 创建Category实体类

3. 创建CategoryMapper,里面提供insert和select两个方法

4. 创建CategoryController 里面添加select方法处理/category/select

5. 在首页index.html页面中的created方法中向/category/select发出请求获取所有分类信息, 把查询到的数据赋值给一个数组变量 , 让页面中显示分类的地方 和数组进行绑定 通过v-for指令显示出所有分类信息

 

5.首页轮播图展示步骤：

1. 创建保存轮播图的表和轮播图数据

   create table banner(id int primary key auto_increment,url varchar(255))charset=utf8;

   insert into banner values(null,'/imgs/b1.jpg'),(null,'/imgs/b2.jpg'),(null,'/imgs/b3.jpg'),(null,'/imgs/b4.jpg');

2. 在首页index.html页面中的created方法里面向/banner/select发出请求把得到的数据赋值给vue里面的bannerArr数组

   //发出请求获取所有轮播图信息axios.get("/banner/select").then(function (response) {    v.bannerArr = response.data;})

3. 创建BannerController 添加select方法处理/banner/select请求

   package cn.tedu.coolshark.controller;
   ​
   import cn.tedu.coolshark.entity.Banner;
   import cn.tedu.coolshark.mapper.BannerMapper;
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.RequestBody;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.RestController;
   ​
   import java.io.File;
   import java.util.List;
   ​
   @RestController
   public class BannerController {
       @Autowired(required = false)
       BannerMapper mapper;
   ​
       @RequestMapping("/banner/select")
       public List<Banner> select(){
           return mapper.select();
       }
       @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);
       }
       @RequestMapping("/banner/insert")
       public void insert(@RequestBody Banner banner){
           mapper.insert(banner);
       }
   }
   ​

4. 创建Banner实体类

   package cn.tedu.coolshark.entity;
   ​
   public class Banner {
       private Integer id;
       private String url;
   ​
       @Override
       public String toString() {
           return "Banner{" +
                   "id=" + id +
                   ", url='" + url + '\'' +
                   '}';
       }
   ​
       public Integer getId() {
           return id;
       }
   ​
       public void setId(Integer id) {
           this.id = id;
       }
   ​
       public String getUrl() {
           return url;
       }
   ​
       public void setUrl(String url) {
           this.url = url;
       }
   }
   ​

5. 创建BannerMapper 里面提供select方法

   package cn.tedu.coolshark.mapper;
   ​
   import cn.tedu.coolshark.entity.Banner;
   import org.apache.ibatis.annotations.Delete;
   import org.apache.ibatis.annotations.Insert;
   import org.apache.ibatis.annotations.Mapper;
   import org.apache.ibatis.annotations.Select;
   import org.springframework.web.bind.annotation.RequestMapping;
   ​
   import java.util.List;
   ​
   @Mapper
   public interface BannerMapper {
       @Select("select * from banner")
       List<Banner> select();
   ​
       @Delete("delete from banner where id=#{id}")
       void deleteById(int id);
   ​
       @Select("select url from banner where id=#{id}")
       String selectUrlById(int id);
   ​
       @Insert("insert into banner values(null,#{url})")
       void insert(Banner banner);
   ​
   }
   ​

    

6.后台管理页面分类管理步骤

1. 在admin.html页面中先引入 axios框架

   <script src="js/axios.min.js"></script>

2. 在页面中添加created方法 在里面向/category/select发请求获取所有分类数据, 把得到的数据赋值给categoryArr数组,页面会自动展示

   created:function () {
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })}

3.给删除添加点击事件调用categoryDelete方法,参考Web阶段day07的员工列表练习

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

4. 在方法中向/category/delete发出请求并且把分类的id传递过去

categoryDelete(index,category){
                axios.get("/category/delete?id="+category.id).then(function () {
                    //splice(下标,长度)方法是JavaScript中数组删除元素的方法
                    v.categoryArr.splice(index,1);
                })
            }

5. 在CategoryController中添加delete方法 处理/category/delete请求,方法中调用mapper里面的deleteById方法

  @RequestMapping("/category/delete")
    public void delete(int id ){
        System.out.println("删除分类的id = " + id);
        mapper.deleteById(id);
    }

6. 实现mapper里面的deleteById方法

    @Delete("delete from category where id=#{id}")
    void deleteById(int id);

7.添加分类步骤:

1. 在点击添加分类时弹出文本输入框 :menuChange(index)

    if (index=="1-2"){
                       //弹出输入框
                       v.$prompt("请输入分类名称","提示",{
                           confirmButtonText:"确定",
                           cancelButtonText:"取消"
                       }).then(function (object) {
                           console.log("分类名称:"+ object.value);

2. 在then方法里面 向/category/insert发出异步请求 把分类的名称拼接到请求地址的后面

   then(function (object) {
                           console.log("分类名称:"+ object.value);
                          let name = object.value;
                          if (name==null||name.trim()==""){
                              v.$message.error("分类名称不能为空");
                              return;
                          }
                          axios.get("/category/insert?name="+name).then(function (response) {
                               location.reload();
                          })

3. CategoryController里面创建insert方法处理/category/insert, 在参数列表中声明Category对象 用来接受传递过来的参数,调用mapper里面的insert方法

     @RequestMapping("/category/insert")
       public void insert(Category category){
           mapper.insert(category);
       }
   ​

4. 实现CategoryMapper里面的insert方法

    @Insert("insert into category values(null,#{name})")
       void insert(Category category);

8.删除轮播图

1. 在admin.html页面中给删除按钮添加点击事件调用bannerDelete方法

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

    

2. 在方法中发出删除请求

    bannerDelete(index,banner){
                   axios.get("/banner/delete?id="+banner.id).then(function () {
                       v.bannerArr.splice(index,1);
                   })
               }

    

3. 在BannerController中添加delete方法处理/banner/delete请求 方法中调用mapper的deleteById方法

   @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);
       }

    

4. 实现mapper中的deleteById方法

       @Delete("delete from banner where id=#{id}")
       void deleteById(int id);

5.