关于后端开发为了毕设学前端的这件事——Vue2

  各位小伙伴们大家好，欢迎来到这个小扎扎的多学一招专栏，本篇博客由B战黑马的java程序员学前端视频总结而来，鉴于 看到就是学到、学到就是赚到 精神，这波依然是血赚 ┗|｀O′|┛
  PS:本人前端零基础小白，如果博客中出现错误内容还请私信或者评论区指出。

1. vue的基本使用

1.1 vue项目结构

• src文件夹
  • assets - 静态资源
  • components - 可重用组件
  • router - 路由
  • store - 数据共享
  • views - 视图组件(页面)
  • api - 跟后台交互 发送 fetch、xhr 请求 接收响应
  • plugins - 插件

1.2 Vue 组件

Vue 的组件文件以 .vue 结尾，每个组件由三部分组成

<template>template>

<script>script>

<style>style>

• template 模板部分，由它生成 html 代码
• script 代码部分，控制模板的数据来源和行为
• style 样式部分，一般不咋关心

2. vue特殊用法

2.1 文本插值

<template>
    <div>
        <h1>{{ name }}h1>
        <h1>{{ age > 60 ? '老年' : '青年' }}h1>
    div>
template>
<script>
const options = {
    data: function () {
        return { name: '张三', age: 70 };
    }
};
export default options;
script>

• {{}} 里只能绑定一个属性，绑定多个属性需要用多个 {{}} 分别绑定
• template 内只能有一个根元素
• 插值内可以进行简单的表达式计算

2.2 属性绑定

<template>
    <div>
        <div><input type="text" v-bind:value="name">div>
        <div><input type="date" v-bind:value="birthday">div>
        <div><input type="text" :value="age">div>
    div>
template>
<script>
const options = {
    data: function () {
        return { name: '王五', birthday: '1995-05-01', age: 20 };
    }
};
export default options;
script>

• 简写方式：可以省略 v-bind 只保留冒号

2.3 事件绑定

<template>
    <div>
        <div><input type="button" value="点我执行m1" v-on:click="m1">div>
        <div><input type="button" value="点我执行m2" @click="m2">div>
        <div>{{count}}div>
    div>
template>
<script>
const options = {
    data: function () {
        return { count: 0 };
    },
    methods: {
        m1() {
            this.count ++;
            console.log("m1")
        },
        m2() {
            this.count --;
            console.log("m2")
        }
    }
};
export default options;
script>

• 简写方式：可以把 v-on: 替换为 @
• 在 methods 方法中的 this 代表的是 data 函数返回的数据对象

2.4 双向绑定

<template>
    <div>
        <div>
            <label for="">请输入姓名label>
            <input type="text" v-model="name">
        div>
        <div>
            <label for="">请输入年龄label>
            <input type="text" v-model="age">
        div>
        <div>
            <label for="">请选择性别label>
            男 <input type="radio" value="男" v-model="sex">
            女 <input type="radio" value="女" v-model="sex">
        div>
        <div>
            <label for="">请选择爱好label>
            游泳 <input type="checkbox" value="游泳" v-model="fav">
            打球 <input type="checkbox" value="打球" v-model="fav">
            健身 <input type="checkbox" value="健身" v-model="fav">
        div>
    div>
template>
<script>
const options = {
    data: function () {
        return { name: '', age: null, sex:'男' , fav:['打球']};
    },
    methods: {
    }
};
export default options;
script>

• 用 v-model 实现双向绑定，即
  • javascript 数据可以同步到表单标签
  • 反过来用户在表单标签输入的新值也会同步到 javascript 这边
• 双向绑定只适用于表单这种带【输入】功能的标签，其它标签的数据绑定，单向就足够了
• 复选框这种标签，双向绑定的 javascript 数据类型一般用数组

2.5 计算属性

<template>
    <div>
        <h2>{{fullName}}h2>
        <h2>{{fullName}}h2>
        <h2>{{fullName}}h2>
    div>
template>
<script>
const options = {
    data: function () {
        return { firstName: '三', lastName: '张' };
    },
    /* methods: {
        fullName() {
            console.log('进入了 fullName')
            return this.lastName + this.firstName;
        }
    },*/
    computed: {
        fullName() {
            console.log('进入了 fullName')
            return this.lastName + this.firstName;
        }
    }
};
export default options;

• 普通方法调用必须加 ()，没有缓存功能
• 计算属性使用时就把它当属性来用，不加 ()，有缓存功能：
  • 一次计算后，会将结果缓存，下次再计算时，只要数据没有变化，不会重新计算，直接返回缓存结果

3. axios

axios 它的底层是用了 XMLHttpRequest（xhr）方式发送请求和接收响应，xhr 相对于之前讲过的 fetch api 来说，功能更强大，但由于是比较老的 api，不支持 Promise，axios 对 xhr 进行了封装，使之支持 Promise，并提供了对请求、响应的统一拦截功能

// 安装
npm install axios -S

// 导入
import axios from 'axios'

3.1 发送请求

请求 方法
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

• config - 选项对象、例如查询参数、请求头…
• data - 请求体数据、最常见的是 json 格式数据
• get、head 请求无法携带请求体，这应当是浏览器的限制所致（xhr、fetch api 均有限制）
• options、delete 请求可以通过 config 中的 data 携带请求体

例子

<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">
    div>
