Question

我对来自JSON的某些数据有疑问，我无法弄清楚我在做什么错。 1）例如，当我访问/ details / 4之类的网页时，我正在使用以下代码段：

 router.get('/details/:id', async function (req, res, next) {
 id = req.params.id;
 var lat,lng,identifier,dimensions,description,Title,Images = [];
 try {
 var  querySql = 'SELECT table1.uid,preview_description,table3.identifier,location_lat,location_lng,width,height, table1.title ' +
 'FROM table1 LEFT JOIN table2 ON table2.uid_foreign = table1.uid ' +
 'LEFT JOIN table3 ON table3.original = table2.uid_local WHERE table1.uid = ' + id + '';
  var result = await pool.query( querySql );
  Object.keys(result).forEach(function(key) {
    var row = result[key];
    lat = row.location_lat;
    lng = row.location_lng;
    dimensions = Math.min(row.width,row.height);
    identifier = IMGPath.concat(row.identifier);
    description = row.preview_description.substring(0,150) + "...";
    if(description.indexOf('\n') && description.indexOf('\n') > 10)     {description = description.substring(0,description.indexOf('\n')-1);}
    Title = row.title;
 });

  querySql =     'SELECT table3.identifier FROM table1 ' +
                 'LEFT JOIN table2 ON table2.uid_foreign = table1.uid ' +
                 'LEFT JOIN table3 ON table3.original = table2.uid_local ' +
                 'WHERE table1.uid = ' + id + ' ' +
                 'AND table3.task_type = "Image.CropScaleMask" ' +
                 'AND name IS NOT NULL; ';
  result = await pool.query( querySql );
  Object.keys(result).forEach(function(key) {
    var row = result[key];
    if (IMGPath.concat(row.identifier).endsWith(".png") ||      IMGPath.concat(row.identifier).endsWith(".jpg")){
    Images.push({"identifier":IMGPath.concat(row.identifier)});}
 });
    } catch(err) {
        console.log(err);
    }
 res.render('details.ejs',{ latitude:lat , longitude:lng , image:identifier , dimension:dimensions , desc:description , title:Title , image:JSON.stringify(Images) });
 });

如上所述，我在服务器端使用NodeJS和ExpressJS并从服务器渲染和获取数据，我使用的是axios，其中以EJS为模板，使用VueJS进行渲染。

2）因此，通过此.get方法，除图像外，其他一切都很好。在网页上，我有以下代码段：

   ....
   <div v-for="(resultImages,k) in resultsImages" :key="k" >
   <img v-bind:src="resultImages.identifier" style="width:250px;height:250px;padding:8px;" alt="IMAGE UNAVAILABLE" onerror='this.src="/public/noimage.png";' /><br>
   </div>
   ....
   const details = new Vue({
   el: '#detailsLOC',
   data: {
  resultsONE: [],
  resultsImages: [],
  GeoJsonONE: []
 },
 methods: {
    toMainPage() {
   }
   },
 mounted() {
   axios.all([
       axios.get('/dontmindthisURL')
     ]).then(axios.spread((response1) => {
    this.resultsONE = response1.data;
    this.resultsImages = <%- JSON.stringify(image) %> //this is the last method I've tried
    this.resultsImages = decodeURIComponent(this.resultsImage);
     })).catch( e => {
    console.log(e);
        });
   }
     });

但是当我访问/ details / ...页面时，我得到一些noimage.png图像，并且在devtools（console）中是404错误：

 mywebsite/details/[%7B"identifier":"/path/9/2/img1.jpg"%7D,%7B"identifier":"/path/9/2/img2.jpg"%7D,%7B"identifier":"/path/9/2/img3.jpg"%7D,%7B"identifier":"/path/8/e/img4.jpg"%7D]

问题是我不明白为什么我仍然在数据中保留这些％7D，％7B的东西，而且我注意到如果我从res.send中删除JSON.stringify（）可以避免出现404错误（nodejs代码段），但之后我在查询语法上遇到错误：

   { Error: ER_PARSE_ERROR: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '[object Object],[object Object],[object Object],[object Object]' at line 1

我该怎么办？

JSON数据包含未编码的特殊字符，例如＆，％7D，％7B

0 个答案: