Nuxt.js查询学生列表案例

最新推荐文章于 2024-01-06 23:03:27 发布

hate z β 撇 s

最新推荐文章于 2024-01-06 23:03:27 发布

阅读量462

点赞数

分类专栏： Nuxt.js视图文章标签： Nuxt.js 学生列表查询 Nuxt

本文链接：https://blog.csdn.net/weixin_45822542/article/details/121995922

版权

Nuxt.js视图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

查询所有的班级：后端

父工程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，展示班级
在这里插入图片描述
运行~

hate z β 撇 s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Nuxt.js查询学生列表案例

查询所有的班级：后端父工程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://mave
复制链接

扫一扫