• JSD-2204-酷莎商城(后端)-Day17,18

    1.酷鲨商城

     1.1酷鲨商城项目步骤

    • 准备工作:
    • 创建新工程coolshark 打3个√ 将微博工程中application.properties里面的内容复制到新工程,并且将数据库名称weibo改成cs
    • 从老师的工程中把static文件夹下的4个html页面和一个imgs文件夹复制到自己的工程, 然后ReBuild static文件夹
    • 关闭其它工程, 启动新工程, 访问首页测试,如果显示首页内容即测试成功!
    • 建库建表
    1. create database cs charset=utf8;
    2. use cs;
    3. create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50));
    4. insert into user values(null,'admin','123456','管理员');

    1.1.1登录功能步骤:

    1. 在login.html页面中,在页面中先引入axios框架, 通过双向绑定得到用户输入的用户名和密码, 给按钮添加点击事件, 点击时向/login发出请求同时把用户的信息提交到服务器
    2. 创建UserController,User实体类和UserMapper
    3. 在Controller里面添加login方法 处理/login请求, 接收传递过来的用户信息,在方法中调用mapper的selectByUsername方法查询返回User对象.........
    4. 实现mapper的selectByUsername方法

    1.1.2首页展示分类步骤

    1. 建分类表和插入数据 
        1. create table category(id int primary key auto_increment,name varchar(30));
        2. insert into category values(null,'精彩活动'),(null,'当季女装'),(null,'品牌男装'),(null,'环球美食'),(null,'医药健康');
    2. 创建Category实体类
    3. 创建CategoryMapper 里面提供select方法
    4. 创建CategoryController
    5. 在首页index.html中添加axios框架的引入, 在Vue里面添加created方法,在里面向/category/select发出请求, 获取所有分类的信息, 把得到的数据给到categoryArr数组
    6. 在CategoryController 里面创建select方法处理/select请求调用mapper里面的select方法把得到的数据响应给客户端

    1.1.3首页展示轮播图步骤:

    1. 建表并插入数据 
        1. create table banner(id int primary key auto_increment,url varchar(200));
        2.  
        3. insert into banner values(null,'/imgs/b2.jpg'),(null,'/imgs/b3.jpg'),(null,'/imgs/b4.jpg');
    2. 创建Banner实体类
    3. 创建BannerMapper 提供select方法
    4. 创建BannerController添加select方法处理 /banner/select请求,方法中调用mapper的select方法把得到的数据响应给客户端
    5. 在首页的created方法中 向/banner/select发出异步请求获取所有轮播图数据, 把得到的数据给到bannerArr数组, 数组内容由原来装字符串变成了装banner对象 所以页面中遍历bannerArr数组部分的代码需要改动

    1.1.4后台管理页面分类和轮播图展示

    1. 在admin.html页面添加created方法, 在里面发请求获取所有分类,把得到的数据赋值给categoryArr数组, 发请求获取所有轮播图把得到的数据赋值给bannerArr数组

    1.1.5添加分类步骤:

    1. 在admin.html页面中 点击添加分类时 弹出文本输入框获取输入的分类名然后 向/category/insert发出添加分类的请求
    2. 在CategoryController中添加insert方法处理请求,然后调用mapper的insert方法
    3. 实现mapper里面的insert方法

    1.1.6删除分类步骤:

    1. 在admin.html页面中给删除按钮添加点击事件
    2. 在事件方法中 向/category/delete发出请求 响应之后把数组中的数据删除 页面自动发生改变
    3. 在Controller里面添加delete方法处理/category/delete请求, 调用mapper里面的删除方法
    4. 实现mapper中的方法
    5. 把删除按钮 改成 气泡确认框

    1.1.7删除轮播图步骤:

    1. 在admin.html页面中给删除按钮添加点击事件
    2. 在事件方法中 向/banner/delete发出请求 响应之后把数组中的数据删除 页面自动发生改变
    3. 在Controller里面添加delete方法处理/banner/delete请求, 调用mapper里面的删除方法
    4. 实现mapper中的方法
    5. 把删除按钮 改成 气泡确认框

    1.1.8添加轮播图步骤:

    1. 创建insertBanner.html页面 使用上传图片的组件,
    2. 在页面中向/banner/insert发出请求
    3. 在Controller里面添加insert方法 处理/banner/insert请求 ,方法中调用mapper的insert方法
    4. 实现mapper里面insert方法 

    1.1.9商品分类相关

    • 在添加商品页面中的form表单里面增加一行,获取用户选择的分类, 在data里面的p对象中添加categoryId的属性
    • 在页面的created方法中发请求获取所有分类信息,赋值给arr数组
    • 给Product实体类添加categoryId属性
    • 给product表添加category_id字段
    • 在Mapper里面的insert方法中添加和分类id相关的内容

    1.1.10删除商品

    • 在admin.html页面中给删除按钮添加点击事件
    • 在事件方法中 向/product/delete发出请求 响应之后把数组中的数据删除 页面自动发生改变
    • 在productController里面添加delete方法处理/product/delete请求, 方法中删除图片,调用mapper里面的删除方法
    • 实现mapper中的方法;
    • 把删除按钮 改成 气泡确认框

    1.1.11排行榜展示

    • 在首页的created方法中发出获取排行榜信息的请求
    • ProductController处理请求 掉mapper中的selectTop方法获取排行榜数据
    • 实现mapper中的方法

    1.1.12查看详情页面步骤:

    • 给首页的商品标题和商品图片添加超链接 点击时跳转到详情页面
    • 在详情页面添加 created方法, 在方法中通过地址栏里面的id向/product/selectById 地址发出请求 把得到的商品信息赋值给data里面的product
    • 在ProductController中创建selectById方法处理/product/selectById请求, 调用mapper的selectById方法,把查询到的Product对象直接响应给客户端
    • 实现mapper里面的selectById方法

    1.1.13点击分类查看分类相关商品

    • 创建result.html页面, 复制首页粘贴改名, 把轮播图和排行榜删除
    • 在首页中给el-menu标签添加@select事件 调用handleSelect方法, 方法中跳转到result.html页面 同时 把得到的分类id传递到结果页面
    • 在result.html页面中的created方法里面向/product/selectByCid发出请求
    • ProductController里面添加selectByCid方法处理/product/selectByCid, 调用mapper里面的selectByCid方法把查询到的集合返回给客户端
    • 实现mapper里面的selectByCid方法

    1.1.14结果页面中点击分类时的步骤:

    1. 给result.html页面中的el-menu添加@Select事件 调用handleSelect方法,在方法中直接向/product/selectByCid发请求 把得到的数据给到productArr数组

    1.1.15搜索功能步骤:

    • 在首页中给文本框添加双向绑定,给搜索按钮添加点击事件, 点击时跳转到result.html结果页面,同时把搜索的文本内容做为参数传递过去
    • 在result.html页面中的created方法里面 判断location.search里面是否包含wd,如果包含则向/product/selectByWd发出请求
    • 在ProductController里面添加selectByWd方法处理/product/selectByWd请求,调用mapper里面selectByWd方法,把查询到的List集合返回给客户端
    • 实现mapper里面的selectByWd方法

    1.2项目目录展示

    1.3代码展示 

    1.3.1BannerController.java(轮播图控制层)

    1. package cn.tedu.coolshark.controller;
    2.  
    3. import cn.tedu.coolshark.entitu.Banner;
    4. import cn.tedu.coolshark.mapping.BannerMapper;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7. import org.springframework.web.bind.annotation.RestController;
    8.  
    9. import java.io.File;
    10. import java.util.List;
    11.  
    12. @RestController
    13. public class BannerController {
    14.     @Autowired
    15.     BannerMapper mapper;
    16.  
    17.     @RequestMapping("/banner/select")
    18.     public List selectBanner(){
    19.         return mapper.selectBanner();
    20.     }
    21.  
    22.     @RequestMapping("/banner/delete")
    23.     public void deleteBanner(int id){
    24.         String url = mapper.selectBannerById(id);
    25.         new File("E:/files"+url).delete();
    26.         mapper.deleteBanner(id);
    27.     }
    28.  
    29.     @RequestMapping("/banner/insert")
    30.     public void insertBanner(String url){
    31.         mapper.insertBanner(url);
    32.     }
    33.  
    34. }

    1.3.2CategoryController.java(商品分类控制层)

    1. package cn.tedu.coolshark.controller;
    2.  
    3. import cn.tedu.coolshark.entitu.Category;
    4. import cn.tedu.coolshark.mapping.CategoryMapping;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7. import org.springframework.web.bind.annotation.RestController;
    8.  
    9. import java.util.List;
    10.  
    11. @RestController
    12. public class CategoryController {
    13.  
    14.     @Autowired
    15.     CategoryMapping mapping;
    16.  
    17.     @RequestMapping("/category/select")
    18.     public List selectCategory(){
    19.         return mapping.selectCategory();
    20.     }
    21.  
    22.     @RequestMapping("/category/insert")
    23.     public void insertCategory(String name){
    24.         mapping.insertCategory(name);
    25.     }
    26.  
    27.     @RequestMapping("/category/delete")
    28.     public void deleteCategory(int id){
    29.         mapping.deleteCategoryById(id);
    30.     }
    31. }

    1.3.3ProductController.java(商品控制层)

    1. package cn.tedu.coolshark.controller;
    2.  
    3. import cn.tedu.coolshark.entitu.Product;
    4. import cn.tedu.coolshark.mapping.ProductMapper;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.RequestBody;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8. import org.springframework.web.bind.annotation.RestController;
    9.  
    10. import java.io.File;
    11. import java.util.List;
    12.  
    13. @RestController
    14. public class ProductController {
    15.  
    16.     @Autowired
    17.     ProductMapper mapper;
    18.  
    19.     @RequestMapping("/product/insert")
    20.     public void insertProduct(@RequestBody Product product){
    21.         System.out.println("product = " + product);
    22.         mapper.insertProduct(product);
    23.     }
    24.  
    25.     @RequestMapping("/product/select/admin")
    26.     public List selectProductAdmin(){
    27.         return mapper.selectProduct();
    28.     }
    29.  
    30.     @RequestMapping("/product/delete")
    31.     public void deleteProduct(int id){
    32.         String url = mapper.selectProductUrlById(id);
    33.         new File("E:/files"+url).delete();
    34.         mapper.deleteProductById(id);
    35.     }
    36.  
    37.     @RequestMapping("/product/select/index")
    38.     public List selectProductIndex(){
    39.         return mapper.selectProductIndex();
    40.     }
    41.  
    42.     @RequestMapping("/product/select/top")
    43.     public List selectProductTop(){
    44.         return mapper.selectProductTop();
    45.     }
    46.  
    47.     @RequestMapping("/product/selectById")
    48.     public Product selectProductById(int id){
    49.         System.out.println("id = " + id);
    50.         //商品浏览量+1
    51.         mapper.updateProductViewCountById(id);
    52.         return mapper.selectProductById(id);
    53.     }
    54.  
    55.     @RequestMapping("/product/selectByCid")
    56.     public List selectProductByCid(int id){
    57.         return mapper.selectProductByCid(id);
    58.     }
    59.  
    60.     @RequestMapping("/product/selectByName")
    61.     public List selectProductByName(String title){
    62.         return mapper.selectProductByName(title);
    63.     }
    64.  
    65. }

    1.3.4UploadController.java(文件上传)

    1. package cn.tedu.coolshark.controller;
    2.  
    3. import org.springframework.web.bind.annotation.RequestMapping;
    4. import org.springframework.web.bind.annotation.RestController;
    5. import org.springframework.web.multipart.MultipartFile;
    6.  
    7. import java.io.File;
    8. import java.io.IOException;
    9. import java.util.UUID;
    10.  
    11. @RestController
    12. public class UploadController {
    13.  
    14.     @RequestMapping("/upload")
    15.     public String upload(MultipartFile picFile) throws IOException {
    16.         //得到文件的原始文件名字
    17.         String fileName = picFile.getOriginalFilename();
    18.         //得到后缀
    19.         String suffix = fileName.substring(fileName.lastIndexOf("."));
    20.         //得到唯一未见名
    21.         fileName = UUID.randomUUID()+suffix;
    22.         //文件夹路径
    23.         String dirPath = "E:/files";
    24.         File dirFile = new File(dirPath);
    25.         if (!dirFile.exists()){
    26.             dirFile.mkdirs();
    27.         }
    28.         //完整的文件路径
    29.         String filePath = dirPath+"/"+fileName;
    30.         //吧文件的路径
    31.         picFile.transferTo(new File(filePath));
    32.         //吧文件路径返回给客户端
    33.         return "/"+fileName;
    34.     }
    35.  
    36.     @RequestMapping("/remove")
    37.     public void remove(String url){
    38.         //得到文件的完整路径
    39.         String filePath = "E:/files"+url;
    40.         //删除图片文件
    41.         new File(filePath).delete();
    42.     }
    43.  
    44. }

    1.3.5UserController.java(用户控制层)

    1. package cn.tedu.coolshark.controller;
    2.  
    3. import cn.tedu.coolshark.entitu.User;
    4. import cn.tedu.coolshark.mapping.UserMapping;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.RequestBody;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8. import org.springframework.web.bind.annotation.RestController;
    9.  
    10. import javax.servlet.http.HttpSession;
    11.  
    12. @RestController
    13. public class UserController {
    14.  
    15.     @Autowired
    16.     UserMapping mapping;
    17.  
    18.     @RequestMapping("/login")
    19.     public int login(@RequestBody User user, HttpSession session){
    20.         User u = mapping.selectUserByName(user.getUsername());
    21.         if (u!=null){
    22.             if (u.getPassword().equals(user.getPassword())){
    23.                 session.setAttribute("user",u);
    24.                 return 1;
    25.             }
    26.             return 2;
    27.         }
    28.         return 3;
    29.     }
    30.  
    31. }

    1.3.6Banner.java(轮播图对象)

    1. package cn.tedu.coolshark.entitu;
    2.  
    3. public class Banner {
    4.     private Integer id;
    5.     private String url;
    6.  
    7.     @Override
    8.     public String toString() {
    9.         return "Banner{" +
    10.                 "id=" + id +
    11.                 ", url='" + url + '\'' +
    12.                 '}';
    13.     }
    14.  
    15.     public Integer getId() {
    16.         return id;
    17.     }
    18.  
    19.     public void setId(Integer id) {
    20.         this.id = id;
    21.     }
    22.  
    23.     public String getUrl() {
    24.         return url;
    25.     }
    26.  
    27.     public void setUrl(String url) {
    28.         this.url = url;
    29.     }
    30. }

    1.3.7Category.java(商品分类对象)

    1. package cn.tedu.coolshark.entitu;
    2.  
    3. public class Category {
    4.     private Integer id;
    5.     private String name;
    6.  
    7.     @Override
    8.     public String toString() {
    9.         return "Category{" +
    10.                 "id=" + id +
    11.                 ", name='" + name + '\'' +
    12.                 '}';
    13.     }
    14.  
    15.     public Integer getId() {
    16.         return id;
    17.     }
    18.  
    19.     public void setId(Integer id) {
    20.         this.id = id;
    21.     }
    22.  
    23.     public String getName() {
    24.         return name;
    25.     }
    26.  
    27.     public void setName(String name) {
    28.         this.name = name;
    29.     }
    30. }

    1.3.8Product.java(商品对象)

    1. package cn.tedu.coolshark.entitu;
    2.  
    3. public class Product {
    4.     private Integer id;
    5.     private String title;
    6.     private Double price;
    7.     private Double oldPrice;
    8.     private Integer num;
    9.     private Integer saleCount;
    10.     private String url;
    11.     private Integer viewCount;
    12.     private Integer categoryId;
    13.  
    14.  
    15.     @Override
    16.     public String toString() {
    17.         return "Product{" +
    18.                 "id=" + id +
    19.                 ", title='" + title + '\'' +
    20.                 ", price=" + price +
    21.                 ", oldPrice=" + oldPrice +
    22.                 ", num=" + num +
    23.                 ", saleCount=" + saleCount +
    24.                 ", url='" + url + '\'' +
    25.                 ", viewCount=" + viewCount +
    26.                 ", categoryId=" + categoryId +
    27.                 '}';
    28.     }
    29.  
    30.     public Integer getId() {
    31.         return id;
    32.     }
    33.  
    34.     public void setId(Integer id) {
    35.         this.id = id;
    36.     }
    37.  
    38.     public String getTitle() {
    39.         return title;
    40.     }
    41.  
    42.     public void setTitle(String title) {
    43.         this.title = title;
    44.     }
    45.  
    46.     public Double getPrice() {
    47.         return price;
    48.     }
    49.  
    50.     public void setPrice(Double price) {
    51.         this.price = price;
    52.     }
    53.  
    54.     public Double getOldPrice() {
    55.         return oldPrice;
    56.     }
    57.  
    58.     public void setOldPrice(Double oldPrice) {
    59.         this.oldPrice = oldPrice;
    60.     }
    61.  
    62.     public Integer getNum() {
    63.         return num;
    64.     }
    65.  
    66.     public void setNum(Integer num) {
    67.         this.num = num;
    68.     }
    69.  
    70.     public Integer getSaleCount() {
    71.         return saleCount;
    72.     }
    73.  
    74.     public void setSaleCount(Integer saleCount) {
    75.         this.saleCount = saleCount;
    76.     }
    77.  
    78.     public String getUrl() {
    79.         return url;
    80.     }
    81.  
    82.     public void setUrl(String url) {
    83.         this.url = url;
    84.     }
    85.  
    86.     public Integer getViewCount() {
    87.         return viewCount;
    88.     }
    89.  
    90.     public void setViewCount(Integer viewCount) {
    91.         this.viewCount = viewCount;
    92.     }
    93.  
    94.     public Integer getCategoryId() {
    95.         return categoryId;
    96.     }
    97.  
    98.     public void setCategoryId(Integer categoryId) {
    99.         this.categoryId = categoryId;
    100.     }
    101. }

    1.3.9User.java(用户对象)

    1. package cn.tedu.coolshark.entitu;
    2.  
    3. public class User {
    4.     private Integer id;
    5.     private String username;
    6.     private String password;
    7.     private String nick;
    8.  
    9.     @Override
    10.     public String toString() {
    11.         return "User{" +
    12.                 "id=" + id +
    13.                 ", username='" + username + '\'' +
    14.                 ", password='" + password + '\'' +
    15.                 ", nick='" + nick + '\'' +
    16.                 '}';
    17.     }
    18.  
    19.     public Integer getId() {
    20.         return id;
    21.     }
    22.  
    23.     public void setId(Integer id) {
    24.         this.id = id;
    25.     }
    26.  
    27.     public String getUsername() {
    28.         return username;
    29.     }
    30.  
    31.     public void setUsername(String username) {
    32.         this.username = username;
    33.     }
    34.  
    35.     public String getPassword() {
    36.         return password;
    37.     }
    38.  
    39.     public void setPassword(String password) {
    40.         this.password = password;
    41.     }
    42.  
    43.     public String getNick() {
    44.         return nick;
    45.     }
    46.  
    47.     public void setNick(String nick) {
    48.         this.nick = nick;
    49.     }
    50. }

    1.3.10BannerMapper.java(跟轮播图有关的数据库操作)

    1. package cn.tedu.coolshark.mapping;
    2.  
    3. import cn.tedu.coolshark.entitu.Banner;
    4. import org.apache.ibatis.annotations.Delete;
    5. import org.apache.ibatis.annotations.Insert;
    6. import org.apache.ibatis.annotations.Mapper;
    7. import org.apache.ibatis.annotations.Select;
    8.  
    9. import java.util.List;
    10.  
    11. @Mapper
    12. public interface BannerMapper {
    13.  
    14.     @Select("select * from banner")
    15.     List selectBanner();
    16.  
    17.     @Delete("delete from banner where id = #{id}")
    18.     void deleteBanner(int id);
    19.  
    20.     @Insert("insert into banner values(null,#{url})")
    21.     void insertBanner(String url);
    22.  
    23.     @Select("select url from banner where id = #{id}")
    24.     String selectBannerById(int id);
    25. }

    1.3.11CategoryMapping.java(跟导航菜单栏有关的数据库操作)

    1. package cn.tedu.coolshark.mapping;
    2.  
    3. import cn.tedu.coolshark.entitu.Category;
    4. import org.apache.ibatis.annotations.Delete;
    5. import org.apache.ibatis.annotations.Insert;
    6. import org.apache.ibatis.annotations.Mapper;
    7. import org.apache.ibatis.annotations.Select;
    8.  
    9. import java.util.List;
    10.  
    11. @Mapper
    12. public interface CategoryMapping {
    13.     @Select("select * from category")
    14.     List selectCategory();
    15.  
    16.     @Insert("insert into category values(null,#{name})")
    17.     void insertCategory(String name);
    18.  
    19.     @Delete("delete from category where id = #{id}")
    20.     void deleteCategoryById(int id);
    21. }

    1.3.12ProductMapper.java(跟商品有关的数据库操作)

    1. package cn.tedu.coolshark.mapping;
    2.  
    3. import cn.tedu.coolshark.entitu.Product;
    4. import org.apache.ibatis.annotations.*;
    5.  
    6. import java.util.List;
    7.  
    8. @Mapper
    9. public interface ProductMapper {
    10.  
    11.     @Insert("insert into product values(null,#{title},#{url},#{price},#{oldPrice},0,#{num},#{saleCount},#{categoryId})")
    12.     void insertProduct(Object product);
    13.  
    14.     @Select("select id,title,price,old_price,sale_count,url from product")
    15.     List selectProduct();
    16.  
    17.     @Select("select url from product where id = #{id}")
    18.     String selectProductUrlById(int id);
    19.  
    20.     @Delete("delete from product where id = #{id}")
    21.     void deleteProductById(int id);
    22.  
    23.     @Select("select id,title,url,price,old_price,sale_count from product")
    24.     List selectProductIndex();
    25.  
    26.     @Select("select id,title,sale_count from product order by sale_count desc limit 0,6")
    27.     List selectProductTop();
    28.  
    29.     @Select("select id,title,url,price,old_price,sale_count,view_count from product where id = #{id}")
    30.     Product selectProductById(int id);
    31.  
    32.     @Update("update product set view_count = view_count+1 where id = #{id}")
    33.     void updateProductViewCountById(int id);
    34.  
    35.     @Select("select id,title,url,price,old_price,sale_count from product where category_id = #{id}")
    36.     List selectProductByCid(int id);
    37.  
    38.     //concat()时sql语句中用于拼接字符串的函数
    39.     @Select("select id,title,url,price,old_price,sale_count from product where title like concat('%',#{title},'%')")
    40.     List selectProductByName(String title);
    41. }

    1.3.13UserMapping.java(跟用户有关的数据库操作)

    1. package cn.tedu.coolshark.mapping;
    2.  
    3. import cn.tedu.coolshark.entitu.User;
    4. import org.apache.ibatis.annotations.Mapper;
    5. import org.apache.ibatis.annotations.Select;
    6.  
    7. @Mapper
    8. public interface UserMapping {
    9.  
    10.     @Select("select id,password,nick from user where username = #{username}")
    11.     User selectUserByName(String username);
    12. }
    13.

    1.3.14admin.html(商品后天管理页面)

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. head>
    8. <body>
    9. <div id="app">
    10.   <el-container>
    11.     <el-header style="background-color: #0095d7">
    12.       <h1 style="color: white;font-size: 22px">CoolShark商城后台管理系统
    13.         <span style="float: right">欢迎xxx回来! <a href="">退出登录a>span>
    14.       h1>
    15.     el-header>
    16.     <el-container>
    17.       <el-aside width="200px">
    18.         
    19.         <el-menu @select="handleSelect" :default-openeds="['1']">
    20.           <el-submenu index="1">
    21.             
    22.             <template slot="title">
    23.               <i class="el-icon-s-flag"> 分类管理i>
    24.             template>
    25.             
    26.             <el-menu-item index="1-1">分类列表el-menu-item>
    27.             <el-menu-item index="1-2">添加分类el-menu-item>
    28.           el-submenu>
    29.           <el-submenu index="2">
    30.             
    31.             <template slot="title">
    32.               <i class="el-icon-picture"> 轮播图管理i>
    33.             template>
    34.             
    35.             <el-menu-item index="2-1">轮播图列表el-menu-item>
    36.             <el-menu-item index="2-2">添加轮播图el-menu-item>
    37.           el-submenu>
    38.           <el-submenu index="3">
    39.             
    40.             <template slot="title">
    41.               <i class="el-icon-shopping-cart-2"> 商品管理i>
    42.             template>
    43.             
    44.             <el-menu-item index="3-1">商品列表el-menu-item>
    45.             <el-menu-item index="3-2">添加商品el-menu-item>
    46.           el-submenu>
    47.         el-menu>
    48.  
    49.       el-aside>
    50.       <el-main>
    51.         
    52.         <el-table v-if="selectedIndex=='1-1'" :data="categoryArr" style="width: 100%">
    53.           
    54.           <el-table-column type="index" label="编号" width="280">
    55.           el-table-column>
    56.           <el-table-column prop="name" label="名字" width="280">
    57.           el-table-column>
    58.           <el-table-column label="操作">
    59.             <template slot-scope="scope">
    60.               
    61.               <el-popconfirm
    62.                       title="确认删除吗？"
    63.                       @confirm="categoryDelete(scope.$index, scope.row)"
    64.               >
    65.               <el-button slot="reference" size="mini" type="danger">删除el-button>
    66.               el-popconfirm>
    67.             template>
    68.           el-table-column>
    69.         el-table>
    70.         
    71.         
    72.         <el-table v-if="selectedIndex=='2-1'" :data="bannerArr" style="width: 100%">
    73.           
    74.           <el-table-column type="index" label="编号" width="280">
    75.           el-table-column>
    76.           <el-table-column label="轮播图" width="280">
    77.             <template slot-scope="scope">
    78.               
    79.               <img :src="scope.row.url" width="100%" alt="">
    80.             template>
    81.           el-table-column>
    82.           <el-table-column label="操作">
    83.             <template slot-scope="scope">
    84.               
    85.               <el-popconfirm
    86.                       title="确认删除吗？"
    87.                       @confirm="bannerDelete(scope.$index, scope.row)"
    88.               >
    89.                 <el-button slot="reference" size="mini" type="danger">删除el-button>
    90.               el-popconfirm>
    91.             template>
    92.           el-table-column>
    93.         el-table>
    94.         
    95.         
    96.         <el-table v-if="selectedIndex=='3-1'" :data="productArr" style="width: 100%">
    97.           
    98.           <el-table-column type="index" label="编号" width="100">
    99.           el-table-column>
    100.           <el-table-column prop="title" label="商品标题" width="200">
    101.           el-table-column>
    102.           <el-table-column prop="price" label="价格" width="100">
    103.           el-table-column>
    104.           <el-table-column prop="oldPrice" label="原价" width="100">
    105.           el-table-column>
    106.           <el-table-column prop="saleCount" label="销量" width="100">
    107.           el-table-column>
    108.           <el-table-column label="商品图片" width="100">
    109.             <template slot-scope="scope">
    110.               
    111.               <img :src="scope.row.url" width="100%" alt="">
    112.             template>
    113.           el-table-column>
    114.           <el-table-column label="操作">
    115.             <template slot-scope="scope">
    116.               
    117.               <el-popconfirm
    118.                       title="确认删除吗？"
    119.                       @confirm="productDelete(scope.$index, scope.row)"
    120.               >
    121.                 <el-button slot="reference" size="mini" type="danger">删除el-button>
    122.               el-popconfirm>
    123.             template>
    124.           el-table-column>
    125.         el-table>
    126.         
    127.       el-main>
    128.     el-container>
    129.   el-container>
    130. div>
    131. body>
    133. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    134. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    136. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    137. <script>
    138.   let v = new Vue({
    139.     el: '#app',
    140.     data: function() {
    141.       return {//在这里面定义变量
    142.         selectedIndex:"1-1",
    143.         categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "当季女装"},
    144.           {id: 3, name: "品牌男装"}, {id: 4, name: "环球美食"}, {id: 5, name: "医药健康"},
    145.           {id: 6, name: "美妆彩妆"}, {id: 7, name: "母婴产品"}
    146.         ],
    147.         bannerArr:[],
    148.         productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
    149.           {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
    150.           {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
    151.           {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
    152.           {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
    153.           {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
    154.           {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
    155.           {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
    156.           {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
    157.           {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
    158.           {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
    159.           {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
    160.       }
    161.     },
    162.     methods:{
    163.       productDelete(index,product){
    164.         //发出删除请求
    165.         axios.get("/product/delete?id="+product.id).then(function () {
    166.           v.productArr.splice(index,1);
    167.         })
    168.       },
    169.       categoryDelete(index,category){
    170.         //发出删除请求
    171.         axios.get("/category/delete?id="+category.id).then(function () {
    172.           //删除数组中的元素对象  页面会自动发生改变，比直接刷新页面更节省流量
    173.           //splice(数组下标,删除数量)
    174.           v.categoryArr.splice(index,1)
    175.         })
    176.       },
    177.       bannerDelete(index,banner){
    178.         axios.get("/banner/delete?id="+banner.id).then(function () {
    179.           //删除数组中的元素对象  页面会自动发生改变，比直接刷新页面更节省流量
    180.           //splice(数组下标,删除数量)
    181.           v.bannerArr.splice(index,1)
    182.         })
    183.       },
    184.       handleSelect(index){
    185.         if (index == "1-2"){
    186.           let name = prompt("请输入分类名称");
    187.           //判断出点击取消 未输入内容的情况
    188.           if (name == null || name.trim()==""){
    189.             return;
    190.           }
    191.           //发出添加分类的请求
    192.           axios.get("/category/insert?name="+name).then(function () {
    193.             location.reload()
    194.           })
    195.         }else if(index == "2-2"){
    196.           location.href = "/insertBanner.html";
    197.         }else if(index == "3-2"){
    198.           location.href = "/insertProduct.html";
    199.         }
    200.         console.log(index);
    201.         v.selectedIndex = index;
    202.       }
    203.     },
    204.     created:function () {
    205.       //标题菜单
    206.       axios.get("/category/select").then(function (response) {
    207.         v.categoryArr = response.data;
    208.       })
    209.       //轮播图片
    210.       axios.get("/banner/select").then(function (response) {
    211.         v.bannerArr = response.data;
    212.       })
    213.       //商品信息展示
    214.       axios.get("/product/select/admin").then(function (response) {
    215.         v.productArr = response.data;
    216.       })
    217.     }
    218.   })
    219. script>
    220. html>

    1.3.15detail.html(商品详情页面)

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     
    6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.     <style>
    8.         header a {
    9.             text-decoration: none;
    10.             color: #6c6c6c;
    11.         }
    12.         .el-menu.el-menu--horizontal {
    13.             border-bottom: none;
    14.         }
    15.         .el-table .el-table__cell{
    16.             padding: 0;/*去掉排行榜表格中上下的内边距*/
    17.         }
    18.     style>
    19. head>
    20. <body>
    21. <div id="app">
    22.     <el-container>
    23.         <el-header height="150">
    24.             <div style="width: 1200px;margin: 0 auto">
    25.                 <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
    26.                 <span>
    27.           <a href="">首页a><el-divider direction="vertical">el-divider>
    28.           <a href="">热点咨询a><el-divider direction="vertical">el-divider>
    29.           <a href="">商家入驻a><el-divider direction="vertical">el-divider>
    30.           <a href="">社会招聘a><el-divider direction="vertical">el-divider>
    31.           <a href="">校园招聘a><el-divider direction="vertical">el-divider>
    32.           <a href="">帮助a>
    33.         span>
    34.             div>
    35.             
    36.             <div style="background-color: #82c8ec">
    37.                 <el-menu style="width: 1200px;margin: 0 auto"
    38.                          :default-active="1"
    39.                          class="el-menu-demo"
    40.                          mode="horizontal"
    41.                          background-color="#82c8ec"
    42.                          text-color="#fff"
    43.                          active-text-color="#fff">
    44.                     <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}el-menu-item>
    45.                     
    46.                     <div style="float: right;margin-top: 10px">
    47.                         <el-input v-model="title" placeholder="请输入搜索内容">
    48.                             
    49.                             <el-button slot="append" icon="el-icon-search" @click="handleSelectLink(title)">el-button>
    50.                         el-input>
    51.                     div>
    52.                     
    53.                 el-menu>
    54.             div>
    55.             
    56.         el-header>
    57.         <el-main style="width: 1200px;margin: 0 auto">
    58.             <el-row :gutter="20">
    59.                 <el-col :span="12">
    60.                     <el-card>
    61.                         <img :src="product.url" width="100%" alt="">
    62.                     el-card>
    63.                 el-col>
    64.                 <el-col :span="12">
    65.                     <p style="font-size: 25px">{{product.title}}p>
    66.                     <el-divider>el-divider>
    67.                     <p style="font-size: 15px;color: #666">
    68.                         销量:{{product.saleCount}} 浏览量:{{product.viewCount}}p>
    69.                     <p style="font-size: 25px;font-weight: bold">￥{{product.price}}
    70.                         <span style="font-size: 15px;color: #666">原价:
    71.                             <s>{{product.oldPrice}}s>
    72.                         span>
    73.                     p>
    74.                     
    75.                     <el-row :gutter="20" style="text-align: center">
    76.                         <el-col :span="8">
    77.                             <el-card>
    78.                                 <img src="imgs/ewm.jpg" width="100%" alt="">
    79.                             el-card>
    80.                             <p>扫码购买商品p>
    81.                         el-col>
    82.                         <el-col :span="8">
    83.                             <el-card>
    84.                                 <img src="imgs/ewm.jpg" width="100%" alt="">
    85.                             el-card>
    86.                             <p>扫码关注公众号p>
    87.                         el-col>
    88.                         <el-col :span="8">
    89.                             <el-card>
    90.                                 <img src="imgs/ewm.jpg" width="100%" alt="">
    91.                             el-card>
    92.                             <p>扫码下载Appp>
    93.                         el-col>
    94.                     el-row>
    95.                 el-col>
    96.             el-row>
    97.         el-main>
    98.         <el-footer>
    99.             <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px">div>
    100.             <div style="height: 100px;background-color: #3f3f3f;
    101.             padding: 30px;text-align: center;color: #b1b1b1">
    102.                 <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号p>
    103.                 <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台p>
    104.                 <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训p>
    105.             div>
    106.         el-footer>
    107.     el-container>
    108. div>
    109. body>
    111. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    112. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    114. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    115. <script>
    116.     let v = new Vue({
    117.         el: '#app',
    118.         data: function () {
    119.             return {//在这里面定义变量
    120.                 title:"",
    121.                 categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "当季女装"},
    122.                     {id: 3, name: "品牌男装"}, {id: 4, name: "环球美食"}, {id: 5, name: "医药健康"},
    123.                     {id: 6, name: "美妆彩妆"}, {id: 7, name: "母婴产品"}
    124.                 ],
    125.                 product:{}
    126.  
    127.             }
    128.         },
    129.         created:function () {
    130.             //蓝色导航菜单
    131.             axios.get("/category/select").then(function (response) {
    132.                 v.categoryArr = response.data;
    133.             })
    134.             axios.get("/product/selectById"+location.search).then(function (response) {
    135.                 v.product=response.data;
    136.             })
    137.         },
    138.         methods:{
    139.             handleSelectLink(title){
    140.                 location.href = "/result.html?title="+title;
    141.             }
    142.         }
    143.     })
    144. script>
    145. html>

    1.3.16index.html(商品首页)

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     
    6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.     <style>
    8.         header a {
    9.             text-decoration: none;
    10.             color: #6c6c6c;
    11.         }
    12.         .el-menu.el-menu--horizontal {
    13.             border-bottom: none;
    14.         }
    15.         .el-table .el-table__cell{
    16.             padding: 0;/*去掉排行榜表格中上下的内边距*/
    17.         }
    18.         .el-table .cell {
    19.             white-space: nowrap;/*让内容在一行中显示，不换行*/
    20.             text-overflow: ellipsis;/*如果文字溢出泽通过省略号展示*/
    21.         }
    22.         .p_img:hover{
    23.             position: relative;
    24.             bottom: 5px;
    25.             /*元素的阴影：x便宜 y偏移 浓度 范围 颜色*/
    26.             box-shadow: 0 0 10px 5px grey;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31. <div id="app">
    32.     <el-container>
    33.         <el-header height="150">
    34.             <div style="width: 1200px;margin: 0 auto">
    35.                 <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
    36.                 <span>
    37.           <a href="">首页a><el-divider direction="vertical">el-divider>
    38.           <a href="">热点咨询a><el-divider direction="vertical">el-divider>
    39.           <a href="">商家入驻a><el-divider direction="vertical">el-divider>
    40.           <a href="">社会招聘a><el-divider direction="vertical">el-divider>
    41.           <a href="">校园招聘a><el-divider direction="vertical">el-divider>
    42.           <a href="">帮助a>
    43.         span>
    44.             div>
    45.             
    46.             <div style="background-color: #82c8ec">
    47.                 <el-menu style="width: 1200px;margin: 0 auto"
    48.                          @select="handleSelect"
    49.                          :default-active="1"
    50.                          class="el-menu-demo"
    51.                          mode="horizontal"
    52.                          background-color="#82c8ec"
    53.                          text-color="#fff"
    54.                          active-text-color="#fff">
    55.                     <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}el-menu-item>
    56.                     
    57.                     <div style="float: right;margin-top: 10px">
    58.                         <el-input v-model="title" placeholder="请输入搜索内容">
    59.                             
    60.                             <el-button slot="append" icon="el-icon-search" @click="handleSelectLink(title)">el-button>
    61.                         el-input>
    62.                     div>
    63.                     
    64.                 el-menu>
    65.             div>
    66.             
    67.         el-header>
    68.         <el-main style="width: 1200px;margin: 0 auto">
    69.             
    70.             <el-row :gutter="20">
    71.                 <el-col :span="18">
    72.                     <el-carousel trigger="click" height="430px">
    73.                         <el-carousel-item v-for="item in bannerArr">
    74.                             <img :src="item.url" width="100%" alt="">
    75.                         el-carousel-item>
    76.                     el-carousel>
    77.                 el-col>
    78.                 <el-col :span="6">
    79.                     <el-card style="height: 430px">
    80.                         <h3>
    81.                             <i style="font-weight: bold" class="el-icon-trophy">销量最高i>
    82.                         h3>
    83.                         <el-divider>el-divider>
    84.                         <el-table :data="topArr" style="width: 100%">
    85.                             
    86.                             <el-table-column type="index" label="排名" width="50">
    87.                             el-table-column>
    88.                             <el-table-column prop="title" label="商品名" width="80">
    89.                             el-table-column>
    90.                             <el-table-column prop="saleCount" label="销量" width="80">
    91.                             el-table-column>
    92.                         el-table>
    93.                     el-card>
    94.                 el-col>
    95.             el-row>
    96.             
    97.             
    98.             <el-row :gutter="20">
    99.                 <el-col :span="6" v-for="p in productArr" style="margin-top: 20px">
    100.                     <el-card>
    101.                         <a :href="'/detail.html?id='+p.id">
    102.                             <img class="p_img" :src="p.url" width="100%" height="233" alt="">
    103.                         a>
    104.                         <div>
    105.                             <a style="text-decoration: none;color: #333;" :href="'/detail.html?id='+p.id">
    106.                                 <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}p>
    107.                             a>
    108.                             <div style="color: #666">
    109.                                 <span>￥{{p.price}}span>
    110.                                 <s style="font-size: 12px">{{p.oldPrice}}s>
    111.                                 <span style="float: right">销量:{{p.saleCount}}span>
    112.                             div>
    113.  
    114.                         div>
    115.                     el-card>
    116.                 el-col>
    117.             el-row>
    118.             
    119.         el-main>
    120.         <el-footer>
    121.             <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px">div>
    122.             <div style="height: 100px;background-color: #3f3f3f;
    123.             padding: 30px;text-align: center;color: #b1b1b1">
    124.                 <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号p>
    125.                 <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台p>
    126.                 <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训p>
    127.             div>
    128.         el-footer>
    129.     el-container>
    130. div>
    131. body>
    133. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    134. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    136. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    137. <script>
    138.     let v = new Vue({
    139.         el: '#app',
    140.         data: function () {
    141.             return {//在这里面定义变量
    142.                 categoryArr: [],
    143.                 bannerArr:[],
    144.                 topArr:[{title:"小米手机",saleCount:988},
    145.                     {title:"李宁球鞋",saleCount:708},
    146.                     {title:"毛巾",saleCount:653},
    147.                     {title:"安踏拖鞋",saleCount:553},
    148.                     {title:"阿迪袜子",saleCount:438},
    149.                     {title:"耐克上衣",saleCount:88}],
    150.                 productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
    151.                     {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
    152.                     {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
    153.                     {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
    154.                     {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
    155.                     {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
    156.                     {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
    157.                     {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
    158.                     {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
    159.                     {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
    160.                     {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
    161.                     {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}],
    162.                 title:""
    163.             }
    164.         },
    165.         created:function (){
    166.             //蓝色导航菜单
    167.             axios.get("/category/select").then(function (response) {
    168.                 v.categoryArr = response.data;
    169.             })
    170.             //轮播图
    171.             axios.get("/banner/select").then(function (response){
    172.                 v.bannerArr = response.data;
    173.             })
    174.             //请求所以商品信息
    175.             axios.get("/product/select/index").then(function (response) {
    176.                 v.productArr=response.data;
    177.             })
    178.             //请求排行榜信息
    179.             axios.get("/product/select/top").then(function (response){
    180.                 v.topArr = response.data;
    181.             })
    182.         },
    183.         methods:{
    184.             handleSelect(index) {
    185.                 location.href = "/result.html?id="+index;
    186.             },
    187.             handleSelectLink(name){
    188.                 location.href = "/result.html?title="+name;
    189.             }
    190.         }
    191.     })
    192. script>
    193. html>

    1.3.17insertBanner.html(添加轮播图页面)

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. head>
    8. <body>
    9. <div id="app">
    10.   <el-page-header style="background-color:#0095d7;color:white;line-height: 60px" @back="goBack" content="添加轮播图页面">
    11.  
    12.   el-page-header>
    13.   
    14.   <el-upload
    15.           limit="1"
    16.           action="/upload"
    17.           name="picFile"
    18.           list-type="picture-card"
    19.           :on-preview="handlePictureCardPreview"
    20.           :on-success="handleSuccess"
    21.           :on-remove="handleRemove">
    22.     <i class="el-icon-plus">i>
    23.   el-upload>
    24.   <el-dialog :visible.sync="dialogVisible">
    25.     <img width="100%" :src="dialogImageUrl" alt="">
    26.   el-dialog>
    27.   <el-button @click="insert()">添加轮播图el-button>
    28. div>
    29. body>
    31. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    33. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    34. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    35.  
    36. <script>
    37.   let v = new Vue({
    38.     el: '#app',
    39.     data: function() {
    40.       return {//在这里面定义变量
    41.         dialogImageUrl: '',
    42.         dialogVisible: false,
    43.         url:""
    44.       }
    45.     },
    46.     methods: {
    47.       goBack(){
    48.         //返回上一页面
    49.         history.back()
    50.       },
    51.       handleRemove(file, fileList) {
    52.         console.log(file, fileList);
    53.         //file.response得到的是文件上传成功时服务器响应的内容(此内容就是图片的路径)
    54.         let url = file.response;
    55.         //发出删除图片的请求
    56.         axios.get("/remove?url="+url).then(function () {
    57.           alert("服务器中文件删除成功!");
    58.            v.url="";
    59.         })
    60.       },
    61.       handlePictureCardPreview(file) {
    62.         this.dialogImageUrl = file.url;
    63.         this.dialogVisible = true;
    64.       },
    65.       handleSuccess(response,file,fileList){
    66.         //把服务器响应的图片路径 给到Vue的变量
    67.         v.url = response;
    68.  
    69.       },
    70.       insert(){
    71.           if (v.url==""){
    72.             alert("请选择上传的图片!");
    73.             return;
    74.           }
    75.           //发出添加轮播图的请求
    76.           axios.get("/banner/insert?url="+v.url).then(function () {
    77.             //返回到后台管理页面
    78.             location.href = "/admin.html";
    79.           })
    80.       }
    81.     }
    82.   })
    83. script>
    84. html>

    1.3.18insertProduct.html(添加商品页面)

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. head>
    8. <body>
    9. <div id="app">
    10.   <el-page-header style="background-color:#0095d7;color:white;line-height: 60px" @back="goBack" content="添加商品页面">
    11.  
    12.   el-page-header>
    13.   <el-card style="width: 600px;height: 700px;margin: 0 auto;
    14.   background-color: rgba(255,255,255,0.3)">
    15.     
    16.     <el-form style="width: 500px;margin: 50px auto" label-width="80px">
    17.       <el-form-item label="商品标题">
    18.         <el-input type="text" v-model="p.title" placeholder="请输入商品标题">el-input>
    19.       el-form-item>
    20.       <el-form-item label="商品价格">
    21.         <el-input type="text" v-model="p.price" placeholder="请输入商品价格">el-input>
    22.       el-form-item>
    23.       <el-form-item label="商品原价">
    24.         <el-input type="text" v-model="p.oldPrice" placeholder="请输入商品原价">el-input>
    25.       el-form-item>
    26.       <el-form-item label="销量">
    27.         <el-input type="text" v-model="p.saleCount" placeholder="请输入销量">el-input>
    28.       el-form-item>
    29.       <el-form-item label="库存">
    30.         <el-input type="text" v-model="p.num" placeholder="请输入库存">el-input>
    31.       el-form-item>
    32.       <el-form-item label="商品分类">
    33.         <el-select placeholder="请选择" v-model="p.categoryId">
    34.           <el-option v-for="c in arr" :label="c.name" :value="c.id">el-option>
    35.         el-select>
    36.       el-form-item>
    37.       <el-form-item label="商品图片">
    38.         <el-upload
    39.                 limit="1"
    40.                 action="/upload"
    41.                 name="picFile"
    42.                 list-type="picture-card"
    43.                 :on-preview="handlePictureCardPreview"
    44.                 :on-success="handleSuccess"
    45.                 :on-remove="handleRemove">
    46.           <i class="el-icon-plus">i>
    47.         el-upload>
    48.         <el-dialog :visible.sync="dialogVisible">
    49.           <img width="100%" :src="dialogImageUrl" alt="">
    50.         el-dialog>
    51.       el-form-item>
    52.       <el-form-item >
    53.         <el-button  type="primary" @click="insert()">添加商品el-button>
    54.       el-form-item>
    55.     el-form>
    56.  
    57.   el-card>
    58.  
    59. div>
    60. body>
    62. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    64. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    65. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    66.  
    67. <script>
    68.   let v = new Vue({
    69.     el: '#app',
    70.     data: function() {
    71.       return {//在这里面定义变量
    72.         dialogImageUrl: '',
    73.         dialogVisible: false,
    74.         p:{
    75.           title:"",
    76.           price:"",
    77.           num:"",
    78.           oldPrice:"",
    79.           saleCount:"",
    80.           url:"",
    81.           categoryId:""
    82.         },
    83.         arr:[]
    84.       }
    85.     },
    86.     created:function (){
    87.       axios.get("/category/select").then(function (response) {
    88.         v.arr=response.data;
    89.       })
    90.     },
    91.     methods: {
    92.       goBack(){
    93.         //返回上一页面
    94.         history.back()
    95.       },
    96.       handleRemove(file, fileList) {
    97.         console.log(file, fileList);
    98.         //file.response得到的是文件上传成功时服务器响应的内容(此内容就是图片的路径)
    99.         let url = file.response;
    100.         //发出删除图片的请求
    101.         axios.get("/remove?url="+url).then(function () {
    102.           alert("服务器中文件删除成功!");
    103.            v.p.url="";
    104.         })
    105.       },
    106.       handlePictureCardPreview(file) {
    107.         this.dialogImageUrl = file.url;
    108.         this.dialogVisible = true;
    109.       },
    110.       handleSuccess(response,file,fileList){
    111.         //把服务器响应的图片路径 给到Vue的变量
    112.         v.p.url = response;
    113.  
    114.       },
    115.       insert(){
    116.           if (v.url==""){
    117.             alert("请选择上传的图片!");
    118.             return;
    119.           }
    120.          //发出添加商品的请求
    121.         axios.post("/product/insert",v.p).then(function () {
    122.           //回到后台管理页面
    123.           location.href="/admin.html";
    124.         })
    125.       }
    126.     }
    127.   })
    128. script>
    129. html>

    1.3.19login.html(登录页面)

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8.     body{
    9.       margin: 0;/*去掉自带的8个像素外边距*/
    10.       background-image: url("imgs/bg.jpg");
    11.       /*cover封面 */
    12.       background-size: cover;
    13.       text-align: center;
    14.     }
    15.     h1{
    16.       font-size: 72px;
    17.       color: rgb(0,150,220);
    18.       margin-bottom: 0;
    19.     }
    20.     img{width: 100px}
    21.     h2{
    22.       font-size: 32px;
    23.       color: rgb(0,150,220);
    24.       margin: 0;
    25.     }
    26.   style>
    27. head>
    28. <body>
    29. <div id="app">
    30.   <h1>欢迎来到酷鲨商城h1>
    31.   <img src="imgs/shark.png" alt="">
    32.   <h2>CoolSharkMallh2>
    33.   <el-card style="width: 600px;height: 300px;margin: 0 auto;
    34.   background-color: rgba(255,255,255,0.3)">
    35.     
    36.     <el-form style="width: 400px;margin: 50px auto" label-width="60px">
    37.       <el-form-item label="用户名">
    38.         <el-input type="text" v-model="user.username" placeholder="请输入用户名">el-input>
    39.       el-form-item>
    40.       <el-form-item label="密码">
    41.         <el-input type="password" v-model="user.password" placeholder="请输入密码">el-input>
    42.       el-form-item>
    43.       <el-form-item >
    44.         <el-button style="position: relative;right: 30px" type="primary" @click="login()">登录el-button>
    45.       el-form-item>
    46.     el-form>
    47.  
    48.   el-card>
    49. div>
    50. body>
    52. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    53. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    55. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    56. <script>
    57.   let v = new Vue({
    58.     el: '#app',
    59.     data: function() {
    60.       return {//在这里面定义变量
    61.         user:{
    62.           username:"",
    63.           password:""
    64.         }
    65.       }
    66.     },
    67.     methods:{
    68.       login(){
    69.         axios.post("/login",v.user).then(function (response) {
    70.           if (response.data==1){
    71.             /*alert("登录成功");*/
    72.             location.href="/";
    73.           }else if(response.data == 2){
    74.             v.$message.error("密码错误")
    75.           }else{
    76.             v.$message.error("该用户不存在")
    77.           }
    78.         })
    79.       }
    80.     }
    81.   })
    82. script>
    83. html>

    1.3.20result.html(查询分类结果页面)

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     
    6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.     <style>
    8.         header a {
    9.             text-decoration: none;
    10.             color: #6c6c6c;
    11.         }
    12.         .el-menu.el-menu--horizontal {
    13.             border-bottom: none;
    14.         }
    15.         .el-table .el-table__cell{
    16.             padding: 0;/*去掉排行榜表格中上下的内边距*/
    17.         }
    18.         .el-table .cell {
    19.             white-space: nowrap;/*让内容在一行中显示，不换行*/
    20.             text-overflow: ellipsis;/*如果文字溢出泽通过省略号展示*/
    21.         }
    22.         .p_img:hover{
    23.             position: relative;
    24.             bottom: 5px;
    25.             /*元素的阴影：x便宜 y偏移 浓度 范围 颜色*/
    26.             box-shadow: 0 0 10px 5px grey;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31. <div id="app">
    32.     <el-container>
    33.         <el-header height="150">
    34.             <div style="width: 1200px;margin: 0 auto">
    35.                 <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
    36.                 <span>
    37.           <a href="/">首页a><el-divider direction="vertical">el-divider>
    38.           <a href="">热点咨询a><el-divider direction="vertical">el-divider>
    39.           <a href="">商家入驻a><el-divider direction="vertical">el-divider>
    40.           <a href="">社会招聘a><el-divider direction="vertical">el-divider>
    41.           <a href="">校园招聘a><el-divider direction="vertical">el-divider>
    42.           <a href="">帮助a>
    43.         span>
    44.             div>
    45.             
    46.             <div style="background-color: #82c8ec">
    47.                 <el-menu style="width: 1200px;margin: 0 auto"
    48.                          @select="handleSelect"
    49.                          :default-active="currentIndex"
    50.                          class="el-menu-demo"
    51.                          mode="horizontal"
    52.                          background-color="#82c8ec"
    53.                          text-color="#fff"
    54.                          active-text-color="#fff">
    55.                     <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}el-menu-item>
    56.                     
    57.                     <div style="float: right;margin-top: 10px">
    58.                         <el-input v-model="title" placeholder="请输入搜索内容">
    59.                             
    60.                             <el-button slot="append" icon="el-icon-search" @click="handleSelectLink(title)">el-button>
    61.                         el-input>
    62.                     div>
    63.                     
    64.                 el-menu>
    65.             div>
    66.             
    67.         el-header>
    68.         <el-main style="width: 1200px;margin: 0 auto">
    69.  
    70.             
    71.             <el-row :gutter="20">
    72.                 <el-col :span="6" v-for="p in productArr" style="margin-top: 20px">
    73.                     <el-card>
    74.                         <a :href="'/detail.html?id='+p.id">
    75.                             <img class="p_img" :src="p.url" width="100%" height="233" alt="">
    76.                         a>
    77.                         <div>
    78.                             <a style="text-decoration: none;color: #333;" :href="'/detail.html?id='+p.id">
    79.                                 <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}p>
    80.                             a>
    81.                             <div style="color: #666">
    82.                                 <span>￥{{p.price}}span>
    83.                                 <s style="font-size: 12px">{{p.oldPrice}}s>
    84.                                 <span style="float: right">销量:{{p.saleCount}}span>
    85.                             div>
    86.  
    87.                         div>
    88.                     el-card>
    89.                 el-col>
    90.             el-row>
    91.             
    92.         el-main>
    93.         <el-footer>
    94.             <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px">div>
    95.             <div style="height: 100px;background-color: #3f3f3f;
    96.             padding: 30px;text-align: center;color: #b1b1b1">
    97.                 <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号p>
    98.                 <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台p>
    99.                 <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训p>
    100.             div>
    101.         el-footer>
    102.     el-container>
    103. div>
    104. body>
    106. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js">script>
    107. <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
    109. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    110. <script>
    111.     let v = new Vue({
    112.         el: '#app',
    113.         data: function () {
    114.             return {//在这里面定义变量
    115.                 categoryArr: [],
    116.                 productArr:[],
    117.                 title:"",
    118.                 currentIndex:""
    119.             }
    120.         },
    121.         created:function (){
    122.             //亲求所有分类
    123.             axios.get("/category/select").then(function (response) {
    124.                 v.categoryArr = response.data;
    125.             })
    126.             let uri = location.search.split("=")[0];
    127.             if (location.search.indexOf("id")!=-1){
    128.                 axios.get("/product/selectByCid"+location.search).then(function (response) {
    129.                     v.productArr = response.data;
    130.                 })
    131.                 //在created方法中需要访问data里面的变量时需要使用this.变量名的方式
    132.                 //因为此时Vue对象还未创建完成还没有把实例化的对象赋值给v变量，
    133.                 //所以不能直接方位v
    134.                 //把地址栏中的分类id取出
    135.                 this.currentIndex = location.search.split("=")[1];
    136.             }else if (location.search.indexOf("title")!=-1){
    137.                 axios.get("/product/selectByName"+location.search).then(function (response) {
    138.                     v.productArr = response.data;
    139.                 })
    140.             }
    141.  
    142.  
    143.         },
    144.         methods:{
    145.             handleSelect(index) {
    146.                 axios.get("/product/selectByCid?id="+index).then(function (response) {
    147.                     v.productArr = response.data;
    148.                 })
    149.             },
    150.             handleSelectLink(title){
    151.                 axios.get("/product/selectByName"+location.search).then(function (response) {
    152.                     v.productArr = response.data;
    153.                 })
    154.             }
    155.         }
    156.     })
    157. script>
    158. html>

    1.3.21application.properties(配置文件)

    1. spring.datasource.url=jdbc:mysql://localhost:3306/cs?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false
    2. spring.datasource.username=root
    3. spring.datasource.password=root
    4. #修改上传文件大小限制
    5. spring.servlet.multipart.max-file-size=10MB
    6. #配置静态资源文件夹
    7. spring.web.resources.static-locations=file:E:/files,classpath:static
    8. #自动处理表字段名_命名规范和Java实体类中驼峰命名时的映射关系
    9. mybatis.configuration.map-underscore-to-camel-case=true

  • 相关阅读:
    FPGA——SPI总线控制flash（2）（含代码）
    Java加密与解密
    框架安全-CVE 复现&Spring&Struts&Laravel&ThinkPHP漏洞复现
    jwt的了解和使用以及大致代码分析
    一文带你搞懂 JWT 常见概念 & 优缺点
    方法递归详解
    喜报｜云畅科技获批加入全国信标委软件与系统工程分委会
    为什么网站页面没有被百度搜索收录？是网站被攻击了？
    MySQL数据库性能分析之explain使用
    通过git服务提高端侧开发调试效率
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125898841