开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue - 下拉列表 -> 正文阅读

[JavaScript知识库]vue - 下拉列表

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

1.1 创建springboot工程 (pvue0106)

Spring Web
MyBatis Framework
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_NULL
    username: root
    password: zjj
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mapper/*Mapper.xml
pagehelper:
  helper-dialect: mysql
  reasonable: true
server:
  port: 8093

1.4 cn.kgc.entity/ Dept、User

User

package cn.kgc.entity;
import java.io.Serializable;

public class User implements Serializable {
    private Integer id;
    private String name;
    private String pwd;
	private Integer deptId;
//省略getter和setter方法
}

Dept

package cn.kgc.entity;
import java.io.Serializable;

public class Dept implements Serializable {
    private Integer id;
    private String name;
//省略getter和setter方法
}

1.5 cn.kgc.mapper/UserMapper

package cn.kgc.mapper;

import cn.kgc.entity.Dept;
import cn.kgc.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface UserMapper {
    //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" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.kgc.mapper.UserMapper">
    <select id="findAllByPage" resultType="cn.kgc.entity.User">
        select * from t_user
    </select>
    <select id="findByDeptId" resultType="cn.kgc.entity.User">
        select * from t_user where 1=1
        <if test="deptId != null and deptId != -1">
            and deptId = #{deptId}
        </if>
    </select>
<!--    如果用美元符号就不用写注解了-->
    <select id="findAllDept" resultType="cn.kgc.entity.Dept">
        select * from t_dept
    </select>
</mapper>

1.7 cn.kgc.service/UserService、UserServiceImpl

UserService

package cn.kgc.service;

import cn.kgc.entity.Dept;
import cn.kgc.entity.User;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserService {
    PageInfo<User> findAllByPage(Integer pageNo);
    PageInfo<User> findByDeptId(Integer pageNo,@Param("deptId") Integer deptId);
    List<Dept> findAllDept();
}

UserServiceImpl

package cn.kgc.service;

import cn.kgc.entity.Dept;
import cn.kgc.entity.User;
import cn.kgc.mapper.UserMapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;
    @Override
    public PageInfo<User> findAllByPage(Integer pageNo) {
        PageHelper.startPage(pageNo,3);
        return new PageInfo<>(userMapper.findAllByPage());
    }

    @Override
    public PageInfo<User> findByDeptId(Integer pageNo,Integer deptId) {
        PageHelper.startPage(pageNo,3);
        return new PageInfo<>(userMapper.findByDeptId(deptId));
    }

    @Override
    public List<Dept> findAllDept() {
        return userMapper.findAllDept();
    }
}

1.8 cn.kgc.controller/UserController

package cn.kgc.controller;

import cn.kgc.entity.Dept;
import cn.kgc.entity.User;
import cn.kgc.service.UserService;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
@CrossOrigin
public class UserController {
    @Resource
    private UserService userService;
    @RequestMapping("/findAllByPage")
    public PageInfo<User> findAllByPage(@RequestParam(defaultValue = "1") Integer pageNo){
        return userService.findAllByPage(pageNo);
    }
//上面的是老版本，新版本用下面的。
    @RequestMapping("/findByDeptId")
    public PageInfo<User> findByDeptId(@RequestParam(defaultValue = "1") Integer pageNo,
                                       Integer deptId){
//后端有可能也需要进行处理和测试，所以可以加个来进行测试 前后端分离
        return userService.findByDeptId(pageNo, deptId);
    }
    @RequestMapping("/findAllDept")
    public List<Dept> findAllDept(){
        return userService.findAllDept();
    }
}

1.9 loback.xml日志（省略）

1.10 vue 新建文件夹

新建一个文件夹vue0106，并作一系列操作
src/App.vue（省略）
src/Views
list.vue
src/router/index.js(省略)
views/List.vue

<!--  -->
<template>
    <div class=''>
        部门分类：
        <select v-model="queryPage.deptId">
            <!-- Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。 -->
            <option value="-1">全部</option>
            <option v-for="dept in depts" :key="dept.id" :value="dept.id">{{dept.name}}</option>
            <!-- ： 就是动态 
            :key="dept.id" 第二种写法 这个更好-->
        </select>

        <input type="button" value="查询" @click="getPage(1)">

        <table border="1px solid">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>密码</td>
                <td>部门编号</td>
            </tr>
            <tr v-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>
                <td colspan="4" style="text-align:center">
                    <a href="javascript:void(0)" @click="getPage(1)">首页</a>
                    <a href="javascript:void(0)" @click="getPage(page.prePage)">上一页</a>
                    <a href="javascript:void(0)" @click="getPage(page.nextPage)">下一页</a>
                    <a href="javascript:void(0)" @click="getPage(page.pages)">末页</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from "axios"
export default {  
    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>
<style scoped>
</style>

在这里插入图片描述
6. 测试
http://localhost:8081/

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

2.1 创建springboot工程 (pvue0106)

Spring Web
MyBatis Framework
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_NULL
    username: root
    password: zjj
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mapper/*Mapper.xml
pagehelper:
  helper-dialect: mysql
  reasonable: true
server:
  port: 8093

2.4 cn.kgc.entity/ Classes、Student

Classes

package cn.kgc.entity;

import java.io.Serializable;

public class Classes implements Serializable {
    private Integer id;
    private String name;
 //省略getter和setter方法
}

Student

package cn.kgc.entity;

import java.io.Serializable;

//实体类不受数据库约束，类型可以随便写
public class Student implements Serializable {
    private Integer id;
    private String name;
    private Integer age;
    private String gender;
    private String telephone;
    private String email;
    private Integer classId;
//省略getter和setter方法
}

2.5 cn.kgc.mapper/ StudentMapper

package cn.kgc.mapper;

import cn.kgc.entity.Classes;
import cn.kgc.entity.Student;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;
@Mapper
public interface StudentMapper {
    List<Student> findAllStu();
    Integer addStudent(Student student);
    List<Classes> findAllCla();

    Integer update(Student student);
    Student findById(Integer id);
}

2.6 resources/mapper/ StudentMapper.xml

<?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="cn.kgc.mapper.StudentMapper">
    <select id="findAllStu" resultType="cn.kgc.entity.Student">
        select * from student
    </select>
    <insert id="addStudent" parameterType="cn.kgc.entity.Student">
        insert into student(`name`,age,gender,telephone,email,classId)
        values (#{name},#{age},#{gender},#{telephone},#{email},#{classId})
    </insert>
    <select id="findAllCla" resultType="cn.kgc.entity.Classes">
        select * from classes
    </select>
    <update id="update" parameterType="cn.kgc.entity.Student">
        update student set `name`=#{name},age=#{age},gender=#{gender},telephone=#{telephone},email=#{email},classId=#{classId}
        where id =#{id}
    </update>
    <select id="findById" parameterType="java.lang.Integer" resultType="cn.kgc.entity.Student">
        select * from student where id = #{id}
    </select>
</mapper>

2.7 cn.kgc.service/ StudentService、StudentServiceImpl

StudentService

package cn.kgc.service;

import cn.kgc.entity.Classes;
import cn.kgc.entity.Student;
import com.github.pagehelper.PageInfo;

import java.util.List;

public interface StudentService {
    PageInfo<Student> findAllStu(Integer pageNo);
    Integer addStudent(Student student);
    List<Classes> findAllCla();
    Integer update(Student student);
    Student findById(Integer id);
}

StudentServiceImpl

package cn.kgc.service;

import cn.kgc.entity.Classes;
import cn.kgc.entity.Student;
import cn.kgc.mapper.StudentMapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class StudentServiceImpl implements StudentService {
    @Resource
    private StudentMapper studentMapper;
    @Override
    public PageInfo<Student> findAllStu(Integer pageNo) {
        PageHelper.startPage(pageNo,3);
        return new PageInfo<>(studentMapper.findAllStu());
    }

    @Override
    public Integer addStudent(Student student) {  return studentMapper.addStudent(student); }

    @Override
    public List<Classes> findAllCla() { return studentMapper.findAllCla(); }

    @Override
    public Integer update(Student student) {  return studentMapper.update(student);  }

    @Override
    public Student findById(Integer id) {  return studentMapper.findById(id); }
}

2.8 cn.kgc.controller/ StudentController

package cn.kgc.controller;

import cn.kgc.entity.Classes;
import cn.kgc.entity.Student;
import cn.kgc.service.StudentService;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@CrossOrigin
public class StudentController {
    @Resource
    private StudentService studentService;
    @RequestMapping("/findAllStu")
    public PageInfo<Student> findAllStu(@RequestParam(defaultValue = "1") Integer pageNo){
        return studentService.findAllStu(pageNo);
    }
    @RequestMapping("/addStudent")
    private Integer addStudent(@RequestBody Student student){
        return studentService.addStudent(student);
    }
    @RequestMapping("/findAllCla")
    private List<Classes> findAllCla(){
        return studentService.findAllCla();
    }
    @RequestMapping("/update")
    private Integer update(@RequestBody Student student){
        return studentService.update(student);
    }
    @RequestMapping("/findById")
    private Student findById(Integer id){
        return studentService.findById(id);
    }
}

2.9 loback.xml日志（省略）

2.10 vue 新建文件夹

1.建工程
之前的基础上建个demo0107,然后按照步骤来（跳过）

2.views/List.vue

<!--  -->
<template>
  <div>
    <table border="1px solid">
        <tr><th colspan="8">学生查询列表</th></tr>
      <tr>
        <td>学员编号</td>
        <td>学员名称</td>
        <td>学员年龄</td>
        <td>性别</td>
        <td>电话</td>
        <td>Email</td>
        <td>班级编号</td>
        <td>操作</td>
      </tr>
      <tr v-for="stu in stus.list" :key="stu.id" :class="{on:stu.id%2==0,off:stu.id%2!=0}">
        <td>{{ stu.id }}</td>
        <td>{{ stu.name }}</td>
        <td>{{ stu.age }}</td>
        <td>{{ stu.gender }}</td>
        <td>{{ stu.telephone }}</td>
        <td>{{ stu.email }}</td>
        <td>{{ stu.classId }}</td>
         <td colspan="8">
          <a href="javascript:void(0)" @click="update(stu.id)">修改</a>
        </td>
      </tr>
      <tr>
        <td colspan="8" style="text-align:center">
          <a href="javascript:void(0)" @click="getPage(1)">首页</a>&nbsp;
          <a href="javascript:void(0)" @click="getPage(stus.prePage)">上一页</a>&nbsp;
          <a href="javascript:void(0)" @click="getPage(stus.nextPage)">下一页</a>&nbsp;
          <a href="javascript:void(0)" @click="getPage(stus.pages)">末页</a>
        </td>
      </tr>
      <tr>
        <td colspan="8" style="text-align:center">
          <a href="javascript:void(0)" @click="add()">添加</a>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios"
export default {
  components: {},
  data() {
    return {
      stus: {},
      queryPage: {
        pageNo: 1
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  methods: {
    update(id){
      this.$router.push("/update?id="+id);
    },
    add(){
      this.$router.push("/add");
    },
      getPage(pageNo){
        //   this.queryPage.pageNo=pageNo;
        //   axios.get("http://localhost:8095/findAllStu",{params:this.queryPage}).then(data=>{
        //     this.stus = data.data; })
        axios.get("http://localhost:8095/findAllStu?pageNo="+pageNo).then(data=>{
            this.stus = data.data
        })
         
      }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      this.getPage(1);
  },
};
</script>
<style scoped>
.on{
  background: white;
  border: 1px solid blue;
}
.off{
  background: yellow;
  border: 1px solid black;
}
</style>

3.views/Add.vue

<!--  -->
<template>
  <div >
    <table border="1px solid">
      <tr>
        <th colspan="2">添加学员信息</th>
      </tr>
      <tr>
        <td>学员名称</td>
        <td><input v-model="newStu.name"></td>
      </tr>
      <tr>
        <td>学员年龄</td>
        <td><input v-model="newStu.age"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td><input v-model="newStu.gender"></td>
      </tr>
      <tr>
        <td>电话</td>
        <td><input v-model="newStu.telephone"></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input v-model="newStu.email"></td>
      </tr>
      <tr>
        <td>班级编号</td>
        <td>
            <select v-model="newStu.classId">
                <option value="-1">--全部--</option>
                <option v-for="class1 in classes" :key="class1.id" :value="class1.id">{{class1.name}}</option>
            </select>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center">
          <input type="button" value="新增" @click="add()" />&nbsp;
          <input type="button" value="返回" @click="retu()" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios"
export default {
  components: {},
  data() {
    return {
        classes:[],
        newStu:{
            name:'',
            age:'',
            gender:'',
            telephone:'',
            email:'',
            classId:-1
        }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  methods: {
      retu(){
            this.$router.push("/")
        },
      add(){
          axios.post("http://localhost:8095/addStudent",this.newStu).then(data=>{
              if(data.data ==1){
                  alert("新增成功");
                  this.$router.push("/")
              }else{
                  alert("新增失败")
              }
          })
      },
      getAllCla(){
          axios.get("http://localhost:8095/findAllCla").then(data=>{
              this.classes = data.data
          });
      }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      this.getAllCla();
  },
};
</script>
<style scoped>
</style>

3. 第三种下拉（修改）：

views/Update.vue

<!--  -->
<template>
    <div>
         <table border="1px solid">
      <tr>
        <th colspan="2">修改学员信息</th>
      </tr>
      <tr>
        <td>学员编号</td>
        <td><input v-model="newStu.id" readonly></td>
      </tr>
      <tr>
        <td>学员名称</td>
        <td><input v-model="newStu.name"></td>
      </tr>
      <tr>
        <td>学员年龄</td>
        <td><input v-model="newStu.age"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td><input v-model="newStu.gender"></td>
      </tr>
      <tr>
        <td>电话</td>
        <td><input v-model="newStu.telephone"></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input v-model="newStu.email"></td>
      </tr>
      <tr>
        <td>班级编号</td>
        <td>
           <select v-model="newStu.classId">
               <option value="-1">--全部--</option>
               <option v-for="class2 in classes" :key="class2.id"  :value="class2.id">{{class2.name}}</option>
           </select>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center">
            <input type="button" value="修改" @click="update()" />&nbsp;
            <input type="button" value="返回" @click="retu()" />
        </td>
      </tr>
    </table>
    </div>
</template>

<script>
import axios from "axios"
export default {
    
    components: {},
    data() {
        
        return {
            classes:[],
            newStu:{
                id:'',
                name:'',
                age:'',
                gender:'',
                telephone:'',
                email:'',
                classId:-1
            }
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    
    methods: {
        retu(){
            this.$router.push("/")
        },
        update(){
            axios.post("http://localhost:8095/update",this.newStu).then(data=>{
                if(data.data ==1){
                    alert("修改成功")
                    this.$router.push("/");
                }else{
                    alert("修改失败")
                }
            });
        },
        getAllCla(){
            axios.get("http://localhost:8095/findAllCla").then(data=>{
                this.classes = data.data
            })
        },
        findById(id){
            axios.get("http://localhost:8095/findById?id="+id).then(data=>{
                this.newStu = data.data
            })
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getAllCla();
        var id = this.$route.query.id;
        this.findById(id);
    },
    }
</script>
<style scoped>
</style>