template>
<script>
import axios from 'axios'
const options = {
    methods: {
        async sendReq() {
            // 1. 演示 get, post
            const resp = await axios.get('/api/a2');
            const resp = await axios.post('/api/a2');

            // 2. post携带config请求头
            const resp = await axios.post('/api/a3',{},{
                 headers:{
                     Authorization:'abc'
                 }
             });

            //  post请求时携带查询参数
             const resp = await axios.post('/api/a4', {}, {
                 params: {
                     name:'&&&&',
                     age: 20
                 }
             });

            // 4. 用请求体发数据，格式为 urlencoded
             const params = new URLSearchParams();
             params.append("name", "张三");
             params.append("age", 24)

             const resp = await axios.post('/api/a4', params);

            // 5. 用请求体发数据，格式为 multipart
             const params = new FormData();
             params.append("name", "李四");
             params.append("age", 30);
             const resp = await axios.post('/api/a5', params);

            // 6. 用请求体发数据，格式为 json
            const resp = await axios.post('/api/a5json', {
                name: '王五',
                age: 50
            });

            console.log(resp);
        }
    }
};
export default options;
script>

3.2 创建实例并配置

创建实例

const _axios = axios.create(config);

常见的 config 项有

名称	含义
baseURL	将自动加在 url 前面
headers	请求头，类型为简单对象
params	跟在 URL 后的请求参数，类型为简单对象或 URLSearchParams
data	请求体，类型有简单对象、FormData、URLSearchParams、File 等
withCredentials	跨域时是否携带 Cookie 等凭证，默认为 false
responseType	响应类型，默认为 json

例

const _axios = axios.create({
    baseURL: 'http://localhost:8080',
    withCredentials: true
});
await _axios.post('/api/a6set')
await _axios.post('/api/a6get')

生产环境希望 xhr 请求不走代理，可以用 baseURL 统一修改
希望跨域请求携带 cookie，需要配置 withCredentials: true，服务器也要配置 allowCredentials = true，否则浏览器获取跨域返回的 cookie 时会报错

3.3 接收响应

响应格式

名称	含义
data	响应体数据 ⭐️
status	状态码 ⭐️
headers	响应头

响应状态码
200 表示响应成功
400 请求数据不正确 age=abc
401 身份验证没通过
403 没有权限
404 资源不存在
405 不支持请求方式 post
500 服务器内部错误

3.4 拦截器

请求拦截器

_axios.interceptors.request.use(
  function(config) {
    // 比如在这里添加统一的 headers
    config.headers = {
        Authorization:'abc'
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

响应拦截器

_axios.interceptors.response.use(
  function(response) {
    // 2xx 范围内走这里
    if(error.response.status === 200) {
		console.log('正确');
	}
    return response;
  },
  function(error) {
    // 超出 2xx, 比如 4xx, 5xx 走这里
    if(error.response.status === 400) {
		console.log('请求参数不正确');
	} else if(error.response.status === 401) {
		console.log('身份验证没通过');
	}
    return Promise.reject(error);
  }
);

3.5 数据渲染

<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">
        <div class="title">学生列表div>
        <div class="thead">
            <div class="row bold">
                <div class="col">编号div>
                <div class="col">姓名div>
                <div class="col">性别div>
                <div class="col">年龄div>
            div>
        div>
        <div class="tbody">
            
        div>
    div>
template>


<script>
import axios from '../util/myaxios'
const options = {
    data: function() {
        return {
            students: []
        };
    },
    methods : {
        async sendReq() {
            const resp = await axios.get("/api/students");
            console.log(resp.data.data)
            this.students = resp.data.data;
        }
    }
};
export default options;
script>


<style scoped>
    div {
        font-family: 华文行楷;
        font-size: 20px;
    }

    .title {
        margin-bottom: 10px;
        font-size: 30px;
        color: #333;
        text-align: center;
    }

    .row {
        background-color: #fff;
        display: flex;
        justify-content: center;
    }

    .col {
        border: 1px solid #f0f0f0;
        width: 15%;
        height: 35px;
        text-align: center;
        line-height: 35px;
    }

    .bold .col {
        background-color: #f1f1f1;
    }
style>

条件渲染

<div class="tbody">
    <div class="row" v-if="students.length > 0">显示学生数据div>
    <div class="row" v-else>暂无学生数据div>
div>

列表渲染

<div class="tbody">
    <div v-if="students.length > 0">
        <div class="row" v-for="s of students" :key="s.id">
            <div class="col">{{s.id}}div>
            <div class="col">{{s.name}}div>
            <div class="col">{{s.sex}}div>
            <div class="col">{{s.age}}div>
        div>
    div>
    <div class="row" v-else>暂无学生数据div>
div>

v-if 和 v-for 不能用于同一个标签
v-for 需要配合特殊的标签属性 key 一起使用，并且 key 属性要绑定到一个能起到唯一标识作用的数据上，本例绑定到了学生编号上

mounted属性配置，实现加载渲染数据

<script>
import axios from '../util/myaxios'
const options = {
    mounted: function(){
        this.sendReq()
    },
    data: function() {
       
    },
    methods : {
        
    }
};
export default options;
script>

3.6 组件复用

先将可复用的组件在一个vue文件中定义好了(包括样式和script事件)

<template>
    <div class="button" :class="[type,size]">
        a<slot>slot>b
    div>
template>
<script>
const options = {
	<!-- 声明复用组件的两个属性 -->
    props: ["type", "size"]
};
export default options;
script>

复用组件的属性自定义实现：
1、:class指定可绑定的属性名
2、options声明复用组件的两个属性

使用复用的组件

<template>
    <div>
        <h1>父组件h1>
        <my-button type="primary" size="small">1my-button>
        <my-button type="danger" size="middle">2my-button>
        <my-button type="success" size="large">3my-button>
    div>
template>
<script>
import MyButton from '../components/MyButton.vue'
const options = {
    components: {
        MyButton
    }
};
export default options;
script>

复用的组件的使用：
1、

• mapActions 会生成调用 actions 中方法的代码

• 调用 actions 的代码内部等价于，它返回的是 Promise 对象，可以用同步或异步方式接收结果

  this.$store.dispatch('action名称', 参数)