SpringBoot整合Mybatis+前端的ElementPlus实现一个简单的商城管理系统！！！ps：”Java小作业“

灰天768

已于 2024-03-14 18:52:04 修改

阅读量453

点赞数 9

文章标签： java 开发语言 spring boot mybatis 前端后端 vue.js

于 2024-03-14 18:51:12 首次发布

本文链接：https://blog.csdn.net/weixin_73733267/article/details/136718702

版权

一.后台实现

后端并没有复杂的实体或者写有复杂的业务，只包含了一些简单的对商品的增删改查，十分的简单！

实现的效果如图

页面也是十分的简单。

1.实体类entity

商品：

package com.example.spgl.entity;

import lombok.Data;

@Data
public class Product  {
    Integer id;//商品编号
    String name;//商品名称
    double price;//商品价格
    Integer content;//商品库存
    String description;//商品描述
}

用户：

package com.example.spgl.entity;
import lombok.Data;

@Data
public class User {
    private Integer id;//管理员编号
    private String name;//昵称
    private String account;//用户名
    private String password;//密码
}

前端返回的结果封装

package com.example.spgl.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result <T>{
    private Integer code;//状态码 0成功 -1失败
    private String message;//提示信息
    private T data;

    public static <E> Result<E> success(E data){
        return  new Result<>(0,"操作成功",data);
    }
    public  static  Result success(){
        return new Result(0,"操作成功",null);
    }
    public static  Result error(String message){
        return new Result(1,message,null);
    }
}

2.控制层

UserController

package com.example.spgl.controller;

import com.example.spgl.service.UserService;
import com.example.spgl.entity.Result;
import com.example.spgl.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    //注册功能
    @PostMapping("/register")
    public Result register(String username, String password, String name) {
        User u = userService.findByUsername(username);//查询是否有相同名称的用户
        if(u==null){
            userService.register(username,password,name);
            return Result.success();
        }else{
            return Result.error("用户名已被占用");
        }
    }

    @PostMapping("/login")
    //用户登录
    public Result<User> Login(String username,String password){
        User u = userService.findByUsername(username);
        if(u==null){
            return Result.error("用户不存在");
        }else if(u.getPassword().equals(password)){
            return Result.success(u);
        }
        return Result.error("用户名或密码错误");
    }

    @GetMapping("/mylist")
    public Result<User> mylist(String username){
        User u = userService.findByUsername(username);
        return Result.success(u);
    }
}

ProductController

package com.example.spgl.controller;

import com.example.spgl.service.ProjectService;
import com.example.spgl.entity.Product;
import com.example.spgl.entity.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.Arrays;
import java.util.List;

import static com.example.spgl.entity.Result.success;

@RestController
@RequestMapping("/product")
public class ProductController {
    @Autowired
    private ProjectService projectService;

    //添加商品
    @PostMapping("/add")
    public Result add(@RequestBody Product product) {
        projectService.add(product);
        return Result.success();
    }

    //获取所有商品
    @GetMapping("/list")
    public Result<List<Product>> mylist() {
        List<Product> list = projectService.getlist();
        return Result.success(list);
    }

    //删除选中的商品
    @DeleteMapping("/delete")
    public Result<String> delete(@RequestParam int id) {
        projectService.delete(id);
        return Result.success("操作成功");
    }

    @RequestMapping("/pageList")
    public Result<List<Product>> pageList(@RequestParam(value = "curPage") Integer curPage
                                          ,@RequestParam(value = "pageSize") Integer pageSize){
        List<Product> list = projectService.pageList((curPage-1)*pageSize, pageSize);
        if(list!=null&&!list.isEmpty()){
            return Result.success(list);
        }else{
            projectService.reset();
           return Result.error("没有数据");
        }

    }

    @GetMapping("/getCount")
    public Result<Integer> getCount(){
        int count = projectService.getCount();
        return Result.success(count);
    }

    @PostMapping("/update")
    public Result<String> update(@RequestBody Product product){
        projectService.update(product);
        return Result.success("修改成功");
    }

    @GetMapping("/selectbyid")
    public Result<Product> selectById(@RequestParam int id){
        Product product = projectService.selectById(id);
        return Result.success(product);
    }
    @PostMapping("/deleteproducts")
    public Result<String> deleteProducts(@RequestBody String ids) throws UnsupportedEncodingException {
        // 去掉前后的方括号
        ids = ids.substring(1, ids.length() - 1);
        // 解码
        String TrueIds = URLDecoder.decode(ids, "UTF-8");
        System.out.println(TrueIds);
        // 调用service进行处理
        projectService.deleteProducts(TrueIds);
        return Result.success("删除成功");
    }

}

