查询所有的班级:后端
父工程pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.czxy</groupId>
<artifactId>day12_16-nuxt-student</artifactId>
<packaging>pom</packaging>
<version>1.0-SNAPSHOT</version>
<modules>
<module>nuxt-student-service</module>
<module>nuxt-classes-service</module>
<module>nuxt-gateway</module>
<module>nuxt-domain</module>
<module>nuxt-fegin</module>
</modules>
<!-- 1 确定spring boot的版本-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.5.RELEASE</version>
<relativePath />
</parent>
<!--2 确定版本-->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
<spring-cloud-release.version>Hoxton.SR3</spring-cloud-release.version>
<nacos.version>1.1.0</nacos.version>
<alibaba.cloud.version>2.2.1.RELEASE</alibaba.cloud.version>
<mybatis.starter.version>1.3.2</mybatis.starter.version>
<mapper.starter.version>2.0.2</mapper.starter.version>
<mysql.version>5.1.32</mysql.version>
<pageHelper.starter.version>1.2.5</pageHelper.starter.version>
<durid.starter.version>1.1.10</durid.starter.version>
<swagger.version>2.7.0</swagger.version>
<jwt.jjwt.version>0.9.0</jwt.jjwt.version>
<jwt.joda.version>2.9.7</jwt.joda.version>
<beanutils.version>1.9.3</beanutils.version>
</properties>
<!-- 3 锁定版本-->
<dependencyManagement>
<dependencies>
<!-- sprig cloud-->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>${spring-cloud-release.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<!--nacos -->
<dependency>
<groupId>com.alibaba.nacos</groupId>
<artifactId>nacos-client</artifactId>
<version>${nacos.version}</version>
</dependency>
<!--nacos cloud 发现 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
<version>${alibaba.cloud.version}</version>
</dependency>
<!--nacos cloud 配置 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
<version>${alibaba.cloud.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>
<version>${alibaba.cloud.version}</version>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis.starter.version}</version>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>${mapper.starter.version}</version>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pageHelper.starter.version}</version>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>${durid.starter.version}</version>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>${swagger.version}</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>${swagger.version}</version>
</dependency>
<!--jwt-->
<!--JavaBean工具类,用于JavaBean数据封装-->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>${beanutils.version}</version>
</dependency>
<!--jwt工具-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>${jwt.jjwt.version}</version>
</dependency>
<!--joda 时间工具类 -->
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
<version>${jwt.joda.version}</version>
</dependency>
</dependencies>
</dependencyManagement>
</project>
表结构
#班级表
CREATE TABLE tb_class(
cid INT PRIMARY KEY AUTO_INCREMENT,
cname VARCHAR(50)
);
INSERT INTO tb_class(cid, cname) VALUES(1,'Java56');
INSERT INTO tb_class(cid, cname) VALUES(2,'Java78');
INSERT INTO tb_class(cid, cname) VALUES(3,'Java12');
INSERT INTO tb_class(cid, cname) VALUES(4,'Java34');
其结构如下:
所需要的pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>day12_16-nuxt-student</artifactId>
<groupId>com.czxy</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>nuxt-classes-service</artifactId>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- nacos 客户端 -->
<dependency>
<groupId>com.alibaba.nacos</groupId>
<artifactId>nacos-client</artifactId>
</dependency>
<!-- nacos 服务发现 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
</dependency>
<!-- feign 远程调用 -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
<!-- 自定义项目 -->
<dependency>
<groupId>com.czxy</groupId>
<artifactId>nuxt-domain</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
</project>
步骤:
编写JavaBean
package com.czxy.domain;
import lombok.Data;
import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
@Table(name = "tb_class")
@Data
public class Classes {
@Id
@Column(name = "cid")
private Integer cid;
@Column(name = "cname")
private String cname; //班级名称
}
编写Mapper
package com.czxy.mapper;
import com.czxy.domain.Classes;
import tk.mybatis.mapper.common.Mapper;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper<Classes> {
}
编写Service,完成查询所有
接口
package com.czxy.service;
import com.czxy.domain.Classes;
import java.util.List;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
public interface ClassesService {
/**
* 查询所有
* @return
*/
public List<Classes> selectAll();
}
实现类
package com.czxy.service.impl;
import com.czxy.domain.Classes;
import com.czxy.mapper.ClassesMapper;
import com.czxy.service.ClassesService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
@Service
@Transactional
public class ClassesServiceImpl implements ClassesService {
@Resource
private ClassesMapper classesMapper;
@Override
public List<Classes> selectAll() {
return classesMapper.selectAll();
}
}
~~~
编写controller
package com.czxy.controller;
import com.czxy.domain.Classes;
import com.czxy.service.ClassesService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
@RestController
@RequestMapping("/classes")
public class ClassesController {
@Resource
private ClassesService classesService;
/**
* 查询所有
* @return
*/
@GetMapping
public BaseResult<List<Classes>> list() {
// 查询
List<Classes> list = classesService.selectAll();
// 返回
return BaseResult.ok("查询成功", list);
}
}
查询学生+条件+分页:后端
其结构如下:
所需要的pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>day12_16-nuxt-student</artifactId>
<groupId>com.czxy</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>nuxt-student-service</artifactId>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- nacos 客户端 -->
<dependency>
<groupId>com.alibaba.nacos</groupId>
<artifactId>nacos-client</artifactId>
</dependency>
<!-- nacos 服务发现 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
</dependency>
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
</dependency>
<!-- feign 远程调用 -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
<!-- 自定义项目 -->
<dependency>
<groupId>com.czxy</groupId>
<artifactId>nuxt-domain</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.czxy</groupId>
<artifactId>nuxt-fegin</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
</project>
编写service
package com.czxy.student.service;
import cn.itcast.domain.Student;
import cn.itcast.vo.StudentVo;
import java.util.List;
/**
* @ClassName StudentService
* @Description TODO
* @Author Administrator
* @date 2021-12-16 10:57
*/
public interface StudentService {
List<Student> condition(StudentVo studentVo);
}
编写Mapper
package com.czxy.student.dao;
import cn.itcast.domain.Student;
import tk.mybatis.mapper.common.Mapper;
/**
* @ClassName StudetnDao
* @Description TODO
* @Author Administrator
* @date 2021-12-16 10:57
*/
@org.apache.ibatis.annotations.Mapper
public interface StudentDao extends Mapper<Student> {
}
编写service实现类
package com.czxy.student.service.impl;
import cn.itcast.ClassesFegin;
import cn.itcast.domain.Student;
import cn.itcast.vo.StudentVo;
import com.czxy.student.dao.StudentDao;
import com.czxy.student.service.StudentService;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;
import java.util.List;
/**
* @ClassName StudentServiceImpl
* @Description TODO
* @Author Administrator
* @date 2021-12-16 10:57
*/
@Service
@Transactional
public class StudentServiceImpl implements StudentService {
@Autowired
StudentDao studentDao;
@Autowired
ClassesFegin classesFegin;
@Override
public List<Student> condition(StudentVo studentVo) {
Example example = new Example(Student.class);
Example.Criteria criteria = example.createCriteria();
if (StringUtils.isNotBlank(studentVo.getCid())){
criteria.andEqualTo("cid",studentVo.getCid());
}
List<Student> list = studentDao.selectByExample(example);
list.forEach(o->{
o.setClasses(classesFegin.searchByCid(o.getCid()));
});
return list;
}
}
Controller类
package com.czxy.student.controller;
import cn.itcast.domain.Student;
import cn.itcast.vo.BaseResult;
import cn.itcast.vo.StudentVo;
import com.czxy.student.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @ClassName StudentController
* @Description TODO
* @Author Administrator
* @date 2021-12-16 10:56
*/
@RestController
@RequestMapping("/student")
public class StudentController {
@Autowired
StudentService studentService;
@PostMapping("/condition")
public BaseResult condition(@RequestBody StudentVo studentVo){
List<Student> list = studentService.condition(studentVo);
return BaseResult.ok("成功",list);
}
}
编写前端
编写插件
创建插件,并编写内容
//student-client.js
const request = {
//学生条件查询
condition(pageInfo, studentVo) {
var url = `/student-service/student/condition/${pageInfo.pageSize}/${pageInfo.pageNum}`
return axios.post(url, studentVo)
}
}
// 用于缓存nuxt整合后的axios
var axios = null
export default ({ $axios }, inject) => {
//3) 保存内置的axios
axios = $axios
//4) 将自定义函数交于nuxt
// 使用方式1:在vue中,this.$request.xxx()
// 使用方式2:在nuxt的asyncData中,context.app.$request.xxx()
inject('request', request)
}
//student-server.js
const request = {
selectAllClasses() {
return axios.get(`/student-service/classes`)
}
}
// 用于缓存nuxt整合后的axios
var axios = null
export default ({ $axios }, inject) => {
//3) 保存内置的axios
axios = $axios
//4) 将自定义函数交于nuxt
// 使用方式1:在vue中,this.$requestServer.xxx()
// 使用方式2:在nuxt的asyncData中,context.$requestServer.xxx()
inject('requestServer', request)
}
配置插件
展示结果 + 展示条件
<template>
<div>
<!-- 2.2 查询条件:展示所有的班级,并与vo进行绑定查询 -->
请选择班级:
<select v-model="studentVo.cid" @change="conditionFn" >
<option value="">--请选择--</option>
<option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}</option>
</select>
<!-- 1.5 列表展示 -->
<h2>学生列表</h2>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>班级</td>
<td>操作</td>
</tr>
<tr v-for="(student,index) in pageInfo.list" :key="index">
<td>{{student.sid}}</td>
<td>{{student.sname}}</td>
<td>{{student.cid}}</td>
<td>
修改
删除
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
// 2.1 前端服务器查询所有的班级
async asyncData( context ) {
let { data: baseResult } = await context.$requestServer.selectAllClasses()
return {
classesList: baseResult.data
}
},
data() {
return {
pageInfo: { //1.1 分页封装对象、查询结果
pageNum: 1,
pageSize: 10
},
studentVo: { //1.2 条件查询封装对象
cid: ''
}
}
},
methods: {
async conditionFn() {
// 1.3 发送ajax
let { data: baseResult } = await this.$request.condition(this.pageInfo, this.studentVo)
// 1.4 获得查询结果
this.pageInfo = baseResult.data
}
},
mounted() {
this.conditionFn()
},
}
</script>
<style>
</style>
关联查询班级
修改后端service,查询学生的同时,查询对应班级
//4 关联查询
list.forEach(student -> {
Classes classes = classesMapper.selectByPrimaryKey(student.getCid());
student.setClasses(classes);
});
修改前端list.vue,展示班级
运行~