day03-Vue-Element

已于 2024-03-01 11:41:52 修改
阅读量945 收藏 20
点赞数 16
分类专栏： 【新】【黑马】【JavaWeb】 文章标签： vue.js okhttp 前端
于 2024-03-01 11:26:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yirenyuan/article/details/136352522
版权

一、Ajax

1 Ajax 介绍

1.1 Ajax 概述

概念：Asynchronous JavaScript And XML，异步 的 JavaScript 和 XML。

作用：

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

1.2 同步异步

在这里插入图片描述

2 原生 Ajax

  1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
  2. 创建 XMLHttpRequest 对象：用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据
<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>

3 Axios

  • 介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
  • 官网： https://www.axios-http.cn/

3.1 Axios 的基本使用

（1）引入 Axios 的 js 文件

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

（2）使用 Axios 发送请求，并获取响应结果

axios({
    method: "get",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {
    console.log(result.data);
});

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

axios() 是用来发送异步请求的，小括号中使用 js 的 JSON 对象传递请求相关的参数：

  1. method 属性：用来设置请求方式的。取值为 get 或者 post。
  2. url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
  3. data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
  4. then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

3.2 请求方法的别名

1️⃣axios.get(url [, config])
2️⃣axios.delete(url [, config])
3️⃣axios.post(url [, data[, config]])
4️⃣axios.put(url [, data[, config]])

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});

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>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

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

3.3 案例

需求：基于Vue及Axios完成数据的动态加载展示

<!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>

二、前后台分离开发

1 前后台分离开发介绍

1.1 前后台混合开发

在这里插入图片描述

这种开发模式有如下缺点：

  1. 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成，再交给后台人员使用
  2. 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
  3. 不便管理：所有的代码都在一个工程中
  4. 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

1.2 前后端分离开发

在这里插入图片描述

2 YAPI

2.1 YAPI介绍

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

YApi主要提供了2个功能：

  1. API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
  2. Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.2 接口文档管理

  1. 添加项目
  2. 添加分类
  3. 添加接口

三、前端工程化

1 前端工程化介绍

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

  1. 模块化：将js和css等，做成一个个可复用模块
  2. 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  3. 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  4. 自动化：项目的构建，测试，部署全部都是自动完成

2 前端工程化入门

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

Vue-cli 提供了如下功能：

  1. 统一的目录结构
  2. 本地调试
  3. 热部署
  4. 单元测试
  5. 集成打包上线

依赖环境：NodeJS

Vue项目-目录结构
在这里插入图片描述

Vue项目-启动
在这里插入图片描述

Vue项目-配置端口
在这里插入图片描述

Vue项目开发流程
在这里插入图片描述
在这里插入图片描述

四、Vue 组件库 Element

1 Element介绍

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

官网：https://element.eleme.cn/#/zh-CNListener

2 快速入门

安装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);

访问官网，复制组件代码，调整
在这里插入图片描述

<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">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </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="total,sizes, prev, pager, next, jumper" 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="1000"></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("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
            this.tableData = result.data.data;  
        });
    }
}
</script>

<style>

</style>

五、Vue路由

1 路由介绍

前端路由: URL中的hash(#号) 与组件之间的对应关系。
在这里插入图片描述

介绍： Vue Router 是 Vue 的官方路由。

组成：

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

在这里插入图片描述

2 路由入门

安装(创建Vue项目时已选择)

npm install vue-router@3.5.1

定义路由
在这里插入图片描述

六、打包部署

1 前端工程打包

在这里插入图片描述

2 部署前端工程

2.1 nginx介绍

  • 介绍：Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
  • 官网：https://nginx.org/

2.2 部署

部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。

启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号

Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)

