devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

《web前端开发技术进阶》实验报告

作者：IT小白 | 2024-07-10 05:52:55

赞

踩

《web前端开发技术进阶》实验报告

实验报告1

实验项目：

JavaScript事件案例

实验地点：

实验时间

  • 实验目的：

在web应用中，原生js是十分重要的内容，js事件是在操作dom元素及书写js函数时比补考少的知识，本实验主要涉及js的点击事件、获取焦点及失去焦点事件、String对象、DOM对象、form表单元素的综合知识。

  • 实验步骤和内容

1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡。

    function on(){

        var img= document.getElementById("light");

        img.src="img/on.gif";}

    function off(){

        var img= document.getElementById("light");

        img.src="img/off.gif";}

效果展示：

      

2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写。

     function lower(){

       var input= document.getElementById("name");

       input.value =input.value.toLowerCase();}

    function upper(){

        var input= document.getElementById("name");

        input.value =input.value.toUpperCase();}

效果展示：

     

  1. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态。

    function checkAll(){

        var hobbys=document.getElementsByName("hobby");

        for(let i=0;i<hobbys.length;i++) {

            hobbys[i].checked=true; }}

    function reverse(){

        var hobbys=document.getElementsByName("hobby");

        for(let i=0;i<hobbys.length;i++){

           //if(hobbys[i].checked)

          // {

           // hobbys[i].checked=false;

          // }else{

          //  obbys[i].checked=true;// }

          hobbys[i].checked=!hobbys[i].checked; } }

效果展示：

三、出现问题及解决方法：

在事件处理程序中，this通常指向触发事件的元素。但在某些情况下（例如，在回调函数或箭头函数中），this的指向可能会发生变化。

解决方法：在事件处理程序中，尽量使用事件对象的currentTarget属性来获取触发事件的元素，而不是依赖this。或者如果你确实需要使用this，并且遇到了指向问题，考虑使用.bind(this)或闭包来确保this的正确指向。

不同的浏览器可能对某些事件或事件属性有不同的支持情况，导致代码在某些浏览器上无法正常工作。

解决方法：使用现代化的工具库（如jQuery、Modernizr等）来处理跨浏览器兼容性问题。对不同的浏览器进行充分的测试，并查找并应用相关的polyfill或解决方案来解决特定的问题。查阅相关文档和社区资源，了解不同浏览器对事件处理的支持情况。

四、实验总结（通过本次实验你学到了什么，知识点总结及感想）

通过JavaScript事件案例的学习，我深刻体会到了事件处理在前端开发中的重要性。事件处理是实现交互功能的关键，它使得网页能够响应用户的操作并做出相应的反馈。

通过学习和实践，我不仅掌握了事件处理的基本知识和技巧，还学会了如何运用事件处理来解决实际开发中遇到的问题。

同时，我也认识到了JavaScript的强大和灵活性。它提供了丰富的API和强大的功能，使得我们能够创造出各种复杂的交互效果。然而，这也意味着我们需要不断学习和探索，以充分利用JavaScript的潜力。

总的来说，JavaScript事件案例的学习让我对前端开发有了更深入的了解，并激发了我对编程的兴趣和热情。我相信在未来的学习和工作中，我会继续深入探索JavaScript的奥秘，并不断提升自己的编程能力。

实验报告2

实验项目：

Vue指令

实验地点：

实验时间

  • 实验目的：

Vue指令是Vue框架中提供的一种特殊特性，它们以`v-`开头，用于辅助开发者渲染页面的基本结构。Vue指令提供了多种功能，包括内容渲染、条件判断、列表渲染、表单内容的收集、事件绑定等。

二、实验步骤和内容