商品的控制层包含简单的批量删除和分页查询

3.Mapper

我使用的是注解的方式，比较简单，不容易报各种类型的错误，因为总是有mybatis和springboot版本不适配的问题导致各种各样类型问题的出现......

ProductMapper

package com.example.spgl.mapper;

import com.example.spgl.entity.Product;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface ProductMapper {
    @Select("SELECT * FROM `product`")
    List<Product> list();
    @Insert("insert into product(name,content,price,description) values (#{name},#{content},#{price},#{description})")
    void add(Product product);
    @Delete("delete from product where id=#{id}")
    void delete(int id);

    @Select("select * from product limit #{curPage},#{pageSize}")
    List<Product> pageList(@Param("curPage") Integer curPage,@Param("pageSize") Integer pageSize);

    //获取记录总数 用于分页查询
    @Select("select count(*) from product")
    int getCount();

    //修改商品
    @Update("update product set name = #{name}, content = #{content}, price = #{price}, description = #{description} where id = #{id}")
    void update(Product product);
    //根据id查信息
    @Select("select * from product where id = #{id}")
    Product selectById(int id);

    //批量删除操作
   @Delete("delete from product where id in (${ids})")
    void deleteByIds(@Param("ids") String ids);
   //重置数据库，数据库所有记录删除后进行重置操作
    @Update("ALTER TABLE product AUTO_INCREMENT = 1")
    void reset();
}

usermapper

package com.example.spgl.mapper;

import com.example.spgl.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapper {
    @Insert("insert into user(username,password,name)values(#{username},#{password},#{name})")
    void add(String username, String password, String name);
    @Select("select * from user where username=#{username}")
    User findByUsername(String username);
    //获取用户的昵称
}

就写了简单的注册和登录来使用一下

4.Pom.xml参考

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>spgl</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>spgl</name>
    <description>spgl</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.3</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>3.0.3</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

二.前端代码Vue3+ElementPlus

前端主要使用了Vue3进行开发，因为我的Html学的不精，Vue3的语法比较简单易学，而且有ElementPlus容易上手

1.登录界面

<script setup>
import { ref } from 'vue'
import {ElMessage} from "element-plus";
import {loginService, registerService} from "@/api/user.js";
import {usetokenstore} from "@/stors/token.js";
import router from "@/router/index.js";
// import { ElMessage } from 'element-plus'
const loginData = ref({
  username:"",
  password:"",
  name:""
})
const result01 = ref({
  code:"",
  message:"",
})
const tokenstore = usetokenstore();
const submit=async()=>{

  let result = await loginService(loginData.value);
  ElMessage.success(result.msg? result.msg:"登录成功");
  console.log(result.data)
  //使用将token储存在pinia中
  tokenstore.setToken(result.data)
  router.push('/product')

}

</script>

<template>
<body>
  <div id="wrap">
    <div id="top_content">
      <div id="header">
        <div id="topheader">
          <h1 id="title">
            <a href="#">商品管理</a>
          </h1>
        </div>
        <div id="navigation"></div>
      </div>
    </div>
    <div id="content">
      <p id="whereami"></p>
      <h1>管理员登录</h1>
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="loginData"
          status-icon
          label-width="auto"
          class="demo-ruleForm"
      >

        <el-form-item label="管理员账户" prop="account">
          <el-input v-model="loginData.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
              v-model="loginData.password"
              type="password"
              autocomplete="off"
          />
        </el-form-item>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
          <router-link to=register style="margin-right: 50px; order: 0;">管理员注册</router-link>
          <el-button type="primary" @click="submit">登录</el-button>
          <el-button native-type="reset" type="info" style="margin-left: 150px; order: 0;">重置</el-button>
        </div>
        <br>
      </el-form>
    </div>
    <div>
      <div id="footer">
        <div id="footer_bg">
          www.commodityms.com.cn
        </div>
      </div>
    </div>

  </div>

</body>
</template>

2.商品页面

<script setup>
import {usetokenstore} from "@/stors/token.js";
import {onMounted, ref} from "vue";
import {deleteSelectedService, deleteservice, getpagecount, listservice, pageListservice} from "@/api/product.js";
import * as row from "element-plus/es/locale/index";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import router from "@/router/index.js";

