vue.js配合$.post从后台获取数据简单demo分享

下面介绍关于vue.js配合$.post从后台获取数据简单demo的详细攻略。

步骤一：准备工作

在实现这个demo前，需要准备一些工作：

安装vue.js库
引入jQuery库
编写后台接口

步骤二：编写代码

先在HTML中引入vue.js和jQuery库，并且新建一个Vue实例对象：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in items">
        {{item.title}}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: []
      },
      mounted() {
        // 发送POST请求获取数据
        $.post('/api/data', {}, (res) => {
          this.items = res.data;
        });
      }
    });
  </script>
</body>
</html>

上面的例子中，我们新建了一个Vue实例，定义了items属性用于存储从后台请求到的数据。在mounted的生命周期钩子中，我们发送一个POST请求到后台接口获取数据，然后将数据赋值给items属性。

步骤三：编写后台接口

后台接口采用Node.js编写，使用express框架，代码如下：

const express = require('express');
const app = express();

app.post('/api/data', (req, res) => {
  // 这里可以编写查询数据库的逻辑代码
  const data = [
    {id: 1, title: 'Vue.js教程'},
    {id: 2, title: 'React教程'},
    {id: 3, title: 'Angular教程'},
  ];

  // 返回数据
  res.send({
    code: 0,
    data: data
  });
});

app.listen(3000, () => {
  console.log(`server started at http://localhost:3000`);
});

上面的例子中，我们定义了一个POST路由/api/data，用于返回数据。

步骤四：启动应用程序

在命令行中运行以下命令来启动应用：

node server.js

以上命令将启动Node.js服务器，然后打开浏览器访问 http://localhost:3000 就可以看到从后台请求到的数据在页面中展示了。

示例1：在后台根据用户ID查询用户信息

下面是一个示例，展示了如何根据用户ID查询用户信息：

在HTML代码中添加以下代码：

<form>
  <input type="text" v-model="uid" placeholder="请输入用户ID">
  <button type="button" @click="queryUserInfo">查询</button>
</form>
<div>
  <p>用户ID: {{userInfo.id}}</p>
  <p>用户姓名：{{userInfo.name}}</p>
  <p>用户年龄：{{userInfo.age}}</p>
</div>

以上代码中，我们新建了一个表单用于输入用户ID，并且添加了一个查询按钮。在下方添加了三个p标签，用于展示查询到的用户信息。

在Vue实例中添加以下代码：

new Vue({
  el: '#app',
  data: {
    uid: '',
    userInfo: {}
  },
  methods: {
    queryUserInfo() {
      $.post('/api/user/info', {id: this.uid}, (res) => {
        this.userInfo = res.data;
      });
    }
  }
});

上面的代码中，我们新建一个queryUserInfo方法，用于根据用户ID发送POST请求到后台查询用户信息，并将查询到的结果赋值给userInfo。

在后台添加以下代码：

app.post('/api/user/info', (req, res) => {
  const users = [
    {id: 1, name: '小明', age: 18},
    {id: 2, name: '小红', age: 20},
  ];

  const user = users.find(item => item.id === Number(req.body.id));

  // 返回查询结果
  res.send({
    code: 0,
    data: user
  });
});

上面的代码中，我们定义一个POST路由/api/user/info，用于查询用户信息，并返回查询结果。

示例2：根据关键字搜索文章列表

以下是搜索文章列表的示例：

在HTML代码中添加以下代码：

<form>
  <input type="text" v-model="keyword" placeholder="请输入搜索关键字">
  <button type="button" @click="search">搜索</button>
</form>
<ul>
  <li v-for="item in resultList">
    {{item.title}}
  </li>
</ul>

以上代码中，我们新建了一个表单用于输入搜索关键字，并添加了一个搜索按钮。在下方添加了一个无序列表用于展示搜索结果。

在Vue实例中添加以下代码：

new Vue({
  el: '#app',
  data: {
    keyword: '',
    resultList: []
  },
  methods: {
    search() {
      $.post('/api/search', {keyword: this.keyword}, (res) => {
        this.resultList = res.data;
      });
    }
  }
});

上面的代码中，我们新建一个search方法，用于根据关键字搜索文章列表，并将查询到的结果赋值给resultList。

在后台添加以下代码：

app.post('/api/search', (req, res) => {
  // 这里可以编写查询数据库的逻辑代码
  const data = [
    {id: 1, title: 'Java基础教程'},
    {id: 2, title: 'HTML5教程'},
    {id: 3, title: 'CSS3教程'},
    {id: 4, title: 'JavaScript教程'},
    {id: 5, title: 'Vue.js教程'},
    {id: 6, title: 'React教程'},
  ];

  const result = data.filter((item) => {
    // 根据关键字过滤数据
    return item.title.indexOf(req.body.keyword) !== -1;
  });

  // 返回查询结果
  res.send({
    code: 0,
    data: result
  });
});

上面的代码中，我们定义一个POST路由/api/search，用于根据关键字搜索文章列表，并返回搜索结果。