springboot+vue实现前后端分离实现查询功能

最新推荐文章于 2024-09-02 11:14:24 发布

前程四紧@员

最新推荐文章于 2024-09-02 11:14:24 发布

阅读量2.1k

点赞数 1

文章标签： spring boot vue

本文链接：https://blog.csdn.net/qq_56403451/article/details/127725131

版权

（一）：创建SpringBoot项目（注意：在创建项目时要导入springboot-web、mysql-driver、等依赖）

（二）：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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.hailong</groupId>
    <artifactId>admin_vue</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>admin_vue</name>
    <description>admin_vue</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>


        <!--swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>

        <!--代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>1.7</version>
        </dependency>
        <!--        mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>com.alibaba</groupId>-->
<!--            <artifactId>fastjson</artifactId>-->
<!--            <version>2.0.15.graal</version>-->
<!--        </dependency>-->

<!--        导入导出的依赖-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.20</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>4.1.2</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

（三）：在后端解决跨域

1.创建一个CorsConfig工具类

package com.hailong.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("http://localhost:8080"); // 1 设置访问源地址（为前端地址）
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

至此后端的跨域配置合适：

vue项目中

（一）安装axios

npm i axios

（二）封装request请求

创建一个utils.request.js

import axios from 'axios'

const request = axios.create({
	baseURL: 'http://localhost:9000',  // 该地址为后端访问地址
    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

（三）：使用axios发请求

<template>
    <div>
        <div style="margin:10px 0">
            <el-input style="width:200px" placeholder="请输入用户名" v-model="username" suffix-icon="el-icon-search"></el-input>
            <el-button type="primary" style="margin-left:5px" @click="search">搜索</el-button>
          </div>
          <div style="display:flex;">
          <div style="margin:10px 0;justify-content:flex-start;display:flex">
                  
            <el-button type="primary" @click="addUser">新增<i style="margin-left:10px" class="el-icon-circle-plus-outline"></i></el-button>
            
            <el-popconfirm
            style="margin-left: 8px;"
            confirm-button-text='确定'
            cancel-button-text='我在想想'
            icon="el-icon-info"
            icon-color="red"
            title="你确定要批量删除这些数据吗？"
            @confirm="Batchs"
          >
          <el-button type="danger" slot="reference">批量删除<i style="margin-left:10px" class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
           
          </div>
          <div style="margin:10px 0;justify-content:flex-end;flex:1;display:flex">

            <el-upload action="http://localhost:9000/user/import" 
            :show-file-list="false" 
            accept="xlsx"
            :on-success="handLeExcelImportSuccess"
            style="display:inline-block">
            <el-button type="info" style="margin-right: 5px;">导入<i style="margin-left:10px" class="el-icon-bottom"></i></el-button> 
            </el-upload>
            <el-button type="primary" @click="exp">导出<i style="margin-left:10px" class="el-icon-top"></i></el-button>
          </div>
          </div>
        <el-table :data="tableData" border stripe  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
          width="55">

          </el-table-column>
          <el-table-column prop="id" label="ID" width="80">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="140">
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" width="120">
          </el-table-column>
          <el-table-column prop="email" label="邮箱">
          </el-table-column>
          <el-table-column prop="phone" label="电话">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column label="操作" width="170">
            <template slot-scope="scope">
            <el-button type="success" @click="userEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
            style="margin-left: 8px;"
            confirm-button-text='确定'
            cancel-button-text='我在想想'
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="userDelete(scope.row.id)"
          >
          <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding:10px 0">
           <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
           </el-pagination>
        </div>

        <!-- 弹窗 -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
          <el-form label-width="60px" size="small">
            <el-form-item label="用户名">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>

    </div>
</template>
<script>
   export default {
       name:'UserList',
       data () {
           return {
            username:"",
            total:0,
            pageNum:1,
            pageSize:10,
            tableData: [],
            multipleSelection: [],
            // 表单相关的处理
            dialogFormVisible:false,
            form:{
            username:'',
            email:'',
            phone:'',
            nickname:'',
            address:''
            },
           }
       },
       created(){
            //请求分页查询数据
            this.load();
       },
       methods: {
load(){//此处为异步请求，实现查询分页功能
        this.request.get("/user/page",{
          params:{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              username:this.username,
            }
          }).then(res =>{
            console.log(res);
            this.tableData = res.records;
            this.total= res.total;
          })   
      },
      
    }
   }
</script>

（四）：创建entity中的实体类user

package com.hailong.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

//自动装配get/set
@Data
构造无参方法
//@NoArgsConstructor
构造有参方法
//@AllArgsConstructor
@TableName(value = "sys_user")
public class User {
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;
    @TableField(value = "avatar_url")
    private String avatar;
}

（五）创建mapper接口方法

package com.hailong.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.hailong.pojo.User;

import org.apache.ibatis.annotations.Param;

import java.util.List;
//@Mapper
public interface UserDao extends BaseMapper<User> {
    List<User> findAll();
    int insertUser(User user);
    int updateUser(User user);
    Integer deleteById(@Param("id") Integer id);
//    List<User> selectPage(Integer pageNum,Integer pageSize,String username);
    Integer total(String username);
}

（六）：创建UserMapper.xml

编写sql

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hailong.dao.UserDao">
<select id="findAll" resultType="com.hailong.pojo.User">
    select * from sys_user;
</select>
    <insert id="insertUser">
     insert into sys(username,password,nickname,email,phone,address)
     values (#{username},#{password},
             #{nickname},#{email},
             #{phone},#{address})
    </insert>
    <update id="updateUser">
        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="phone != null">
                address=#{address}
            </if>
        </set>
     <where>
         id = #{id}
     </where>
    </update>

    <delete id="deleteById">
        delete from sys_user where id = #{id}
    </delete>

    <select id="selectPage" resultType="com.hailong.pojo.User">
        select * from sys_user where username like concat('%',#{username},'%') limit #{pageNum},#{pageSize}
    </select>

    <select id="total" resultType="java.lang.Integer">
        select count(*) from sys_user where username like concat('%',#{username},'%');
    </select>
</mapper>

（七）实现controller(此方法中含有完整的crud，在前端发送请求便可实现)

package com.hailong.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.hailong.pojo.User;
import com.hailong.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {
/*   @Autowired
   private UserDao userDao;*/
    @Autowired
    private UserService userService;
    //测试mybatis
    //查询所有数据
    @GetMapping
    public List<User> findUser(){
//        return userDao.findAll();//使用mybatis实现的查询所有数据
        //使用mybatis-plus实现查询所有数据
        return userService.list();
    }

    //修改添加数据
    @PostMapping
    public boolean add(@RequestBody User user){
        boolean i = userService.addoredit(user);
        return i;
    }

    //通过id删除数据
    //    int i = userDao.deleteById(id);
//       return i >0 ?"success":"error";//使用mybatis实现通过id删除
    @DeleteMapping("/{id}")
    public boolean delete(@PathVariable Integer id){
        System.out.println("==========>"+id);
        return userService.removeById(id);
    }

    @PostMapping("/del/batch")
    public boolean deletebatch(@RequestBody List<Integer> ids){
        return userService.removeByIds(ids);
    }
    //分页查询(通过mysql的基础实现分页查询)
    //RequestParam接收？pageNum=1&pageSize=10
    //结论：limit第一个参数 =（pageNum - 1）* pageSize
    @GetMapping("/page")
    public Map<String,Object> findPage(@RequestParam Integer pageNum,
                                       @RequestParam Integer pageSize,
                                       @RequestParam String username){
        pageNum = (pageNum - 1)* pageSize;
        Map<String,Object> res = new HashMap<>();
        List<User> data = userDao.selectPage(pageNum,pageSize,username);
        Integer total = userDao.total(username);
        res.put("data",data);
        res.put("total",total);
        return res;
    }

   

}

前程四紧@员

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