const token = usetokenstore();
let userData = ref({
  username:"",
  password:"",
  name:""
})
userData.value = token.token
let name = userData.value.name;

let productData =ref([
    {
      "id":"1",
      "name":"1",
      "price":"1",
      "content":"1",
      "description":"1"
    }
])



let curPage = ref(1);
let pageSize = ref(3);



const productList =async(curPage,pageSize)=>{
  let result= await pageListservice(curPage.value,pageSize.value)
 productData.value=result.data
}
productList(curPage,pageSize);
const deleteproduct = (id) => {

  ElMessageBox.confirm(
      '你确认删除该文章吗',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //用户点击了确认
        let result = await deleteservice(id)
        ElMessage.success(result.message?result.message:'删除成功')
        //再次调用list
        productList(curPage,pageSize);
      })
      .catch(() => {
        //用户点击了取消
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

//分页操作


let recordCount = ref(0)
let pageCount = ref(0)
let page = pageCount.value;
// 定义获取记录总数的函数
const getCount = async () => {
  try {
    let result = await getpagecount();
    recordCount.value = result.data;
    console.log("函数内部输出：" + recordCount.value);

    // 在获取数据后执行后续操作
    handleDataAfterCount();
  } catch (error) {
    console.error("数据获取失败：", error);
  }
}

const handleSizeChange = () => {
  console.log(pageSize.value+"页面大小")
  productList(curPage,pageSize);
}
const handleCurrentChange = () => {
  console.log(curPage.value+"当前页")
  productList(curPage,pageSize);
}

const handleDataAfterCount = () => {
  pageCount.value = Math.ceil(recordCount.value / pageSize.value)
  console.log(pageCount.value)
}
getCount();
const alertProduct=(row)=>{
  router.push({ name: 'updateProduct', params: { selectid: row } });
  console.log(row)
}

let selectProducts = ref([]);
let ids;
let encodedIds;
const handleSelectChange = (selectRows) => {
  selectProducts.value = selectRows.map(row => row.id);
}

// 修改deleteproducts函数
const deleteproducts = async() => {
  try {
    let result = await deleteSelectedService(selectProducts.value);
    return result;
  } catch (error) {
    console.error(error);
    return { message: '删除失败' };
  }
}

const deleteSelected = () => {
  ElMessageBox.confirm(
      '你确认删除该商品吗',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    let result = await deleteproducts();
    ElMessage.success(result.message ? result.message : '删除成功');
    //再次调用list
    productList(curPage, pageSize);
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
</script>

<template>
<body>
<div id="wrap">
  <div id="top_content">
    <div id="header">
      <div id="topheader">
        <h1 id="title">
          <a href="#">商品管理</a>
        </h1>
      </div>
      <div id="navigation"></div>
    </div>
  </div>
  <div id="content">
    <p id="whereami"></p>
    <h1>欢迎{{name}}</h1>
    <el-button type="danger" @click="deleteSelected">删除选中</el-button>

    <el-table :data="productData" style="width: 100%" @selection-change="handleSelectChange">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="name" label="商品名" width="150"/>
      <el-table-column fixed prop="price" label="价格(¥)" width="60" />
      <el-table-column prop="content" label="库存" width="120" />
      <el-table-column prop="description" label="商品描述" width="150" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{row}" >
          <el-button link type="primary" size="small" @click="() => deleteproduct(row.id)"
          >删除</el-button
          >
          <el-button link type="primary" size="small" @click="alertProduct(row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  <router-link to="/addproduct" style="color: #7BB425">添加商品</router-link>
    <div class="table-pagination">
      <el-pagination
          v-model:current-page="curPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 10, 15]"
          layout="sizes, prev, pager, next, jumper"
          :total="recordCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  <div>
    <div id="footer">
      <div id="footer_bg">
        www.commodityms.com.cn
      </div>
    </div>
  </div>

</div>
</div>
</body>
</template>

就简单的粘贴一下代码，具体的源码可以后台私信我，我可以把gitee发给你。

（简单记录一下我的java作业）

灰天768

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
SpringBoot整合Mybatis+前端的ElementPlus实现一个简单的商城管理系统！！！ps：”Java小作业“

后端并没有复杂的实体或者写有复杂的业务，只包含了一些简单的对商品的增删改查，十分的简单！实现的效果如图页面也是十分的简单。
复制链接

扫一扫