springboot+mp完成简单案例

IT光2023-08-27 8:40

目录

1.框架搭建

2.前端搭建

3.后端编写

需求：完成简单的连表条件查询以及添加即可

1.框架搭建

1.创建springboot项目

2.相关依赖

XML 复制代码 
 <!--web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mysql依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--lombok依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--MyBatis-plus依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

3.配置文件

XML 复制代码 
#数据源信息
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/db_saas_fbms?serverTimezone=Asia/Shanghai&characterEncoding=UTF8
spring.datasource.username=root
spring.datasource.password=123456789
#指定映射文件的路径--链表操作
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
#sql日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

4.数据库：

sql 复制代码 
/*
 Navicat Premium Data Transfer

 Source Server         : wqg1
 Source Server Type    : MySQL
 Source Server Version : 50731
 Source Host           : localhost:3306
 Source Schema         : db_saas_fbms

 Target Server Type    : MySQL
 Target Server Version : 50731
 File Encoding         : 65001

 Date: 25/08/2023 10:20:37
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for ums_agent
-- ----------------------------
DROP TABLE IF EXISTS `ums_agent`;
CREATE TABLE `ums_agent`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户名',
  `levelid` int(10) NOT NULL COMMENT '等级编号(外键关联代理商等级表)',
  `nickname` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '昵称',
  `phonenum` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '电话',
  `status` int(10) NULL DEFAULT NULL COMMENT '账号状态(1：正常，2：禁用)',
  `create_time` date NULL DEFAULT NULL COMMENT '创建时间',
  `icon` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '头像路径',
  `growth` int(10) NULL DEFAULT NULL COMMENT '成长值',
  `integration` int(10) NULL DEFAULT NULL COMMENT '积分',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of ums_agent
-- ----------------------------
INSERT INTO `ums_agent` VALUES (1, 'admin01', 1, '代理01', '15346342611', 1, '2023-08-25', 'www.baidu.com', 100, 10);
INSERT INTO `ums_agent` VALUES (2, 'admin02', 2, '代理02', '15346342622', 1, '2023-08-25', 'www.baidu.com', 100, 10);

-- ----------------------------
-- Table structure for ums_agent_level
-- ----------------------------
DROP TABLE IF EXISTS `ums_agent_level`;
CREATE TABLE `ums_agent_level`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',
  `name` varchar(30) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '等级名称',
  `note` varchar(200) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '描述说明',
  `growth_point` int(10) NULL DEFAULT NULL COMMENT '等级成长值临界点',
  `priviledge_birthday` int(10) NULL DEFAULT NULL COMMENT '是否有生日特权',
  `addtime` date NULL DEFAULT NULL COMMENT '添加时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of ums_agent_level
-- ----------------------------
INSERT INTO `ums_agent_level` VALUES (1, '白银', '等级1', 1, NULL, '2023-08-25');
INSERT INTO `ums_agent_level` VALUES (2, '黄金', '等级2', 1, NULL, '2023-08-25');
INSERT INTO `ums_agent_level` VALUES (3, '铂金', '等级3', 1, NULL, '2023-08-25');
INSERT INTO `ums_agent_level` VALUES (4, '王者', '等级4', 1, NULL, '2023-08-25');

SET FOREIGN_KEY_CHECKS = 1;

5.实体类

java 复制代码 
@Data
@TableName(value ="ums_agent")
public class Agent implements Serializable {

    /**
    * 编号
    */
    @TableId(type = IdType.AUTO)
    private Integer id;
    /**
    * 用户名
    */
    private String username;
    /**
    * 等级编号(外键关联代理商等级表)
    */
    private Integer levelid;
    /**
    * 昵称
    */
    private String nickname;
    /**
    * 电话
    */
    private String phonenum;
    /**
    * 账号状态(1：正常，2：禁用)
    */
    private Integer status;
    /**
    * 创建时间
    */
    private Date createTime  ;
    /**
    * 头像路径
    */
    private String icon ;
    /**
    * 成长值
    */
    private Integer growth;
    /**
    * 积分
    */
    private Integer integration;
    @TableField(exist = false)
    private AgentLevel agentLevel;

}
java 复制代码 
@Data
@TableName(value ="ums_agent_level")
public class AgentLevel implements Serializable {

