【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

目录

一、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);
})

（4）案例

    
    
    
    

    
    
    


    

        

            

                
编号
                
姓名
                
图像
                
性别
                
职位
                
入职日期
                
最后操作时间
            

            

                
{{index + 1}}
                
{{emp.name}}
                

                    
                
                

                    男
                    女
                
                
{{emp.job}}
                
{{emp.entrydate}}
                
{{emp.updatetime}}
            
        
    

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

npm run serve

3、配置Vue端口号

4、Vue项目开发流程

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