web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue(学习版2)

一、前言

接下来就是来解决这些问题

二、 Ajax

1.ajax

javscript是网页三剑客之一,空用来控制网页的行为的

xml是一种标记语言,是用来存储数据的

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-原生方式</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>
<script>
    function getData(){
        //1.创建XMLHttpRequest对象
        var xmlHttpRequest = new XMLhttpRequest();

        //2.发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>'

2.axios

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios</title>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
    function get(){
        axios({
            method:'get',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/list',

        }).then(result =>{
            console.log(result.data);
            
        })

    } 

    function post(){
        axios({
            method:'post',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',
            data:'id=1', 
        }).then(result =>{
            console.log(result.data);
            
        })

    }
</script>
</html>

3.axio案例

这三个代码都是没有用浏览器看到的(因为那个网址打不开)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios案例</title>
</head>
<body>
    
    <div id="app">
        <table width="800px" cellspacing="0" border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图片</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职时间</th>
                <th>更新时间</th>
            </tr>

            <tr v-for="(emp, index) in emps" align="center">
                <td>{{index+1}}</td>
                <td>{{emps.name}}</td>
                <!-- <td>{{emps.image}}</td> -->
                 <td>
                    <img v-bind : src="emps.image" alt="" height="50px" width="70px">
                 </td>
                <td>
                    <span v-if="gender == 1">男</span>
                    <span v-if="gender == 2">女</span>
                </td>
                <td>{{emps.job}}</td>
                <td>{{emps.entrydate}}</td>
                <td>{{emps.updatatime}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
    new Vue({
        el:'a#pp',
        data:{
            emps:[]
        },
        mounted() {
            axios.get('').then(result => {
                this.emps = result.data.data;//当前vue实例中的data中的emps属性赋值
                
            })
        },
    })
</script>
</html>

三、前后端分离开发

1.介绍

2.YAPI -接口文档管理平台

这里我插播一条:使用apipost

四、前端工程化

1.环境准备

如果需要可以找我要

2. vue项目介绍

3.vue项目开发流程

五、Vue组件库Element

六、Vue路由

七、打包部署

相关推荐
Moonbit9 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天10 小时前
ts中的函数重载
前端
卓伊凡10 小时前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy10 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy10 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼10 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍10 小时前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子11 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院11 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰11 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html