腾虎网络广州网站建设,电商网站优缺点,网页设计html代码大全dd,黄骅市有火车站吗目录
一、Ajax
1、同步与异步编辑
2、原生Ajax#xff08;繁琐#xff09;编辑
2.1、写一个简易的Ajax
3、Axios#xff08;推荐使用#xff09;编辑
3.1、Axios入门
3.2、Axios请求方式别名
3.3、案例#xff1a;基于Vue及Axios完成数据的动态加载展示编…目录
一、Ajax
1、同步与异步编辑
2、原生Ajax繁琐编辑
2.1、写一个简易的Ajax
3、Axios推荐使用编辑
3.1、Axios入门
3.2、Axios请求方式别名
3.3、案例基于Vue及Axios完成数据的动态加载展示编辑
二、前后端分离开发
1、前后端开发模式
1.1、前后端混合开发
1.2、前后端分离开发主流模式and前后端分离开发流程
2、YAPI接口文档的管理平台
三、前端工程化
1、Vue脚手架环境准备
1.1、安装NodeJS
2、Vue项目简介
2.1、Vue项目创建
2.2、Vue项目目录结构
2.3、Vue项目启动serve
2.4、修改Vue项目端口vue.config.js
3、Vue项目开发流程
3.1、Vue页面的显示过程
3.2、Vue的组件template\script\style
四、Vue组件库Element
1、什么是Element
2、Element快速入门
2.1、安装ElementUI组件库
2.2、引入ElementUI组件库
views目录下新建目录element编辑
2.3、定义Vue组件内容可复制官方文档
3、常见组件
3.1、表格Table编辑
3.2、分页组件Pagination
3.3、对话框组件Dialog
3.4、表单组件Form编辑
4、案例根据页面原型完成员工管理页面的开发
4.1、创建页面并完成页面的整体布局规划
4.2、布局中各个组件的实现
4.3、列表数据的异常加载与渲染展示
五、Vue路由
1、前端路由
2、Vue Router
2.1、安装vue-router
2.2、定义路由配置信息index.js
3、案例通过Vue的路由VueRouter完成左侧菜单栏点击切换效果
4、Bug默认访问路由路径为/
六、打包部署
1、如何打包
2、如何部署Nginx
2.1、将 dist 目录下的文件复制到 nginx 安装目录
2.2、启动nginx.exe编辑
2.3、扩展反向代理、负载均衡 一、Ajax 1、同步与异步
2、原生Ajax繁琐
代码可参考W3School中的参考手册
效果查看所有的异步请求可以点击XHR
2.1、写一个简易的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推荐使用
3.1、Axios入门 代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title原生Ajax/title
/head
bodyinput typebutton value获取数据 onclickgetData()div iddiv1/div/body
scriptfunction 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
/html 3.2、Axios请求方式别名 代码示例
!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/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction 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: id1// }).then(result {// console.log(result.data);// })axios.post(http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,id1).then(result {console.log(result.data);})}
/script
/html 3.3、案例基于Vue及Axios完成数据的动态加载展示
代码
!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(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result {this.emps result.data.data;})}});
/script
/html 二、前后端分离开发
1、前后端开发模式
1.1、前后端混合开发 1.2、前后端分离开发主流模式and前后端分离开发流程 2、YAPI接口文档的管理平台
YAPI已经暂停使用
三、前端工程化 1、Vue脚手架环境准备 1.1、安装NodeJS
安装过程可参考NodeJS安装文档.md
2、Vue项目简介
2.1、Vue项目创建 2.2、Vue项目目录结构 2.3、Vue项目启动serve 2.4、修改Vue项目端口vue.config.js 3、Vue项目开发流程 3.1、Vue页面的显示过程
render 是一个函数它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素然后挂载到 #app 这个区域 3.2、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快速入门 2.1、安装ElementUI组件库
npm install element-ui2.15.3
会被安装在node_modules目录下 2.2、引入ElementUI组件库
views目录下新建目录element
默认显示根组件App.vue中的内容所以要想显示其它组件需要在根组件中进行设置在template中定义element-view标签下方的import语句就会自动导入
代码
templatediv!-- button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row/div
/templatescript
export default {}
/scriptstyle
/style 2.3、定义Vue组件内容可复制官方文档
views目录下新建目录element !-- button按钮 --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-row 默认显示根组件App.vue中的内容所以要想显示其它组件需要在根组件中进行设置在template中定义element-view标签下方的import语句就会自动导入
效果显示
3、常见组件
3.1、表格Table
使用步骤
Ⅰ、从官网复制代码到 ElementView.vue !-- Table 表格 --el-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180 /el-table-columnel-table-column propname label姓名 width180 /el-table-columnel-table-column propaddress label地址 /el-table-column/el-table tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,},], 3.2、分页组件Pagination !-- Pagination 分页 --el-paginationbackgroundlayouttotal,sizes,prev, pager, next,jumpersize-changehandleSizeChangecurrent-changehandleCurrentChange:total1000/el-pagination layout属性
事件size-change 与 current-change
methods: {handleSizeChange: function (val) {alert(每页记录数变化 val);},handleCurrentChange: function (val) {alert(页码发生变化 val);}},
}; 3.3、对话框组件Dialog !-- Dialog对话框 --!-- Table --el-button typetext clickdialogTableVisible true打开嵌套表格的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogTableVisibleel-table :datagridDatael-table-columnpropertydatelabel日期width150/el-table-columnel-table-columnpropertynamelabel姓名width200/el-table-columnel-table-column propertyaddress label地址/el-table-column/el-table/el-dialog
数据模型 gridData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},],dialogTableVisible: false, 3.4、表单组件Form
!-- Dialog对话框-Form表单 --el-button typetext clickdialogFormVisible true打开嵌套Form的Dialog Dialog/el-buttonel-dialog titleForm表单 :visible.syncdialogFormVisibleel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-pickertypedateplaceholder选择日期v-modelform.date1stylewidth: 100%/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-pickerplaceholder选择时间v-modelform.date2stylewidth: 100%/el-time-picker/el-col/el-form-itemel-form-itemel-button typeprimary clickonSubmit提交/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog
数据模型
form: {name: ,region: ,date1: ,date2: ,},
方法
通过JSON.stringify()将对象转为字符串
onSubmit :function(){//JSONstringify json对象转字符串alert(JSON.stringify(this.form))} 效果
4、案例根据页面原型完成员工管理页面的开发 实现步骤 4.1、创建页面并完成页面的整体布局规划
创建EmpView.vue文件并在根组件中进行声明和导入 待续~ 4.2、布局中各个组件的实现
4.3、列表数据的异常加载与渲染展示 安装Axios
npm install axios 导入Axios
在EmpView.vue文件中导入
import axios from axios;
发送异步请求
yapi不可以用了详见ajax地址访问不了-解决方案文件夹
mounted() {//发送异步请求,获取数据axios.get(http://localhost:10010/emp/list).then((result) {this.tableData result.data.data;});},
效果展示 解决图片与性别展示使用插槽 slot-scope
row指代这一行所有的字段值
效果展示 五、Vue路由
1、前端路由 2、Vue Router 2.1、安装vue-router
安装创建Vue项目时已选择
npm install vue-router3.5.1 2.2、定义路由配置信息index.js 如果你要访问的是/emp路径那么你要导入的就是EmpView.vue组件/dept同理 3、案例通过Vue的路由VueRouter完成左侧菜单栏点击切换效果 示例代码
在组件的template中的对应位置添加router-link标签
el-container styleheight: 700px; border: 1px solid #eeeel-header stylefont-size: 40px; background-color: rgb(238, 241, 246)tlias 智能学习辅助系统/el-headerel-containerel-aside width230px styleborder: 1px solid #eeeel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item index1-1router-link to/dept部门管理/router-link/el-menu-itemel-menu-item index1-2router-link to/emp员工管理/router-link/el-menu-item/el-submenu/el-menu/el-aside
在根组件中添加对应的router-view标签 4、Bug默认访问路由路径为/ 问题由于默认的访问路由路径为/但我们在index.js中配置的路径只有两个并不存在/那么怎么解决这个问题呢如果你访问/是找不到对应的组件的 解决办法很简单没有就加上
const routes [{path: /emp,name: emp,component: () import(../views/tlias/EmpView.vue)},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},{path: /,redirect: /dept}
] 六、打包部署
1、如何打包 直接运行build 即可打包打包生成的文件将放入dist
效果展示 打包后的文件 2、如何部署Nginx 2.1、将 dist 目录下的文件复制到 nginx 安装目录 2.2、启动nginx.exe
更换 nginx 的端口号
config目录 - nginx.conf
找到默认端口将其改为90 访问项目
2.3、扩展反向代理、负载均衡
反向代理可参考 实现nginx反向代理附nginx教程
负载均衡可参考 Nginx如何优雅的实现负载均衡
