SpringBoot+Mybatis Plus+Vue前后端分离学习分享

程序员温眉

已于 2023-09-05 15:50:30 修改

阅读量664

点赞数

分类专栏： SpringBoot 文章标签： vue

于 2020-08-25 23:19:45 首次发布

本文链接：https://blog.csdn.net/sublime_k/article/details/108230582

版权

SpringBoot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

SpringBoot

一、封装返回结果工具类

Constans接口

public interface Constants { 
    // 响应请求成功
    String HTTP_RES_CODE_200_VALUE = "success";
    // 系统错误
    String HTTP_RES_CODE_500_VALUE = "fial";
    // 响应请求成功code
    Integer HTTP_RES_CODE_200 = 200;
    // 系统错误
    Integer HTTP_RES_CODE_500 = 500;
    // 未关联QQ账号
    Integer HTTP_RES_CODE_201 = 201;
    // 发送邮件
    String MSG_EMAIL = "email";
    // 会员token
    String TOKEN_MEMBER = "TOKEN_MEMBER";
    // 用户有效期 90天
    Long TOKEN_MEMBER_TIME = (long) (60 * 60 * 24 * 90);
    int COOKIE_TOKEN_MEMBER_TIME = (60 * 60 * 24 * 90);
    // cookie 会员 totoken 名称
    String COOKIE_MEMBER_TOKEN = "cookie_member_token";
    // 微信注册码存放rediskey
    String WEIXINCODE_KEY = "weixin.code";
    // 微信注册码有效期30分钟
    Long WEIXINCODE_TIMEOUT = 1800l;
    // 用户信息不存在
    Integer HTTP_RES_CODE_EXISTMOBILE_203 = 203;
}

BaseResponse类

import lombok.Data; 
@Data
public class BaseResponse<T> { 
	/**
     * 返回码
     */
    private Integer code;
    /**
     * 消息
     */
    private String msg;
    /**
     * 返回
     */
    private T data;
    // 分页
    public BaseResponse() {  } 
    public BaseResponse(Integer code, String msg, T data) {
        super();
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
}

BaseApiService类

import lombok.Data;
import org.springframework.stereotype.Component; 
@Data
@Component
public class BaseApiService<T> { 
    public BaseResponse<T> setResultError(Integer code, String msg) {
        return setResult(code, msg, null);
    } 
    // 返回错误，可以传msg
    public BaseResponse<T> setResultError(String msg) {
        return setResult(Constants.HTTP_RES_CODE_500, msg, null);
    } 
    // 返回成功，可以传data值
    public BaseResponse<T> setResultSuccess(T data) {
        return setResult(Constants.HTTP_RES_CODE_200, Constants.HTTP_RES_CODE_200_VALUE, data);
    } 
    // 返回成功，沒有data值
    public BaseResponse<T> setResultSuccess() {
        return setResult(Constants.HTTP_RES_CODE_200, Constants.HTTP_RES_CODE_200_VALUE, null);
    } 
    // 返回成功，沒有data值
    public BaseResponse<T> setResultSuccess(String msg) {
        return setResult(Constants.HTTP_RES_CODE_200, msg, null);
    } 
    // 通用封装
    public BaseResponse<T> setResult(Integer code, String msg, T data) {
        return new BaseResponse<T>(code, msg, data);
    } 
}

二、Controller类

2.1 继承工具类BaseApiService

2.2 返回工具类特有的方法

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.user.base.BaseApiService;
import com.user.base.BaseResponse;
import com.user.entity.User;
import com.user.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RestController; 
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author wenmei
 * @since 2020-08-25
 */
@RestController
@RequestMapping("/user/user")
//解决跨域问题
@CrossOrigin
//核心就是继承BaseApiService类，调用它的特有方法进行返回数据
public class UserController extends BaseApiService<JSONObject> {
    @Autowired
    IUserService userService; 
    
    @GetMapping("/base")
    public BaseResponse<JSONObject> baseResponse(){
        Map<Object,Object> userMap=new HashMap<>();
        List<User> userList=userService.uList();
        //把user对象集合存入map集合中
        userMap.put("list",userList);
        //转为JSON格式返回
        return setResultSuccess((JSONObject) JSONObject.toJSON(userMap));
    } 
}

Vue项目

三、vue渲染数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main"> 
<div> 
    <form action="">
        <span>部门名称:
        <select name="" id="">
            <option>全部</option>
        </select>
            <input type="button" value="查询">
            <input type="button" value="新增人员">
        </span> 
    </form> 
    <h2>人才信息列表</h2> 
</div> 
    <table border=1>
        <tr>
            <td>人才编号</td>
            <td>人才姓名</td>
            <td>工作年限</td>
            <td>所属部门编号</td>
			 <td>{{result.code}}</td>
        </tr>
        <tr v-for="r in rows">
            <td>{{r.id}}</td>
            <td>{{r.uname}}</td>
            <td>{{r.urid}}年</td>
            <td>{{r.pwd}}</td>  
        </tr>
    </table>
</div>
<script>
    $(document).ready(function () {
    	 /* 后台controller类访问地址，返回json格式数据进行渲染 */
        $.getJSON("http://127.0.0.1:8080/user/user/base", function (result, status) {
			console.log(result);
			console.log("状态码"+status);
            var v = new Vue({
                el: '#main',
                data: {
              		  /* 结果中的data参数中的集合 */
                    rows: result.data.list,
					result: result
                }
            })
        });
    });
</script>
</body>
</html>