JAVA酷鲨商城

这里勾选三个依赖

项目结果

控制层

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查询urlString 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 {@AutowiredCategoryMapper 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);//让浏览量+1mapper.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     .jpgString 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.jpgString 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;@Overridepublic 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.utilprivate Integer categoryId;@Overridepublic 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;@Overridepublic 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中得到UserUser 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-uploadaction="/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-uploadaction="/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还是wdif (location.search.indexOf("cid")!=-1){//包含cid//得到地址栏中的分类idlet 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=xxxaxios.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=falsespring.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

持续更新中...

后面会上传相关笔记

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