JAVA酷鲨商城

已于 2022-10-13 16:22:18 修改
阅读量1.5k 收藏 20
点赞数 5
文章标签： java
于 2022-10-12 16:53:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51486454/article/details/127285011
版权

这里勾选三个依赖

项目结果

控制层

package cn.tedu.cs.controller;

import cn.tedu.cs.entity.Banner;
import cn.tedu.cs.mapper.BannerMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.util.List;

@RestController
public class BannerController {
    @Autowired(required = false)
    BannerMapper mapper;
    //读取application.properties文件中的内容 并赋值给变量
    @Value("${dirPath}")
    private String dirPath;

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

    @RequestMapping("/banner/insert")
    public void insert(String url){
        mapper.insert(url);
    }
    @RequestMapping("/banner/delete")
    public void delete(int id){
        //通过id查询url
        String url = mapper.selectUrlById(id);
        String filePath = dirPath+"/"+url;
        //删除文件
        new File(filePath).delete();
        mapper.deleteById(id);
    }

}

package cn.tedu.cs.controller;

import cn.tedu.cs.entity.Category;
import cn.tedu.cs.mapper.CategoryMapper;
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
    CategoryMapper mapper;
    @RequestMapping("/category/select")
    public List<Category> select(){
        return mapper.select();
    }
    @RequestMapping("/category/delete")
    public void delete(int id){
        mapper.deleteById(id);
    }
    @RequestMapping("/category/insert")
    public void insert(String name){
        mapper.insert(name);
    }

}

package cn.tedu.cs.controller;

import cn.tedu.cs.entity.Product;
import cn.tedu.cs.mapper.ProductMapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
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.Date;
import java.util.List;

@RestController
public class ProductController {
    @Autowired(required = false)
    ProductMapper mapper;

    //读取application.properties文件中的内容 并赋值给变量
    @Value("${dirPath}")
    private String dirPath;

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

    @RequestMapping("/product/select")
    public List<Product> select(){
        return mapper.select();
    }
    @RequestMapping("/product/delete")
    public void delete(int id){
        //通过商品的id查询出商品的图片路径
        String url = mapper.selectUrlById(id);
        //得到完整的文件路径
        String filePath = dirPath+"/"+url;
        //删除文件
        new File(filePath).delete();

        mapper.deleteById(id);
    }

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

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

    @RequestMapping("/product/selectById")
    public Product selectById(int id){
        System.out.println("id = " + id);
        //让浏览量+1
        mapper.updateViewCountById(id);

        return mapper.selectById(id);
    }

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

    @RequestMapping("/product/selectByWd")
    public List<Product> selectByWd(String wd){
        return mapper.selectByWd(wd);
    }

}

package cn.tedu.cs.controller;

import org.springframework.beans.factory.annotation.Value;
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 {
    //读取application.properties文件中的内容 并赋值给变量
    @Value("${dirPath}")
    private String dirPath;

    @RequestMapping("/upload")
    public String upload(MultipartFile picFile) throws IOException {
        System.out.println("picFile = " + picFile);
        //得到文件的原始文件名
        String fileName = picFile.getOriginalFilename();
        //得到文件名的后缀部分    abc.jpg     .jpg
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一的文件夹 UUID.randomUUID()得到唯一标识符 是一个字符串
        fileName = UUID.randomUUID()+suffix;
        System.out.println("新文件名="+fileName);
        //保存文件的文件夹
        File dirFile = new File(dirPath);
        //如果不存在则创建
        if (!dirFile.exists()){
            dirFile.mkdirs();
        }
        //得到文件的完整路径    F:/files/xxxxx.jpg
        String filePath = dirPath+"/"+fileName;
        //把文件保存到filePath这个路径   异常抛出
        picFile.transferTo(new File(filePath));
        //把新的文件名响应出去, 因为删除图片时需要用到
        return fileName;
    }

    @RequestMapping("/remove")
    public void remove(String fileName){
        System.out.println("删除的文件名 = " + fileName);
        String filePath = dirPath+"/"+fileName;
        //删除文件
        new File(filePath).delete();
        System.out.println(filePath);
    }

}

