JAVAWeb学习笔记(三)_Ajax+前端工程化(前后端分离)+Element-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64213455/article/details/143235800

文章目录

Ajax
- Axios
前端工程化
Element
vue路由
打包部署

Ajax

Ajax,异步的JS和XML
作用:
1.数据交换,通过Ajax可以给服务器发送请求,并获取服务器响应的数据
2.异步交互,可以在不重新加载整个页面,更新部分网页的技术
同步和异步的区别,异步可以在发起请求后,在当前页面做其他操作,但是同步需要等整个页面更新完成

原生Ajax的代码方式已被淘汰

Axios

官方网站,https://www.axios-http.cn/
网页中检查->network->Fetch/XHR罗列的内容是异步请求

<script src="js/axios-0.18.0.js"></script>//使用axios需要引入文件
//通过axios发送异步请求-get
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
//通过axios发送异步请求-post
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
//通过mounted()在挂载完成时,异步请求其他服务器数据,渲染本页面
new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });

前端工程化

前后端分离
前端开发<-接口文档->后端开发
需求分析->接口定义(API接口文档)->前后端并行开发->测试(前端\后端)->前后端联调测试

YAPI

YAPI,api管理平台,逻辑清晰的接口管理服务

vue-cli(NodeJS)

前端开发=模块化+组件化+规范化+自动化
vue-cli,脚手架工具,用于快速生成一个Vue项目模板,依赖环境->NodeJS
提供的功能包括,同一目录结构,本地调试,热部署,单元测试,集成打包上线
src文件夹,用来存放源代码
vue ui //在cmd中创建Vue项目

开发流程

默认首页 index.html
入口文件 main.js
根组件 App.vue(包含三部分(生成HTML代码)

Element

快速入门

Element官网,elment.eleme.cn

//创建ElementView.vue在main.js引入Element组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//在App.vue,为了展示页面,引入ElementView.vue
<element-view></element-view>

import ElementView from './views/element/ElementView.vue'
components:{ElementView}

Table表格

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
};
</script>

具体语法功能要查官方文档
ctrl+alt+L格式化代码

Pagination分页

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

Dialog对话框

<template>
  <div>
    <!-- 对话框 -->
    <!-- Table -->
    <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>
  </div>
</template>
<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表单

<div>
<template>
    <!-- 对话框里有一个form表单 -->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套form的 Dialog</el-button
    >

    <el-dialog title="form表单" :visible.sync="dialogFormVisible">
      <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>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
        },
      dialogFormVisible: false,
    };  
  },
  methods: {
        onSubmit:function(){
            alert(JSON.stringify(this.form));
        }
      },
};
</script>