FE request data(img) from BE

Description

前端向后端请求一系列数据(文本、图片等静态资源)并展示在页面上

request.js

import axios from 'axios'

export function request(config) {

  // 1 创建实例
  const instance = axios.create({
    baseURL: 'http://localhost:3000',
    timeout: 5000,
    // headers: {
    //   'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    // },
  });

  // 2 两类拦截器
  instance.interceptors.request.use(config => {
    return config
  }, error => {
    console.log(error);
  });

  instance.interceptors.response.use(res => {
    return res.data
  }, error => {
    console.log(error);
  });

  //3 发送真正的网络请求
  return instance(config)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

profile.js

import {request} from "./request";

export function getProfileData(username) {
  return request({
    url: '/profile_info',
    params: {
      username
    }
  })
}
1
2
3
4
5
6
7
8
9
10

Profile.vue

methods: {
      getProfileData() {
        getProfileData(this.id).then(res => {
          console.log(res);
          console.log(res[0]);
          console.log(res[0].ava_pos);
          console.log(url + res[0].ava_pos);
          this.avatar = url + res[0].ava_pos;
        })
      }
    },
created() {
      this.getProfileData()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="avatar" class="center">
    <img :src="avatar" alt="avatar" class="avatar center_item">
</div>
1
2
3

v-bind绑定data里的avatar展示在页面上

后端profile.js

const connection = require('./connect')

module.exports = function (username, callback) {

  new Promise((resolve, reject) => {
    connection.query('use blogs', function (err) {
      if(err) reject(err);
      else resolve('Database changed!');
    })
  }).then(function (info) {

    console.log(info);// Database changed!

    return new Promise((resolve, reject) => {
      connection.query('select * from profiles where username="' + username + '"', function (err, res) {
        if(err) reject(err);
        else {
          resolve('Caught you!');
          callback(null, res);
        }
      })
    })
  }, function (err) {
    callback('Error : Maybe the database did not change : ' + err);
    console.log('Error : Maybe the database did not change : ' + err);
  }).then(function (res) {
    console.log(res);  // Caught you!
  }, function (err) {
    callback('Error : Maybe select error occurred: ' + err)
    console.log('Error : Maybe select error occurred: ' + err);
  })


}

// 所有的 reject(err) 后面对应的 function(err) 都有 callback(info) info[0] === 'E'
// 所有的 resolve(info) 仅在后端打印一下成功信息。另外，最后一个 resolve 后紧跟 callback(null, res)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

后端router.js

const getProfile = require('./db/profile')
router.get('/profile_info', function (req, res) {
  getProfile(req.query.username, function(err, data){
    if(err) res.send(err)
    else res.send(data)
  })
})
1
2
3
4
5
6
7

profile_ini.js

connection.query('insert into profiles(username, ava_pos)' +
    'values("admin", "/public/img_upload/avatar.jpg")', function (err) {
  if(err) throw err;
  console.log('Data was inserted!');
})
1
2
3
4
5

向mysql存图片地址时，从 /public/开始，前端请求过去数据后，在图片地址前面加上http://localhost:3000并在后端index.js开放/public/静态资源

index.js

const express = require('express')
const app = express()
app.use('/public/', express.static('./public/'))
1
2
3

需要注意的是在图片地址前加上localhost:3000时，前面一定要加http://，因为这是在img标签里的src属性，如果src="localhost:3000/public/img_load/avatar.jpg"是加载不出图片的，他会在本地找。我们平时在浏览器输入localhost:3000/public/img_load/avatar.jpg浏览器会为我们加上http://，而这里src这一属性没有这个功能