JavaWeb——Ajax、Element、打包部署

目录

1.Ajax

a.概述

b.Axios

c.YApi

d.前端工程化

2.Element

a.快速入门

b.常见组件

c.Vue路由

3.打包部署

a.打包

b.部署

c.启动


1.Ajax

a.概述

Asynchronous JavaScript And XML,异步的JavaScript和XML,通过Ajax可以给服务器发送请求,并获取服务器响应的数据。可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

**注意:**繁琐,目前不使用,目前使用Axios

b.Axios

语法:

1.引入Axios的js文件

javascript 复制代码
 <script src="./JS/axios-0.18.0.js"></script>

2.使用Axios发送请求,并获取响应结果

javascript 复制代码
axios(
  {
    method:"",//请求方式
    url:""//请求的地址
    
  }.then(result=>{
    //接收的函数
  })
)

简洁写法:

c.YApi

YApi是高效、易用、功能强大的api管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务

**作用:**API接口管理、Mock服务

d.前端工程化

在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

1.Vue项目-创建

命令行

java 复制代码
vue create vue-project01

图形化界面

java 复制代码
vue ui

2.Vue项目-目录结构

3.Vue项目-配置端口

4.Vue组件的构成

2.Element

Element是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库

a.快速入门

1.安装ElementUI组件库(在当前工程的目录下),在命令行执行指令

java 复制代码
npm install element-ui@2.15.3

2.引入ElementUI组件库

java 复制代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

3.访问官网,复制组件代码,调整

Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.faas.ele.me/#/zh-CN/component/quickstart

b.常见组件

1.表格

2.分页

3.对话框

4.表单

c.Vue路由

前端路由:URL中的hash与组件之间的对应关系

1.安装

java 复制代码
npm install vue-router@3.5.1

2.定义路由

3.打包部署

**Nginx服务器:**Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器。其特点是占用内存小,并发能力强,在各大互联网公司都有非常广泛应用

a.打包

b.部署

将打包好的dist目录下的文件,复制到nginx安装目录的html目录下

c.启动

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

**注意:**Nginx默认占用的是80端口号,如果80端口号被占用,可以在nginx.conf中修改端口号

相关推荐
blackorbird2 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
小白学大数据3 小时前
Python爬虫常见陷阱:Ajax动态生成内容的URL去重与数据拼接
爬虫·python·ajax
谷歌开发者3 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强3 小时前
Chrome和IE获取本机ip地址
前端
天***88963 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*3 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v4 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls4 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友4 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵4 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构