目录
find函数
find函数基本格式:let obj=this.list.find(item=>item.code===val)
一、find是一个查找函数。
二、箭头函数find(item=>item.code===val)相当于find(item){item.code===val}其中list是数组,this.list.find()是指在list数组中找某样东西,item是find()函数的寻找某样东西的根据,也可以说是id或者是主键。后面item.code===val是查找这样东西的条件,只有这个item.code完全等于val的时候,才算是找到,才能赋值给obj
//举例
//定义一个数组,有两条数据
companyOptions: [
{
label: '饿了么',
value: 0,
},
{
label: '美团',
value: 1,
},
]
//需要找到value为1,label为美团的数组
let obj=this.companyOptions.find(item=>item.value===1)
过滤器filter
定义和用法
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
array.filter(function(currentValue,index,arr), thisValue)
注意:
这里array表示一个需要用来过滤的数组
filter方法中参数function表示是一个函数
thisValue可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。因为箭头函数和function函数的用法一样,所以这里也可以写箭头函数: filter(item=>item.id<10)
currentValue 必须。当前元素的值 index 可选。当期元素的索引值 arr 可选。当期元素属于的数组对象
axios
axios可以发送get和post请求,
通过.then()方法获得返回值
发送GET请求时,我们需要指定请求URL,然后可以选择传递参数,例如查询参数。我们可以使用Axios的get()方法来发送GET请求
例如:
axios.get('/resC?action=list').then((resp)=>{
resp.data
})
注意:
这里/resC表示访问的控制层的地址,
req.getParameter方法是用于客户端传递过来的参数,它的返回值类型永远是是字符串类型这个赋值动作是有客户端完成的。
我们在resC所在的控制层的doGet方法下面书写
String action = req.getParameter("action");
if ("list".equals(action)){}
那么此时,当get请求发送到resC下后,action=list这个请求就会被if请求接收到
当接收到之后,就会继续执行该方法中的内容
发送POST请求时,我们需要指定请求URL,然后可以选择传递数据作为请求正文。我们可以使用Axios的post()方法来发送POST请求。
流程总结
数据库如何操作?
1、先分析数据库中需要那些数据,需要那些表,表与表之间的关系
2、分析完后,创建该数据库数据表
前端如何操作?
1、首先先将前端静态页面写出来
2、如果静态页面需要使用vue,则需要添加两个.js文件
3、然后在script标签中创建vue对象
new Vue({
el:'#app',
data:{
// 存放数据的地方
// 可以存放数组,对象和对象数组
},
methods:{
// 书写函数的地方
},
mounted:{
// 钩子函数
},
created:{
// 钩子函数
// 当浏览器加载后需要自动调用时,将函数写在里面
// 事件之类的不需要添加,使用时会自行解析
// v-if v-for等vue指令时不需要添加,浏览器加载到时会自行解析
}
})
created是在Vue实例被创建后立即调用的钩子函数。
mounted是在Vue实例被挂载到DOM后调用的钩子函数。4、当我们添加函数之后,需要向后端发送请求
axios的get请求参数是通过url传递的,可以在url后面添加查询参数,
使用axios.get('api/user?id=123')
/api是API的根路径,/user是指向用户资源的路径,?id=123是查询参数。
例如:axios.get('/playerC?action=getLoginPlayerFromSession')5、发送请求之后需要接收响应结果值.then((resp)=>{})
.then()方法中传递一个回调函数来处理请求成功后的响应。
6、resp的用法,resp.data表示响应后的数据
resp是一个命名的变量,用于表示接收到的响应对象。它是一个在then回调函数中定义的参数,用于访问和处理请求成功后的响应数据。
后端如何操作?
1、后端要使用Servlet接口,所以要创建Servlet工程
2、创建对应数据表的实体封装类,并放在pojo包中(Plain Old Java Object/简单的Java对象)
3、搭建JDBC三层架构,控制层controller、业务层service、数据层dao
4、在controller层中创建对应的类来操作,例如:t_dept数据表,就需要创建DeptC的类,C表示controller层
5、创建类之后,要继承HttpServlet才是一个Servlet类,Servlet类有一个访问地址('/deptC')。并且要重写doGet()方法。当用户访问到该地址之后,会自动调用该类下的doGet()方法
6、在doGet方法中()
使用String action = req.getParameter("action");
req.getParameter方法获取通过http协议提交过来的数据。通过容器的实现来取得通过get或者post方式提交过来的数据
例如:axios.get('/playerC?action=LogoutCurrentPlayer')方法返回的参数,这里就是将LogoutCurrentPlayer赋值给action,那么启动服务器访问该地址,调用该地址中的doGet方法时,就会去判断
else if ("LogoutCurrentPlayer".equals(action))
在这里我们发现二者是同一个对象,那么就进入其中,使用其中的代码7、那么其中的代码,就要去调用数据库数据表了,而数据库的调用需要使用三层架构,通过dao层的去调用数据库
8、去调用数据库时,可以直接使用sql语句,也可使用工具类DbUtil,这里我们选择使用工具类DbUtil
9、通过工具类JsonUtil类将处理后的内容传递给前端响应http请求的位置