乐都企业网站建设哪家快,网站备案忘记密码怎么办,图文广告设计学徒一般要学多久,网页设计与制作教程刘瑞新课后答案Ajax
概念#xff1a;Asynchronous JavaScript Anderson XML#xff0c;异步的JavaScript和XML。
作用#xff1a;
数据交换#xff1a;通过Ajax 可以给服务器发送请求#xff0c;并收取服务器相应的数据。异步交互#xff1a;可以在不重新加载整个页面的情况下#…Ajax
概念Asynchronous JavaScript Anderson XML异步的JavaScript和XML。
作用
数据交换通过Ajax 可以给服务器发送请求并收取服务器相应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。 同步与异步 原生Ajax
1.准备数据地址https://mock.apifox.cn/m1/3128855-0-default/emp/list
2.创建XMLHttpRequest对象用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
Axios
介绍Axios 对原生的Ajax进行了封装简化书写快速开发。
官网 Axios中文文档 | Axios中文网
•Axios入门
1.引入Axios的js文件 2.使用Axios发送请求并获取响应结果 链接https://mock.apifox.cn/m1/3128855-0-default/emp/list 案例
1. 数据准备的url http://yapi.smart-xwork.cn/mock/169327/emp/list
2. 在页面加载完成后自动发送异步请求加载数据渲染展示页面(性别1 代表男2 代表女) !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios-案例/titlescript srcjs/axios-0.18.0.js/scriptscript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后操作时间/th/trtr aligncenter v-for(emp,index) in empstd{{index 1}}/tdtd{{emp.name}}/tdtdimg :srcemp.image width70px height50px/tdtdspan v-ifemp.gender 1男/spanspan v-ifemp.gender 2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/div
/body
scriptnew Vue({el: #app,data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get(https://mock.apifox.cn/m1/3128855-0-default/emp/list).then(result {this.emps result.data.data;})}});
/script
/html
前后端分离开发
前后端混合开发
当前最为主流的开发模式前后端分离 YApi
介绍YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务 前端工程化 前端工程化是指在企业级的前端项目开发中把前端开发所需要的工具、技术、流程、经验进行规范化、标准化。 环境准备
vue
介绍Vue-cli 是官方提供的一个脚手架用于快速生成一个Vue的项目模板
Vue-cli提供了如下功能
统一的目录结构本地调试热部署单元测试集成打包上线
依赖环境NodeJS 安装NodeJS 安装vue-cli Vue项目简介
Vue项目-创建
命令行 图形化界面 Vue项目-目录结构
基于Vue脚手架创建出来的工程有标准的目录结构如下 Vue项目-启动 Vue项目-配置端口 Vue项目开发流程
Vue项目开发流程
Vue的组件文件以 .vue结尾每个组件由三个部分组成template 、script、style 。 Vue组件库Element
什么是Element
Element是饿了么团队研发的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。组件组成网页的部件例如 超链接、按钮、图片、表格、表单、分页条等等。官网https://element.eleme.cn/#/zh-CNListener
快速入门
安装ElementUI组件库 在当前工程的目录下在命令行执行指令 引入ElementUI组件库 访问官网复制组件代码调整 常见组件
常见组件-表格
Table 表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。 常见组件-分页
Pagination 分页当数据量过多时使用分页分解数据。 常见组件-对话框
Dialog 对话框在保留当前页面状态的情况下告知用户并承载相关操作。 常见组件-表单
Form 表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。 案例
根据页面原型完成员工管理页面开发并通过Axios完成数据异步加载。
服务端数据获取地址https://mock.apifox.cn/m1/3128855-0-default/emp/list
步骤
创建页面完成页面的整体布局规划布局中各个部分的组件实现列表数据的异步加载并渲染展示
Vue 路由
前端路由URL中的hash#号与组件之间的对应关系。
Vue Router
介绍Vue Router是Vue的官方路由。
组成
VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件router-link请求链接组件浏览器会解析成arouter-view动态视图组件用来渲染展示与路由路径对应的组件。 案例通过Vue的路由VueRouter完成左侧菜单栏点击切换效果。 打包部署
打包npm 脚本直接打包
部署
Nginx
介绍lNginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。
官网nginx 部署将打包号的dist目录下的文件复制到nginx安装目录的html目录下。
启动双击 nginx.exe 文件即可Nginx服务器默认占用 80 端口号
Nginx默认占用80端口号如果80端口号被占用可以在nginx.conf中修改端口号。(netstat –ano | findStr 80) 注在conf中的nginx.config修改端口为90
访问http://localhost:90
