一个非常简单的全国城市三级联动

最新推荐文章于 2022-08-27 09:48:25 发布

橙@子

最新推荐文章于 2022-08-27 09:48:25 发布

阅读量1.4k

点赞数

分类专栏： java 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/OneCodeOneDream/article/details/121934033

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

废话不多说直接看图（注：数据库要有数据才可以的哦）

前端代码

====前端主要是Vue，elmentUI，和aioxs这几个技术。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body{
            background-color: #E9EEF3;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 40px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>

<body>
<div id="box">


    <el-container>
        <el-main>
            <template>
                <el-link type="primary">City:</el-link>
                <el-select v-model="value1"  filterable  placeholder="省"
                           v-on:change="city">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

                <el-link type="success">Area:</el-link><el-select
                    v-model="value2"
                    filterable
                    collapse-tags
                    style="margin-left: 20px;"
                    placeholder="市"  v-on:change="County">
                <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

                <el-link type="warning">County:</el-link> <el-select v-model="value3" filterable placeholder="县">
                <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            </template>

        </el-main>
    </el-container>

</div>
</body>
<script>

    new Vue({
        el: "#box",
        data:{
            url : "http://127.0.0.1:8080/eureka/",
            options: [],
            options1: [],
            options2: [],
            value1: [],
            value2: [],
            value3: []
        },
        mounted() {
            let that = this;
            axios.get(that.url + 'firstLevelCity')
                .then(function (response) {
                    that.options = response.data;
                })
                .catch(function (error) {
                    console.log(error.data);
                });
        },
        methods:{
            city(cityCode){
               let that = this;
              console.log(cityCode) ;
              axios.get(that.url + 'secondCity?cityCode=' + cityCode)
                  .then(function (response) {
                      console.log(response.data)
                      that.options1 = response.data;
              })
            },
            County(thirdCode){
                let that = this;
                console.log(thirdCode) ;
                axios.get(that.url + 'thirdCity?thirdCode=' + thirdCode)
                    .then(function (response) {
                        console.log(response.data)
                        that.options2 = response.data;
                    })
            }
        }

    });


</script>
</html>

连接数据库用到的一个工具类

public class MySqlUtil {

   private static final String url = "jdbc:mysql://10.56.39.48:3306/test";
   private static final String username = "";
   private static final String passwword = "";

   static {
       try {
           Class.forName("com.mysql.jdbc.Driver");
       } catch (ClassNotFoundException e) {
           e.printStackTrace();
       }
   }

    public static Connection getConnection(){
        Connection connection = null;
        try {
            connection = DriverManager.getConnection(url, username, passwword);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }
}

后台用的是springboot项目，没有service，直接用controller


@RestController
public class CityController {

    private static Connection connection;
    static {
         connection = MySqlUtil.getConnection();
    }
    @CrossOrigin("*")
    @RequestMapping(value = "firstLevelCity" , method = RequestMethod.GET)
    public Object firstLevel() throws SQLException {
        Console.log("请求开始。。。");
        String sql = " select * from base_province";
        PreparedStatement preparedStatement = connection.prepareStatement(sql);
        ResultSet resultSet = preparedStatement.executeQuery();
        List< Map<String,String>> list = new ArrayList<>();
        while (resultSet.next()) {
            Map<String,String> map = new HashMap<>();
            map.put("value", resultSet.getString("Code"));
            map.put("label", resultSet.getString("Name"));
            list.add(map);
        }
        return list;
    }


    @CrossOrigin("*")
    @RequestMapping(value = "secondCity" , method = RequestMethod.GET)
    public Object secondLevel(String cityCode) throws SQLException {
        Console.log("请求开始。。。");
        String sql = " select * from base_city where cityCode = ?";
        PreparedStatement preparedStatement = connection.prepareStatement(sql);
        preparedStatement.setString(1, cityCode);
        ResultSet resultSet = preparedStatement.executeQuery();
        //结果集
        List< Map<String,String>> list = new ArrayList<>();
        while (resultSet.next()) {
            Map<String,String> map = new HashMap<>();
            list.add(map);
            map.put("value", resultSet.getString("Code"));
            map.put("label", resultSet.getString("Name"));
        }
        return list;
    }
    @CrossOrigin("*")
    @RequestMapping(value = "thirdCity", method = RequestMethod.GET)
    public Object thirdLevel(String thirdCode) throws SQLException {
        Console.log("请求开始。。。");
        String sql ="select * from base_area where areaCode = ?";
        PreparedStatement preparedStatement = connection.prepareStatement(sql);
        preparedStatement.setString(1, thirdCode);
        ResultSet resultSet = preparedStatement.executeQuery();
        List<Map<String, String>> list = new ArrayList<>();
        while (resultSet.next()){
            Map<String, String> map= new HashMap<>();
            map.put("value", resultSet.getString("Code"));
            map.put("label", resultSet.getString("Name"));
            list.add(map);
        }
        return list;
    }

}

有问题可以随时交流，互相学习哦。

橙@子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个非常简单的全国城市三级联动

废话不多说直接看图（注：数据库要有数据才可以的哦）前端代码====前端主要是Vue，elmentUI，和aioxs这几个技术。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/axios/dist/axios.min..
复制链接

扫一扫