package cn.tedu.cs.controller;

import cn.tedu.cs.entity.User;
import cn.tedu.cs.mapper.UserMapper;
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(required = false)
    UserMapper mapper;

    @RequestMapping("/login")
    public int login(@RequestBody User user, HttpSession session){
        System.out.println("user = " + user);
        User u = mapper.selectByUsername(user.getUsername());
        if (u!=null){
            if (user.getPassword().equals(u.getPassword())){
              session.setAttribute("user",u);
                return 1;//成功
            }
            return 3;//密码错误
        }
        return 2;//用户名不存在
    }
    @RequestMapping("/currentUser")
    public User currentUser(HttpSession session){
        User user = (User) session.getAttribute("user");
        return user;
    }

    @RequestMapping("/logout")
    public void logout(HttpSession session){
        session.removeAttribute("user");
    }
}

 实体类

package cn.tedu.cs.entity;

public class Banner {
    private Integer id;
    private String 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;
    }
}

package cn.tedu.cs.entity;

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


package cn.tedu.cs.entity;

import com.fasterxml.jackson.annotation.JsonFormat;

import java.util.Date;

public class Product {
    private Integer id;
    private String title;
    private String url;
    private Double price;
    private Double oldPrice;
    private Integer saleCount;
    private Integer num;
    private Integer viewCount;
    /*
    * yyyy表示四位年
    * MM表示月
    * dd表示日
    * HH24小时   hh12小时
    * mm表示分钟
    * ss表示秒
    * */
    // 2022年06月22日 16点57分30秒   yyyy/MM/dd HH:mm:ss
    @JsonFormat(pattern = "yyyy年MM月dd日 HH点mm分ss秒",timezone = "GMT+8")
    private Date created;// 导包 java.util
    private Integer categoryId;

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", url='" + url + '\'' +
                ", price=" + price +
                ", oldPrice=" + oldPrice +
                ", saleCount=" + saleCount +
                ", num=" + num +
                ", viewCount=" + viewCount +
                ", created=" + created +
                ", 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 String getUrl() {
        return url;
    }

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

    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 getSaleCount() {
        return saleCount;
    }

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

    public Integer getNum() {
        return num;
    }

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

    public Integer getViewCount() {
        return viewCount;
    }

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

    public Date getCreated() {
        return created;
    }

    public void setCreated(Date created) {
        this.created = created;
    }

    public Integer getCategoryId() {
        return categoryId;
    }

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

package cn.tedu.cs.entity;

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

过滤器

package cn.tedu.cs.filter;

import cn.tedu.cs.entity.User;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/*urlPatterns配置过滤器处理的资源路径*/
@WebFilter(filterName = "MyFilter",urlPatterns = {"/insertProduct.html","/insertBanner.html"})
public class MyFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override //此方法是在请求到资源之前和之后调用的方法
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        //因为要使用子类型中的方法所以需要将父类类型强转成子类类型
        HttpServletRequest ht = (HttpServletRequest) request;
        HttpServletResponse hs = (HttpServletResponse) response;
        //从请求对象中得到Session 再从Session中得到User
        User user = (User) ht.getSession().getAttribute("user");
        if (user==null){//没登录
            //如果没登录则重定向到登录页面
            hs.sendRedirect("/login.html");
        }else{//代表登录了
            chain.doFilter(request, response);//代表运行执行请求的资源
        }

    }
}

 接口

package cn.tedu.cs.mapper;

