YC-B09(原创)基于springboot,vue网上书城

1. 绪论
   1.  课题的开发背景

随着计算机和网络的快速发展，并且越来越普及，互联网日益成为人们收集信息常用渠道，电子商务开始流行，一种全新的理念不断形成并且快速发展，像国内电商巨头淘宝、京东、苏宁易购、唯品会等电商平台，电子商务顾名思义是指在互联网上进行电子化的商务活动，也就是电子交易，利用Web提供的通信手段在网上进行交易活动, 改变传统经营方式和理念,以前商品的宣传是局限于电视和报纸等，现在网络就成为商家展示自己的商品的另一个平台，并且带来更多效益和降低商家成本，从而给用户带来更多优惠，网上购物不仅可以方便消费者，为用户节省更多时间，网上购物方式已经成为当今新潮流。

1. 1.  课题研究的目的与意义

网上购物是当前互联网发展到一定阶段的产物，也是顺应新的消费方式和技术进步的必然结果。与传统的商店销售方式相比网上购物具有很大优势，不仅能够为商家节省成本，还能给消费者、商家带来双赢的局面。随着经济的不断发展，人们更希望更加方便和快捷的购物方式，在这需求下企业通过网上购物方式，使用先进技术打造一个网上购物平台供用户购买商品。通过对互联网发展以及国内外相关电子商务网站的现状不断进行分析，本次设计主要是基于SpringBoot的淘书吧网上书城网站的设计与实现，主要目的是在Internet网络环境下为用户提供一个网上书城平台，让用户可以浏览、查询、购买和配送等功能一体化的网上书城商城，致力为消费者提供更加人性化全方位服务，努力为用户创造更加亲切、流畅，安全可靠，更加全面商品展示，给消费者带来更多优惠，让消费者足不出户实现送货上门，在线支付或者货到付款的全方位服务，让消费者在网上购物更加安全有保障。

基于springboot,vue网上书城定制版v4.0

本人原创作品，用户前台、系统管理员后台项目完整，无任何bug。

每行代码都是本人自己写，我在代码上面都写有详细注释

开发工具：IDEA

服务器：Tomcat9.0， jdk1.8

项目构建：maven

数据库：mysql5.7

系统分前后台，采用前后端分离

前端技术：vue (vue cli,vue-router,vuex全家桶),elementUI等框架实现

服务端技术：springboot,mybatis-plus

YC-B09(原创)基于springboot,vue网上书城

前台截图：

后台截图： 

<template>
  <div class="login-container" >
    <el-form ref="userForm" :model="loginUser"
             :rules="rules"
             class="demo-ruleForm login-page"
             label-position="left"
             label-width="0px"
             status-icon>
      <h3 class="title" style="text-align: center;">用户登录</h3>
      <el-form-item prop="username">
        <el-input v-model="loginUser.username"
                  auto-complete="off"
                  placeholder="用户名"
                  type="text"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginUser.password"
                  auto-complete="off"
                  placeholder="密码"
                  type="password"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-col :span="18">
          <el-input v-model="loginUser.code" auto-complete="false" class="input-cls" placeholder="点击图片更换验证码" size="small"
                    type="text"></el-input>
        </el-col>
        <el-col :span="6">
          <el-image :src="captchaUrl" style="height: 32px;" @click="updateCaptchaUrl"></el-image>
        </el-col>
      </el-form-item>
      <el-button  style="width:100%;" type="primary" @click="handleSubmit">登录</el-button>
    </el-form>
  </div>
</template>

<script>
import {Loading} from "element-ui";

