javaweb开发Day3（宝藏干货冲冲冲）

爱吃java的羊儿

已于 2023-09-14 13:33:36 修改

阅读量138

点赞数 1

分类专栏： javaweb 文章标签： vue.js 开发语言

于 2023-08-17 17:09:54 首次发布

本文链接：https://blog.csdn.net/qq_73735007/article/details/132070465

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

笔记梳理---仅供参考

Ajax

前端工程化

Ajax

原生Ajax（基本不用）

1、准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

2、创建XMLHttpRequest对象：用于和服务器交换数据

3、想服务器发送请求

4、获取服务器响应数据

Axiso

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios-案例</title>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
   <div id="app">
    <table border="1"cellspacing="0"width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职日期</th>
            <th>最后操作时间</th>
        </tr>
        <tr align="center"v-for="(emp,index)in emps"></tr>
        <td>{{index+1}}</td>
        <td>{{emp.name}}</td>
        <td>
            <img :src="emp.image"width="30px"height="50px">
        </td>
        <td>
            <span v-if="emp.gender==1">男</span>
            <span v-if="emp.gender==2">女</span>
        </td>
        <td>{{emp.job}}</td>
        <td>{{emp.entrydate}}</td>
        <td>{{emp.updatetime}}</td>
    </table>
   </div> 
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        mounted(){
            //发送异步请求
            axios.get("  ").then(result=>{
                this.emps=result.data.data;
            })
        }
    })
</script>
</html>

前端工程化

接口文档：YApi（YApi Pro-高效、易用、功能强大的可视化接口管理平台）

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

检查是否安装nodejs和npm镜像文件

安装vue-cli

npm install -g @vue/cli

确认是否安装成功

vue --version

element组件库：Element - The world's most popular Vue UI framework

Vue路由

前端路由：URL中的hash（#号）与组件之间的对应关系

爱吃java的羊儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
javaweb开发Day3（宝藏干货冲冲冲）

1、准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list。模块化（js、css）组件化（UI结构、样式、行为）规范化（目录结构、编码、接口）自动化（构建、部署、测试）2、创建XMLHttpRequest对象：用于和服务器交换数据。检查是否安装nodejs和npm镜像文件。原生Ajax（基本不用）4、获取服务器响应数据。3、想服务器发送请求。接口文档：YApi（
复制链接

扫一扫