ajax ,element

最新推荐文章于 2024-10-19 19:30:00 发布

叶♧子

最新推荐文章于 2024-10-19 19:30:00 发布

阅读量816

点赞数 20

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_59313503/article/details/137236561

版权

本文介绍了Ajax在前端异步交互中的应用，探讨了前后端分离的架构，详细讲解了如何使用Vue及其组件库ElementUI，包括表格、分页、对话框和表单组件的使用，以及VueRouter的安装和路由配置。

摘要由CSDN通过智能技术生成

1、Ajax

概念：Asynchronous JavaScript And XML,异步的JavaScript和xml
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想，用户名是否可用的校验等等。

同步与异步

原生Ajax（繁琐）

Axios入门

2、前后端分离

前端开发工程栈

前端工程化：

模块化：js，css；
组件化：UI结构，样式，行为；
规范化：目录结构，编码，接口
自动化：构建，部署，测试

环境准备：

安装nodejs，Node.js 中文网安装长期维护版
在命令行界面通过node -v 查看版本号，看是否安装成功；
配置npm的全局安装路径，执行命令如下：（以管理员身份运行）

npm config set prefix "D:\NodeJS"

切换npm的淘宝镜像

npm config set registry https://registry.npm.taobao.org

vue项目创建

命令行：vue create vue-project01
图形化界面：vue-ui

创建vue项目，先创建一个vue文件夹，进入文件夹输入cmd进入命令行界面，输入vue ui调出图形化界面；

点击创建

vue项目-目录结构

在main.js中， import 导入组件

vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>,<script>,<style>

3、vue组件库element

https://element.eleme.cn/2.11/#/zh-CN

快速入门

安装element组件库，在命令行执行指令：

右击项目文件，在集成终端中打开

npm install element-ui@2.15.3

引入elementui组件库，在main.js中

import ElementUI from 'element-ui';

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

Vue.use(ElementUI);

访问官网，复制组件代码，调整，代码对齐快捷键shift+alt+f

常见组件——表格

常见组件——分页

Pagination分页：当数据量过多时，使用分页分解数据。

（详细请看Element - The world's most popular Vue UI framework）

        <el-pagination background layout="sizes,prev, pager, next,jumper,total" :total="1000">
        </el-pagination>

sizes：10条/页；prev:左箭头；pager：每个页码； next：右箭头；jumper：前往哪一页；

total：共多少页；

常见组件——对话框Dialog

<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="date" label="日期" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="address" label="地址"></el-table-column>
  </el-table>
</el-dialog>


<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false
      };
    }
  };
</script>

常见组件——表单

form表单：由输入框，选择器，单选框，多选框等控件组成，用以收集、校验、提交数据。

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>