Html页面初始显示文本“Hello World!”及“更新”按钮，请编写Vue脚本，使按钮实现单击后，文本更新为"你好，世界！"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<button @click="change">更新</button>
</div>
<script>
const {ref} = Vue;
let msg = ref('');
const app = {
setup(){
change=()=>{
msg.value='你好，世界';
}
return {msg,change}
}
}
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
设计包含parientId的数据表并编写一段递归程序，返回某个类别商品的所有子类。
//方法签名:这是一个公共方法，返回类型为 PageInfo，接受一个类型为 ProductListReq 的参数。
public PageInfo list(ProductListReq productListReq){
//商品列表查询对象创建:创建一个名为 productListQuery 的商品列表查询对象。
ProductListQuery productListQuery = new ProductListQuery();
---------------------------------------------------------------------------------------------------------------------
//搜索条件处理:如果请求中的关键字不为空，将关键字处理并设置到查询对象中。
if(!StringUtils.isNullOrEmpty(productListReq.getKeyword())){
String keyword = new StringBuilder().append("%").append(productListReq.getKeyword()).append("%").toString();
productListQuery.setKeyword(keyword);
}
---------------------------------------------------------------------------------------------------------------------
//目录处理:如果请求中的目录 ID 不为空，获取该目录及其所有子目录的 ID，并将它们设置到查询对象中。
if(productListReq.getCategoryId()!=null){
//传id时的处理
List<CategoryVO> categoryVOList = categoryService.listCategoryForCustomer(productListReq.getCategoryId());
ArrayList<Integer> categoryIds=new ArrayList<>();
categoryIds.add(productListReq.getCategoryId());//当前请求的Id
getCategoryIds(categoryVOList,categoryIds);//当前请求Id的子id
//设置到Query对象中
productListQuery.setCategoryIds(categoryIds);
}
---------------------------------------------------------------------------------------------------------------------
//排序处理:根据请求中的排序方式，在查询对象上启用分页和排序。
String orderBy=productListReq.getOrderBy();
if(Constant.ProductListOrderBy.PRICE_ASC_DESC.contains(orderBy)) {
//参数支持排序
PageHelper.startPage(productListReq.getPageNum(), productListReq.getPageSize(), orderBy);
}else {
//不排序，无orderBY
PageHelper.startPage(productListReq.getPageNum(), productListReq.getPageSize());
}
---------------------------------------------------------------------------------------------------------------------
//商品列表查询:使用查询对象执行商品列表查询，得到一个商品列表。
List<Product> productList = productMapper.selectList(productListQuery);
---------------------------------------------------------------------------------------------------------------------
//分页信息处理:
PageInfo pageInfo = new PageInfo(productList);
return pageInfo;
}
---------------------------------------------------------------------------------------------------------------------
//递归获取所有子目录的 ID:递归获取给定分级目录列表中所有子目录的 ID，并将它们添加到传入的 categoryIds 列表中
private void getCategoryIds(List<CategoryVO> categoryVOList,ArrayList<Integer> categoryIds){
//遍历
for(int i=0;i<categoryVOList.size();i++){
CategoryVO categoryVO=categoryVOList.get(i);
if(categoryVO!=null){
categoryIds.add(categoryVO.getId());
//递归
getCategoryIds(categoryVO.getChildCategory(),categoryIds);
}
}
}
（1）介绍一下B/S架构相对于C/S架构的优势。
C/S和B/S结构是当今世界网络程序开发体系结构的两大主流，目前二者都有自己的市场份额和客户群，其优点和缺点如下。
开发和维护成本
C/S结构的开发和维护成本都比B/S高，采用这种结构必须为不同客户端开发不同的程序，而且软件的安装、调试和升级均要在所有的客户端上完成。例如，如果一个企业共有10个客户端使用一套C/S结构的软件，则都需要安装客户端程序。当这套软件进行即使微小的改动后，系统维护员都必须卸载客户端原有的软件，然后安装新的版本并配置，维护工作必须进行10次。而B/S结构的软件则不必在客户端安装及维护在软件升级后系统维护员只需要将服务器的软件升级到最新版本，所有客户端只要重新登录系统即可使用最新版本的软件。
客户端负载
C/S的客户端不仅负责与用户的交互，收集用户信息，而且还需要通过网络向服务器发送请求处理数据库、电子表格或文档等。由此应用程序的功能越复杂，客户端程序也就越庞大，这也给软件的维护工作带来了很大的困难。而B/S结构的客户端把事务处理逻辑部分交给服务器处理，客户端只需要显示，这样将使应用程序服务器的运行数据负荷较重。一旦发生服务器崩溃等问题，后果不堪设想。因此许多单位都备有数据库存储服务器，以防万一。
安全性
C/S结构适用于专人使用的系统，可以通过严格的管理派发软件达到保证系统安全的目的；B/S结构的软件由于使用的人数较多，且不固定，相对来说安全性就会低些。
（2）简述web项目后端三层结构，并说出各层的职责。
Controller层、Service层、DAO层，Controller层 传参、Service层处理业务逻辑、DAO层连接数据
（3）请说明OSI七层模型与TCP四层模型的对应关系及作用。
OSI七层模型包括应用层、表示层、会话层、传输层、网络层、数据链路层、物理层；
TCP四层模型包括应用层、传输层、网络层、网络访问层。
对应关系：OSI应用层、表示层、会话层对应TCP应用层；
OSI传输层对应TCP传输层；
OSI网络层对应TCP网络层；
OSI数据链路层、物理层对应TCP网络访问层。
