清风自叙小筑

Appearance

02-Vue 与 Element（前端框架） ​

对应原始资料：day02-JavaScript、day03-AJAX&Vue、day04-Element&Vue脚手架

一、AJAX（异步请求） ​

AJAX = Asynchronous JavaScript And XML，让网页局部刷新而不重载整页。

1. XMLHttpRequest（原始） ​

javascript
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/user?id=1");
xhr.onload = () => {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
    }
};
xhr.send();

2. Fetch（现代） ​

javascript
fetch("/api/user?id=1")
  .then(r => r.json())
  .then(data => console.log(data));

3. Axios（最常用） ​

javascript
// GET
axios.get("/api/user", { params: { id: 1 } })
     .then(r => console.log(r.data));

// POST
axios.post("/api/user", { name: "张三" })
     .then(r => console.log(r.data));

// async/await
const { data } = await axios.post("/api/user", { name: "张三" });

工程实践中前端几乎都用 axios，它支持拦截器、统一错误处理、取消请求等。

4. 前后端分离架构 ​

浏览器 → (axios) → 后端 API → 返回 JSON → 前端用 JS 渲染页面。

二、JSON ​

JSON 是前后端交互的事实标准。

javascript
// JSON.stringify：对象 → 字符串
const s = JSON.stringify({ name: "张三" });

// JSON.parse：字符串 → 对象
const obj = JSON.parse('{"name":"张三"}');

Java 端用 Jackson / Fastjson / Gson 转换对象与 JSON。

三、Vue.js 简介 ​

Vue 是渐进式 JS 框架，核心是数据驱动视图（MVVM）。

1. 引入 ​

html
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2. 入门 ​

html
<div id="app">
    <p>{{ message }}</p>
    <button @click="count++">点击 {{ count }}</button>
    <input v-model="message">
</div>

<script>
new Vue({
    el: "#app",
    data: { message: "hello", count: 0 },
    methods: {
        sayHi() { alert(this.message); }
    }
});
</script>

3. 常用指令 ​

指令作用
v-bind:xxx / :xxx绑定属性
v-on:xxx / @xxx绑定事件
v-model双向绑定（表单）
v-if / v-else / v-show条件渲染
v-for="(item, i) in list" :key="i"列表渲染

4. 生命周期 ​

created → mounted（DOM 已渲染） → updated → destroyed。 常用 mounted 钩子发起 AJAX 拉取数据。

5. Vue 生态 ​

  • Vue Router：路由。
  • Vuex / Pinia：状态管理。
  • Vite / Vue CLI：脚手架。

四、Vue 组件化与脚手架（了解） ​

  • 用 vue create project-name 或 Vite 创建工程。
  • 单文件组件 .vue：<template> + <script> + <style>。
  • 组件间通信：props、$emit、Vuex、provide/inject。

对 Java 后端：会用 Vue 写管理后台即可，重点放在 axios 调接口、表格增删改查。

五、Element UI（组件库） ​

饿了么开源的 Vue 组件库，提供大量现成组件（按钮、表单、表格、弹窗）。

1. 引入 ​

html
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>

2. 常用组件 ​

  • 布局：el-row、el-col、el-container
  • 表单：el-form、el-input、el-select、el-date-picker
  • 数据展示：el-table、el-pagination、el-tag
  • 反馈：el-dialog、el-message、el-button

3. 表格示例 ​

html
<el-table :data="tableData" border>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
        </template>
    </el-table-column>
</el-table>

六、综合应用模式 ​

后端 API + Vue + Element 的典型流程：

  1. Vue 在 mounted 中 axios.get("/api/...") 拉数据。
  2. 把数据绑定到 el-table。
  3. 弹出 el-dialog 表单 → axios.post 提交 → 成功后刷新列表。

练习建议 ​

  1. 用 axios 完成一个简单的 GET 请求，把结果渲染到页面。
  2. 用 Vue 写一个 Todo List（增删改 + localStorage）。
  3. 用 Element 写一个带分页的表格页面。
  4. 理解前后端分离：用 Postman 模拟前端请求你的 Servlet。