毕设前后端(vue2+node.js+express)遇到的问题+解决办法

---

问题一：

问题描述：分页查询条件丢失

问题定位：点击页码的处理函数中仅仅将页码重新赋值并调用的是没有查询条件的请求方法

    handleCurrentChange(val) {
    	this.page = val;
		this.getParkLots();
    },

---

解决方案

拿到查询表单的表单对象并判断该对象的属性值是否为空，为空则调用没有查询条件的，有值则调用由查询条件的

    handleCurrentChange(val) {
      this.page = val;
      const arr = Object.values(this.formInline).filter((item) => {
        return item;
      });
      arr.length > 0 ? this.getParkLots(this.formInline) : this.getParkLots();
    },

问题二：

问题描述：测试express编写的接口时，报错的错误信息为：Cannot set headers after they are sent to the client

问题定位：路由处理函数中有多处直接res.send()，res.send()仅能执行一次

---

解决方案

将多个res.send()前面加上return，仅留一个res.send()即可

问题三：

问题描述：测试express编写的post方法的接口时，req.body的值为undefined

问题定位：没有配置解析表单数据的中间件

---

解决方案

//后端(node.js+express)在入口文件加上
//用于解析application/x-www-form-urlencoded格式的表单数据
app.use(express.urlencoded({extended:false}))

如果请求头中的Content-Type为application/json;charset=utf-8时使用：
app.use(express.json())

问题四：

场景描述：

车牌识别模块中，点击上传文件之后，如果上传的是非图片文件以及图片文件不是以.png/.jpg结尾的图片在前端可以检测到并作出提示；
但是对于以.png/.jpg为扩展名的非车牌号的图片时，前端将该图片数据传给后端，后端无法识别出车牌号，会直接报错，且没有对报错进行错误处理，所以前端axios响应拦截时会报timeout of 5000ms exceeded，因为我的后端代码最初如下方所示：

exports.getLicense = async (req, res) => {
    const url = 'https://ocrcp.market.alicloudapi.com/rest/160601/ocr/ocr_vehicle_plate.json'
    //这里我只是简单的对于能识别车牌号的图片来说能拿到数据，并没有对无法识别的图片进行错误捕获
    const result = await client
        .post(url, {
            data: {
                image: req.body.img
            },
            headers: {
                accept: 'application/json'
            }
        }
    const sqlStr = 'select * from park_info where carId=?'
    db.query(sqlStr, result.plates[0].txt, (err, results) => {
        if (err) return res.cc(err)
        res.cc('车牌识别成功!', 200, { result, results })
    })
}

基于上述场景，就去学习了一下async/await捕获错误啦！在此记录一下

问题描述：async/await捕获错误

解决方案

exports.getLicense = async (req, res) => {
    const url = 'https://ocrcp.market.alicloudapi.com/rest/160601/ocr/ocr_vehicle_plate.json'
    //如果识别成功err为null,data有值；反之识别不成功err有值，data则为null
    const [err, data] = await client
        .post(url, {
            data: {
                image: req.body.img
            },
            headers: {
                accept: 'application/json'
            }
        })
        .then(data => [null, data])
        .catch(err => [err, null])
    //对错误情况进行响应处理
    if (err) {
        return res.cc('车牌识别失败！请上传清晰的车牌照图片！')
    }
    const sqlStr = 'select * from park_info where carId=?'
    db.query(sqlStr, data.plates[0].txt, (err, results) => {
        if (err) return res.cc(err)
        res.cc('车牌识别成功!', 200, { data, results })
    })
}

问题五：

问题描述：ElementUI中的table选中表格数据，勾选下一页后前一页数据不保存

解决方案

查看了elementUI组件中的表格Table Events中有该事项：

• 在 el-table-column标签中设置 :row-key="getRowKeys"
• 在methods中设置方法getRowKeys
• 在 el-table标签中type="selection"的那项 设置 :reserve-selection="true"
  代码如下：

//在表格代码中
	 <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="selectData"
        :row-key="getRowKeys"
      >
        <el-table-column
          type="selection"
          width="65"
          :reserve-selection="true"
        ></el-table-column>
        …………
        …………
       //在methods中
       methods(){
		    getRowKeys(row) {
      			return row.id;
    		}
	   }