import cn.tedu.cs.entity.Banner;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface BannerMapper {
    @Select("select * from banner")
    List<Banner> select();

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

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

package cn.tedu.cs.mapper;

import cn.tedu.cs.entity.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 CategoryMapper {
    @Select("select * from category")
    List<Category>select();

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

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

package cn.tedu.cs.mapper;

import cn.tedu.cs.entity.Product;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface ProductMapper {
    @Insert("insert into product values(null,#{title},#{url},#{price},#{oldPrice}," +
            "#{saleCount},#{num},0,#{created},#{categoryId})")
    void insert(Product product);

    //当表字段的名字和封装数据的实体类属性名不一致时,需要通过Result注解指定一下对应关系
    @Select("select id,title,price,sale_count,url from product")
    @Result(column = "sale_count",property = "saleCount")
    List<Product> select();

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

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

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

    @Select("select id,if(length(title)>9,concat(substring(title,1,3),'...'),title) title,sale_count from product order by sale_count desc limit 0,6")
    @Result(column = "sale_count",property = "saleCount")
    List<Product> selectTop();

    @Select("select id,title,url,price,old_price,sale_count,view_count,num,created from product where id=#{id}")
    @Result(column = "sale_count",property = "saleCount")
    @Result(column = "old_price",property = "oldPrice")
    @Result(column = "view_count",property = "viewCount")
    Product selectById(int id);

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

    @Select("select id,title,url,price,old_price,sale_count from product where category_id=#{cid}")
    @Result(column = "sale_count",property = "saleCount")
    @Result(column = "old_price",property = "oldPrice")
    List<Product> selectByCid(int cid);

    @Select("select id,title,url,price,old_price,sale_count from product where title like concat('%',#{wd},'%')")
    @Result(column = "sale_count",property = "saleCount")
    @Result(column = "old_price",property = "oldPrice")
    List<Product> selectByWd(String wd);
}

package cn.tedu.cs.mapper;

import cn.tedu.cs.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapper {
    @Select("select * from user where username=#{username}")
    User selectByUsername(String username);
}

网页

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/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;font-size: 15px">欢迎{{user.nick}}回来!
                    <a href="javascript:void(0)" @click="logout()">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <!--侧边栏开始-->
                <el-menu class="el-menu-vertical-demo"
                        @select="handleSelect">
                    <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%">
                    <!--type="index" 设置当前列展示编号信息-->
                    <el-table-column type="index" label="编号" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="分类名称" width="180">
                    </el-table-column>
                    <el-table-column label="操作" >
                        <!--scope代表的是当前行所包含的数据,里面有当前行对应的位置和对象-->
                        <template slot-scope="scope">
                            <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%">
                    <!--type="index" 设置当前列展示编号信息-->
                    <el-table-column type="index" label="编号" width="180">
                    </el-table-column>
                    <el-table-column label="轮播图" width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" >
                        <!--scope代表的是当前行所包含的数据,里面有当前行对应的位置和对象(scope.row)-->
                        <template slot-scope="scope">
                            <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%">
                    <!--type="index" 设置当前列展示编号信息-->
                    <el-table-column type="index" label="编号" width="180">
                    </el-table-column>
                    <el-table-column prop="title" label="商品标题" width="150"></el-table-column>
                    <el-table-column prop="price" label="价格" width="100"></el-table-column>
                    <el-table-column prop="saleCount" label="销量" width="100"></el-table-column>
                    <el-table-column label="商品图片" width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="150" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" >
                        <!--scope代表的是当前行所包含的数据,里面有当前行对应的位置和对象(scope.row)-->
                        <template slot-scope="scope">
                            <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 -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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 {
                selectedIndex:"1-1",
                categoryArr:[],
                bannerArr:[],
                productArr:[],
                user:{}
            }
        },
       methods:{
           logout(){
             axios.get("/logout").then(function () {
                 location.href="/";//回到首页
             })
           },
           handleSelect(index){
               console.log(index);
               if (index=="1-2"){
                   console.log("添加分类");
                   v.$prompt('请输入分类名称', '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                   }).then(({ value }) => {
                       console.log("分类名:"+value)
                       let name = value;
                       if (name==null){
                           v.$message.error("分类名称不能为空!");
                           return;
                       }
                       //发请求添加分类
                       axios.get("/category/insert?name="+name).then(function () {
                           location.reload();//刷新页面
                       })
                   }).catch(() => {

                   });

               }else if(index=="2-2"){
                   console.log("添加轮播图");
                   location.href = "/insertBanner.html"

               }else if(index=="3-2"){
                   console.log("添加商品");
                   location.href = "/insertProduct.html";
               }else{
                   v.selectedIndex = index;
               }
           },
           categoryDelete(index,category){
               //发出删除分类的请求
               axios.get("/category/delete?id="+category.id).then(function () {
                   //删除成功后 删除数据里面的对象 从而让页面跟着改变
                   //splice(a,b)数组的删除元素方法, a代表下标 b代表数量
                   v.categoryArr.splice(index,1);
               })
           },
           productDelete(index,product){
               //发出删除作品的请求
               axios.get("/product/delete?id="+product.id).then(function () {
                   //删除成功后 删除数组中的内容让页面跟着改变
                   v.productArr.splice(index,1);
               })
           },
           bannerDelete(index,banner){
               //发出删除轮播图的请求
               axios.get("/banner/delete?id="+banner.id).then(function () {
                   //删除成功后 删除数组中的内容让页面跟着改变
                   v.bannerArr.splice(index,1);
               })
           }
       },
       created:function () {
            //发请求获取当前登录的用户信息
           axios.get("/currentUser").then(function (response) {
               v.user = response.data;
               if (response.data==""){
                   //如果没有登录则显示登录页面
                   location.href="/login.html";
               }
           })

           //发请求获取分类数据
           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").then(function (response) {
               v.productArr = response.data;
           })
       }
    })
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
    <style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu{
            /*去掉自带的下边框*/
            border-bottom: 0  !important;
        }
        /*去掉内边距*/
        .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="width: 100%;height: 60px;background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                         :default-active="1" class="el-menu-demo"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff"
                         @select="handleSelect">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 11px">
                        <el-input placeholder="请输入内容" @keydown.native.enter="search()" v-model="wd"  class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></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%">
                    </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.created}}</p>

                    <p style="color: #666;font-size: 15px">
                        销量:{{product.saleCount}} 浏览量:{{product.viewCount}}
                        库存:{{product.num}}
                    </p>
                    <p style="font-size: 25px;font-weight: bold">￥{{product.price}}
                        <span style="font-size: 15px;color: #666">原价:<s>{{product.oldPrice}}</s></span>
                    </p>
                    <!--二维码开始-->
                    <el-row :gutter="20" style="text-align: center">
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <span>扫码购买商品</span>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <span>扫码关注公众号</span>
                        </el-col>
                        <el-col :span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%" alt="">
                            </el-card>
                            <span>扫码下载App</span>
                        </el-col>
                    </el-row>
                    <!--二维码结束-->

                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <!--margin-bottom: -30px让下面的元素盖住本元素-->
            <div style="height: 95px;background-image: url('imgs/wave.png');
            margin-bottom: -30px"></div>
            <div style="height: 100px;font-size: 14px;background-color: #3f3f3f;
            color: #b1b1b1;text-align: center;padding: 30px">
                <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 -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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 {
                categoryArr:[],
                product:{},
                wd:""
            }
        },
       methods:{
            search(){
                //跳转到结果页面
              location.href = "/result.html?wd="+v.wd;
            },
           handleSelect(index,indexPath){
               console.log(index);
               location.href = "/result.html?cid="+index;
           }
       },
       created:function () {
           let id = location.search.split("=")[1];
           //发请求获取商品详情
           axios.get("/product/selectById?id="+id).then(function (response) {
               console.log(response.data);
               v.product = response.data;
           })

           //发请求获取分类数据
           axios.get("/category/select").then(function (response) {
               v.categoryArr = response.data;
           })

       }
    })
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
<style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu{
            /*去掉自带的下边框*/
            border-bottom: 0  !important;
        }
        /*去掉内边距*/
        .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="width: 100%;height: 60px;background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                         :default-active="1" class="el-menu-demo"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff"
                         @select="handleSelect">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 11px">
                        <!--@keydown.native.enter回车键按下事件-->
                        <el-input placeholder="请输入内容" @keydown.native.enter="search()" v-model="wd"  class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></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="300px">
                        <el-carousel-item v-for="b in bannerArr" >
                            <img :src="b.url" alt="" style="width: 100%">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
                <el-col :span="6">
                    <el-card style="height: 300px">
                        <h3><i style="font-weight: bold"
                               class="el-icon-trophy"></i>销量最高</h3>
                        <el-divider></el-divider>

                        <el-table :data="topArr" style="width: 500px">
                            <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">
                    <el-card>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <img :src="p.url" width="233" height="233"  alt="">
                            </a>
                        </div>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;margin-top: 0;height: 40px">{{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>
            <!--margin-bottom: -30px让下面的元素盖住本元素-->
            <div style="height: 95px;background-image: url('imgs/wave.png');
            margin-bottom: -30px"></div>
            <div style="height: 100px;font-size: 14px;background-color: #3f3f3f;
            color: #b1b1b1;text-align: center;padding: 30px">
                <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 -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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 {
                categoryArr:[],
                topArr:[{title:"小米手机",saleCount:562},{title:"李宁球鞋",saleCount:542},
                    {title:"毛巾",saleCount:362},{title:"安踏拖鞋",saleCount:232},
                    {title:"阿迪袜子",saleCount:162},{title:"耐克上衣",saleCount:12}],
                productArr:[],
                bannerArr:[],
                wd:""
            }
        },
       methods:{
           handleSelect(index,indexPath){
               console.log(index);
               //跳转到结果页面并且把分类id传递过去
               location.href = "/result.html?cid="+index;
           },
           search(){
               //跳转到结果页面并且把搜索的关键字传递过去
               location.href = "/result.html?wd="+v.wd;
           }
       },
       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;
           })

       }
    })
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/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-divider></el-divider>
    <el-card>
        <!--添加上传文件的组件-->
        <!--***************************************-->
        <!--action代表提交地址  name代表文件上传时的参数名称
        limit用来限制图片数量-->
        <el-upload
                action="/upload"
                :limit="1"
                name="picFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!--***************************************-->
    </el-card>
    <el-button @click="insert()">发布轮播图</el-button>
