web开发day03

已于 2024-04-20 16:34:18 修改
阅读量843 收藏 26
点赞数 36
分类专栏： web vue 文章标签： 前端 vue.js
于 2024-04-20 14:21:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59855900/article/details/137957940
版权
web 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

Ajax

概念:Asynchronous JavaScript And XML，异步的JavaScript和XML。
作用:
数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。

Axios

Axios入门

1.引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2.使用Axios发送情趣，并获取响应结果

 推荐：

请求方式别名：

  • axios.get(url [, config])
  • axios.delete(url [, config])
  • axios.post(url [, data[, config]])
  • axios.put(url [, data[, config]])
发送GET 请求： 
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
        console.log(result.data);
    });

 发送POST请求：

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

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-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">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" 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>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>
 mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }

分析：当我们加载这个html页面时候，会自动的触发钩子函数mounted()，在这个函数中发送异步请求，加载数据，讲返回的数据赋值给了数据模型emps，然后在视图层当中基于Vue当中的指令来渲染展示emps当中的列表数据。 

  • 前后端分离开发

  • 介绍

  • YAPI

  • 介绍:YApi是高效、易用、功能强大的 api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
  • 地址:https://yapi.pro/

教程：https://hellosean1025.github.io/yapi/documents/index.html

Yapi使用（快速入门）_yapi.smart-xwork.cn-CSDN博客        ​

注意：YApi 的接口测试等功能仅支持 Chrome 浏览器，请使用 Chrome 浏览器获得完整功能。

  • 前端工程化

  • 环境准备

Vue-cli

介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

Vue-cli提供了如下功能：

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

依赖环境：NodeJS

安装：在资料里面查看安装文档

注意：原域名https://registry.npm.taobao.org/ 在 2022.06.30 号正式下线和停止 DNS 解析

#最新地址
npm config set registry https://registry.npmmirror.com

  • Vue项目简介

Vue项目-创建

命令行：

vue create vue-project01

图形化界面：

vue ui

 

Vue项目-目录结构

Vue项目-启动（图形化界面/命令行）

没有NPM脚本：ctrl+shift+p 搜npm选择第一个即可

Vue项目-配置端口

在vue.config.js中增加以下代码，来更改端口号。

devServer:{
    port:7000
   }

  • Vue项目开发流程

如何访问到Vue项目的首页面的？现在访问到的页面是Vue项目默认的首页index.html，也就是在创建Vue项目之后public目录下自带的index.html。而在它当中默认是引入了入口文件main.js的，这个main.js中引入了很多的公共组件，比如App.vue组件，import代表的是引入组件，对应的有export，是将对象或者函数导出为模块，这样就可以通过export来导出一个模块，然后在要使用的地方用import再导入进来。比如import App from './App.vue',要将当前目录下的App.vue这个组件导入到这个js文件中来并且给他起了个名字叫App。导入进来之后就可以在这个js文件中使用App这个组件。之后又在下面创建了Vue中的核心对象Vue，并且将Vue对象实例挂载到了#app这个区域——也就是index下的div这个区域。其中还创建了两个属性一个是router（路由），一个是render（一个函数），他的作用就是将上面导入进来的App当中所定义的视图创建出对应的虚拟DOM元素，然后挂载到#app这个区域。

es6当中的写法：如果属性名和属性值是一致的，那冒号后面的部分是可以省略的，直接写成router

在index.html当中只是定义了一个空的div标签，但是界面中又展示了很多的元素包括欢迎信息，这是怎么做到的呢？

在创建Vue对象的时候，通过render这个函数来创建了对应的虚拟DOM元素，而这部分的DOM元素在App.vue这个根组件当中定义的。

  • Vue的组件文件以.vue结尾，每个组件由三个部分组成:<template>、<script>、<style>

  • Vue组件库Element

  • Element:是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
  • 组件:组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
  • 官网:https://element.eleme.cn/#/zh-CNListener

  • 快速入门

