【Day 3】Ajax + Vue 项目、路由 + Nginx

1 Ajax

Asynchronous JavaScript And XML

异步的 JavaScript 和 XML

作用:

  • 数据交换

通过 Ajax 可以给服务器发送请求,并获取服务器响应的数据

  • 异步交互

可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等

1.1 原生的异步请求

使用 XMLHttpRequest 进行异步请求:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="get data" onclick="getData()">
    <div id="div1">

    </div>
</body>
<script>
    function getData() {
        // 第一步 创建 XMLHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();

        // 第二步 发送异步请求
        xmlHttpRequest.open("GET", "https://mock.apifox.cn/m1/3128855-0-default/emp/list");
        xmlHttpRequest.send();

        xmlHttpRequest.onreadystatechange = function () {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;
            }
        }

    }
</script>

</html>

这是 HTML 自带的异步请求,比较繁琐

1.2 Axios

Axios 对原生的 Ajax 进行了封装,简化书写,快速开发

Axios 用法:

  1. 引入 Axios
html 复制代码
<script src="js/axios-0.18.0.js"></script>
  1. 使用 Axios 发送请求,并获取响应结果
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/axios-0.18.0.js"></script>
</head>

<body>
    <input type="button" value="get data" onclick="getData()"><br><br>
    <input type="button" value="delete data" onclick="deleteData()">
</body>
<script>
    function getData() {
        axios({
            method: "get",
            url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list",
        }).then(result => {
            console.log(result.data);
        })
    }

    function deleteData() {
        axios({
            method: "post",
            url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
            data: "id=1"
        }).then(result => {
            console.log(result.data);
        })
    }

</script>

</html>

这和原生方法是一致的

1.3 Axios 请求方式别名

  • axios.get(url[,config])
  • axios.delete(url[,config])
  • axios.post(url[,data[,config]])
  • axios.put(url[,data[,config]])

注:方括号为可选参数

这样可以对上面进行简化:

  • 发送 get 请求
javascript 复制代码
axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result)=>{
            console.log(result.data);
        })
  • 发送 post 请求
javascript 复制代码
axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then((result)=>{
            console.log(result.data);
        })

2 案例一

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/axios-0.18.0.js"></script>
    <script src="JS/vue.js"></script>
    <style>

        table{
            border-collapse: collapse;
            
        }
        th,td{
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <table id="app">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>img</th>
            <th>gender</th>
            <th>job</th>
            <th>entrydate</th>
            <th>updatetime</th>
        </tr>

        <tr v-for="(emp, index) in emps">
            <td>{{index+1}}</td>
            <td>{{emp.name}}</td>
            <td>
                <img v-bind:src="emp.image" width="30px" height="30px">
            </td>
            <td>
                <span v-if="gender == 1">male</span>
                <span v-else>female</span>
            </td>
            <td>{{emp.job}}</td>
            <td>{{emp.entrydate}}</td>
            <td>{{emp.updatetime}}</td>
        </tr>
    </table>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            emps: []
        },
        mounted() {
            // 发送异步请求,加载数据
            axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
                this.emps = result.data.data;
            })
        },
    })
</script>

</html>

3 YAPI

接口管理平台

4 前端工程化

Vue-cli:Vue 官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板

功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 继承打包上线

依赖环境:NodeJS

4.1 Vue 项目

在 cmd 中 vue ui,就在当前文件夹下创建了 vue project

vue项目的目录结构:

Vue项目的启动:

运行:

Local 的 URL 打开是:

而且在 APP.vue 中进行修改,保存之后,页面也会更改----->热部署

但是默认端口号是8080,与后面的 Tomcat 冲突,所以现在改变一下 Vue 的端口号:

在 config 下增加:

4.2 Vue 开发流程

注:

  1. .$mount '#app' 和 之前的 el 是等价的,都是挂载到 DOM 元素
  2. router:router,如果对象和对象值相同,则可以省略冒号和值
  3. h 是一个虚拟 DOM 元素

.vue 文件:

4.3 Vue 的 Element 组件库

Element 是基于 Vue 2.0 的桌面端组件库

组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等

Element - The world's most popular Vue UI framework

注:安装时在当前目录下安装,右键-在集成终端打开,然后输入npm install ...

还有很多组件都在官方文档

5 案例一

EmpView.vue 文件

html 复制代码
<template>
    <div>
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>


                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="searchForm">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>

                        <el-form-item label="入职日期">
                            <div class="block">
                                <span class="demonstration">从</span>
                                <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-form>

                    <!-- 表格 -->
                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="image" label="图像">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" width="80px">
                            </template>
                        </el-table-column>
                        <el-table-column label="性别">
                            <template slot-scope="scope">
                                {{ scope.row.gender==1?"男":"女" }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="position" label="职位"></el-table-column>
                        <el-table-column prop="entrydate" label="入职日期"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间"></el-table-column>
                        <el-table-column label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">编辑</el-button>
                        </el-table-column>

                    </el-table>

                    <br>
                    <!-- 分页条 -->
                    <el-pagination background layout="prev, pager, next" :total="1000">
                    </el-pagination>


                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            tableData: [],
            searchForm: {
                name: "",
                gender: "",
                entrydate: []
            }
        }
    },
    methods: {
        onSubmit: function () {
            alert("submit");
        }
    },
    mounted() {
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
            this.tableData = result.data.data;
        })
    }
}
</script>

<style></style>

现在不能页面跳转,只是静态页面,想要动态跳转---->路由

6 Vue 路由

前端路由:URL 中的 hash(#号)与组件之间的对应关系

点击一个按钮,直接在地址栏的URL改变

地址栏发生改变,路由自动更新显示与 URL 有关的组件

Vue Router

组件:

<router-link to="/..">

请求链接组件,浏览器会解析成 <a>

<router-view></router-view>

动态视图组件,用来渲染展示与路由路径对应的组件

6.1 配置路由

(在 views 里面又加了一个 vue 文件 DeptView.vue )

变成了:

然后在 APP.vue

注释掉不用的代码

使用 <router-view></router-view>

效果:(注意 URL 的变化)

点击部门管理:

点击员工管理:

最后设置一个根路径,以便第一次进入的时候不会不显示

重定向( redirect )

7 打包部署

前后端项目需要分别在前后端服务器上部署 ,在此之前需要打包

7.1 打包

打包完成,出现 dist(distribution)文件夹

7.2 部署

Nginx:是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用

可以用 Nginx 做:部署静态资源、反向代理、实现负载均衡

下面以部署静态资源为例:

官网:nginx news

将打包好的 dist 目录下的文件,复制到 nginx 的 html 目录下

双击 nginx 可执行文件,Nginx 服务器占用 80 端口号

注意事项:Nginx 默认占用80端口号,如果80端口号被占用,可以在 nginx.conf 中修改端口号

部署完成后,在浏览器输入

localhost:80

出现:

相关推荐
阿伟来咯~29 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端34 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱36 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js