vue项目用created()初始化页面所需的数据

有过这种情况，在页面加载时，初始化所需的数据，就需要用created()了。vue.js中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。

以下，以一个用户信息页面举例，用axios进行post请求，使用node.js连接mysql访问数据并返回给当前form表单。效果图如下：

第一步，新建一个form表单

<template>
    <!--label-width另label自适应宽度并且默认向右对齐-->
      <el-form label-width="auto" :key="usertablekey">
        <el-form-item label="账号:">
          <span>{{userList[0].id}}</span>
        </el-form-item>
        <el-form-item label="姓名:">
          <span>{{userList[0].name}}</span>
        </el-form-item>
        <el-form-item label="职业:">
          <span>{{userList[0].job}}</span>
        </el-form-item>
        <el-form-item label="出生日期:">
          <span>{{userList[0].birthday}}</span>
        </el-form-item>
        <el-form-item label="地址:">
          <span>{{userList[0].address}}</span>
        </el-form-item>
      </el-form>
</template>

第二步，初始化各元素的数值

data () {
    return {
      // 用户信息table的key，没有他，form表单还需要触发事件才会更新
      usertablekey: '',
      // 用户信息数组初始化
      userList: [
        {
          id: '',
          name: '',
          job: '',
          address: '',
          birthday: ''
        }
      ]
    }
}

第三步，新建created（）方法，并在其中调用初始化数据的方法

// 页面启动时加载函数
  created () {
    this.getuserData()
  }

第四步，写获取数据的方法

// 获取用户信息
    getuserData () {
      // 默认情况下，axios将JavaScript对象序列化为JSON。要以application/x-www-form-urlencoded格式发送数据，可以使用下面qs库对数据进行编码
      this.$axios.post('http://localhost:3000', qs.stringify({
        type: 'user_information',
        // 这里username写死了，自己根据情况可以动态赋值
        username: '123'
      }))
        .then((response) => { // 请求成功处理
          console.log(response.data[0])
          // 赋值用户信息数组
          this.userList[0] = response.data[0]
          console.log(this.userList)
          // 赋值用户table的key
          this.usertablekey = this.userList[0].id
        })
        .catch((error) => { // 请求失败处理
          console.log(error)
        })
    }

第五步，配置node.js文件连接数据库，就大功告成了！

const http = require('http')
const mysql = require('mysql')
const querysrting = require('querystring')

const server = http.createServer((req, res) => {
  // 添加响应头,解决node返回数据给ajax跨域的不兼容的问题
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 设置显示的类型和编译字符方式，不然显示为乱码
  res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'})

  // 初始化一个querystring来赋值post返回的数据
  let postVal = ''
  // 赋值过程
  req.on('data', (chunk) => {
    postVal += chunk
  })
  // 赋值结束
  req.on('end', () => {
    let formVal = querysrting.parse(postVal)
    let type = formVal.type
    let fid = formVal.username// 获取id

    // 连接mysql配置信息
    const conn = mysql.createConnection({
      host: 'localhost',
      user: 'root',
      password: '123456',
      database: 'testdb'
    })
    conn.connect()
    if (type === 'user_information') {
      conn.query('SELECT * FROM tb_login where id = ?', [fid], (err, results, fields) => {
        if (err) throw err
        if (results.length > 0) {
          console.log(JSON.stringify(results))
          res.end(JSON.stringify(results))
        } else {
          res.end()
        }
      })
    }
    conn.end()
  })
})

server.listen(3000)

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/106478.html

vue项目用created()初始化页面所需的数据

相关推荐