使用vue脚手架和基础的vue指令,以及axios模块的使用

脚手架: 是一类软件的总称, 用于下载开发环境相关的所有内容

先安装: npm i -g @vue/cli --force

生成项目包: vue create 包名

手动选择特征 按照要求: 勾选对应项目

手动添加 axios 网络请求模块 npm i axios vue-axios

启动服务器(项目必须通过服务器访问) npm run serve

问题: 注意 VSCODE修改的项目 和 运行服务器的项目包 必须是同一个 服务器启动设定: 默认访问 public 目录下的 index.html 文件 index.html 文件中, 默认会引入外部的 main.js 文件 main.js 中引入了 App.vue 文件, 进行最终展示 所以: App.vue 文件就是显示在页面上的内容 Scss: 支持嵌套语法的css写法, & 代表并且

前置条件1: 创建项目时必须勾选 css预编译器安装

前置条件2: <style lang="scss" 指令: vue提供的属性称为指令

v-html: 解析html代码进行展示

v-text: 原样输出文本

v-pre: 不解析{{}} 直接显示

v-once: 一次性渲染, 后续不刷新

key: 搭配for循环使用, 是唯一标识 数组元素有增删时, 会复用 唯一标识 相同的元素

自定义指令: 指令名: v- 开头 对应 directives 属性中存储 作用: 自动修改 指令所在元素的 相关内容 ref: 取代原生DOM选择器, 可以直接把变量绑定在元素上

axios: axios 是利用 Promise 封装Ajax之后得到的扩展模块, 解决了回调地狱风险

使用时要先安装: npm i axios vue-axios

然后: 固定方式 集成到 Vue 对象里 使用: this.axios.get(url).then(res=>{}).catch(err=>{}) 后续: 请求的数据必须保存到 data属性里, 才能在界面用 使用前: 必须 v-if 判断, 防止null的时候使用报错

在项目目录下通过npm i axios  vue-axios来下载

在src目录下创建utils目录,然后创建axios.js文件，文件配置如下

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

//对axios的配置,必须要在use前完成
axios.defaults.baseURL = 'http://www.codeboy.com:9999/data/'
// axios.默认配置.基础路径='....'
Vue.use(VueAxios,axios)
// 记得在main.js中引入

然后在main.js文件中进行引入

import "./utils/axios"

利用axios发送get请求

<script>
export default {
  data() {
    return {
      data: null, //准备变量, 用来存放 请求到的数据
    }
  },
  methods: {
    getData() {
      console.log(this)
      const url = 'http://www.123.com:9999/data/product/list.php'
      this.axios.get(url).then(res => {
        this.data = res.data
      })
    },
  },
}
</script>

请求下一页的数据实现方法

<template>
  <div>
    <!-- xin88.top -->
    <button @click="getData(1)">请求数据</button>
    <hr />

    <template v-if="data">
      <!-- 利用计算属性,读取数据项, 简化HTML代码 -->
      <p>总页数:{{ pageCount }}</p>
      <p>当前页:{{ nowPage }}</p>
      <button @click="getData(nowPage - 1)" :disabled="nowPage == 1">
        上一页
      </button>
      <button @click="getData(nowPage + 1)" :disabled="nowPage == pageCount">
        下一页
      </button>
      <hr />

      <div class="cell" v-for="v in data.data.list" :key="v.rid">
        <!-- 有些校区屏蔽图片, 可能出不来 -->
        <img :src="v.roomSrc" alt="" />
        <div>{{ v.nickname }}</div>
        <div>{{ v.roomName }}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    }
  },
  methods: {
    // getData(1) getData(2)  getData(3)
    getData(page) {
      const url = `https://douyu.xin88.top/api/room/list?page=${page}&type=yz`

      this.axios.get(url).then(res => {
        console.log(res)
        // 本地 = 请求的
        this.data = res.data
      })
    },
  },
  // 计算属性: 作用函数不用()自动触发 -- 简化HTML中的JS代码
  computed: {
    nowPage() {
      return this.data.data.nowPage
    },
    pageCount() {
      return this.data.data.pageCount
    },
  },
}
</script>

如果下一页按钮不是button,则没有disbale属性,需要动态样式绑定

<template>
  <div>
    <button @click="getData(1)">请求数据</button>

    <template v-if="data">
      <div>
        <div class="cell" v-for="v in data.data" :key="v.nid">
          {{ v.title }}
        </div>
      </div>
      <div class="pages">
        <span :class="{ disabled: pageNum == 1 }" @click="getData(pageNum - 1)"
          >上一页</span
        >
        <span
          @click="getData(p)"
          :class="{ cur: p == pageNum }"
          v-for="p in pageCount"
          :key="p"
        >
          {{ p }}
        </span>
        <span
          :class="{ disabled: pageNum == pageCount }"
          @click="getData(pageNum + 1)"
          >下一页</span
        >
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    }
  },
  methods: {
    // getData(1)
    // getData(2)
    getData(page) {
      const url = `http://www.123.com:9999/mfresh/data/news_select.php?pageNum=${page}`

      this.axios.get(url).then(res => {
        console.log(res)

        this.data = res.data
      })
    },
  },
  computed: {
    pageCount() {
      return this.data.pageCount
    },
    pageNum() {
      return this.data.pageNum
    },
  },
}
</script>

利用axios发送post请求

  data() {
    return {
      data: null,
      uname: '',
      pwd: '',
      re_pwd: '',
      email: '',
      phone: '',
    }
  },
  methods: {
    getData() {
      const url = 'user/register.php'
      //  发送post请求
      //   利用对象解构!
      const { uname, pwd, re_pwd, email, phone } = this
      const params = `uname=${uname}&upwd=${pwd}&upwdconfirm=${re_pwd}&email=${email}&phone=${phone}`
      this.axios.post(url, params).then(res => {
        console.log('params的值为:', params)
        console.log(res)
        if (res.data.code == 200) {
          alert('恭喜您,成为第' + res.data.uid + '号会员!')
        } else {
          alert(res.data.msg)
        }
      })
    },
  }