目录

1.框架搭建

2.前端搭建

3.后端编写

---

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

 

1.框架搭建

1.创建springboot项目

2.相关依赖

 <!--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.配置文件

#数据源信息
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.数据库：

/*
 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.实体类

@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;

}

@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.前端搭建

<!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.设置统一返回类型

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

2.controller层

@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);
    }

}

@RestController
@RequestMapping("/agentLevel")
public class AgentLevelController {
    @Autowired
    private AgentLevelService agentLevelService;

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

3.service层

public interface AgentService extends IService<Agent> {

    /**
     * 查询所有
     * @param input
     * @return
     */
    List<Agent> agentList(String input);
}

public interface AgentLevelService {
    /**
     * 查询等级
     * @return
     */
    Result select();
}

5.serviceImpl层

@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);
    }
}

@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层

@Mapper
public interface AgentDao extends BaseMapper<Agent> {
    /**
     * 查询所有
     * @param input
     * @return
     */
    List<Agent> agentList(String input);
}

@Mapper
public interface AgentLevelDao extends BaseMapper< AgentLevel> {
}

7.

<?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>

完成