dw怎么切片做网站,龙岗网站,wordpress管理账户,我想做网站卖衣服做目录 一、Ajax 1、简介 2、Axios #xff08;没懂 暂留#xff09; #xff08;1#xff09;请求方式别名 #xff08;2#xff09;发送get请求 #xff08;3#xff09;发送post请求 #xff08;4#xff09;案例 二、前端工程化 1、Vue项目-目录结构 2、…目录 一、Ajax 1、简介 2、Axios 没懂 暂留 1请求方式别名 2发送get请求 3发送post请求 4案例 二、前端工程化 1、Vue项目-目录结构 2、Vue项目-启动 1vscode页面启动 2cmd命令框启动 3、配置Vue端口号 4、Vue项目开发流程 三、Vue组件库 - Element  1、快速入门 1在main.js引入ElementUI组件库 2根据文档选择想要的皮肤 复制代码  2、常用组件介绍 1Table 表格标签 2Pagination 分页标签 3Dialog  对话框 4Form  表单 5案例 四、Vue路由 1、概念 2、案例 ① 配置路由路径 ② 给侧栏标签添加标签 ③ 在APP.vue添加  五、打包部署 一、Ajax 1、简介 概念异步的JavaScript和XML作用 数据交换通过Ajax可以给服务器发送请求并获取服务器响应数据异步交互可以在不重新加载整个页面情况下与服务器交换数据并更新部分网页端技术如搜索框联想功能校验用户名 2、Axios 没懂 暂留 1请求方式别名 axios.get(url[config])axios.delete(url[config])axios.post(url[dataconfig])axios.put(url[dataconfig]) 2发送get请求 axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result{console.log(request.data); }) 3发送post请求 axios.post(http://yapi.smart-xwork.cn/mock/169327/emp/list,id1).then(result{console.log(request.data); }) !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcaxios-0.18.0.js/script /head bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/bodyscriptfunction get(){//通过axios发送异步请求-getaxios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result{console.log(request.data);})// axios(// {// method:get,// url:http://yapi.smart-xwork.cn/mock/169327/emp/list// }).then(result{// console.log(request.data);// })}function post(){//通过axios发送异步请求-postaxios.post(http://yapi.smart-xwork.cn/mock/169327/emp/list,id1).then(result{console.log(request.data);})// axios(// {// method:post,// url:http://yapi.smart-xwork.cn/mock/169327/emp/list,// data:id1// }).then(result{// console.log(request.data);// })} /script /html 4案例 !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、Vue项目-目录结构 2、Vue项目-启动 1vscode页面启动 2cmd命令框启动 npm run serve 3、配置Vue端口号 4、Vue项目开发流程 Vue组件文件以.vue结尾每个组件由三部分组成 template    模板部分生成HTML代码script 控制模板的数据来源和行为style css样式部分 templatediv idapph1{{message}}/h1/div /templatescript export default{ //设置导出模块 可以在别处用import导入data(){return {message:坚持不懈哇哇}},methods:{} } /scriptstyle#app{text-align: center;color: cadetblue;} /style三、Vue组件库 - Element  Element 是优化版组件库也就是炫彩ui组件皮肤 1、快速入门 1在main.js引入ElementUI组件库 //引入Element ui组件 import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI); 2根据文档选择想要的皮肤 复制代码  Element官方文档入口Element - The worlds most popular Vue UI framework 2、常用组件介绍 AltShiftF 自动格式化 1Table 表格标签 表格戳这→Element - The worlds most popular Vue UI framework templatedivel-table :datatableData border 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/div /templatescript export default {data() {return {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 弄,},],};}, }; /scriptstyle /style 2Pagination 分页标签 分页戳这→Element - The worlds most popular Vue UI framework templatedivel-pagination layoutsizes,prev, pager, next,jumper,total size-changehandleSizeChangecurrent-changehandleCurrentChange:total1000 /el-pagination/div /templatescript export default {data() {return {};},methods: {handleSizeChange(x){alert(每页记录数变化x)},handleCurrentChange(x){alert(页码发生变化x)}} }; /scriptstyle /style 3Dialog  对话框 对话框戳这→Element - The worlds most popular Vue UI framework templatedivel-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/div /templatescript export default {data() {return {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,};},methods: {handleSizeChange(x) {alert(每页记录数变化 x);},handleCurrentChange(x) {alert(页码发生变化 x);},}, }; /scriptstyle /style 4Form  表单 表单戳这→Element - The worlds most popular Vue UI framework templatedivel-button typetext clickdialogTableVisible true打开嵌套表单的Dialog/el-buttonel-dialog title填写详情 :visible.syncdialogTableVisibleel-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-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-item label即时配送el-switch v-modelform.delivery/el-switch/el-form-itemel-form-item label活动性质el-checkbox-group v-modelform.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelform.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式el-input typetextarea v-modelform.desc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/el-dialog/div /templatescript export default {data() {return {form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: },dialogTableVisible:false,dialogFormVisible:false,};},methods: {onSubmit(){alert(JSON.stringify(this.form))}}, }; /scriptstyle /style 5案例 templatedivel-container styleheight: 700px; border: 1px solid #f6bcbcel-header stylefont-size: 40px; background-color: #f8d7d7智能容宝学习辅助系统/el-headerel-container!-- 边框 --el-aside width200pxel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i学员信息管理/templateel-menu-item-groupel-menu-item index1-12020届/el-menu-itemel-menu-item index1-22021届/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-aside!-- 主页面 --el-mainel-main!-- 表单 --el-form :inlinetrue :modelsearchForm classdemo-form-inlineel-form-item label姓名el-input v-modelsearchForm.name placeholder姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchForm.sex placeholder性别el-option label男 valueboy/el-optionel-option label女 valuegirl/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item!-- 日期选择器 --el-form-itemel-date-picker v-modelsearchForm.datetypedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker /el-form-item/el-form br!-- 表格 --el-table :datatableData borderel-table-column propname label姓名 width160/el-table-columnel-table-column propsex label性别 width120/el-table-columnel-table-column propclass label班级 width200/el-table-columnel-table-column propjob label职务 width220/el-table-columnel-table-column propschool label学校 width250/el-table-columnel-table-column propdate label入学日期 width220/el-table-columnel-button typeprimary round sizemini编辑/el-buttonel-button typedanger round sizemini删除/el-button/el-table br!-- 分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-page.synccurrentPage1:page-size1000layoutsizes,prev, pager, next,jumper,total:total100/el-pagination/el-main/el-main/el-container/el-container/div /templatescript import axios from axios;export default {data() {return {tableData: [],searchForm:{name:,sex:,data:[]}};},methods:{onSubmit(){alert(JSON.stringify(this.searchForm))},handleSizeChange(x){alert(每页记录数变化x)},handleCurrentChange(x){alert(页码发生变化x)}},mounted() //发送异步请求获取数据{axios.get().then((result){this.tableDataresult.data.data;});} }; /scriptstyle /style 四、Vue路由 1、概念 router-link to    请求链接组件浏览器会传递到该链接router-view   动态视图组件渲染展示对应路由路径 2、案例 通过Vue路由完成左侧菜单栏点击切换效果 ① 配置路由路径 import Vue from vue import VueRouter from vue-routerVue.use(VueRouter)const routes [{path: /emp,name: emp,component: () import(../views/item 2/EmpView.vue) },{path: /dept,name: dept,component: () import(../views/item 2/DeptView.vue)} ]const router new VueRouter({routes })export default router② 给侧栏标签添加router-link to标签 el-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 ③ 在APP.vue添加 router-view templatedivrouter-view/router-view/div /template 五、打包部署 Day03-16. 打包部署_哔哩哔哩_bilibili step1点击允许build进行打包 step2此时目录出现dist文件右键 step3将dist文件内容复制粘贴到nginx安装目录下的html目录下 step4双击nginx.exe即可在页面输入localhost80端口号回车即可