vue2 和微信小程序 渲染

vue2渲染

第一步

在控制台上安装axios  npm i axios

在main.js里写

import axios from "axios";

Vue.prototype.$axios = axios;

第二

打开Element - The world's most popular Vue UI framework

在控制台上安装npm i element-ui -S

在main.js里写

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第三

在api里写接口

export function ask() {
    return create({
        url: "/ck?",
        method: "post",
        changeOrigin: true,
    })
}

第四步渲染

import { ask } from "../api/index";
export default {
  data() {//把数据库里的代码写在return {里面
    return {
      res: [],//声明一个数组
      phone: "",
      password: "",
    };
  },
  created() {
    ask()
      .then((res) => {
        console.log(res);//渲染到控制台
        this.res = res.data;//渲染到页面
      })
      .catch((err) => {
        console.log(err);
      });
  },

微信小程序

 hnsn.wxml页面

<view class="container">
<button  bindtap = "hduaus">点击</button>
  <view wx:for="{
   
   { dhfh }}" wx:key="index">
    <view>{
   
   { item.phone}}</view>
  </view>
</view>

hnsn.js

Page({
  hduaus() {
    wx.request({
      url: "http://localhost:8083/api/ck",//端口号 路径
      method: "POST",//请求方式
      data: {
        dhfh: [],//给个数组接收数据库里的数据
      },
      success: (res) => {
        console.log('请求成功', res.data);
        this.setData({
          dhfh: res.data//接收了数据库里的数据到数组里
        });
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  }
});