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>
<a href="javascript:void(0)" @click="getPage(stus.prePage)">上一页</a>
<a href="javascript:void(0)" @click="getPage(stus.nextPage)">下一页</a>
<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()" />
<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()" />
<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>
3.1 测试
题外话：
npm install 命令
如果把node_modules删掉，
输入这个命令就可以出来了。
作用： 对各种依赖的定义去安装这些依赖
----2022.01.06&07&08
4685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
