1.酷鲨商城

1.1酷鲨商城项目步骤

准备工作:
创建新工程coolshark 打3个√ 将微博工程中application.properties里面的内容复制到新工程,并且将数据库名称weibo改成cs
从老师的工程中把static文件夹下的4个html页面和一个imgs文件夹复制到自己的工程, 然后ReBuild static文件夹
关闭其它工程, 启动新工程, 访问首页测试,如果显示首页内容即测试成功!
建库建表

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));
insert into user values(null,'admin','123456','管理员');

1.1.1登录功能步骤:

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

1.1.2首页展示分类步骤

建分类表和插入数据

create table category(id int primary key auto_increment,name varchar(30));
insert into category values(null,'精彩活动'),(null,'当季女装'),(null,'品牌男装'),(null,'环球美食'),(null,'医药健康');

创建Category实体类
创建CategoryMapper 里面提供select方法
创建CategoryController
在首页index.html中添加axios框架的引入, 在Vue里面添加created方法,在里面向/category/select发出请求, 获取所有分类的信息, 把得到的数据给到categoryArr数组
在CategoryController 里面创建select方法处理/select请求调用mapper里面的select方法把得到的数据响应给客户端

1.1.3首页展示轮播图步骤:

建表并插入数据

create table banner(id int primary key auto_increment,url varchar(200));

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

创建Banner实体类
创建BannerMapper 提供select方法
创建BannerController添加select方法处理 /banner/select请求,方法中调用mapper的select方法把得到的数据响应给客户端
在首页的created方法中向/banner/select发出异步请求获取所有轮播图数据, 把得到的数据给到bannerArr数组, 数组内容由原来装字符串变成了装banner对象所以页面中遍历bannerArr数组部分的代码需要改动

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

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

1.1.5添加分类步骤:

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

1.1.6删除分类步骤:

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

1.1.7删除轮播图步骤:

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

1.1.8添加轮播图步骤:

创建insertBanner.html页面使用上传图片的组件,
在页面中向/banner/insert发出请求
在Controller里面添加insert方法处理/banner/insert请求 ,方法中调用mapper的insert方法
实现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结果页面中点击分类时的步骤:

给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(轮播图控制层)

package cn.tedu.coolshark.controller;

import cn.tedu.coolshark.entitu.Banner;
import cn.tedu.coolshark.mapping.BannerMapper;
import org.springframework.beans.factory.annotation.Autowired;
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
    BannerMapper mapper;

    @RequestMapping("/banner/select")
    public List<Banner> selectBanner(){
        return mapper.selectBanner();
    }

    @RequestMapping("/banner/delete")
    public void deleteBanner(int id){
        String url = mapper.selectBannerById(id);
        new File("E:/files"+url).delete();
        mapper.deleteBanner(id);
    }

    @RequestMapping("/banner/insert")
    public void insertBanner(String url){
        mapper.insertBanner(url);
    }

}

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

package cn.tedu.coolshark.controller;

import cn.tedu.coolshark.entitu.Category;
import cn.tedu.coolshark.mapping.CategoryMapping;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class CategoryController {

    @Autowired
    CategoryMapping mapping;

    @RequestMapping("/category/select")
    public List<Category> selectCategory(){
        return mapping.selectCategory();
    }

    @RequestMapping("/category/insert")
    public void insertCategory(String name){
        mapping.insertCategory(name);
    }

    @RequestMapping("/category/delete")
    public void deleteCategory(int id){
        mapping.deleteCategoryById(id);
    }
}

1.3.3ProductController.java(商品控制层)

package cn.tedu.coolshark.controller;