    /**
    * 编号
    */
    @TableId(type = IdType.AUTO)
    private Integer id;
    /**
    * 等级名称
    */
    private String name;
    /**
    * 描述说明
    */
    private String note;
    /**
    * 等级成长值临界点
    */
    private Integer growthPoint;
    /**
    * 是否有生日特权
    */
    private Integer priviledgeBirthday;
    /**
    * 添加时间
    */
    private Date addtime;


}

2.前端搭建

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/jquery.min.js"></script>
  <script src="/js/vue.js"></script>
  <script src="/js/axios.min.js"></script>
  <link rel="stylesheet" href="/css/index.css">
  <script src="/js/index.js"></script>
</head>
<body>

<div id="app">
  <div style="width: 800px;margin: 0px auto">
    <el-input v-model="input" placeholder="用户名或者电话" prefix-icon="el-icon-search"
              style="margin: 0px auto ; width: 400px"></el-input>
    <el-button   @click="findAll()">查询</el-button>
    <el-button   @click="openDialog">添加</el-button>
  </div>

  <!--布局-->
  <div>
    <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
    >
      <el-table-column
              prop="username"
              label="用户名"
              width="180">
      </el-table-column>
      <el-table-column
              prop="nickname"
              label="昵称"
              width="180">
      </el-table-column>
      <el-table-column
              prop="agentLevel.name"
              label="等级"
              width="180">
      </el-table-column>
      <el-table-column
              prop="phonenum"
              label="电话"
              width="180">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status===1">正常</span>
          <span v-if="scope.row.status===2">禁用</span>
        </template>
      </el-table-column>
      <el-table-column
              prop="growth"
              label="成长值"
              width="150px"
      >

      </el-table-column>
      <el-table-column
              prop="integration"
              label="积分">
      </el-table-column>
    </el-table>

    <!--添加表单-->
    <el-dialog title="代理商添加" :visible.sync="dialogFormVisible">
      <el-form :model="formInfo">
        <el-form-item label="用户名">
          <el-input v-model="formInfo.username"></el-input>
        </el-form-item>
        <!--动态下拉选框-->
        <el-form-item label="等级">
          <el-select v-model="formInfo.levelid" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formInfo.nickname"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formInfo.phonenum"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="formInfo.integration"></el-input>
        </el-form-item>
        <el-form-item label="成长值">
          <el-input v-model="formInfo.growth"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="formInfo.status" label="1">正常</el-radio>
          <el-radio v-model="formInfo.status" label="2">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</body>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      input: "",
      tableData: [],
      options: [],
      dialogFormVisible: false,
      formInfo: {},

    },
    created() {
      this.findAll();
      this.findPosition();
      ;

    },
    methods: {

      // 根据状态回显
      binConter(status) {
        switch (status) {
          case 1:
            return "正常"
            break;
          case 2:
            return "禁用"
            break;
        }
      },
      // 打开会话弹框
      openDialog() {
        this.dialogFormVisible = true;
      },
      // 添加
      insert() {
        console.log(this.formInfo)
        axios.post("agent/insert", this.formInfo).then(Result => {
          if (Result.data.code == 200) {
            this.$message.success("添加成功");
            this.findAll();
          }
        })
        //清空
        this.formInfo='';
        //关闭
        this.dialogFormVisible = false;
      },
      // 查询所有
      findAll() {
        console.log(this.input)
        axios.post("/agent/query?input=" + this.input).then(Result => {
          this.tableData = Result.data.data;
          console.log(this.tableData)
        })
      },
      //查询等级
      findPosition() {
        axios.get("/agentLevel/query").then(Result => {
          this.options = Result.data.data;
        })
      }
    }
  })
</script>

</html>

3.后端编写

1.设置统一返回类型

java 复制代码 
@NoArgsConstructor
@AllArgsConstructor
@Data
public class Result<T> {
    //表示状态码
    private Integer code;
    //消息提示
    private String msg;
    //响应的数据内容
    private Object data;
}

2.controller层

java 复制代码 
@RestController
@RequestMapping("/agent")
public class AgentController {
    @Autowired
    private AgentService agentService;

    /**
     * 查询所有
     * @param input
     * @return
     */
    @PostMapping("/query")
    public Result<List<Agent>> agentList(@RequestParam String input) {
        List<Agent> agentList = agentService.agentList(input);
        return new Result<>(200,"成功",agentList);
    }