</div>
</body>
<!-- import Vue before Element -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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);
               //发请求告诉服务器删除文件夹里面的文件
               //得到要删除的文件名
               let fileName= file.response;
               console.log("文件名:"+fileName);
               axios.get("/remove?fileName="+fileName).then(function (response) {
                   console.log("服务器文件删除完成!");
               })
               v.url="";
           },
           handlePictureCardPreview(file) {
               this.dialogImageUrl = file.url;
               this.dialogVisible = true;
           },
           insert(){
               if (v.url==""){
                   v.$message.error("请选择上传的图片!");
                   return;
               }
               //发出异步请求
               axios.get("/banner/insert?url="+v.url).then(function () {
                   location.href="/admin.html";
               })
           },
           handleSuccess(response, file, fileList){
               console.log("上传文件成功!")
               console.log("response="+response)
               console.log("file="+file);
               v.url = response;
           }
       }
    })
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
    <style>
    </style>
</head>
<body>
<div id="app">
    <!--页头组件-->
    <el-page-header style="background-color: #0095d7;color: white;line-height: 60px" @back="goBack" content="添加商品">
    </el-page-header>
    <el-divider></el-divider>
    <el-card>
        <el-form style="width: 400px;margin: 30px 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.num" 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-select placeholder="请选择" v-model="p.categoryId">
                    <el-option v-for="c in categoryArr"
                               :label="c.name" :value="c.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品图片">
                <!--添加上传文件的组件-->
                <!--***************************************-->
                <!--action代表提交地址  name代表文件上传时的参数名称
                limit用来限制图片数量-->
                <el-upload
                        action="/upload"
                        :limit="1"
                        name="picFile"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                >
                    <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 @click="insert()">发布商品</el-button>
            </el-form-item>
        </el-form>



    </el-card>