安装ElementUI组件库 （在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

访问官网，复制组件代码，调整

  • 常见组件

常见组件-表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

常见组件-分页

Pagination 分页:当数据量过多时，使用分页分解数据。

 常见组件-对话框

Dialog 对话框:在保留当前页面状态的情况下，告知用户并承载相关操作。

 常见组件-表单

Form 表单:由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

怎么样去采集这个form表单当中每一个表单项当中的内容——只需要v-model进行数据绑定，将各个表单项当中的数据绑定到一个对象当中就可以了。

  • 案例

mounted(){
    //发送异步请求，获取数据
    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
        this.tableData = result.data.data;
    });
  }

什么时候需要通过axios发送异步请求加载数据：只需要在Vue当中的钩子方法中来发送这个请求，只要Vue对象一创建，挂载完成，他就会自动发送这个请求，加载数据；methods平齐定义钩子方法mounted(){}，在方法中需要发送异步请求，获取数据axios.get("url")后面跟一个成功回调函数输入thenc自动的生成成功的回调，catch是失败的回调不需要，删除掉即可；成功的回调中拿到响应回来的数据result.data,但是需要的是返回回来数据的data数组所以是result.data.data;此时需要把返回回来的数据赋值给一个数据模型tableData，这个数据模型有值了之后在上面的表格当中就会把这个数据模型中的数据渲染在这个表格当中，所以只需要为tableData赋一个值就可以了this.tableData = result.data.data;这样就完成了发送异步请求，获取数据，并完成页面的基础信息渲染。

 ！！！

数据最新链接：https://mock.apifox.cn/m1/3128855-0-default/emp/list

！！！

之后会出现两个问题性别问题和图片问题：性别：对数据进行一个转换：参照element——插槽slot-scope="scope"，通过插槽获取到row，就是这一行所有的字段值。在里面可以基于插槽获取字段值。

<el-table-column label="性别" width="140">
    <template slot-scope="scope">
        {{scope.row.gender == 1 ? '男' : '女'}}
    </template>
</el-table-column>

图片：和性别有点类似，不能直接展示image，需要也加上一个插槽 ，就不要使用三元运算符，动态的给src属性绑定一个值scope.row.image,之后给图片重新设置尺寸就行。

<el-table-column  label="图像" width="180">
     <template slot-scope="scope">
          <img :src="scope.row.image" width="100px" height="70px">
     </template>
</el-table-column>

最后的细节处理：

左侧侧边栏边框线的问题：为侧边栏el-aside添加一个边框线CSS样式style中的border来实现。

然后会出现一个滚动条，原因是因为侧边栏el-aside设置的宽度有点小。

<el-aside width="230px" style="border: 1px solid #eee">

最终效果：

全部代码：

//EmpView.vue代码
<template>
  <div>
    <el-container style="height: 700px; 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" class="demo-form-inline">
            <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 label="入职时间">
                <!-- 时间选择器 -->
                <el-date-picker
                    v-model="searchForm.entrydate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column  label="图像" width="180">
                 <template slot-scope="scope">
                    <img :src="scope.row.image" width="100px" height="70px">
                </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
                <template slot-scope="scope">
                    {{scope.row.gender == 1 ? '男' : '女'}}
                </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></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>
          <!-- 分页条 -->
          <!-- Pagination分页 -->
            <el-pagination
                background
                layout="sizes,total,prev, pager,next,jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :total="500">
            </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("查询数据");
    },
    handleSizeChange:function(val){
        alert("每页记录数变化" + val)
    },
    handleCurrentChange:function(val){
         alert("页码发生变化" + val)
    }
  },
  mounted(){
    //发送异步请求，获取数据
    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
        this.tableData = result.data.data;
    });
  }
};
</script>

<style>
</style>
//App.vue代码
<template>
  <div>
   <!--  <nav>
      <router-link to="/">Vue Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/> -->

    <!-- <element-view></element-view> -->
    <!-- 员工管理 -->
    <emp-view></emp-view>
  </div>