export default {
  name: "LoginForm",
  data(){
    return{
      captchaUrl: '/captcha?time=' + new Date(),
      loginUser: {
        username: '',
        password: '',
        code: '',
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ]
      },
    }
  },
  methods:{
    //更新验证码
    updateCaptchaUrl() {
      this.captchaUrl = '/captcha?time=' + new Date();
    },
    handleSubmit() {
      let _this = this;
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          //加载
          let loading = Loading.service({fullscreen: true, text: '处理中'});
          this.postRequest('/user/login', this.loginUser).then(resp => {
            loading.close();
            if (resp) {
              //跳转首页
              const tokenStr=resp.obj.tokenHead+resp.obj.token;
              //将token存储到store
              _this.$store.commit('setToken', tokenStr);
              //登录成功跳转，根据路径参数判断是跳转首页或者指定页面
              let path = _this.$route.query.redirect;
              _this.$router.replace((path=='/'|| path==undefined)?'/mallHome':path);
            }
          })
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
  margin-top: 100px;
  margin-bottom: 130px;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 10px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>

package lyp.itjiaochen.club.controller;


import io.swagger.annotations.ApiOperation;
import lyp.itjiaochen.club.pojo.ProductCategory;
import lyp.itjiaochen.club.pojo.dto.RespBean;
import lyp.itjiaochen.club.pojo.dto.RespPageBean;
import lyp.itjiaochen.club.pojo.dto.query.ProductCategoryQueryDto;
import lyp.itjiaochen.club.service.IProductCategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author IT教程资源
 * @since 2023-03-14
 */
@RestController
@RequestMapping("/admin/category")
public class ProductCategoryController {
    @Autowired
    private IProductCategoryService iProductCategoryService;


    @ApiOperation("分页查询商品分类")
    @PostMapping("/getCategoryPage")
    public RespPageBean getCategoryPage(@RequestBody ProductCategoryQueryDto queryDto){
        return iProductCategoryService.getProductCategoryPage(queryDto);
    }

    @ApiOperation("添加商品分类")
    @PostMapping("/addCategory")
    public RespBean addCategory(@RequestBody ProductCategory productCategory){
        if(iProductCategoryService.save(productCategory)){
            return RespBean.success("添加成功!");
        }
        return RespBean.error("添加失败!");
    }

    @ApiOperation("更新商品分类")
    @PutMapping("/updateCategory")
    public RespBean updateCategory(@RequestBody ProductCategory productCategory){
        if(iProductCategoryService.updateById(productCategory)){
            return RespBean.success("更新成功!");
        }
        return RespBean.error("更新失败!");
    }

    @ApiOperation("删除商品分类")
    @DeleteMapping("/deleteCategory")
    public RespBean deleteCategory(@RequestBody ProductCategory productCategory){
        if(productCategory!=null && iProductCategoryService.deleteCategory(productCategory)){
            return RespBean.success("删除成功!");
        }
        return RespBean.error("删除失败!");
    }

}

package lyp.itjiaochen.club.controller;


import io.swagger.annotations.ApiOperation;
import lyp.itjiaochen.club.pojo.Order;
import lyp.itjiaochen.club.pojo.dto.RespBean;
import lyp.itjiaochen.club.pojo.dto.RespPageBean;
import lyp.itjiaochen.club.pojo.dto.query.OrderQueryDto;
import lyp.itjiaochen.club.service.IOrderService;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author IT教程资源
 * @since 2023-04-04
 */
@RestController
@RequestMapping("/admin/order")
public class OrderController {
    @Autowired
    private IOrderService iOrderService;

    @ApiOperation("分页查询订单信息")
    @PostMapping("/getOrderPage")
    public RespPageBean getOrderPage(@RequestBody OrderQueryDto queryDto){
        return iOrderService.getOrderPage(queryDto);
    }

    

    @ApiOperation("更新订单")
    @PostMapping("/updateOrder")
    public RespBean updateOrder(@RequestBody Order orderInfo){
        Order order=new Order();
        BeanUtils.copyProperties(orderInfo,order);
        if(iOrderService.updateById(order)){
            return RespBean.success("操作成功");
        }
        return RespBean.error("操作失败!");
    }

   

    @ApiOperation("删除订单")
    @DeleteMapping("/deleteOrder")
    public RespBean deleteOrder(@RequestBody Order order){
        if(order!=null && iOrderService.removeOrder(order.getOrderNo())){
            return RespBean.success("删除成功!");
        }
        return RespBean.error("删除失败!");
    }

}