</div>
</body>
<!-- import Vue before Element -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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,
                categoryArr:[],
                p:{title:"",price:"",oldPrice:"",num:"",saleCount:"",url:"",categoryId:""}
            }
        },
       created:function () {
            //请求所有分类数据
           axios.get("/category/select").then(function (response) {
               v.categoryArr = response.data;
           })
       },
       methods:{
           goBack(){
               //返回上一页面
               history.back();
           },
           handleRemove(file, fileList) {
               console.log(file, fileList);
               //发请求告诉服务器删除文件夹里面的文件
               //得到要删除的文件名
               let fileName= file.response;
               console.log("文件名:"+fileName);
               axios.get("/remove?fileName="+fileName).then(function (response) {
                   console.log("服务器文件删除完成!");
               })
               v.url="";
           },
           handlePictureCardPreview(file) {
               this.dialogImageUrl = file.url;
               this.dialogVisible = true;
           },
           insert(){
               if (v.p.url==""){
                   v.$message.error("请选择上传的图片!");
                   return;
               }
               //发出异步请求
               axios.post("/product/insert",v.p).then(function () {
                   location.href="/admin.html";
               })
           },
           handleSuccess(response, file, fileList){
               console.log("上传文件成功!")
               console.log("response="+response)
               console.log("file="+file);
               v.p.url = response;
           }
       }
    })