import cn.tedu.coolshark.entitu.Product;
import cn.tedu.coolshark.mapping.ProductMapper;
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 ProductController {

    @Autowired
    ProductMapper mapper;

    @RequestMapping("/product/insert")
    public void insertProduct(@RequestBody Product product){
        System.out.println("product = " + product);
        mapper.insertProduct(product);
    }

    @RequestMapping("/product/select/admin")
    public List<Product> selectProductAdmin(){
        return mapper.selectProduct();
    }

    @RequestMapping("/product/delete")
    public void deleteProduct(int id){
        String url = mapper.selectProductUrlById(id);
        new File("E:/files"+url).delete();
        mapper.deleteProductById(id);
    }

    @RequestMapping("/product/select/index")
    public List<Product> selectProductIndex(){
        return mapper.selectProductIndex();
    }

    @RequestMapping("/product/select/top")
    public List<Product> selectProductTop(){
        return mapper.selectProductTop();
    }

    @RequestMapping("/product/selectById")
    public Product selectProductById(int id){
        System.out.println("id = " + id);
        //商品浏览量+1
        mapper.updateProductViewCountById(id);
        return mapper.selectProductById(id);
    }

    @RequestMapping("/product/selectByCid")
    public List<Product> selectProductByCid(int id){
        return mapper.selectProductByCid(id);
    }

    @RequestMapping("/product/selectByName")
    public List<Product> selectProductByName(String title){
        return mapper.selectProductByName(title);
    }

}

1.3.4UploadController.java(文件上传)

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 {
        //得到文件的原始文件名字
        String fileName = picFile.getOriginalFilename();
        //得到后缀
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一未见名
        fileName = UUID.randomUUID()+suffix;
        //文件夹路径
        String dirPath = "E:/files";
        File dirFile = new File(dirPath);
        if (!dirFile.exists()){
            dirFile.mkdirs();
        }
        //完整的文件路径
        String filePath = dirPath+"/"+fileName;
        //吧文件的路径
        picFile.transferTo(new File(filePath));
        //吧文件路径返回给客户端
        return "/"+fileName;
    }

    @RequestMapping("/remove")
    public void remove(String url){
        //得到文件的完整路径
        String filePath = "E:/files"+url;
        //删除图片文件
        new File(filePath).delete();
    }

}

1.3.5UserController.java(用户控制层)

package cn.tedu.coolshark.controller;

import cn.tedu.coolshark.entitu.User;
import cn.tedu.coolshark.mapping.UserMapping;
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 javax.servlet.http.HttpSession;

@RestController
public class UserController {

    @Autowired
    UserMapping mapping;

    @RequestMapping("/login")
    public int login(@RequestBody User user, HttpSession session){
        User u = mapping.selectUserByName(user.getUsername());
        if (u!=null){
            if (u.getPassword().equals(user.getPassword())){
                session.setAttribute("user",u);
                return 1;
            }
            return 2;
        }
        return 3;
    }

}

1.3.6Banner.java(轮播图对象)

package cn.tedu.coolshark.entitu;

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

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

package cn.tedu.coolshark.entitu;

public class Category {
    private Integer id;
    private String name;

