# vue-dynamicSQL

**Repository Path**: qq1293654480/vue-dynamic-sql

## Basic Information

- **Project Name**: vue-dynamicSQL
- **Description**: 实现⼀个 SQL 过滤筛选器，通过勾选条件⾃动⽣成sql然后将数据显⽰在同⼀个界⾯下⽅（记得要写查询得到的数据的显⽰界⾯噢~~~），UI 选型可以参考 https://querybuilder.js.org/ 组件，该组件已经实现了⼀个UI，界⾯操作已经可以⾃动⽣成⼀个SQL语句，请⾃学该组件，然后基于 Spring Boot 实现这个功能。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-10-20
- **Last Updated**: 2022-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# 运营后台开发岗位笔试题（校招）

## 岗位要求：

- 运营开发岗位，主要负责 系统后台配置功能的开发，业务流程的整合等等 业务闭环相关的开发需求。
- 该岗位需要⾯试者对业务需求不抗拒，公司后台开发技术栈为
-  Vue + Element + Spring boot +Mybatis plus + MySQL，
- 因此需要熟练掌握和使⽤以上六个⼯具。

## 综合能⼒题：

- 数据库中有⼀个表（例如下⾯的 act_card_result），现在需要在后台⻚⾯上，做⼀个可以灵活筛选数据的功能（从SQL的⻆度来说，就是拼接 WHERE 后⾯的查询语句），⽅便业务⼈员导出表⾥⾯的数据，类似数据库管理⼯具 Navicat 的筛选功能，如下图所⽰：

![image-20221028193831024](README.assets/image-20221028193831024.png)

- 可以看到，Navicat 提供了⼀个灵活⽅便去填写过滤条件的界⾯，通过它，我们可以不⽤写SQL，也可以操作⼀些简单的筛选逻辑
- 现在运营后台也需要这么⼀个功能，实现⼀个 SQL 过滤筛选器，通过勾选条件⾃动⽣成sql然后将数据显⽰在同⼀个界⾯下⽅（记得要写查询得到的数据的显⽰界⾯噢~~~），UI 选型可以参考 https://querybuilder.js.org/ 组件，该组件已经实现了⼀个UI，界⾯操作已经可以⾃动⽣成⼀个SQL语句，请⾃学该组件，然后基于 Spring Boot 实现这个功能。



## 相关要求：

- 1）答题时⻓不设限制，答完需要录制实现效果的视频和提交源代码；
- 2）使⽤Vue + Element + Spring boot + Mybatis plus + MySQL实现⼀个 SQL 过滤筛选器，同时实现的过程必须可以灵活组合 AND OR 和括号的逻辑，如果只是实现 AND 或者 OR，技术难度将⼤⼤降低
- 3）编码上需结合hutool⼯具包：https://www.hutool.cn/做参数校验和lombok插件替换get、set⽅法



## 实现效果：

![image-20221028194301189](README.assets/image-20221028194301189.png)

**注意：**

- 我的node版本： **v14.17.4**
- package-lock.json
- package.json
  - 对应的sass版本：

> ```json
>     "node-sass": "^4.14.1",
>     "sass-loader": "^7.3.1",
> ```