请将实现代码及效果进行整理。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <!-- 1.导入包 -->

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

            .active {

                border: 5px solid green;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <!--（1） v-text指令：设置标签的文本值 -->

        <p>{{msg}}---{{aw}}</p>

        <p v-text="msg">同学</p>

        <hr>

            <!-- （2）v-html：设置标签的innerHTML -->

        <p v-html="content"></p>

        <p v-html="content2"></p>

        <hr>

            <!-- (3)、v-bind指令：设置元素的属性值（如：src、title、class属性等）。 -->

            <img v-bind:src="imgSrc" alt="">

            <!-- 简写： -->

            <img :src="imgSrc" :class="isActive?'active':''"   @click="changeActive()">

            <hr>

            <!-- (4)v-model：获取和设置表单元素的值（双向数据绑定） -->

            <!-- <input type="text" v-bind:value="name">姓名：{{name}} -->

            <br>

            <input type="text" v-model="name">姓名：{{name}}

            <hr>

            <!-- (5)v-show指令：根据表达式值的真假，表达式的值一定是逻辑值（真或假），切换元素的显示或者隐藏。 -->

              <img src="images/1.png" v-show="false">

            <!--(6) v-if指令 -->

            <img src="images/1.png" v-if="false">

            <div style="background:blue">

                <p v-if="type=='A'">我是A</p>

                <p v-else-if="type=='B'">我是B</p>

                <p v-else>我是C</p>

            </div>

            <hr>

            <!-- (7)v-for：根据数据生成列表结构 -->

            <ul>

                <li v-for="item in arr">{{item}}</li>

            </ul>

            <!-- 制作食物价格表 -->

            <table :border="1" width="500">

                <tr>

                    <th>食物</th>

                    <th>价格</th>

                </tr>

                <tr v-for="(item,index) in foods" :key="index">

                    <td>{{item.name}}</td>

                    <td>{{item.price}}</td>

                </tr>

            </table>

            <br>

            <!-- （8）v-on指令：为元素绑定事件 -->

            <input type="button" value="单击事件" v-on:click="doit('单击')">

            <input type="button" value="双击事件" v-on:dblclick="doit('双击')">

            <input type="button" value="鼠标移入事件" v-on:mouseenter="doit('鼠标移入')">

            <!-- 简写形式：@ -->

            <input type="button" value="单击事件"  @click="doit('单击')">

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el: '#app',

                data: {

                    msg: '你好',

                    aw: '我很好，谢谢',

                    content: '山青院',

                    content2: '<a href="http://www.sdyu.edu.cn">山青院</a>',

                    food: "汉堡包",

                    imgSrc: "images/3.png",

                    isActive: true,

                    name: "张三",

                    type: "C",

                    arr: ["春", "夏", "秋", "冬"],

                    foods: [{

                            name: "汉堡",

                            price: 20

                        },

                        {

                            name: "披萨",

                            price: 30 }],

                    border: '2px solid red',

                    message: '欢迎访问明日学院'

                },

                methods: {

                    changeActive(){

                        this.isActive=!this.isActive;

                    },

                    doit(msg){

                        alert("注意:"+msg);

                    }

                }

            })

        </script>

    </body>

</html>

实现效果：

三、出现问题及解决方法：

指令与其他Vue特性（如组件、插槽、过滤器等）之间的交互出现问题。

解决方法：查阅Vue官方文档，了解指令与其他特性之间的交互方式和规则。

如果遇到特定的问题，可以尝试创建简单的示例来隔离和重现问题，这有助于更准确地定位问题所在。在社区论坛或Stack Overflow等平台上搜索类似的问题和解决方案。

在同一个元素上使用了多个指令，导致它们之间产生了冲突。

解决方法：仔细审查每个指令的作用和用途，确保它们之间没有不必要的重叠。如果需要同时使用多个指令，确保它们的顺序和优先级正确。考虑使用计算属性或方法来合并多个指令的逻辑。

四、实验总结（通过本次实验你学到了什么，知识点总结及感想）

通过Vue指令的学习，我深入了解了Vue.js框架中指令的概念、用法以及它们在构建用户界面时的重要性。Vue允许注册或获取全局的自定义指令，也可以在组件选项中定义局部的自定义指令。

自定义指令有几个钩子函数（如bind、inserted、update、componentUpdated和unbind），可以在这些钩子函数中编写自定义逻辑。当同一个元素上使用了多个指令时，需要了解它们的优先级顺序，以确保它们按预期工作。