</script>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
    <style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu{
            /*去掉自带的下边框*/
            border-bottom: 0  !important;
        }
        /*去掉内边距*/
        .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="width: 100%;height: 60px;background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                         :default-active="1" class="el-menu-demo"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff"
                         @select="handleSelect">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 11px">
                        <!--@keydown.native.enter回车键按下事件-->
                        <el-input placeholder="请输入内容" @keydown.native.enter="search()" v-model="wd"  class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></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="300px">
                        <el-carousel-item v-for="b in bannerArr" >
                            <img :src="b.url" alt="" style="width: 100%">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
                <el-col :span="6">
                    <el-card style="height: 300px">
                        <h3><i style="font-weight: bold"
                               class="el-icon-trophy"></i>销量最高</h3>
                        <el-divider></el-divider>

                        <el-table :data="topArr" style="width: 500px">
                            <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">
                    <el-card>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <img :src="p.url" width="233" height="233"  alt="">
                            </a>
                        </div>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;margin-top: 0;height: 40px">{{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>
            <!--margin-bottom: -30px让下面的元素盖住本元素-->
            <div style="height: 95px;background-image: url('imgs/wave.png');
            margin-bottom: -30px"></div>
            <div style="height: 100px;font-size: 14px;background-color: #3f3f3f;
            color: #b1b1b1;text-align: center;padding: 30px">
                <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 -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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 {
                categoryArr:[],
                topArr:[{title:"小米手机",saleCount:562},{title:"李宁球鞋",saleCount:542},
                    {title:"毛巾",saleCount:362},{title:"安踏拖鞋",saleCount:232},
                    {title:"阿迪袜子",saleCount:162},{title:"耐克上衣",saleCount:12}],
                productArr:[],
                bannerArr:[],
                wd:""
            }
        },
        methods:{
            handleSelect(index,indexPath){
                console.log(index);
                //跳转到结果页面并且把分类id传递过去
                location.href = "/result.html?cid="+index;
            },
            search(){
                //跳转到结果页面并且把搜索的关键字传递过去
                location.href = "/result.html?wd="+v.wd;
            }
        },
        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;
            })

        }
    })
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/index.css">
<style>
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .el-menu{
            /*去掉自带的下边框*/
            border-bottom: 0  !important;
        }
        /*去掉内边距*/
        .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="width: 100%;height: 60px;background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                         :default-active="activeIndex" class="el-menu-demo"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff"
                         @select="handleSelect">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    <!--搜索框开始-->
                    <div style="float: right;margin-top: 11px">
                        <el-input placeholder="请输入内容" @keydown.native.enter="search()" v-model="wd"  class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></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">
                    <el-card>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <img :src="p.url" width="233" height="233"  alt="">
                            </a>
                        </div>
                        <div>
                            <a :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;margin-top: 0;height: 40px">{{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>
            <!--margin-bottom: -30px让下面的元素盖住本元素-->
            <div style="height: 95px;background-image: url('imgs/wave.png');
            margin-bottom: -30px"></div>
            <div style="height: 100px;font-size: 14px;background-color: #3f3f3f;
            color: #b1b1b1;text-align: center;padding: 30px">
                <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 -->
