前端学习第三站——Vue2基础篇

目录

1. 环境准备

1.1安装脚手架

1.2 创建项目 

1.3 安装 vue devtools

1.4 运行项目

2 Vue组件 

2.1 文本插值 

2.2 属性绑定 v-bind

2.3 事件绑定 v-on

 2.4 计算属性 computed

2.5 vue 底层展示界面的原理 

 3. Axios

4. 列表渲染v-for和条件渲染 v-if

---

1. 环境准备

1.1安装脚手架

npm install -g @vue/cli

• -g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目

1.2 创建项目 

进入到你要创建服务器的目录下，打开命令窗口，执行命令

vue ui

这个的意思就是使用图形界面向导来创建vue项目，运行后跳出此界面

  选择手动配置项目

 添加 vue router 和 vuex

 选择版本，创建项目

这样就会在文件夹中自动生成vue项目啦~ 

1.3 安装 vue devtools

这是一个可以进行调试vue项目的浏览器插件，很好用

 如果 谷歌应用商店进不去，可以试试以下方法。

1. 先到一个插件下载网址下载插件

下载成功后并解压后就会有下图的.crx后缀文件 。

2. 打开谷歌浏览器， 点击右上角三个点，更多工具——扩展程序 

进入到如下页面，并打开右上角的开发者模式。 

然后将下载好的.crx后缀文件拖进此浏览器页面中即可。 

1.4 运行项目

进入项目目录，prowershell窗口，执行命令

npm run serve

如果报错，尝试用管理员身份运行prowershell，然后进入到项目目录，在执行上述命令。

修改端口

如果前端服务器默认占用了后端 8080 端口，可以进行修改

打开 vue.config.js 文件添加

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  
  // ...
    
  devServer: {
    port: 7070
  }
  
})

添加代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理

打开 vue.config.js 文件添加

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
  // ...
    
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
    
})

 vue的项目结构

• assets - 静态资源

• components - 可重用组件

• router - 路由

• store - 数据共享

• views - 视图组件

以后还会添加

• api - 跟后台交互，发送 fetch、xhr 请求，接收响应

• plugins - 插件

2 Vue组件 

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

• template 模板部分，由它生成 html 代码

• script 代码部分，控制模板的数据来源和行为

• style 样式部分，一般不咋关心

入口组件是 App.vue

先删除原有代码，来个 Hello, World 例子

解释

• export default 导出组件对象，供 main.js 导入使用

• 这个对象有一个 data 方法，返回一个对象，给 template 提供数据

• {{}} 在 Vue 里称之为插值表达式，用来绑定 data 方法返回的对象属性，绑定的含义是数据发生变化时，页面显示会同步变化

2.1 文本插值 

• {{}} 里只能绑定一个属性，绑定多个属性需要用多个 {{}} 分别绑定

• template 内只能有一个根元素

• 插值内可以进行简单的表达式计算

2.2 属性绑定 v-bind

vue中可以将组件和时间进行绑定。如下代码

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

2.3 事件绑定 v-on

• 简写方式：可以把 v-on: 替换为 @

• 在 methods 方法中的 this 代表的是 data 函数返回的数据对象

 2.4 计算属性 computed

后端：

为了方便，代码都写在可Controller层

package com.hua.controller;

import com.hua.domain.A5;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;

/**
 * @Author 华子
 * @Date 2023/1/8 15:51
 * @Version 1.0
 */
@Controller
@RequestMapping("stu")
public class AxiosController {

    @GetMapping("/a1")
    @ResponseBody
    public String a1(){
        return "get request";
    }

    @PostMapping("/a2")
    @ResponseBody
    public String a2(){
        return "post request";
    }

    @PostMapping("/a3")
    @ResponseBody
    public String a3(@RequestHeader("Authorization") String authorization){
        System.out.println("Authorization:"+authorization);
        return "post request";
    }

    @PostMapping("/a4")
    @ResponseBody
    public String a4(String name, Integer age){
        System.out.println("name:"+name+",age:"+age);
        return "post request";
    }

    @PostMapping("/a5")
    @ResponseBody
    public String a5(@RequestBody A5 a5){
        System.out.println("name:"+a5.getName()+",age:"+a5.getAge());
        return "post request";
    }

    @PostMapping("/a6Set")
    @ResponseBody
    public String a6Set(HttpSession session){
        System.out.println("==========a6Set==============");
        System.out.println(session.getId());
        session.setAttribute("name","张三");
        return "post request";
    }

    @PostMapping("/a6Get")
    @ResponseBody
    public String a6Get(HttpSession session){
        System.out.println("==========a6Get==============");
        System.out.println(session.getId());
        System.out.println(session.getAttribute("name"));
        return "post request";
    }

}

axios可以进行默认配置

创建实例

const _axios = axios.create(config);

• 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 时会报错

这里提供一个默认写好的axios配置~

myaxios.js文件 （里头有拦截器，包括请求和响应两种拦截器）

import axios from 'axios'
const _axios = axios.create({
    // baseURL: 'http://localhost:8080',
    withCredentials: true
});

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

_axios.interceptors.response.use(
    function (response) {
        // 2xx 范围内走这里
        return response;
    },
    function (error) {
        if (error.response?.status === 400) {
            console.log('请求参数不正确');
            return Promise.resolve(400);
        } else if (error.response?.status === 401) {
            console.log('跳转至登录页面');
            return Promise.resolve(401);
        } else if (error.response?.status === 404) {
            console.log('资源未找到');
            return Promise.resolve(404);
        }
        // 超出 2xx, 比如 4xx, 5xx 走这里
        return Promise.reject(error);
    }
);

export default _axios;

我们导入axios就可以这么写

4. 列表渲染v-for和条件渲染 v-if

这里用一个例子来展示

从后端拿去学生数据，展示到前端

重用组件：

主要语法就是在components文件夹中定义一个常用组件，也就是子组件

然后导入到父组件中

在父组件中打上标签即可。

 具体代码：

子组件MyButtons：

父组件：