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路由

七、打包部署

相关推荐
杨进军18 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW32 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字39 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端