    /**
     * 添加
     * @param agent
     * @return
     */
    @PostMapping("/insert")
    public Result insert(@RequestBody Agent agent){
        agent.setIcon("www.baidu.com");
        Date date = new Date();
        agent.setCreateTime(date);
        boolean save = agentService.save(agent);
        return new Result<>(200,"成功",null);
    }

}
java 复制代码 
@RestController
@RequestMapping("/agentLevel")
public class AgentLevelController {
    @Autowired
    private AgentLevelService agentLevelService;

    /**
     * 查询等级
     * @return
     */
    @GetMapping("/query")
    public Result select(){
        return agentLevelService.select();
    }
}

3.service层

java 复制代码 
public interface AgentService extends IService<Agent> {

    /**
     * 查询所有
     * @param input
     * @return
     */
    List<Agent> agentList(String input);
}
java 复制代码 
public interface AgentLevelService {
    /**
     * 查询等级
     * @return
     */
    Result select();
}

5.serviceImpl层

java 复制代码 
@Service
public class AgentServiceImpl extends ServiceImpl<AgentDao,Agent> implements AgentService {

    @Autowired
    private AgentDao agentDao;

    /**
     * 查询所有
     * @param input
     * @return
     */
    @Override
    public List<Agent> agentList(String input) {
        return agentDao.agentList(input);
    }
}
java 复制代码 
@Service
public class AgentLevelServiceImpl implements AgentLevelService {


    @Autowired
    private AgentLevelDao agentLevelDao;

    /**
     * 查询等级
     * @return
     */
    @Override
    public Result select() {
        List<AgentLevel> agentLevels = agentLevelDao.selectList(null);

        return new Result<>(200,"查询成功",agentLevels);
    }
}

6.dao层

java 复制代码 
@Mapper
public interface AgentDao extends BaseMapper<Agent> {
    /**
     * 查询所有
     * @param input
     * @return
     */
    List<Agent> agentList(String input);
}
java 复制代码 
@Mapper
public interface AgentLevelDao extends BaseMapper< AgentLevel> {
}
java 复制代码 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.wangqiguang.fbms.dao.AgentDao">

    <!--查询所有+条件查询-->
    <resultMap id="agentList01" type="com.wangqiguang.fbms.pojo.Agent" autoMapping="true">
        <id property="id" column="id"/>
        <association property="agentLevel" javaType="com.wangqiguang.fbms.pojo.AgentLevel" autoMapping="true">
            <id property="id" column="id"/>
        </association>
    </resultMap>
    <select id="agentList" resultMap="agentList01">
        SELECT
            a.id,
            a.username,
            a.levelid,
            a.nickname,
            a.phonenum,
            a.`status`,
            a.create_time,
            a.icon,
            a.growth,
            a.integration,
            e.id,
            e.`name`,
            e.note,
            e.priviledge_birthday,
            e.growth_point,
            e.addtime
        FROM
            ums_agent AS a
                INNER JOIN
            ums_agent_level AS e
            ON
                a.levelid = e.id
        <where>
            <if test=" input!=null and input!=''">
                a.username like concat('%',#{input},'%')
                or
                a.phonenum like concat('%',#{input},'%')
            </if>
        </where>
    </select>

</mapper>

完成

相关推荐
许野平37 分钟前
Rust： 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
无极程序员1 小时前
PHP常量
android·ide·android studio
萌面小侠Plus2 小时前
Android笔记(三十三)：封装设备性能级别判断工具——低端机还是高端机
android·性能优化·kotlin·工具类·低端机
慢慢成长的码农2 小时前
Android Profiler 内存分析
android
大风起兮云飞扬丶2 小时前
Android——多线程、线程通信、handler机制
android
L72562 小时前
Android的Handler
android
清风徐来辽2 小时前
Android HandlerThread 基础
android
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
狂放不羁霸2 小时前
idea | 搭建 SpringBoot 项目之配置 Maven
spring boot·maven·intellij-idea
LunarCod3 小时前
WorkFlow源码剖析——Communicator之TCPServer（中）
后端·workflow·c/c++·网络框架·源码剖析·高性能高并发
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解