<!--引入Vue框架-->
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/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 {
                categoryArr:[],
                productArr:[],
                activeIndex:"",
                wd:""
            }
        },
       methods:{
            search(){
                //发出搜索请求
                axios.get("/product/selectByWd?wd="+v.wd).then(function (response) {
                    v.productArr = response.data;
                })
            },
           handleSelect(index,indexPath){
               console.log(index);
               //直接请求点击分类相关的商品
               axios.get("/product/selectByCid?cid="+index).then(function (response) {
                   v.productArr = response.data;
               })

           }
       },
       created:function () {
           //发请求获取分类信息
           axios.get("/category/select").then(function (response) {
               //此处代码Vue对象早已初始化完成,因为此处是请求数据回来之后执行的代码
                v.categoryArr = response.data;
           })
           //判断地址栏中包含cid还是wd
           if (location.search.indexOf("cid")!=-1){//包含cid
               //得到地址栏中的分类id
               let cid = location.search.split("=")[1];
               //created方法是Vue对象初始化过程中调用的方法,此时Vue对象还没初始化完成
               //所以不能通过v变量进行访问, 此时访问Vue对象只能通过this关键字访问
               this.activeIndex = cid;
               //发请求获取和此分类相关的商品信息
               axios.get("/product/selectByCid?cid="+cid).then(function (response) {
                   v.productArr = response.data;
               })
           }else if(location.search.indexOf("wd")!=-1){//包含wd
                // location.search       ?wd=xxx
               axios.get("/product/selectByWd"+location.search).then(function (response) {
                   v.productArr = response.data;
               })

           }



       }
    })
</script>
</html>

数据库和表的创建

创建cs数据库
create database cs charset=utf8;
use cs;
创建用户表
create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50))charset=utf8;
插入用户表数据
insert into user values(null,'admin','123456','管理员');
创建分类表
create table category(id int primary key auto_increment,name varchar(20))charset=utf8;
插入分类表数据
insert into category values(null,'精彩活动'),(null,'当季女装'),(null,'品牌男装'),(null,'医药健康'),(null,'美妆彩妆');
创建广告表
create table banner(id int primary key auto_increment,url varchar(255));
插入图片数据
insert into banner values(null,'/imgs/b1.jpg'),(null,'/imgs/b2.jpg'),(null,'/imgs/b3.jpg'),(null,'/imgs/b4.jpg');
创建商品表
create table product(id int primary key auto_increment,title varchar(100),url varchar(200),price double(10,2),old_price double(10,2),sale_count int,num int,view_count int,created timestamp,category_id int)charset=utf8;

 在application.properties里配置连接数据库相关配置

#用户名
spring.datasource.username=root
#密码
spring.datasource.password=root
#url
spring.datasource.url=jdbc:mysql://localhost:3306/cs?characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false

spring.servlet.multipart.max-file-size=10MB
#配置自定义的内容
dirPath=D:/files
#配置静态资源文件夹
spring.web.resources.static-locations=file:${dirPath},classpath:static
#如果创建工程时用的不是spring官方地址 而是阿里云地址请写下面的配置内容
#spring.resources.static-locations=file:${dirPath},classpath:static

持续更新中...

后面会上传相关笔记

哪些有问题欢迎大家评论！