来世做春风嘛
关注
  • 16
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
黑马新版javaweb：day03-Vue-Element中vue-project(Element-案例)运行不起来
bluesky的博客
04-29 227
1、设置上一层目录中没有中文，否则导入后运行出现错误。
Day03-12：Element-案例-基本页面布局
m0_63464979的博客
07-02 336
默认情况下展示的是根组件里面的内容，也就是App.vue,而现在想展示的ElementView.vue里面的内容，所以就需要在根组件中引入ElementView.vue里面的内容。http://yapi.smart-xwork.cn/mock/169327/emp/list(老师给的，打不开)1.Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。2.组件：组成网页的部件，例如：超链接、图片、按钮、表格、表单、分页条等等。
day03-vue
weixin_53060535的博客
09-06 210
vue入门学习，吐槽：前端太折磨人了
Day04-前端模板vue-element-admin
qq_46112274的博客
03-03 423
前端模板一、vue-element-admin1、简介2、搭建项目前端页面环境2.1、将前端模板放到vscode工作空间中2.2、通过vscode的终端打开刚刚放到工作空间的文件夹，进行依赖安装2.3、启动下载好依赖项目二、vue-admin-template1、简介 一、vue-element-admin 1、简介 而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 功能：https://panjiachen.github.io/vue-element-admin
day05-vue入门
hu_zhi_chao的博客
06-22 1536
vue入门学习目标0.前言1.认识Vue2.Node和NPM2.1.下载Node.js2.2.NPM3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.2.3.推荐npm安装3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this5.指令5.1.插值表达式
day03---Vue(04)
DKPT的博客
06-27 108
一、组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 1、局部组件 创建 01-1-局部组件.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
day04--vue-element-admin (05)
DKPT的博客
06-27 153
一、vue-element-admin 1、简介 而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能 GitHub地址：https://github.com/PanJiaChen/vue-element-admin 项目在线预览：https://panjiachen.gitee.io/vue-element-admin 2、安装
Day03-09：Element-组件-Pagination分页
m0_63464979的博客
07-03 226
代码在：C:\Users\远赴人间惊鸿宴\Desktop\vueproject03\vue-project03\src\views\Element的ElementView.vue里面。可选值有：sizes、prev、pager、next、jumper。可以在layout中控制组件名字的出现顺序从而改变组件的位置。Pagination分页：当数据量过多时，使用分页分解数据。total：是否展示总共的记录数。prev：是否展示上一页的按钮。next：是否展示下一页的按钮。pager：展示每一页的页码。
Day04-前端模板vue-element-admin，不可错过
m0_54926105的博客
03-30 338
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】China开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】]( )**[外链图片转存中…(img-O6QVS7lM-1711734852333)]
高级软件人才培训专家-day03-Vue & Element
03-10
### 高级软件人才培训专家-day03-Vue & Element #### 一、课程概览 本次培训聚焦于Web开发中的关键技术和框架，包括Ajax、前后端分离开发、前端工程化、Vue.js及其组件库Element UI等内容。这些知识点旨在帮助学员...
ssm-element-vue项目知识点(vue+element)
weixin_48112109的博客
07-01 919
element常用知识点
vue element-plus后台管理系统项目-登录、记住密码功能
总结前端开发中遇到的问题，分享前端知识
10-09 4596
功能介绍：登录、记住密码功能实现；登录账号、密码添加规则验证；记住密码，默认保存7天，有效期内下次可直接跳转首页，非有效期需要重新输入账号、密码进行登录....
Vue实战项目day03--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-24 524
Vue实战项目day03--电商后台管理系统今日目标修改用户信息删除用户推送代码权限列表角色列表分配角色将代码推送到码云 今日目标 1.修改用户,删除用户 2.推送代码到码云 3.权限列表 4.角色列表 5.分配角色 修改用户信息 A.为用户列表中的修改按钮绑定点击事件 B.在页面中添加修改用户对话框，并修改对话框的属性 C.根据id查询需要修改的用户数据 //展示编辑用户的对话框 async showEditDialog(id) { //发送请求根据id获取用户信息 const { d
Vue前端路由详解——以Ruoyi框架为案例学习
警警的博客
09-03 1052
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
el-table el-table-column表头嵌套循环数据
林中明月间丶
09-04 390
【代码】el-table el-table-column表头嵌套循环数据。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 477
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
GoFly企业版里的阿里图标如何增加自定义图标到后台
GoFLy开发者的博客
09-04 525
（3）将生成好的图标复制.js文件放到项目index.html文件中。（1）配置 FontClass/Symbol 前缀为：svgfont-（2）配置 Font Family 为 iconfont。在使用位置的组件，返回图标名称。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1452
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
快速上手Element-UI：基于Vue2的组件库实践
"Element-UI简单使用 - 学习Element-UI的基础知识，包括其介绍、如何开始使用以及在Vue项目中的配置步骤。" Element-UI 是一个基于 Vue.js 2.0 的开源组件库，专为开发者、设计师和产品经理设计，目的是为了帮助...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值