通过简单的指令，我可以轻松地实现数据的绑定、事件的监听以及条件渲染和列表渲染等复杂功能，而无需手动操作DOM。这极大地提高了开发效率和代码的可维护性。此外，Vue指令的灵活性和可组合性也让我印象深刻。

可以根据需求自由组合不同的指令来实现各种功能，这使得Vue.js成为了一个非常强大且易于上手的前端框架。总的来说，学习Vue指令让我对Vue.js有了更深入的了解，也提升了我的前端开发能力。我相信在未来的开发中，我会更加熟练地运用Vue指令来构建高效、可维护的前端应用。

实验报告3

实验项目：

Axios（案例：检测用户名是否被占用）

实验地点：

实验时间

  • 实验目的：

在实际开发过程中，通常需要和服务端进行数据交互。而vue.js并未提供与服务端通信的接口。从vuejs2.0版本之后，官方推荐使用axios来实现ajax请求。Axios是一个基于promise的http客户端。通过该案例，掌握Axios的使用方法，掌握前端界面渲染服务器数据的过程。

二、实验步骤和内容

请将实现代码及效果进行整理。

//监听username的变化，当用户存在时，fcolor为红色，info为：该用户名已被他人使用！；

 // 反之，fcolor为绿色，info为：'恭喜，该用户名未被使用！

                watch: {

                    username: function(val){

                        let that=this;

                        axios.get("https://mock.apifox.com/m1/4324298-3967347-default/getUserList").then(

                            function(response){

                                console.log(response);

                                let arr=response.data;

                                let flag=true;

                                for(let i=0;i<arr.length;i++){

                                    if(arr[i].name==val){

                                         flag=false;

                                          break;

                                        }

                                    }

                                    if(!flag){

                                        that.info="该目录名已被使用！";

                                         that.fcolor="red";

                                        }else{

                                            that.info="恭喜您，该用户名未被使用！";

                                            that.fcolor="green";

                                        } }

三、出现问题及解决方法：

服务器没有按照预期的格式返回数据，导致客户端无法正确解析。

解决方法：确保服务器返回的数据格式与客户端期望的格式一致，并在客户端进行适当的错误处理。

发送的请求体格式不符合后端 API 的要求。解决方法：确保发送的请求体格式与后端 API 要求的格式一致。

前端应用和后端服务器不在同一个域下，遇到跨域资源共享（CORS）问题。解决方法：在后端服务器上设置适当的 CORS 策略，允许前端应用的域进行访问。

四、实验总结（通过本次实验你学到了什么，知识点总结及感想）

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它常用于发送 AJAX 请求以与服务器交互。在检测用户名是否被占用的案例中，你可能会使用 Axios 来发送一个请求到服务器，检查某个用户名是否已存在。

通过学习Axios并使用其来实现检测用户名是否被占用的案例，我深入了解了Axios这个强大的HTTP客户端库，并掌握了它在前端开发中处理异步请求的重要性。

Axios是一个基于Promise的HTTP客户端，可以在浏览器和node.js中使用。它通过Promise API简化了HTTP请求的发送和处理，支持请求和响应的拦截、转换请求和响应数据等。Axios允许在请求被发送到服务器之前或响应被传递到客户端之前对其进行拦截和转换。可以用于添加公共请求头、处理身份验证令牌、统一处理错误等。

在检测用户名是否被占用的案例中，学会了如何与后端API进行交互，发送请求并处理响应。理解了前后端数据交换的格式和约定，如JSON格式的请求体和响应体。它简化了HTTP请求的发送和处理过程，使得我们可以更加专注于业务逻辑的实现。同时，我也认识到了在前后端交互中数据格式和约定的重要性，以及错误处理的必要性。此外，我还学会了如何使用浏览器的开发者工具来调试网络请求和响应，这对于定位问题和优化性能非常有帮助。通过实践案例，我也更加熟悉了Promise和异步编程的概念，这对于提升我的编程能力和思维方式都有很大的帮助。

实验报告4

实验项目：

Vue路由（足球篮球子组件）

实验地点：

  • 实验目的：

vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。vue-router可以实现当用户单击页面中的A按钮时，页面显示内容A；单击B按钮时，页面显示内容B。换言之，用户单击的按钮和页面显示的内容，两者是映射（对应）的关系。

二、实验步骤和内容

请将实现代码及效果进行整理。

<div class="nav">

                     <ul> <li><router-link to="/football">足球</router-link></li>

                    <li><router-link to="/basketball">篮球</router-link> </li></ul>

</div><div class="content"><router-view></router-view></div>

<script type="text/javascript">

            //提示:此处定义足球：Football组件

            //(组件中应包含“意甲联赛”即/football/italy，“西甲联赛”,即/football/spain路由列表）

            var Football = {

                template: `<div>

                    <ul>

                        <li><router-link to="/football/italy">意甲联赛</router-link></li>

                        <li><router-link to="/football/spain">西甲联赛</router-link></li>

                    </ul>

                    <router-view></router-view>

                  </div>`}

            //提示:此处定义足球：Basketball组件

            //(组件中应包含“CBA”即/basketball/cba，“NBA”,即/basketball/nba路由列表）

            var Basketball = {

                template: `<div>

                    <ul>

                        <li>CBA</li>

                        <li>NBA</li>

                    </ul>

                  </div>` }

            // 提示:创建router实例,传入routes配置参数,即定义的路由

            var router = new VueRouter({

                routes:[

                    { //默认渲染Football组件

                            path: '',

                            component: Football,},

                    {

                        //足球路由

                        path:"/football",

                        component:Football,

                        children:[

                            {

                                path:"italy",

                                component:{template:'<h3>AC米兰稳居三甲</h3>'}, },{

                                path:"spain",

                                component:{template:'<h3>梅西上演帽子戏法</h3>'},

                            } ]}, {

                        //篮球路由

                        path:"/basketball",

                        component:Basketball},] })

           // 提示:创建和挂载根实例,注入路由,让整个应用都有路由功能

            var vm = new Vue({

                el: '#app',

                router});

        </script>           

 

       

  

三、出现问题及解决方法：

问题一：路由不渲染子组件。当导航到足球或篮球的路由时，相应的子组件没有渲染出来。解决方法：检查路由配置：确保你已经正确配置了路由，包括子路由。

问题二：子组件样式或数据不更新当切换子组件时，样式或数据没有按预期更新。解决方法：使用 key 属性：在 <router-view> 上使用 :key 绑定可以确保组件在切换时重新渲染。

问题三：路由参数或查询不传递。当尝试通过路由传递参数或查询时，它们没有在目标组件中接收到。解决方法：确保在路由定义中正确设置了参数占位符和查询参数。

四、实验总结（通过本次实验你学到了什么，知识点总结及感想）

通过学习Vue路由及其在足球篮球子组件中的应用，我深入了解了Vue Router的工作机制以及如何在Vue应用中实现组件化的路由管理。学会了如何配置路由，包括静态路由和动态路由，以及如何设置嵌套路由来管理子组件的渲染。通过定义路由表，能够指定URL路径与组件之间的映射关系；了解了路由守卫的概念，包括全局守卫、路由独享的守卫和组件内的守卫。通过路由守卫，能够在路由发生变化时执行某些逻辑，如权限验证、数据获取等，从而增强应用的灵活性和安全性；学习了命名路由的概念，它允许我为路由指定一个名字，并通过名字进行导航。同时，我也了解了命名视图，它允许我在同一个路由下渲染多个组件。我深刻体会到了Vue Router在构建单页面应用中的重要性。它使得我们能够以组件化的方式管理页面和页面之间的导航，提高了开发效率和应用的可维护性。同时，我也认识到了路由管理在前端开发中的复杂性。需要考虑的因素很多，如路由配置、参数传递、权限验证等。此外，我也感受到了Vue Router的灵活性和扩展性。它提供了丰富的API和选项，使得我们能够根据项目的需求进行定制和优化。同时，Vue社区也提供了许多与路由相关的插件和扩展，使得我们能够更加高效地构建复杂的单页面应用。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号