基于SpringBoot+Vue的智能楼宇后台管理（个人记录用）

一、Day01

1.1 BUG

• org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input lengt........

  • Settings --> File Encodings --> UTF-8

  • 删除application.yaml文件，重新建一个

• Springboot框架中Mapper层在进行多参数查询时一定要加@Param注解同时指定名字，否则查询无效

• Controller层 @RequestParam 指定传入参数的名字

1.2 Vue qs

• 操作Terminal

  • npm install qs

  • npm run xx

  • const QS = require('qs')   或者 import qs from 'qs’ 导入
    ​
    ​
    validateFields(validateFieldsKey, { force: true }, (err, values) => {
                    if (!err) {
                        console.log('login form', values)
                        const loginParams = { ...values }
                        delete loginParams.username
                        loginParams[!state.loginType ? 'email' : 'username'] = values.username
                        loginParams.password = md5(values.password)
                        const params = QS.stringify(loginParams)
                        Login(params)
                            .then(res => this.loginSuccess(res))
                            .catch(err => this.requestFailed(err))
                            .finally(() => {
                                state.loginBtn = false
                            })
                    } else {
                        setTimeout(() => {
                            state.loginBtn = false
                        }, 600)
                    }
                })
            },

• 增加了一些安全性的查询字符串解析和序列化字符串的库

• qs.parse()是将URL解析成对象的形式

• qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

二、Day02

2.1 BUG

2.2 数据传输过程

• 工具类

package com.yxq.returnJson;
​
public class ReturnObject {
​
    private Integer code = 200;
    private String message = ""; //返回信息 表示0或者1
    private Object result;  //返回信息的内容，定义为String也可以的，目前只用了tring
​
    public ReturnObject() {
    }
​
    public ReturnObject(Object result) {
        this.result = result;
    }
​
    public ReturnObject(String message, Object result) {
        this.message = message;
        this.result = result;
    }
​
    public Integer getCode() {
        return code;
    }
​
    public void setCode(Integer code) {
        this.code = code;
    }
​
    public String getMessage() {
        return message;
    }
​
    public void setMessage(String message) {
        this.message = message;
    }
​
    public Object getResult() {
        return result;
    }
​
    public void setResult(Object result) {
        this.result = result;
    }
​
    @Override
    public String toString() {
        return "ReturnObject{" +
                "code=" + code +
                ", message='" + message + '\'' +
                ", result=" + result +
                '}';
    }
}

• application.yaml

server:
  port: 8081
