网站整体策划与设计,怎么做家教网站,建设网站策划方案,地方网站建站平台目录
一、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端口号回车即可
