2.vue的基本语法vue指令axios调用接口

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

专栏： 2024年ssm框架标签： vue指令和axios

2024-09-03 00:14:19 536浏览

掌握 vue 的基本语法，重点：掌握 vue 的指令的用法，能够使用 axios 进行接口的调用，解决跨域问题

要求

掌握 vue 的基本语法，重点：掌握 vue 的指令的用法，能够使用 axios 进行接口的调用，解决跨域问题

准备工作

1. 安装好必备的插件

vue-router:这个是路由，不安装这个的话，我们后面是写很多 .vue 的页面文件，要通过访问不同的路径对应到.vue 文件中
axios:这个是为了后续我们发请求到后端拿数据用的，类似于之前学的 ajax。

这两个插件直接在我们的 vue ui 运行后的页面点点点就可以安装（切记检查一下 vue ui 进去后对应的项目是否正确！）

如果你是用 idea 开发 vue 项目的话，记得在 idea 中安装好 vue.js 插件

2. 去掉烦人的eslint校验

lintOnSave: false, // 关闭ESLint的保存检查

3. 创建一个 vue 文件

这个的话我习惯直接复制一个项目里已经有的一个 vue 文件后删改就行了。

vue指令

v-model:在表单元素上创建双向数据绑定
v-bind:为HTML标签绑定属性值，如设置 href , css样式等
v-on:为HTML标签绑定事件
v-if:用于条件判断
v-show:用于条件判断-切换的是display属性的值
v-for:遍历列表集合

<template>
  <div >
   <h2>学习：v-model:在表单元素上创建双向数据绑定</h2>
    <input type="text"   v-model="username">
    <div>{{username}}</div>

    <h2>v-bind:为HTML标签绑定属性值，如设置 href , css样式等</h2>


    <input type="text"   v-model="url">填写新网站的网址
    <a :href="url" target="_blank"> 跳转到新的网站</a>


    <h2>v-on:为HTML标签绑定事件</h2>


    <button v-on:click="click()">按钮</button>
    <h2>v-if:用于条件判断</h2>

    <input type="text"  v-model="flag">
    <div v-if="flag==1">div1</div>
    <div v-else-if="flag==2">div2</div>
    <div v-else>div3</div>


    <h2>v-show:用于条件判断-切换的是display属性的值</h2>
    <input type="text"  v-model="flag2">
    <div v-show="flag2==1">div1</div>
    <div v-show="flag2==2">div2</div>
    <div v-show="flag2==3">div3</div>
    <h2>v-for:遍历列表集合</h2>

    <ul>
      <li v-for="(c,index) in city" :key="index">{{index+1}}.{{c}}</li>
    </ul>

  </div>
</template>

<script>


export default {
  name: 'IndexView',
  data() {
    return{
      //数据模型
      username: '',
      url: 'https://baidu.com',
      flag:1,
      flag2:1,
      city: ['太原','长沙','武汉']
    }
  },
  methods:{
    click(){
      alert("我被点击了")
    }
  }
}
</script>

使用axios 发请求

import axios from 'axios'
mounted () {
  axios({
    method: 'get',
    url: 'list'
  }).then(resp => {

点击一个按钮就发送请求到后端然后后端给我返回一个用户基本信息然后展示到页面上的小案例

配置后台请求地址

新建.env.development

注意：VUE_APP_BASE_API自定义变量的时候必须是VUE_APP开头，另外就是=前后的空格也要注意

# 开发环境配置
ENV = 'development'
VUE_APP_BASE_API = '/dev-api'

新建.env.production

# 生产环境配置
ENV = 'production'
VUE_APP_BASE_API = '/prod-api'

如何使用：

baseURL: process.env.VUE_APP_BASE_API

解决跨域问题

后端解决

//@CrossOrigin//解决跨域问题
public class BrandController {

这种方式是学了 ssm 框架后比较方便，现在你没学框架的话，这种注解用不了，暂时就只讲前端解决跨域方案

前端解决

后端接口开发完成后，开发时需要通过代理服务器路由到后端，不再使用mock，所以配置如下，在根目录（跟package.json同级）添加vue.config.js配置代理服务器，将/dev-api开头的请求代理到后端服务器http://localhost:7001

module.exports = {
  devServer:{
    host:'localhost',
    port:8088, //前端项目端口号
    open: true,
    proxy:{
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`, //后端项目地址
        changeOrigin: true,
        pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}
      }
    }
  }
}

表示如果通过axios请求后端/user/add的接口，axios会自动加上前缀/dev-api，变成/dev-api/user/add，代理服务器拦截所有/dev-api开头的请求，去掉/dev-api,自动转发到http://localhost:7001/user/add；这样就可以区分静态请求和动态请求了(根据.env配置文件获取前缀)
如果ssm项目未部署在tomcat根目录，则配置target:http://localhost:tomcat端口号/项目名字