vue 连接 mysql 读取数据 vue怎么连接mysql

今天让我们用前后端分离实现三级联查

需求 :  省份与城市的联动,城市和县区的联动

一.准备数据库省份/城市/区县三个表

二.下载node.js

输入node -v和npm -v如果出现版本号则安装成功

(下载慢的话可以切换国内npm配置淘宝镜像

命令行输入:

npm config set registry https://registry.npm.taobao.org

)

三.搭建vue环境

1.下载安装vue/cli

npm install -g @vue/cli

 2.创建vue项目

输入命令行 vue create test_vue 创建vue项目text_vue是项目名称,自己取的

 

 成功!!

四.创建Springboot项目

这个可以查看我之前写的博客这里不作过多赘述......

1.创建数据库实体类

建表语句在前面链接

2.编写查询接口

        1.查询所有省份信息

@Repository
@Mapper
public interface provinceDao {
    //查看省份信息
    List<TAddressProvince> findAllProvince();
}

        2.根据Code条件查询城市信息

@Repository
@Mapper
public interface cityDao {
    //根据id查询城市信息
    List<TAddressCity> byIdCity(int id);
}

        3.根据Code条件查询区县信息

@Repository
@Mapper
public interface townDao {
    //根据id查看区县
    List<TAddressTown> byIdTown(int id);
}

service我这里就忽略了.....

3.编写Controller接口

@RestController
@RequestMapping("/info")
public class OneController {
    @Autowired
    cityServiceImpl cityService;
    @Autowired
    provinceServiceImpl provinceService;
    @Autowired
    townServiceImpl townService;

    @RequestMapping("/pro")
    public List findAllPro() {
        List<TAddressProvince> list = provinceService.findAllProvince();
        return list;
    }
    @RequestMapping("/city")
    public List byIdCity(Integer id){
        List<TAddressCity> city = cityService.byIdCity(id);
        return city;
    }
    @RequestMapping("/town")
    public List byIdTown(Integer id){
        List<TAddressTown> list = townService.byIdTown(id);
        return list;
    }

五.创建vue项目

1.打开之前创建的vue项目

 

把刚刚创建好的vue项目导进去

 2.运行vue项目

 在终端也可以操作

输入 npm run serve 运行

一定要在当前项目输入!!!

 这样就成功了!!

3.编写前端

1.写三个select标签展示信息

 2.给省份和城市的select写change事件并用model绑定data数据

<el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    省份:
                    <select @change="cityLead()" v-model="proId">
                        <option>请选择</option>
                        <option v-for="(a) in pro" :key="a.code" :value="a.code">{{a.name}}</option>
                    </select>
                    <br/>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    城市:
                    <select @change="townLoad()" v-model="town">
                        <option>请选择</option>
                        <option v-for="(a) in city" :key="a.code" :value="a.code">{{a.name}}</option>
                    </select>
                    <br/>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    区县:
                    <select>
                        <option>请选择</option>
                        <option v-for="(a) in towns" :key="a.code" :value="a.code">{{a.name}}</option>
                    </select>
                </div>
            </el-col>
        </el-row>

 3.编写change方法

methods: {
            cityLead() {
                console.log("city方法")
                axios.get("http://localhost:8080/info/city", {
                    params: {
                        id: this.proId
                    }
                }).then(rep => {
                    this.city = rep.data;
                    this.towns = [];
                })
            },
            //省份信息select
            allLoad() {
                console.log("all方法")
                axios.get("http://localhost:8080/info/pro").then(rep => {
                    this.pro = rep.data;
                    this.city = [];
                    this.towns = [];
                })
            }
            ,
            //区县信息select
            townLoad() {
                console.log("town方法")
                axios.get("http://localhost:8080/info/town", {
                    params: {
                        id: this.town
                    }
                }).then(rep => {
                    this.towns = rep.data;
                })
            }

  4.钩子函数created

created() {
            this.allLoad();
        }

    这样就完了啦吗(o_O)!!

等等,少了个跨越请求呢!!

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}