【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);
})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body><script>function 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);//     })}
</script>
</html>

(4)案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script></head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>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;})}});
</script>
</html>

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

(1)vscode页面启动

(2)cmd命令框启动

npm run serve

3、配置Vue端口号

4、Vue项目开发流程

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

  • <template>    模板部分,生成HTML代码
  • <script> 控制模板的数据来源和行为
  • <style> css样式部分
<template><div id="app"><h1>{{message}}</h1></div>
</template><script>
export default{   //设置导出模块 可以在别处用import导入data(){return {message:"坚持不懈哇哇!"}},methods:{}
}
</script><style>#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 world's most popular Vue UI framework

2、常用组件介绍

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

(1)Table 表格标签

表格戳这→Element - The world's most popular Vue UI framework

<template><div><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div>
</template><script>
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 弄",},],};},
};
</script><style>
</style>

(2)Pagination 分页标签

分页戳这→Element - The world's most popular Vue UI framework

<template><div><el-pagination layout="sizes,prev, pager, next,jumper,total" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"> </el-pagination></div>
</template><script>
export default {data() {return {};},methods: {handleSizeChange(x){alert("每页记录数变化"+x)},handleCurrentChange(x){alert("页码发生变化"+x)}}
};
</script><style>
</style>

(3)Dialog  对话框

对话框戳这→Element - The world's most popular Vue UI framework

<template><div><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog></div>
</template><script>
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);},},
};
</script><style>
</style>

(4)Form  表单

 表单戳这→Element - The world's most popular Vue UI framework

<template><div><el-button type="text" @click="dialogTableVisible = true">打开嵌套表单的Dialog</el-button><el-dialog title="填写详情" :visible.sync="dialogTableVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
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))}},
};
</script><style>
</style>

(5)案例

<template><div><el-container style="height: 700px; border: 1px solid #f6bcbc"><el-header style="font-size: 40px; background-color: #f8d7d7">智能容宝学习辅助系统</el-header><el-container><!-- 边框 --><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>学员信息管理</template><el-menu-item-group><el-menu-item index="1-1">2020届</el-menu-item><el-menu-item index="1-2">2021届</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><!-- 主页面 --><el-main><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.sex" placeholder="性别"><el-option label="男" value="boy"></el-option><el-option label="女" value="girl"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item><!-- 日期选择器 --><el-form-item><el-date-picker v-model="searchForm.date"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker>                  </el-form-item></el-form>
<br><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="160"></el-table-column><el-table-column prop="sex" label="性别" width="120"></el-table-column><el-table-column prop="class" label="班级" width="200"></el-table-column><el-table-column prop="job" label="职务" width="220"></el-table-column><el-table-column prop="school" label="学校" width="250"></el-table-column><el-table-column prop="date" label="入学日期" width="220"></el-table-column><el-button type="primary" round size="mini">编辑</el-button><el-button type="danger" round size="mini">删除</el-button></el-table>
<br><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page.sync="currentPage1":page-size="1000"layout="sizes,prev, pager, next,jumper,total":total="100"></el-pagination></el-main></el-main></el-container></el-container></div>
</template><script>
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;});}
};
</script><style>
</style>

四、Vue路由

1、概念

  • <router-link to>    请求链接组件,浏览器会传递到该链接
  • <router-view>   动态视图组件,渲染展示对应路由路径

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

② 给侧栏标签添加<router-link to>标签

<el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu>
</el-aside>

③ 在APP.vue添加 <router-view>

<template><div><router-view></router-view></div>
</template>

五、打包部署

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

step1:点击允许build,进行打包

step2:此时目录出现dist文件,右键

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

 step4:双击nginx.exe即可,在页面输入localhost:80(端口号)回车即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/106232.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拒绝摆烂!C语言练习打卡第六天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4d…

pgadmin4中的备份与恢复

一&#xff0c;postgresql 数据的备份与恢复 &#xff08;一&#xff09;数据库备份与恢复 1&#xff0c;备份 windows环境 1> dump 逻辑备份 1&#xff0c;用管理员身份打开power shell 2&#xff0c;切换到本机 postgresql 安装目录下的 bin 目录&#xff1a; PS C…

win开机自启jar包

下载winsw工具 只需下载图中红框的工具 https://github.com/winsw/winsw/releases 文件配置 将下载的文件与jar文件放置在一起&#xff0c;两个文件名修改为服务名 编辑xml文件 注意不要出现中文&#xff0c; 标签内的jar文件地址要改为自己目录 <service><!-- I…

MySQL每日一练--校园教务系统

一丶数据库名称&#xff1a;SchoolDB 二丶数据库表信息&#xff1a;角色信息表 表名&#xff1a; t_role 主键&#xff1a; r_id 序号 字段名称 字段说明 类别 位数 属性 备注 1 r_id 角色编号 int 主键 自动增长 2 r_name_EN 角色名&#xff08;英…