spring:
  datasource:
    url: jdbc:mysql://localhost:3307/family_service_platform?serverTimezone=UTC&useSSL=false
    password: 123456
    username: root
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath:com/yxq/mapper/*.xml
  configuration:
    map-underscore-to-camel-case: true
#sql语句日志配置
logging:
  level:
    com:
      yxq:
        mapper: debug

• vue框架-->src-->api-->estate.js

import { axios } from '@/utils/request'    //获取请求地址 request.js中会创建axios实例 baseurl为对应后端url
    
export function insertEstate(parameter) {
    return axios({
        url: '/estate/insertEstate',
        method: 'post',
        data: parameter
    })
}

• Controller层

@RequestMapping("/estate/insertEstate")
    public String insertEstate(FcEstate fcEstate){
        System.out.println("insert");
        Integer result = estateService.insertEstate(fcEstate);
        if(result == 0){
            return JSONObject.toJSONString(new ReturnObject("0","房产编码已经存在"));
        }else {
            return JSONObject.toJSONString(new ReturnObject("1","插入房产成功"));
        }
    }

• service层

public Integer insertEstate(FcEstate fcEstate){
        //定义查询包装类
        QueryWrapper queryWrapper = new QueryWrapper(); //mybatisplus框架度假秘诀
        queryWrapper.eq("estate_code", fcEstate.getEstateCode());
        FcEstate findResult = fcEstateMapper.selectOne(queryWrapper);
        //定义返回的结果
        int result = 0;
        if (findResult != null){
            return result;
        }else {
            result = fcEstateMapper.insert(fcEstate);
            return result;
        }
    }

• mapper层

  • 这里基于mybatisplus，故省去简单的sql语句编写

2.3 字段映射问题

<resultMap id="loginResult" type="com.yxq.bean.TblUserRecord">
        <id column="id" property="id" />
        <result column="user_name" property="userName" />
        <result column="user_password" property="userPassword" />
        <!--此处省略n多行-->
        <result column="create_date" property="createDate" />
    
        <!--关联对象了-->
        <association property="tblRole" javaType="com.yxq.bean.TblUserRole">
            <result property="rolePrivileges" column="role_privileges"></result>
        </association>
        <association property="tblDept" javaType="com.yxq.bean.TblDept">
            <result property="deptPrivileges" column="dept_privileges"></result>
        </association>
        <association property="tblCompany" javaType="com.yxq.bean.TblCompany">
            <result property="companySimpleName" column="company_simple_name"></result>
        </association>
    
    </resultMap>
​
    <select id="login" resultMap="loginResult">
         select a.*,b.dept_privileges,c.role_privileges,d.company_simple_name from tbl_user_record a
         left join tbl_dept b on a.user_dept = b.id
         left join tbl_role c on a.user_role = c.id
         left join tbl_company d on a.company = d.id
         where a.user_name = #{username} and a.user_password = #{password}
    </select>

三、Day03

3.1 Vue前后联调

<!-- step1.vue页面 以下包含在script标签中-->
import { insertEstate, selectCompany } from '@/api/estate'
const QS = require('qs')
​
created() {
      selectCompany().then(res => {
        this.select = res.result
      }).catch(err => {
        this.$notification['error']({
          message: '错误',
          description: err.toString(),
          duration: 1
        })
      })
    },
methods: {
      nextStep() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const data = QS.stringify(this.form)
            insertEstate(data).then(res => {
              if (res.message == 1){
                setTimeout(() => {  //设置'成功'这个窗口显示消失的时间
                  this.$notification.success({
                    message: '成功',
                    descriptions: res.result
                  })
                },1000)
                this.$store.commit('SET_TITLE',{
                  buildingNumber: this.form.buildingNumber,  //楼宇数量
                  estateCode: this.form.estateCode //房产编码
                    //以上两个参数需要带到下一个页面进行回显
                })
                this.$emit('nextStep') //下一步页面跳转
              }else {
                setTimeout(() => {
                  this.$notification.success({
                    message: '失败',
                    descriptions: res.result
                  })
                },1000)
                console.log(res.result)
              }
            }).catch(err => {
              this.$notification.error({
                message: '抱歉',
                description: err.result
              })
            })
          } else {
            return false
          }
        })
      },

<!--step2.vue-->
import moment from 'moment'
import { selectBuilding,updateBuilding } from '../../../api/estate'
const QS = require('qs')
const data = []
​
created() {
        const sendData = {  //传到后端的字段数据
          buildingNumber: this.$store.state.oneStep.buildingNumber,
          estateCode: this.$store.state.oneStep.estateCode
        }
        const parameter = QS.stringify(sendData)
        selectBuilding(parameter).then(res =>{
          const result = res.result
          for (let i = 0; i < result.length; i++) {
            const building = result[i]
            data.push({
              key: building.id,
              buildingCode: building.buildingCode,
              buildingName: building.buildingName,
              unitCount: building.unitCount,
              overRoofDate: building.overRoofDate,
              finishDate: building.finishDate,
              salePermissionId: building.salePermissionId,
              buildPermissionId: building.buildPermissionId,
              useArea: building.useArea,
              remark: building.remark
            })
            this.cacheData = data.map(item => ({ ...item }))
          }
          // this.$notification.success({
          //   message: 'success',
          //   description: err.result
          // })
      }).catch(err => {
          this.$notification.success({
            message: '失败',
            description: err.result
          })
        })
    },
    methods: {
        change(){
          // console.log('result: ' + this.form2.region)
          const unitNumber = this.form2.region
          for(let i = 0;i < this.data.length;i++){
            this.data[i].unitCount = unitNumber
          }
        },