</template>

<script>
import EmpView from './views/tlias/EmpView.vue'
/* import ElementView from './views/element/ElementView.vue' */
export default {
  components: { EmpView },
  
}
</script>

<style>

</style>

  • Vue路由

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

Vue Router
介绍: Vue Router 是 Vue 的官方路由。
组成:

  • Vue Router:路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件，浏览器会解析成<a>
  • <router-view>:动态视图组件，用来渲染展示与路由路径对应的组件

安装（创建Vue项目时已选择）：

npm install vue-router@3.5.1

定义路由：在router目录下的index.js中来定义

 先配置路由信息：

import Vue from 'vue'
import VueRouter from 'vue-router'
/* import HomeView from '../views/HomeView.vue' */

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

配置好就已经生效了，以为main.js中已经引入了路由信息，也已经在使用了。 并且main.js在创建Vue对象的时候已经指定了路由。

点击部门显示部门管理的页面组件，点击员工管理的菜单显示员工管理的组件，通过Vue的路由VueRouter完成左侧菜单栏点击切换效果：

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理</router-link>
</el-menu-item>

这只是点击对应的组件，上面的地址栏地址发送变化，要让对应的区域也跟着变化要在对应的区域加上标签，在App.vue中。

<router-view></router-view>

系统默认访问的是#/，所以要再配置一个根路径path：'/'。让他去访问默认的页面设置为部门管理页面。使用redirect属性，代表重定向的含义。

 {
    path: '/',
    redirect: '/dept'
  }

  • 打包部署

netstat -ano | findStr 80 

全部代码： 在Gitee代码仓库：https://gitee.com/lizxbro/web03-element-case-study

