目录

一、Ajax

1、简介

2、Axios （没懂 暂留）

（1）请求方式别名

（2）发送get请求

（3）发送post请求

（4）案例

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

3、配置Vue端口号

4、Vue项目开发流程

三、Vue组件库 – Element

1、快速入门

（1）在main.js引入ElementUI组件库

（2）根据文档选择想要的皮肤 复制代码

2、常用组件介绍

（1）Table 表格标签

（2）Pagination分页标签

（3）Dialog 对话框

（4）Form 表单

（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[，data，config])
  • axios.put(url[，data，config])

（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","id=1").then(result=>{console.log(request.data);})
Ajax-Axiosfunction 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","id=1").then(result=>{console.log(request.data);})// axios(// {// method:post,// url:"http://yapi.smart-xwork.cn/mock/169327/emp/list",// data:"id=1"// }).then(result=>{// console.log(request.data);// })}

（4）案例

Ajax-Axios-案例
编号姓名图像性别职位入职日期最后操作时间
{{index + 1}}{{emp.name}}男女{{emp.job}}{{emp.entrydate}}{{emp.updatetime}}
new Vue({ el: "#app", data: { emps:[] }, mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;}) }});

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

npm run serve

3、配置Vue端口号

4、Vue项目开发流程

Vue组件文件以.vue结尾，每个组件由三部分组成

  • 模板部分，生成HTML代码
  • 控制模板的数据来源和行为
  • css样式部分
{{message}}
export default{ //设置导出模块 可以在别处用import导入data(){return {message:"坚持不懈哇哇！"}},methods:{}}#app{text-align: center;color: cadetblue;}

三、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 world’s most popular Vue UI framework

2、常用组件介绍

Alt+Shift+F 自动格式化！！！

（1）Table 表格标签

表格戳这→Element – The world’s most popular Vue UI framework

   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 弄",},],};},};

（2）Pagination分页标签

分页戳这→Element – The world’s most popular Vue UI framework

 export default {data() {return {};},methods: {handleSizeChange(x){alert("每页记录数变化"+x)},handleCurrentChange(x){alert("页码发生变化"+x)}}};

（3）Dialog 对话框

对话框戳这→Element – The world’s most popular Vue UI framework

打开嵌套表格的 Dialogexport 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);},},};

（4）Form 表单

表单戳这→Element – The world’s most popular Vue UI framework

打开嵌套表单的Dialog-立即创建取消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))}},};

（5）案例

智能容宝学习辅助系统学员信息管理2020届2021届查询
编辑删除
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.tableData=result.data.data;}); }};

四、Vue路由

1、概念

  • 请求链接组件，浏览器会传递到该链接
  • 动态视图组件，渲染展示对应路由路径

2、案例

通过Vue路由完成左侧菜单栏点击切换效果

① 配置路由路径

import Vue from 'vue'import VueRouter from 'vue-router'Vue.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

② 给侧栏标签添加标签

 系统信息管理 部门管理  员工管理

③ 在APP.vue添加

五、打包部署

Day03-16. 打包部署_哔哩哔哩_bilibili

step1：点击允许build，进行打包

step2：此时目录出现dist文件，右键

step3：将dist文件内容复制，粘贴到nginx安装目录下的html目录下

step4：双击nginx.exe即可，在页面输入localhost：80（端口号）回车即可