1. 第一种下拉（查询）：

1.1 创建springboot工程 (pvue0106)

1. Spring Web
2. MyBatis Framework
3. MySQL Driver

1.2 导入pom依赖（要写的两个）

<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.21</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.1</version></dependency>

1.3 application.yml

spring:datasource:url: jdbc:mysql://localhost:3306/db_vue2_user?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&zeroDateTimeBehavior=CONVERT_TO_NULLusername: rootpassword: zjjdriver-class-name: com.mysql.cj.jdbc.Drivermybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations: classpath:mapper/*Mapper.xmlpagehelper:helper-dialect: mysqlreasonable:trueserver:port:8093

1.4 cn.kgc.entity/ Dept、User

User

packagecn.kgc.entity;importjava.io.Serializable;publicclassUserimplementsSerializable{privateInteger id;privateString name;privateString pwd;privateInteger deptId;//省略getter和setter方法}

Dept

packagecn.kgc.entity;importjava.io.Serializable;publicclassDeptimplementsSerializable{privateInteger id;privateString name;//省略getter和setter方法}

1.5 cn.kgc.mapper/UserMapper

packagecn.kgc.mapper;importcn.kgc.entity.Dept;importcn.kgc.entity.User;importorg.apache.ibatis.annotations.Mapper;importorg.apache.ibatis.annotations.Param;importjava.util.List;@MapperpublicinterfaceUserMapper{//1.分页查询所有用户信息列表List<User>findAllByPage();//2.通过部门id查询用户信息列表List<User>findByDeptId(@Param("deptId")Integer deptId);//3.查询所有部门信息列表List<Dept>findAllDept();}

1.6 resources/mapper/UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappernamespace="cn.kgc.mapper.UserMapper"><selectid="findAllByPage"resultType="cn.kgc.entity.User">
        select * from t_user</select><selectid="findByDeptId"resultType="cn.kgc.entity.User">
        select * from t_user where 1=1<iftest="deptId != null and deptId != -1">
            and deptId = #{deptId}</if></select><!--    如果用美元符号就不用写注解了--><selectid="findAllDept"resultType="cn.kgc.entity.Dept">
        select * from t_dept</select></mapper>

1.7 cn.kgc.service/UserService、UserServiceImpl

UserService

packagecn.kgc.service;importcn.kgc.entity.Dept;importcn.kgc.entity.User;importcom.github.pagehelper.PageInfo;importorg.apache.ibatis.annotations.Param;importjava.util.List;publicinterfaceUserService{PageInfo<User>findAllByPage(Integer pageNo);PageInfo<User>findByDeptId(Integer pageNo,@Param("deptId")Integer deptId);List<Dept>findAllDept();}

UserServiceImpl

packagecn.kgc.service;importcn.kgc.entity.Dept;importcn.kgc.entity.User;importcn.kgc.mapper.UserMapper;importcom.github.pagehelper.PageHelper;importcom.github.pagehelper.PageInfo;importorg.springframework.stereotype.Service;importorg.springframework.transaction.annotation.Transactional;importjavax.annotation.Resource;importjava.util.List;@Service@TransactionalpublicclassUserServiceImplimplementsUserService{@ResourceprivateUserMapper userMapper;@OverridepublicPageInfo<User>findAllByPage(Integer pageNo){PageHelper.startPage(pageNo,3);returnnewPageInfo<>(userMapper.findAllByPage());}@OverridepublicPageInfo<User>findByDeptId(Integer pageNo,Integer deptId){PageHelper.startPage(pageNo,3);returnnewPageInfo<>(userMapper.findByDeptId(deptId));}@OverridepublicList<Dept>findAllDept(){return userMapper.findAllDept();}}

1.8 cn.kgc.controller/UserController

packagecn.kgc.controller;importcn.kgc.entity.Dept;importcn.kgc.entity.User;importcn.kgc.service.UserService;importcom.github.pagehelper.PageInfo;importorg.springframework.web.bind.annotation.CrossOrigin;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importjavax.annotation.Resource;importjava.util.List;@RestController@CrossOriginpublicclassUserController{@ResourceprivateUserService userService;@RequestMapping("/findAllByPage")publicPageInfo<User>findAllByPage(@RequestParam(defaultValue="1")Integer pageNo){return userService.findAllByPage(pageNo);}//上面的是老版本，新版本用下面的。@RequestMapping("/findByDeptId")publicPageInfo<User>findByDeptId(@RequestParam(defaultValue="1")Integer pageNo,Integer deptId){//后端有可能也需要进行处理和测试，所以可以加个来进行测试 前后端分离return userService.findByDeptId(pageNo, deptId);}@RequestMapping("/findAllDept")publicList<Dept>findAllDept(){return userService.findAllDept();}}

1.9 loback.xml日志（省略）

1.10 vue 新建文件夹

1. 新建一个文件夹vue0106，并作一系列操作
   

2. src/App.vue（省略）

3. src/Views
   list.vue

4. src/router/index.js(省略)

5. views/List.vue

<!--  --><template><divclass=''>
        部门分类：<selectv-model="queryPage.deptId"><!-- Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。 --><optionvalue="-1">全部</option><optionv-for="dept in depts":key="dept.id":value="dept.id">{{dept.name}}</option><!-- ： 就是动态 
            :key="dept.id" 第二种写法 这个更好--></select><inputtype="button"value="查询"@click="getPage(1)"><tableborder="1px solid"><tr><td>编号</td><td>姓名</td><td>密码</td><td>部门编号</td></tr><trv-for="(user,index) in page.list":key="index"style="text-align:center"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.pwd}}</td><td>{{user.deptId}}</td><!-- 双向绑定 既能获取值 又能发送值  省略了各种jquery的操作--></tr><tr><tdcolspan="4"style="text-align:center"><ahref="javascript:void(0)"@click="getPage(1)">首页</a><ahref="javascript:void(0)"@click="getPage(page.prePage)">上一页</a><ahref="javascript:void(0)"@click="getPage(page.nextPage)">下一页</a><ahref="javascript:void(0)"@click="getPage(page.pages)">末页</a></td></tr></table></div></template><script>import axiosfrom"axios"exportdefault{  
    components:{},data(){return{
            depts:[],//定义数组 是个集合
            page:{},
            queryPage:{
                pageNo:1,
                deptId:-1}};},//监听属性 类似于data概念
    computed:{},//监控data中的数据变化
    watch:{},
    
    methods:{getDept(){
            axios.get("http://localhost:8092/findAllDept").then(data=>{this.depts= data.data;});},getPage(pageNo){this.queryPage.pageNo= pageNo;// 以json的格式   params:this.queryPage 传对象
            axios.get("http://localhost:8092/findByDeptId",{params:this.queryPage}).then(data=>{this.page= data.data;})}},//生命周期 - 挂载完成（可以访问DOM元素）mounted(){this.getDept();this.getPage(1);},}</script><stylescoped></style>

6. 测试
http://localhost:8081/

2. 第二种下拉（添加）：

2.1 创建springboot工程 (pvue0106)

1. Spring Web
2. MyBatis Framework
3. MySQL Driver

2.2 导入pom依赖（要写的两个）

<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.21</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.1</version></dependency>

2.3 application.yml

spring:datasource:url: jdbc:mysql://localhost:3306/db_vue3_student?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&zeroDateTimeBehavior=CONVERT_TO_NULLusername: rootpassword: zjjdriver-class-name: com.mysql.cj.jdbc.Drivermybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations: classpath:mapper/*Mapper.xmlpagehelper:helper-dialect: mysqlreasonable:trueserver:port:8093

2.4 cn.kgc.entity/ Classes、Student

Classes

packagecn.kgc.entity;importjava.io.Serializable;publicclassClassesimplement