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

最新推荐文章于 2022-10-20 17:43:21 发布

程序猿 Monkey

最新推荐文章于 2022-10-20 17:43:21 发布

阅读量1.4k

点赞数 1

文章标签： vue.js 前端 javascript

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

版权

本文详细介绍了酷莎商城的后端实现过程，包括登录功能、首页分类和轮播图展示、后台管理页面功能，如添加、删除分类和轮播图，商品分类相关操作，排行榜展示，商品详情及搜索功能等。涉及的技术包括Vue.js、前端和JavaScript，以及多个控制器、实体类和数据库操作。

摘要由CSDN通过智能技术生成

1.酷鲨商城

1.1酷鲨商城项目步骤

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

create database cs charset=utf8;
use cs;
create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50));
insert into user values(null,'admin','123456','管理员');

1.1.1登录功能步骤:

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

1.1.2首页展示分类步骤

建分类表和插入数据

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

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

1.1.3首页展示轮播图步骤:

建表并插入数据

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

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

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

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

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

1.1.5添加分类步骤:

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

1.1.6删除分类步骤:

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

1.1.7删除轮播图步骤:

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

1.1.8添加轮播图步骤:

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

1.1.9商品分类相关

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

1.1.10删除商品

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

1.1.11排行榜展示

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

1.1.12查看详情页面步骤:

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

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

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

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

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

1.1.15搜索功能步骤:

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

1.2项目目录展示

1.3代码展示

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

package cn.tedu.coolshark.controller;

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

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

@RestController
public class BannerController {
    @Autowired
    BannerMapper mapper;

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

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

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

}

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

package cn.tedu.coolshark.controller;

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

import java.util.List;

@RestController
public class CategoryController {

    @Autowired
    CategoryMapping mapping;

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

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

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

1.3.3ProductController.java(商品控制层)

package cn.tedu.coolshark.controller;

import cn.tedu.coolshark.entitu.Product;
import cn.tedu.coolshark.mapping.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class ProductController {

    @Autowired
    ProductMapper mapper;

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

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

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

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

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

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

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

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

}

1.3.4UploadController.java(文件上传)

package cn.tedu.coolshark.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
public class UploadController {

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

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

}

1.3.5UserController.java(用户控制层)

package cn.tedu.coolshark.controller;

import cn.tedu.coolshark.entitu.User;
import cn.tedu.coolshark.mapping.UserMapping;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

@RestController
public class UserController {

    @Autowired
    UserMapping mapping;

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