快速排序三种思路详解!

一、快速排序的介绍 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff0c;其基本思想为&#xff1a;任取待排序元素序列中 的某元素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&#xff0c;…

<C++>泛型编程-模板

1.泛型编程 如何实现一个通用的交换函数呢&#xff1f;可以使用函数重载 void Swap(int &left, int &right) {int temp left;left right;right temp; }void Swap(double &left, double &right) {double temp left;left right;right temp; }void Swap(c…

基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统可用于日常生活中检测与定位黑夜下的人脸&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目…

开源与专有软件:比较与对比

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

kafka--技术文档--基本docker中安装<单机>-linux

安装zookeeper 阿丹小科普&#xff1a; Kafka在0.11.0.0版本之后不再依赖Zookeeper&#xff0c;而是使用基于Raft协议的Kafka自身的仲裁机制来替代Zookeeper。具体来说&#xff0c;Kafka 2.8.0版本是第一个不需要Zookeeper就可以运行Kafka的版本&#xff0c;这被称为Kafka Raf…

Mysql索引+事务+存储引擎

一、索引 1.1 索引的概念 -索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于c语言的链表通过指针指向数据记录的内存地址&#xff09; -使用索引后可以不用扫描全表来定位某行的数据&#xff0c;而是先通过索…

java八股文面试[java基础]——浅拷贝和深拷贝

自验证&#xff1a;创建Class Student两个类&#xff0c; Student中含有Class对象 public class Class implements Cloneable {public String getName() {return name;}public void setName(String name) {this.name name;}private String name;public Class(String name) {t…

ssm+vue农家乐信息平台源码和论文

ssmvue农家乐信息平台源码和论文066 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1、研究现状 国外&#xff0c;农家乐都被作为潜在的发展农村经济&#xff0c;增加农民收入的重要手段&#xff0c;让农户广…

Stable Diffusion 系列教程 | 图生图基础

前段时间有一个风靡全网的真人转漫画风格&#xff0c;受到了大家的喜欢 而在SD里&#xff0c;就可以通过图生图来实现类似的效果 当然图生图还有更好玩的应用&#xff0c;我们一点一点来探索 首先我们来简单进行一下图生图的这一个实践---真人转动漫 1. 图生图基本界面 和…

基于Java+SpringBoot+Vue前后端分离医院资源管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

使用Python批量将飞书文档转为MD

说明&#xff1a;飞书是在线文档平台&#xff0c;本文介绍如何使用Python程序批量将飞书文档转为MD文档&#xff0c;并下载到本地&#xff1b; 复制地址 首先&#xff0c;把文档的URL都复制下来&#xff0c;这个需要一个一个点&#xff0c;并复制拷贝&#xff0c;但却是工作量…

代码评审(Code Review)规范

一、目的 Code Review是一种用来确认方案设计和代码实现的质量保证机制&#xff0c;通过这个机制我们 可以对代码、测试过程和注释进行检查。 Code Review主要用来在软件工程过程中改进代码质量&#xff0c;通过Code Review可以达到 如下目的&#xff1a; 1) 在项目早期就能够…

微服务(多级缓存)

目录 多级缓存 1.什么是多级缓存 2.JVM进程缓存 2.2.初识Caffeine 2.3.实现JVM进程缓存 2.3.1.需求 2.3.2.实现 3.Lua语法入门 3.1.初识Lua 3.1.HelloWorld 3.2.变量和循环 3.2.1.Lua的数据类型 3.2.2.声明变量 3.2.3.循环 3.3.条件控制、函数 3.3.1.函数 3.3.…

章节 2:轻松入手JSX -《React.js手把手教程:从初学者到实战高手》- 第一部分:React.js基础

《React.js手把手教程&#xff1a;从初学者到实战高手》 第一部分&#xff1a;React.js基础 章节 2&#xff1a;轻松入手JSX 在上一章节中&#xff0c;我们初步认识了React.js。现在&#xff0c;我们将更深入地探索React.js中的JSX&#xff08;JavaScript XML&#xff09;语法…

JVM 之字节码(.class)文件

本文中的内容参考B站尚硅谷宋红康JVM全套教程 你将获得&#xff1a; 1、掌握字节码文件的结构 2、掌握Java源代码如何在JVM中执行 3、掌握一些虚拟机指令 4、回答一些面试题 课程介绍 通过几个面试题初始字节码文件为什么学习class字节码文件什么是class字节码文件分析c…

设计模式-适配器模式

目录 1 概念介绍 1.1 基本介绍 1.2 工作原理 2 详细介绍 2.1 类适配器 2.2 对象适配器 2.3 接口适配器 3 注意事项和细节 1 概念介绍 1.1 基本介绍 适配器模式(Adapter Pattern)将某个类的接口转换成客户端期望的另一个接口表示&#xff0c;主的目的是兼容性&#xf…