WEB全栈最佳实践FOR后端开发人员

技术栈

• 前端
  • React/Redux/Antd/Axios
  • Typescript
• 后端
  • Java/Springboot/Mybatisplus

接口

• 后端

  • SpringMVC定义接口,如GET user/info

    @GetMapping("user/info")
    public R getUserInfo(){
      // 从数据库获取当前用户信息
      // 返回用户信息
      return R.ok().data(userInfo);
    }
    

• 前端

  • 封装接口调用,如GET user/info

    function getUserInfo(callback){
    	// 调用Axios等网络请求库
      // 执行回调,并将用户信息传入回调函数
      callback(res)
    }
    

目录结构

• 后端

  cn.lucky-bin
  	- common 通用功能
  	- controller 控制器
  	- service 业务层
  	- mapper 数据库操作
  	- entity 实体类,字段与数据库表一致
  	- dto 请求体,如登录请求只需要用到`username,password`
  	- vo 响应体,如返回用户信息时需要将password字段删除,此时就需要定义一个响应体
  

• 前端

  src
  	- common 通用功能
  		- component 通用组件
  	- view 页面
  	- api 发送请求的api列表
  	- store redux仓库
  		- action
  		- reducer
      - type
  	- entity 实体类,字段与数据库表一致
  	- dto 请求体,如登录请求只需要用到`username,password`
  	- vo 响应体,如返回用户信息时需要将password字段删除,此时就需要定义一个响应体