李骁梓
关注
专栏目录
Python3教程Web开发实战梳理-day10（用户注册和登录）
JosephPai的博客
07-31 3172
Day10（上）-注册用户管理是绝大部分Web网站都需要解决的问题。用户管理涉及到用户注册和登录。通过API把实现用户注册功能。API与MVC的区别： mvc主要用于建站，web api主要用于构建http服务，API更抽象，更不注重View的生成。
web前端开发day03-NodeJs安装
04-19
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使得JavaScript能够脱离浏览器在服务器端运行，为前端开发人员开辟了一条开发Web应用的新道路。它不仅适用于构建服务器端应用程序，还广泛应用于前端工具...
javaweb-js-vue基础知识(持续更新中)
m0_74969835的博客
01-24 519
sshu双向数据绑定。
Vue路由功能介绍
菜鸟小木的博客
01-31 897
路由是一个涉及计算机网络的重要概念，特别是在数据通信网络中。路由的基本含义：路由指的是通过互联的网络将信息从源地址传输到目的地址的活动。这一活动发生在OSI网络参考模型的第三层，即网络层。路由的功能：路由器是执行路由功能的关键设备。它们负责将具有IP特征的数据包根据目的网络的IP地址进行转发，确保数据包能够正确地送达目的地。路由的工作原理：当路由器接收到一个IP数据包时，它会检查数据包中的目标IP地址，并在自己维护的路由表（Routing Table）中查找与之匹配的条目。
day02Ｗeb开发流程图解
xio小蜗的博客
09-29 3059
Ｗeb开发流程图解一 需求分析阶段二 项目开发阶段2.1产品设计.>PM\UE\UI2.2测试用例.>QA2.3前端设计.>FD2.4后端设计.>RD2.5开发2.6测试2.7上线2.8维护 一 需求分析阶段 在需求分析阶段, 即上图所述"需求明确"之前的阶段产品经理PM召集项目相关人员, 开需求讨论会、讲解原型 相关人员需要以此了理解产品的需求, 提出质疑: 这是什么功能, 怎么做, 为啥这么做, 大概包含如下几个方面 评估实现难度和实现成本, 是否有潜在技术问题/风险 对比一
Day03
qq_44936838的博客
08-13 2048
分布式：Java是为网络分布式环境设计的，因为Java能够处理很多tcp/ip协议问题，通过URL（统一资源定位系统）访问网络上的资源。应用服务器：tomcat，Jetty，Jboss，Websphere，weblogic。开发工具：eclipse，Netbean，intllij，IDEA，Jbuilder。动态性：反射机制，在程序运行过程中（而非编译时），动态地对对象创建及操作。Web开发：Struts，Spring，Hibernate，myBatis。特点：分布式，动态性，多线程，安全性，健壮性。...
web移动开发总结(四)
庚中
12-10 4424
总结 移动端的一些基本基础知识 移动京东的项目搭建 公共样式的定义 顶部通栏的布局 轮播图的布局 导航条的布局 秒杀商品布局 京东超市布局 原生移动web开发 响应式开发： 写一个页面同时适配多个终端 原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码 PC端一般使用固定宽高的布局 移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局） 目...
Web开发day1：使用flask快速搭建网站
m0_56681374的博客
11-12 2746
使用flask简单搭建一个本地网站，介绍部分html语法
苍穹外卖-day03
AN_NI_112的博客
07-28 4584
苍穹外卖-day03
【中软实训】Day01：Java Web开发环境安装与配置&收获与感想
拾年之璐
09-20 1731
说明：从今日（2019年6月25日）开始，笔者将在宁波中软国际进行实训，这期间，将每日对本博客进行更新，依次来记录每日的学习情况，以及分享自我收获与感悟。 每日实训记录栏：https://blog.csdn.net/cxh_1231/article/category/9059743 今日记录：Java Web开发环境的安装与配置过程，以及实训首日的收获和感想记录。 0、笔者想说 首先，...
搭建开发环境——Python实战：Web App 开发 Day 01
我是张跑跑
01-08 2755
1. 背景介绍 Python 的功能十分强大，因其强大而丰富的开源包，让其可以实现高级爬虫，可以实现机器学习算法，可以应用到深度学习中，也可以开发Web App 项目。 本次的Python实战就是Web App 项目的开发，项目素材和代码大部分来源于廖雪峰老师的python教程，一共为期16天，博主会对代码做详细的讲解，包括代码的详细注释和原理；博主在实战这个项目过程中，发现廖雪峰老师的代码是比较...
Web前端基础day03.zip
08-19
在Web前端开发中，盒子模型（Box Model）是理解页面布局和元素尺寸计算的关键概念。这个模型描述了HTML元素如何占据空间，包括元素的内容区域、内边距、边框和外边距。让我们深入探讨一下这些组成部分以及它们如何...
CD-webdev:在 Code Day 上介绍了 Web 开发
07-02
这个项目“CD-webdev”显然在Code Day活动上向参与者介绍了Web开发的基础知识，尤其是聚焦于交互式应用程序的创建。通过“Intro to Web Dev”（入门Web开发）部分，我们可以推测教程可能覆盖了Web开发的基本组件和...
WEB开发
04-10
在IT行业中，WEB开发是一项核心技能，涉及到构建和维护网页及Web应用程序的技术。在这个领域，开发者需要掌握多种语言、框架和工具，以便创建交互性强、功能丰富的网站。本篇文章将根据给定的标签和文件名，深入探讨...
web扩展
x737510的博客
10-10 604
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
前端开发攻略---8种方法实现在浏览器中跨页面通信
最新发布
nibabaoo的博客
10-15 1083
浏览器实现跨标签页通信的多种方式
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 494
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 613
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 278
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
黑马头条（day03）：软件开发完整代码与资源下载
综合以上内容，可以推断出day03的学习内容是相当丰富的，不仅包括了实际编程技能的培养，还涉及到了项目开发过程中的各个关键环节。学习者在掌握当天的知识点之后，应该能够对一个Web项目进行数据库设计、编写后端...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值