springboot + Vue前后端项目（第四记）

最新推荐文章于 2024-04-29 20:54:10 发布

做一个有用的阿吉

最新推荐文章于 2024-04-29 20:54:10 发布

阅读量1.2k

点赞数 34

分类专栏： [00]前后端开发文章标签： spring boot vue.js

本文链接：https://blog.csdn.net/panpj0915/article/details/137786759

版权

[00]前后端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

项目实战第四记

1.写在前面
2. 后台手动实现分页
3. 前端页面数据展示
总结
声明
写在最后

1.写在前面

周末整了一会电脑（加固态，重装系统，环境搭建），累趴le
本篇博客需提前了解mysql的分页思想以及axios技术（例如axios如何发起请求，如何传参）
分页解析

// 如果每页显示2条记录  pageNum：前端传过来的第几页；pageSize：前端传过来的每页显示多少条记录
SELECT * from sys_user limit 0,2;  --第一页
-- (2 -1) * 2 = 2  第一个参数的计算
SELECT * from sys_user limit 2,2;  --第二页
-- （3-1）* 2 = 4
SELECT * from sys_user limit 4,2;  --第三页
-- 结论： limit第一个参数 = (pageNum - 1) * pageSize

在这里插入图片描述
如上图所示，前端给后台了传递页码（pageNum)，每页大小（pageSize)；后台根据传过来的pageNum和pageSize获取当前页的数据传回给前端显示，同时后台还要计算总记录数（total）;根据总条数，前端就晓得显示多少个页码。

2. 后台手动实现分页

注明： 以下文件代码新增的大部分都在后面追加，请读者自己甄别一下下（本人放的是全部代码）

2.1 分页接口UserController编写

package com.ppj.fb.controller;

import com.ppj.fb.entity.User;
import com.ppj.fb.mapper.UserMapper;
import com.ppj.fb.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author ppj
 * @date 2024/04/10
 */
@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserMapper userMapper;

    @Autowired
    private UserService userService;

    @GetMapping("/")
    public List<User> findAll(){
//        return userMapper.findAll();
        return userMapper.selectUsers();
    }

    @PostMapping("/")
    public Integer saveOrUpdate(@RequestBody User user){
        return userService.saveOrUpdate(user);
    }

    @DeleteMapping("/{id}")
    public Integer delUser(@PathVariable("id") Integer id){
        return userMapper.delUser(id);
    }
    
    // 分页接口 
    @GetMapping("/page")
    public Map<String,Object> page(@RequestParam Integer pageNum,
                                   @RequestParam Integer pageSize,
                                   @RequestParam String username,
                                   @RequestParam String address){
        // 分页第一个参数calc
        int start = (pageNum - 1) * pageSize;
        // 当前页数据(加了筛选条件)
        List<User> users = userMapper.selectPage(start, pageSize,username,address);
        // 总条数
        int total = userMapper.getTotal(username,address);
        // 将数据和总条数封装，传给前端去显示
        Map<String,Object> map = new HashMap<>();
        map.put("data",users);
        map.put("total",total);
        return map;
    }
}

2.2 UserMapper

package com.ppj.fb.mapper;

import com.ppj.fb.entity.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

/**
 * @author ppj
 * @date 2024/04/10
 */
@Mapper
public interface UserMapper {

    @Select("select * from sys_user")
    List<User> findAll();

    List<User> selectUsers();

    @Insert("insert into sys_user(username,password,nickname,email,phone,address) values (#{username},#{password},#{nickname},#{email},#{phone},#{address})")
    Integer saveUser(User user);

    // 直接使用灵活的xml文件
    Integer updateUser(User user);

    @Delete("delete from sys_user where id=#{id}")
    Integer delUser(@Param("id") Integer id);

    List<User> selectPage(@Param("start") int start, @Param("pageSize") Integer pageSize,@Param("username") String username,@Param("address") String address);

    @Select("select count(1) from sys_user where username like concat('%',#{username},'%') and address like concat('%',#{address},'%')")
    int getTotal(@Param("username") String username,@Param("address") String address);
}

