Java程序员要掌握的前端知识-Vue2篇

第二章. Vue 2

1. Vue 基础

1) 环境准备

安装脚手架

npm install -g @vue/cli

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

创建项目

vue ui

使用图形向导来创建 vue 项目，如下图，输入项目名

选择手动配置项目

添加 vue router 和 vuex

选择版本，创建项目

安装 devtools

• devtools 插件网址：https://devtools.vuejs.org/guide/installation.html

运行项目

进入项目目录，执行

npm run serve

修改端口

前端服务器默认占用了 8080 端口，需要修改一下

• 文档地址：DevServer | webpack

• 打开 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 项目结构

PS D:\2022.js\代码\第3章\client> tree src
D:\2022.JS\代码\第3章\CLIENT\SRC
├─assets
├─components
├─router
├─store
└─views

• 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 方法返回的对象属性，绑定的含义是数据发生变化时，页面显示会同步变化

文本插值

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

属性绑定

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

事件绑定

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

双向绑定

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

计算属性

创建实例

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

响应格式

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

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

请求拦截器

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

响应拦截器

_axios.interceptors.response.use(
  function(response) {
   
    // 2xx 范围内走这里
    return response;
  },
  function(error) {
   
    // 超出 2xx, 比如 4xx, 5xx 走这里
    return Promise.reject(error);
  }
);

条件渲染

列表渲染

• v-if 和 v-for 不能用于同一个标签
• v-for 需要配合特殊的标签属性 key 一起使用，并且 key 属性要绑定到一个能起到唯一标识作用的数据上，本例绑定到了学生编号上
• options 的 mounted 属性对应一个函数，此函数会在组件挂载后（准备就绪）被调用，可以在它内部发起请求，去获取学生数据

重用组件

按钮组件

• 注意，省略了样式部分

使用组件

2. Vue 进阶

1) ElementUI

安装

npm install element-ui -S

引入组件

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

Vue.use(Element)

测试，在自己的组件中使用 ElementUI 的组件

按钮

表格组件

分页组件

• 三种情况都应该触发查询
  • mounted 组件挂载完成后
  • 页号变化时
  • 页大小变化时
• 查询传参应该根据后台需求，灵活采用不同方式
  • 本例中因为是 get 请求，无法采用请求体，只能用 params 方式传参
• 返回响应的格式也许会很复杂，需要掌握【根据返回的响应结构，获取数据】的能力

分页搜索

• sex 与 age 均用 '' 表示用户没有选择的情况
• age 取值 0,20 会被 spring 转换为 new int[]{0, 20}
• age 取值 '' 会被 spring 转换为 new int[0]

级联选择

级联选择器中选项的数据结构为

[
    {
   value:100, label:'主页',children:[
        {
   value:101, label:'菜单1', children:[
            {
   value:105, label:'子项1'},
            {
   value:106, label:'子项2'}
        ]},
        {
   value:102, label:'菜单2', children:[
            {
   value:107, label:'子项3'},
            {
   value:108, label:'子项4'},
            {
   value:109, label:'子项5'}
        ]},
        {
   value:103, label:'菜单3', children:[
            {
   value:110, label:'子项6'},
            {
   value:111, label:'子项7'}
        ]},
        {
   value:104, label:'菜单4'}
    ]}
]

下面的例子是将后端返回的一维数组【树化】

2) Vue-Router

vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示

配置路由

新建一个路由 js 文件，例如 src/router/example14.js，内容如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example14/ContainerView.vue'
import Logi