江阿哥
关注
第五阶段：酷鲨商城项目——微服务
weixin_59404863的博客
06-28 1932
微服务项目
微服务之秒杀
gtxy_2015的博客
10-18 518
预热中完成了秒杀商品sku库存数,spu随机码(布隆过滤器)保存在redis中的操作, 也完成了查询秒杀商品列表,和显示秒杀商品详情的方法, 下面要开始进行秒杀商品生成订单的操作, 如果用户选择商品规格(sku)提交订单,那么就要按照提交秒杀订单的业务流程处理, 秒杀提交订单和普通订单的区别。将秒杀成功信息发送到消息队列的原因:,秒杀成功信息用于统计秒杀数据,是秒杀结束后才需要统计的, 所以在秒杀并发高时,消息队列的发送可以延缓,在服务器不忙时,再运行(削峰填谷)
第四阶段01-酷鲨商城项目准备
aiheshuicxy的博客
02-27 1526
第四阶段01-酷鲨商城项目准备
JSD-2204-酷鲨商城(管理商品模块)-Day02
TheNewSystrm的博客
07-25 2368
JSD-2204-酷鲨商城(管理商品模块)-Day02
JSD-2204-Elasticsearch-SpringData-酷鲨商城概述-Day07
TheNewSystrm的博客
08-26 2282
JSD-2204-Elasticsearch-SpringData-酷鲨商城概述-Day06
JSD-2204-(业务逻辑开发)-发酷鲨商城front模块-开发购物车功能-Day09
TheNewSystrm的博客
08-30 638
JSD-2204-(业务逻辑开发)-发酷鲨商城front模块-开发购物车功能-Day09
Day01酷鲨商城第一天
最新发布
m0_62774456的博客
04-18 173
1\csmall-product springboot 2.5.x版本2\导入sql文件 mall_pms,链接3\添加依赖4\ properties文件导入配置5\ 在test包下，测试代码能否运行6\MyBatis 的基础配置Mapper 接口上添加@Mapper注解【推荐】 配置类上添加@MapperScan注解指定Mapper接口的根包8\ 在application.properties中添加配置，指定xml文件的位置9\关于Lombok框架。
酷鲨商城前台开发
weixin_51140686的博客
03-30 595
在给大家提供的csmall-jsd2203项目的doc文件夹下的sql文件夹中有多个sql语句文件分别去运行它们,我们可以获得酷鲨商城前台的数据库信息了我们每个微服务项目原则上只操作少于一个数据库。
【微服务】Day17（酷鲨商城前台业务总结、布隆过滤器、Docker）
shortcutsuccess的博客
10-20 1373
布隆过滤器能够实现使用较少的空间来判断一个指定的元素是否包含在一个集合中布隆过滤器并不保存这些数据,所以只能判断是否存在,而并不能取出该元素使用情景:凡是判断一个元素是否在一个集合中的操作,都可以使用它布隆过滤器常见使用场景idea中编写代码,一个单词是否包含在正确拼写的词库中(拼写不正确划绿线的提示)公安系统,根据身份证号\人脸信息,判断该人是否在追逃名单中爬虫检查一个网址是否被爬取过…所谓的虚拟机,就是在当前计算机系统中,又开启了一个虚拟系统这个虚拟系统,我们要安装Linux系统。
JSD-2204-酷莎商城(后端)-Day17,18
TheNewSystrm的博客
07-20 1487
JSD-2204-酷莎商城(后端)-Day17,18
商城项目介绍1
08-03
引入Redis中间件服务将常用数据对象储存在Redis中，极大提升数据访问速度。高可用和分布式，保证Redis节点的故障发现和故障自动转移。项目全程使用线程安全
网上商城达内版完整资料
05-23
达内完整网上商城资料，包括部分代码、设计、和测试
第四阶段：06My-csmall-server酷鲨商城
weixin_59404863的博客
06-15 1220
框架
酷鲨商城登录页面
m0_69712602的博客
08-31 608
酷鲨商城登录页面
JSD-2204-(业务逻辑开发)-秒杀业务-酷鲨商城前台业务总结-Day16
TheNewSystrm的博客
09-08 743
JSD-2204-(业务逻辑开发)-秒杀业务-酷鲨商城前台业务总结-Day16
酷鲨商城后台管理界面
m0_69712602的博客
09-03 1208
酷鲨商城后台管理界面
商城-1(开发分类功能)
weixin_49866355的博客
10-15 549
分类功能实现逻辑 查询全部分类的业务重点在构建三级分类树结构
学习笔记-总结
TheNewSystrm的博客
04-21 2678
笔记总结
Java实现的网上商城系统设计与实现
"基于Java的网上商城系统的设计与实现(论文)附件" 这篇论文涉及的知识点主要集中在基于Java的网上商城系统的开发与实现上，涵盖了软件工程、电子商务、Java编程、数据库设计以及网络技术等多个领域。 1. **Java...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值