相应的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">
<!-- namespace 的值设定为被映射的包名.类名 -->
<mapper namespace="com.ppj.mapper.UserMapper">
    <resultMap id="userResultMap" type="com.ppj.entity.User">
        <id property="id" column="id"/>
        <result property="username" column="username"/>
        <result property="password" column="password"/>
        <result property="nickname" column="nickname"/>
        <result property="email" column="email"/>
        <result property="address" column="address"/>
        <result property="createTime" column="create_time"/>
    </resultMap>

    <select id="selectUsers" resultMap="userResultMap">
        select * from sys_user
    </select>

    <update id="updateUser" parameterType="com.ppj.entity.User">
        update sys_user
        <set>
            <if test="username != null">
                username=#{username},
            </if>
            <if test="nickname != null">
                nickname=#{nickname},
            </if>
            <if test="email != null">
                email=#{email},
            </if>
            <if test="phone != null">
                phone=#{phone},
            </if>
            <if test="address != null">
                address=#{address}
            </if>
        </set>
        where id=#{id}
    </update>

    <select id="selectPage" resultMap="userResultMap">
        select * from sys_user
        <where>
            <if test="username != null">
                username like concat('%',#{username},'%')
            </if>
            <if test="address != null">
                and address like concat('%',#{address},'%')
            </if>
        </where>
        limit #{start},#{pageSize}
    </select>

</mapper>

2.3 接口测试

给数据库添加数据
成功的测试结果显示如下

3. 前端页面数据展示

后端接口成功编写，前端开始实现数据展示；在开始写前端，为了将前后端放在一个项目，可以进行如下图操作：
在这里插入图片描述
最后项目的结构如下：

3.1 vue安装axios

使用axios发送请求

3.1.1 安装axios

npm i axios -S

在这里插入图片描述

3.1.2 创建request.js实现对axios的封装

封装axios可以更好地管理HTTP请求和响应，实现统一的请求处理逻辑、错误处理逻辑、拦截器等功能。

在这里插入图片描述
request.js

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

3.1.3 main.js引入

import request from '@/utils/request'
Vue.prototype.request=request

// 接下来可以使用this.request发起请求

3.2 HomeView页面编写

<template>
  <el-container style="min-height: 100vh">

    <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);">
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
               background-color="rgb(48, 65, 86)"
               text-color="#fff"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse"
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
          <b style="color: white" v-show="logoTextShow">后台管理系统</b>
        </div>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </template>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </template>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 70px; cursor: pointer">
          <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息</el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

      <el-main>
        <div style="margin-bottom: 30px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input>
          <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>
          <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        </div>

        <div style="margin: 10px 0">
          <el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
          <el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
          <el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
          <el-table-column prop="id" label="序号" width="140"></el-table-column>
          <el-table-column prop="username" label="用户名" width="140"></el-table-column>
          <el-table-column prop="nickname" label="昵称" width="140"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
          <el-table-column prop="address" label="地址" width="140"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="140"></el-table-column>
          <el-table-column label="操作"  align="center">
            <template slot-scope="scope">
              <el-button type="success">编辑 <i class="el-icon-edit"></i></el-button>
              <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [],
      pageSize: 5,
      total: 0,
      pageNum: 1,
      username: '',
      address: '',
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load();
  },
  methods: {
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    load(){
      this.request.get('http://localhost:9000/user/page',
          {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              username: this.username,
              address: this.address
            }
          }
      ).then(res => {
        this.tableData = res.data;
        this.total = res.total;
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.load();
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>

3.3 前端调用后端插曲（无法直接调用，会报错）

3.3.1 报错原因

在这里前端无法直接访问后端（违背同源策略），如下图所示：
在这里插入图片描述

3.3.1 后台处理跨域

跨域前端，后端都可以去处理，本篇文章采取后台处理，项目结构如下，在项目下创建config文件夹存放处理跨域类CorsConfig
在这里插入图片描述
CorsConfig.java(解决跨域)

package com.ppj.fb.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

3.4 页面显示

到此页面成功显示如下图所示：
在这里插入图片描述

总结

在不使用框架，手动实现分页，加深对分页操作理解；
可能遇到的问题：前端的项目和后端的项目怎么放在一起（文章有介绍），前端怎么调用后端接口（在调用之前解决跨域问题）；
带模糊条件分页查询
注明：select * from sys_user where username like concat('%',#{username},'%') limit #{start},#{pageSize}
该SQL的执行顺序是：先进行全表的模糊查询，在这基础上再进行分页操作