    @Override
    public String toString() {
        return "Category{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

1.3.8Product.java(商品对象)

package cn.tedu.coolshark.entitu;

public class Product {
    private Integer id;
    private String title;
    private Double price;
    private Double oldPrice;
    private Integer num;
    private Integer saleCount;
    private String url;
    private Integer viewCount;
    private Integer categoryId;


    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", price=" + price +
                ", oldPrice=" + oldPrice +
                ", num=" + num +
                ", saleCount=" + saleCount +
                ", url='" + url + '\'' +
                ", viewCount=" + viewCount +
                ", categoryId=" + categoryId +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public Double getOldPrice() {
        return oldPrice;
    }

    public void setOldPrice(Double oldPrice) {
        this.oldPrice = oldPrice;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }

    public Integer getSaleCount() {
        return saleCount;
    }

    public void setSaleCount(Integer saleCount) {
        this.saleCount = saleCount;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public Integer getViewCount() {
        return viewCount;
    }

    public void setViewCount(Integer viewCount) {
        this.viewCount = viewCount;
    }

    public Integer getCategoryId() {
        return categoryId;
    }

    public void setCategoryId(Integer categoryId) {
        this.categoryId = categoryId;
    }
}

1.3.9User.java(用户对象)

package cn.tedu.coolshark.entitu;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nick;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nick='" + nick + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }
}

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

package cn.tedu.coolshark.mapping;

import cn.tedu.coolshark.entitu.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 java.util.List;

@Mapper
public interface BannerMapper {

    @Select("select * from banner")
    List<Banner> selectBanner();

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

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

    @Select("select url from banner where id = #{id}")
    String selectBannerById(int id);
}

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

package cn.tedu.coolshark.mapping;

import cn.tedu.coolshark.entitu.Category;
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 java.util.List;

@Mapper
public interface CategoryMapping {
    @Select("select * from category")
    List<Category> selectCategory();

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

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

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

package cn.tedu.coolshark.mapping;

import cn.tedu.coolshark.entitu.Product;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface ProductMapper {

    @Insert("insert into product values(null,#{title},#{url},#{price},#{oldPrice},0,#{num},#{saleCount},#{categoryId})")
    void insertProduct(Object product);

    @Select("select id,title,price,old_price,sale_count,url from product")
    List<Product> selectProduct();

    @Select("select url from product where id = #{id}")
    String selectProductUrlById(int id);

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

    @Select("select id,title,url,price,old_price,sale_count from product")
    List<Product> selectProductIndex();

    @Select("select id,title,sale_count from product order by sale_count desc limit 0,6")
    List<Product> selectProductTop();

    @Select("select id,title,url,price,old_price,sale_count,view_count from product where id = #{id}")
    Product selectProductById(int id);

    @Update("update product set view_count = view_count+1 where id = #{id}")
    void updateProductViewCountById(int id);

    @Select("select id,title,url,price,old_price,sale_count from product where category_id = #{id}")
    List<Product> selectProductByCid(int id);

    //concat()时sql语句中用于拼接字符串的函数
    @Select("select id,title,url,price,old_price,sale_count from product where title like concat('%',#{title},'%')")
    List<Product> selectProductByName(String title);
}

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

package cn.tedu.coolshark.mapping;

import cn.tedu.coolshark.entitu.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapping {

    @Select("select id,password,nick from user where username = #{username}")
    User selectUserByName(String username);
}

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #0095d7">
      <h1 style="color: white;font-size: 22px">CoolShark商城后台管理系统
        <span style="float: right">欢迎xxx回来! <a href="">退出登录</a></span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!--:default-openeds设置默认打开的子菜单-->
        <el-menu @select="handleSelect" :default-openeds="['1']">
          <el-submenu index="1">
            <!--下面是设置子菜单的标题-->
            <template slot="title">
              <i class="el-icon-s-flag"> 分类管理</i>
            </template>
            <!--下面是两个菜单项-->
            <el-menu-item index="1-1">分类列表</el-menu-item>
            <el-menu-item index="1-2">添加分类</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <!--下面是设置子菜单的标题-->
            <template slot="title">
              <i class="el-icon-picture"> 轮播图管理</i>
            </template>
            <!--下面是两个菜单项-->
            <el-menu-item index="2-1">轮播图列表</el-menu-item>
            <el-menu-item index="2-2">添加轮播图</el-menu-item>
          </el-submenu>
          <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>
        </el-menu>

      </el-aside>
      <el-main>
        <!--分类表格开始-->
        <el-table v-if="selectedIndex=='1-1'" :data="categoryArr" style="width: 100%">
          <!--prop=property属性 , 设置这一列显示的数据-->
          <el-table-column type="index" label="编号" width="280">
          </el-table-column>
          <el-table-column prop="name" label="名字" width="280">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应的对象-->
              <el-popconfirm
                      title="确认删除吗？"
                      @confirm="categoryDelete(scope.$index, scope.row)"
              >
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--分类表格结束-->
        <!--轮播图表格开始-->
        <el-table v-if="selectedIndex=='2-1'" :data="bannerArr" style="width: 100%">
          <!--prop=property属性 , 设置这一列显示的数据-->
          <el-table-column type="index" label="编号" width="280">
          </el-table-column>
          <el-table-column label="轮播图" width="280">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应数组里面的图片路径-->
              <img :src="scope.row.url" width="100%" alt="">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应的对象-->
              <el-popconfirm
                      title="确认删除吗？"
                      @confirm="bannerDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--轮播图表格结束-->
        <!--商品表格开始-->
        <el-table v-if="selectedIndex=='3-1'" :data="productArr" style="width: 100%">
          <!--prop=property属性 , 设置这一列显示的数据-->
          <el-table-column type="index" label="编号" width="100">
          </el-table-column>
          <el-table-column prop="title" label="商品标题" width="200">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
          </el-table-column>
          <el-table-column prop="oldPrice" label="原价" width="100">
          </el-table-column>
          <el-table-column prop="saleCount" label="销量" width="100">
          </el-table-column>
          <el-table-column label="商品图片" width="100">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应数组里面的图片路径-->
              <img :src="scope.row.url" width="100%" alt="">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应的对象-->
              <el-popconfirm
                      title="确认删除吗？"
                      @confirm="productDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--商品表格结束-->
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {//在这里面定义变量
        selectedIndex:"1-1",
        categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "当季女装"},
          {id: 3, name: "品牌男装"}, {id: 4, name: "环球美食"}, {id: 5, name: "医药健康"},
          {id: 6, name: "美妆彩妆"}, {id: 7, name: "母婴产品"}
        ],
        bannerArr:[],
        productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
          {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
          {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
          {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
          {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
          {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
          {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
          {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
          {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
          {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
          {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
          {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
      }
    },
    methods:{
      productDelete(index,product){
        //发出删除请求
        axios.get("/product/delete?id="+product.id).then(function () {
          v.productArr.splice(index,1);
        })
      },
      categoryDelete(index,category){
        //发出删除请求
        axios.get("/category/delete?id="+category.id).then(function () {
          //删除数组中的元素对象  页面会自动发生改变，比直接刷新页面更节省流量
          //splice(数组下标,删除数量)
          v.categoryArr.splice(index,1)
        })
      },
      bannerDelete(index,banner){
        axios.get("/banner/delete?id="+banner.id).then(function () {
          //删除数组中的元素对象  页面会自动发生改变，比直接刷新页面更节省流量
          //splice(数组下标,删除数量)
          v.bannerArr.splice(index,1)
        })
      },
      handleSelect(index){
        if (index == "1-2"){
          let name = prompt("请输入分类名称");
          //判断出点击取消 未输入内容的情况
          if (name == null || name.trim()==""){
            return;
          }
          //发出添加分类的请求
          axios.get("/category/insert?name="+name).then(function () {
            location.reload()
          })
        }else if(index == "2-2"){
          location.href = "/insertBanner.html";
        }else if(index == "3-2"){
          location.href = "/insertProduct.html";
        }
        console.log(index);
        v.selectedIndex = index;
      }
    },
    created:function () {
      //标题菜单
      axios.get("/category/select").then(function (response) {
        v.categoryArr = response.data;
      })
      //轮播图片
      axios.get("/banner/select").then(function (response) {
        v.bannerArr = response.data;
      })
      //商品信息展示
      axios.get("/product/select/admin").then(function (response) {
        v.productArr = response.data;
      })
    }
  })
</script>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu.el-menu--horizontal {
            border-bottom: none;
        }
        .el-table .el-table__cell{
            padding: 0;/*去掉排行榜表格中上下的内边距*/
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150">
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <span>
          <a href="">首页</a><el-divider direction="vertical"></el-divider>
          <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
          <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
          <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">帮助</a>
        </span>
            </div>
            <!--蓝色导航菜单开始-->
            <div style="background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                         :default-active="1"
                         class="el-menu-demo"
                         mode="horizontal"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 10px">
                        <el-input v-model="title" placeholder="请输入搜索内容">
                            <!--slot="append"作用是将按钮追加在搜索框的后面-->
                            <el-button slot="append" icon="el-icon-search" @click="handleSelectLink(title)"></el-button>
                        </el-input>
                    </div>
                    <!--搜索框结束-->
                </el-menu>
            </div>
            <!--蓝色导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card>
                        <img :src="product.url" width="100%" alt="">
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <p style="font-size: 25px">{{product.title}}</p>
                    <el-divider></el-divider>
                    <p style="font-size: 15px;color: #666">
                        销量:{{product.saleCount}} 浏览量:{{product.viewCount}}</p>
                    <p style="font-size: 25px;font-weight: bold">￥{{product.price}}
                        <span style="font-size: 15px;color: #666">原价:
                            <s>{{product.oldPrice}}</s>
                        </span>
                    </p>
                    <!--通过布局嵌套再次将现在的一行划分为3等份-->
                    <el-row :gutter="20" style="text-align: center">
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <p>扫码购买商品</p>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <p>扫码关注公众号</p>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <p>扫码下载App</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px"></div>
            <div style="height: 100px;background-color: #3f3f3f;
            padding: 30px;text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {//在这里面定义变量
                title:"",
                categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "当季女装"},
                    {id: 3, name: "品牌男装"}, {id: 4, name: "环球美食"}, {id: 5, name: "医药健康"},
                    {id: 6, name: "美妆彩妆"}, {id: 7, name: "母婴产品"}
                ],
                product:{}

            }
        },
        created:function () {
            //蓝色导航菜单
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            axios.get("/product/selectById"+location.search).then(function (response) {
                v.product=response.data;
            })
        },
        methods:{
            handleSelectLink(title){
                location.href = "/result.html?title="+title;
            }
        }
    })
</script>
</html>

1.3.16index.html(商品首页)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu.el-menu--horizontal {
            border-bottom: none;
        }
        .el-table .el-table__cell{
            padding: 0;/*去掉排行榜表格中上下的内边距*/
        }
        .el-table .cell {
            white-space: nowrap;/*让内容在一行中显示，不换行*/
            text-overflow: ellipsis;/*如果文字溢出泽通过省略号展示*/
        }
        .p_img:hover{
            position: relative;
            bottom: 5px;
            /*元素的阴影：x便宜 y偏移 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px grey;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150">
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <span>
          <a href="">首页</a><el-divider direction="vertical"></el-divider>
          <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
          <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
          <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">帮助</a>
        </span>
            </div>
            <!--蓝色导航菜单开始-->
            <div style="background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                         @select="handleSelect"
                         :default-active="1"
                         class="el-menu-demo"
                         mode="horizontal"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 10px">
                        <el-input v-model="title" placeholder="请输入搜索内容">
                            <!--slot="append"作用是将按钮追加在搜索框的后面-->
                            <el-button slot="append" icon="el-icon-search" @click="handleSelectLink(title)"></el-button>
                        </el-input>
                    </div>
                    <!--搜索框结束-->
                </el-menu>
            </div>
            <!--蓝色导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <!--轮播图和排行榜开始-->
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-carousel trigger="click" height="430px">
                        <el-carousel-item v-for="item in bannerArr">
                            <img :src="item.url" width="100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
                <el-col :span="6">
                    <el-card style="height: 430px">
                        <h3>
                            <i style="font-weight: bold" class="el-icon-trophy">销量最高</i>
                        </h3>
                        <el-divider></el-divider>
                        <el-table :data="topArr" style="width: 100%">
                            <!--type="index" 让这一列显示成编号-->
                            <el-table-column type="index" label="排名" width="50">
                            </el-table-column>
                            <el-table-column prop="title" label="商品名" width="80">
                            </el-table-column>
                            <el-table-column prop="saleCount" label="销量" width="80">
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
            <!--轮播图和排行榜结束-->
            <!--商品列表开始-->
            <el-row :gutter="20">
                <el-col :span="6" v-for="p in productArr" style="margin-top: 20px">
                    <el-card>
                        <a :href="'/detail.html?id='+p.id">
                            <img class="p_img" :src="p.url" width="100%" height="233" alt="">
                        </a>
                        <div>
                            <a style="text-decoration: none;color: #333;" :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}</p>
                            </a>
                            <div style="color: #666">
                                <span>￥{{p.price}}</span>
                                <s style="font-size: 12px">{{p.oldPrice}}</s>
                                <span style="float: right">销量:{{p.saleCount}}</span>
                            </div>

                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px"></div>
            <div style="height: 100px;background-color: #3f3f3f;
            padding: 30px;text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {//在这里面定义变量
                categoryArr: [],
                bannerArr:[],
                topArr:[{title:"小米手机",saleCount:988},
                    {title:"李宁球鞋",saleCount:708},
                    {title:"毛巾",saleCount:653},
                    {title:"安踏拖鞋",saleCount:553},
                    {title:"阿迪袜子",saleCount:438},
                    {title:"耐克上衣",saleCount:88}],
                productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
                    {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
                    {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
                    {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
                    {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
                    {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
                    {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
                    {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
                    {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
                    {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
                    {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
                    {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}],
                title:""
            }
        },
        created:function (){
            //蓝色导航菜单
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            //轮播图
            axios.get("/banner/select").then(function (response){
                v.bannerArr = response.data;
            })
            //请求所以商品信息
            axios.get("/product/select/index").then(function (response) {
                v.productArr=response.data;
            })
            //请求排行榜信息
            axios.get("/product/select/top").then(function (response){
                v.topArr = response.data;
            })
        },
        methods:{
            handleSelect(index) {
                location.href = "/result.html?id="+index;
            },
            handleSelectLink(name){
                location.href = "/result.html?title="+name;
            }
        }
    })
</script>
</html>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-page-header style="background-color:#0095d7;color:white;line-height: 60px" @back="goBack" content="添加轮播图页面">

  </el-page-header>
  <!--limit限制图片上传的数量-->
  <el-upload
          limit="1"
          action="/upload"
          name="picFile"
          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>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {//在这里面定义变量
        dialogImageUrl: '',
        dialogVisible: false,
        url:""
      }
    },
    methods: {
      goBack(){
        //返回上一页面
        history.back()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        //file.response得到的是文件上传成功时服务器响应的内容(此内容就是图片的路径)
        let url = file.response;
        //发出删除图片的请求
        axios.get("/remove?url="+url).then(function () {
          alert("服务器中文件删除成功!");
           v.url="";
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response,file,fileList){
        //把服务器响应的图片路径 给到Vue的变量
        v.url = response;

      },
      insert(){
          if (v.url==""){
            alert("请选择上传的图片!");
            return;
          }
          //发出添加轮播图的请求
          axios.get("/banner/insert?url="+v.url).then(function () {
            //返回到后台管理页面
            location.href = "/admin.html";
          })
      }
    }
  })
</script>
</html>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-page-header style="background-color:#0095d7;color:white;line-height: 60px" @back="goBack" content="添加商品页面">

  </el-page-header>
  <el-card style="width: 600px;height: 700px;margin: 0 auto;
  background-color: rgba(255,255,255,0.3)">
    <!--label-width设置左侧文本的宽度-->
    <el-form style="width: 500px;margin: 50px auto" label-width="80px">
      <el-form-item label="商品标题">
        <el-input type="text" v-model="p.title" placeholder="请输入商品标题"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input type="text" v-model="p.price" placeholder="请输入商品价格"></el-input>
      </el-form-item>
      <el-form-item label="商品原价">
        <el-input type="text" v-model="p.oldPrice" placeholder="请输入商品原价"></el-input>
      </el-form-item>
      <el-form-item label="销量">
        <el-input type="text" v-model="p.saleCount" placeholder="请输入销量"></el-input>
      </el-form-item>
      <el-form-item label="库存">
        <el-input type="text" v-model="p.num" placeholder="请输入库存"></el-input>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-select placeholder="请选择" v-model="p.categoryId">
          <el-option v-for="c in arr" :label="c.name" :value="c.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
                limit="1"
                action="/upload"
                name="picFile"
                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-item >
        <el-button  type="primary" @click="insert()">添加商品</el-button>
      </el-form-item>
    </el-form>

  </el-card>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {//在这里面定义变量
        dialogImageUrl: '',
        dialogVisible: false,
        p:{
          title:"",
          price:"",
          num:"",
          oldPrice:"",
          saleCount:"",
          url:"",
          categoryId:""
        },
        arr:[]
      }
    },
    created:function (){
      axios.get("/category/select").then(function (response) {
        v.arr=response.data;
      })
    },
    methods: {
      goBack(){
        //返回上一页面
        history.back()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        //file.response得到的是文件上传成功时服务器响应的内容(此内容就是图片的路径)
        let url = file.response;
        //发出删除图片的请求
        axios.get("/remove?url="+url).then(function () {
          alert("服务器中文件删除成功!");
           v.p.url="";
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response,file,fileList){
        //把服务器响应的图片路径 给到Vue的变量
        v.p.url = response;

      },
      insert(){
          if (v.url==""){
            alert("请选择上传的图片!");
            return;
          }
         //发出添加商品的请求
        axios.post("/product/insert",v.p).then(function () {
          //回到后台管理页面
          location.href="/admin.html";
        })
      }
    }
  })
</script>
</html>

1.3.19login.html(登录页面)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body{
      margin: 0;/*去掉自带的8个像素外边距*/
      background-image: url("imgs/bg.jpg");
      /*cover封面 */
      background-size: cover;
      text-align: center;
    }
    h1{
      font-size: 72px;
      color: rgb(0,150,220);
      margin-bottom: 0;
    }
    img{width: 100px}
    h2{
      font-size: 32px;
      color: rgb(0,150,220);
      margin: 0;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>欢迎来到酷鲨商城</h1>
  <img src="imgs/shark.png" alt="">
  <h2>CoolSharkMall</h2>
  <el-card style="width: 600px;height: 300px;margin: 0 auto;
  background-color: rgba(255,255,255,0.3)">
    <!--label-width设置左侧文本的宽度-->
    <el-form style="width: 400px;margin: 50px auto" label-width="60px">
      <el-form-item label="用户名">
        <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button style="position: relative;right: 30px" type="primary" @click="login()">登录</el-button>
      </el-form-item>
    </el-form>

  </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {//在这里面定义变量
        user:{
          username:"",
          password:""
        }
      }
    },
    methods:{
      login(){
        axios.post("/login",v.user).then(function (response) {
          if (response.data==1){
            /*alert("登录成功");*/
            location.href="/";
          }else if(response.data == 2){
            v.$message.error("密码错误")
          }else{
            v.$message.error("该用户不存在")
          }
        })
      }
    }
  })
</script>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu.el-menu--horizontal {
            border-bottom: none;
        }
        .el-table .el-table__cell{
            padding: 0;/*去掉排行榜表格中上下的内边距*/
        }
        .el-table .cell {
            white-space: nowrap;/*让内容在一行中显示，不换行*/
            text-overflow: ellipsis;/*如果文字溢出泽通过省略号展示*/
        }
        .p_img:hover{
            position: relative;
            bottom: 5px;
            /*元素的阴影：x便宜 y偏移 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px grey;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150">
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <span>
          <a href="/">首页</a><el-divider direction="vertical"></el-divider>
          <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
          <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
          <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">帮助</a>
        </span>
            </div>
            <!--蓝色导航菜单开始-->
            <div style="background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                         @select="handleSelect"
                         :default-active="currentIndex"
                         class="el-menu-demo"
                         mode="horizontal"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 10px">
                        <el-input v-model="title" placeholder="请输入搜索内容">
                            <!--slot="append"作用是将按钮追加在搜索框的后面-->
                            <el-button slot="append" icon="el-icon-search" @click="handleSelectLink(title)"></el-button>
                        </el-input>
                    </div>
                    <!--搜索框结束-->
                </el-menu>
            </div>
            <!--蓝色导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">

            <!--商品列表开始-->
            <el-row :gutter="20">
                <el-col :span="6" v-for="p in productArr" style="margin-top: 20px">
                    <el-card>
                        <a :href="'/detail.html?id='+p.id">
                            <img class="p_img" :src="p.url" width="100%" height="233" alt="">
                        </a>
                        <div>
                            <a style="text-decoration: none;color: #333;" :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}</p>
                            </a>
                            <div style="color: #666">
                                <span>￥{{p.price}}</span>
                                <s style="font-size: 12px">{{p.oldPrice}}</s>
                                <span style="float: right">销量:{{p.saleCount}}</span>
                            </div>

                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px"></div>
            <div style="height: 100px;background-color: #3f3f3f;
            padding: 30px;text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {//在这里面定义变量
                categoryArr: [],
                productArr:[],
                title:"",
                currentIndex:""
            }
        },
        created:function (){
            //亲求所有分类
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            let uri = location.search.split("=")[0];
            if (location.search.indexOf("id")!=-1){
                axios.get("/product/selectByCid"+location.search).then(function (response) {
                    v.productArr = response.data;
                })
                //在created方法中需要访问data里面的变量时需要使用this.变量名的方式
                //因为此时Vue对象还未创建完成还没有把实例化的对象赋值给v变量，
                //所以不能直接方位v
                //把地址栏中的分类id取出
                this.currentIndex = location.search.split("=")[1];
            }else if (location.search.indexOf("title")!=-1){
                axios.get("/product/selectByName"+location.search).then(function (response) {
                    v.productArr = response.data;
                })
            }


        },
        methods:{
            handleSelect(index) {
                axios.get("/product/selectByCid?id="+index).then(function (response) {
                    v.productArr = response.data;
                })
            },
            handleSelectLink(title){
                axios.get("/product/selectByName"+location.search).then(function (response) {
                    v.productArr = response.data;
                })
            }
        }
    })
</script>
</html>

1.3.21application.properties(配置文件)

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

原文链接：https://blog.csdn.net/TheNewSystrm/article/details/125898841