目录
②、Vue的组件(template\script\style)
3、案例:通过Vue的路由VueRouter完成左侧菜单栏点击切换效果
一、Ajax
1、同步与异步
2、原生Ajax(繁琐)
代码可参考W3School中的参考手册
效果:(查看所有的异步请求,可以点击XHR)
①、写一个简易的Ajax
更多内容可参考:JavaScript之Ajax(一篇入门Ajax就够了)
function ajax(url) { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true) xhr.onreadystatechange = () => { if(xhr.readyState === 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ resolve( JSON.parse(xhr.response) ) }else{ reject(new Error('Response error')) } } } xhr.send(null) }) return p } const url = 'text.json' ajax(url).then(res => console.log(res)).catch(err => console.log(err)) |
3、Axios(推荐使用)
①、Axios入门
示例代码:
②、Axios请求方式别名
示例代码:对①的代码简化
③、案例:基于Vue及Axios完成数据的动态加载展示
示例代码:
二、前后端分离开发
1、前后端开发模式
①、前后端混合开发
前后端混合在一块会导致以上问题,十分不方便
②、前后端分离开发(主流模式)
接口文档示例:
前后端分离,根据接口文档共同开发:
如何维护接口文档:在线(团队协作工具)/离线
而接口文档是由产品经理根据页面原型与需求文档分析得来的:
页面原型示例:
③、前后端分离开发流程
2、YAPI(接口文档的管理平台)
YAPI官网: YApi-高效、易用、功能强大的可视化接口管理平台
①、什么是YAPI?
Mock服务指的是:通过YAPI这个平台可以模拟真实接口,生成接口的模拟测试数据,用于前端功能测试(即不用等后端开发完毕,前端就可以通过Mock服务进行功能测试)
②、如何使用YAPI?
分为三步:
点击Mock地址就可以自动生成测试数据:
通过可以设置期望返回值:高级Mock -> 添加期望
之后再次点击Mock地址,生成的数据就会按照期望数据返回:
Ⅰ、添加项目
Ⅱ、添加分类
Ⅲ、添加接口
请求参数设置:
返回数据设置:
三、前端工程化
模块化、组件化、规范化、自动化
主要包括以下三个方面:
1、Vue脚手架环境准备
①、安装NodeJS
Ⅰ、安装过程可参考:NodeJS安装文档.md
Ⅱ、验证NodeJS是否安装成功:
Ⅲ、配置npm的全局安装路径:
npm config set prefix "E:\Software\Programs\nodejs" |
Ⅳ、检查npm是否配置成功:
Ⅴ、切换npm的淘宝镜像
npm config set registry https://registry.npm.taobao.org |
②、通过 NodeJS 安装 Vue-cli
Ⅵ、安装Vue-cli:
npm install -g @vue/cli |
Ⅶ、测试是否安装成功:
2、Vue项目简介
①、Vue项目创建
Ⅰ、在CMD中输入 vue ui,会自动调出Vue的图形化界面
Vue项目管理器,可以在此创建Vue项目
Ⅱ、创建新项目,设置文件夹及项目名:
Ⅲ、选择预设模板:
Ⅳ、选择插件功能:添加路由功能
Ⅴ、配置项目:
Ⅵ、是否保存为预设模板:(不保存)
正在联网下载:
②、Vue项目目录结构
③、Vue项目启动(serve)
打开项目:
④、修改Vue项目端口(vue.config.js)
修改端口号为:7000
再次启动项目:
3、Vue项目开发流程
①、Vue页面的显示过程
render 是一个函数,它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素,然后挂载到 #app 这个区域
②、Vue的组件(template\script\style)
template相当于HTML部分,script就是js部分,style就是css的样式
在Vue项目的开发中,其实main.js以及index.html很少会去操作,主要修改的都是.vue文件
四、Vue组件库Element
官方文档:https://element.eleme.cn/#/zh-CN/component/installation
1、什么是Element?
为什么要学Element?主要是方便和优美
2、Element快速入门
①、安装ElementUI组件库
npm install [email protected] |
会被安装在node_modules目录下
②、引入ElementUI组件库
打开main.js:
③、定义Vue组件(内容可复制官方文档)
views目录下新建目录(element):
默认显示根组件(App.vue)中的内容,所以要想显示其它组件,需要在根组件中进行设置:在template中定义element-view标签,下方的import语句就会自动导入
效果展示:
3、常见组件
①、表格(Table)
使用步骤:
Ⅰ、从官网复制代码到 ElementView.vue :
运行展示:
②、分页组件(Pagination)
步骤同①,也是先从官方文档寻找自己想要的样式,进行复制粘贴:
layout属性:
事件:size-change 与 current-change:
效果展示:
③、对话框组件(Dialog)
相同套路:复制官方文档代码
数据模型:
效果展示:
控制对话框的显示与隐藏:visible.sync="dialogTableVisible"
④、表单组件(Form)
修改复制到的官方文档代码:
效果展示:
补充表单内容:
数据模型:
方法:
通过JSON.stringify()将对象转为字符串
效果演示:
4、案例:根据页面原型完成员工管理页面的开发
实现步骤:
①、创建页面,并完成页面的整体布局规划
Ⅰ、创建EmpView.vue文件,并在根组件中进行声明和导入
Ⅱ、拷贝基本的布局结构
Ⅲ、拷贝样式
Ⅳ、定义数据模型
效果展示:
②、布局中各个组件的实现
Ⅰ、表单组件
template:
数据模型:
效果展示:
Ⅱ、表格加边框
直接添加属性 border 即可
Ⅲ、分页条
template:
数据模型:
效果展示:
③、列表数据的异常加载与渲染展示
Ⅰ、安装Axios:
npm install axios |
Ⅱ、导入Axios:
在EmpView.vue文件中导入:
Ⅲ、发送异步请求
效果展示:
Ⅳ、解决图片与性别展示(使用插槽 slot-scope)
效果展示:
五、Vue路由
1、前端路由
URL中的hash指的是#号后面的部分,如下图hash为/dept:
2、Vue Router
①、安装vue-router
②、定义路由配置信息(index.js)
如果你要访问的是/emp路径,那么你要导入的就是EmpView.vue组件,/dept同理:
3、案例:通过Vue的路由VueRouter完成左侧菜单栏点击切换效果
示例代码:
在组件的template中的对应位置添加<router-link>标签:
在根组件中添加对应的<router-view>标签:
4、Bug:默认访问路由路径为/
问题:由于默认的访问路由路径为/,但我们在index.js中配置的路径只有两个,并不存在/,那么怎么解决这个问题呢?如果你访问/是找不到对应的组件的 |
解决办法:很简单!没有就加上 |
六、打包部署
1、如何打包?
效果展示:
打包后的文件:
2、如何部署?(Nginx)
①、将 dist 目录下的文件复制到 nginx 安装目录
②、启动nginx.exe
查错过程:
Ⅰ、查看 80 端口的占用情况:
Ⅱ、检查任务管理器
Ⅲ、更换 nginx 的端口号
config目录 -> nginx.conf:
找到默认端口,将其改为90:
Ⅳ、访问项目
③、扩展:反向代理、负载均衡
反向代理可参考: 实现nginx反向代理(附nginx教程)
负载均衡可参考: Nginx如何优雅的实现负载均衡