文心快码助力项目实战开发

文章目录

前言
- 支持的编程语言 Language
- 安装方法
- 使用方法
项目实践
- 代码运行流程
- 出行方案查询
- JSP 指令与标签库指令
- 页面上下文路径设置
- 表单部分
- 查询结果显示部分
使用感受
- 优点
- 改进建议

前言

提示：这里可以添加本文要记录的大概内容：

文心快码Baidu Comate这个插件其实早在2023年10月份就推出了，经过了多次更新迭代，现在来到了v2.10.0版本，相对于上次主要🌈 提升对话以及续写的速度。是一款主要帮助开发者提高工作效率的工具！

下面是我个人基于在个人免费版中的体验，仅供参考，欢迎批评指正！

支持的编程语言 Language

当前 Baidu Comate 支持的语言/框架如下：

Baidu Comate support following languages:

后端(BackEnd)： C、C++、Java、Python、Go、PHP、Rust
前端(FrontEnd)： HTML、JavaScript、CSS、Less、swan、San、Vue、Scss、Sass、Stylus、pug、mermaid
App端(APP)： ObjectC、Kotlin、Swift
其它(Others)： Perl、Ruby、Shell、vhdl、GraphQL、Dockerfile

安装方法

IDEA中安装文心快码（Baidu Comate），在打开IDEA后打开设置→插件→搜索

重启 IDEA，重启成功后登录百度账号，现在就可以开始使用智能编码的功能了。
在这里插入图片描述

使用方法

打开项目文件后，然后Baidu Comate智能编码助手插件在右侧，可以在下面输入
在这里插入图片描述

也可以在代码中选中代码右侧
在这里插入图片描述

项目实践

这里我以曾经做过的一个项目为例，测试一下Baidu Comate可不可以让我的项目在代码实现上更上一层楼

下图是这个项目的功能结构：
在这里插入图片描述
这里以前台按照查询条件分页查询公交车次信息功能为例，看下Baidu Comate对这个功能的看法

代码运行流程

通过下面动图可以看到Baidu Comate生成的内容对于不熟悉这个项目的人来说是很友好的
请添加图片描述

它解释了一个Java控制器方法的功能。该方法是基于Spring MVC框架的，用于处理HTTP请求来查询公交乘车方案。具体来说代码助手做了以下几件事：

首先生成了一段描述性的文字，这段文字是关于一个Java控制器方法的。说有个方法接收一个HTTP GET请求，并处理有关公交乘车方案的查询。
然后方法会根据传入的参数（如出发地、目的地等）去数据库中查找直达的公交线路，如果没有直达线路，它会继续查找换乘方案。找到合适的乘车方案后，这些方案会被组织成一个模型，并且作为数据传递给视图层。
最后，方法返回一个视图的名字，这通常意味着前端页面将展示这些查询结果。

这段描述提供了对一个具体公交线路查询功能的实现细节，从接收到请求开始，到最终返回结果给用户。

下面我继续追问：这段代码是怎么运行的？

他的回答说实话我很满意，在Spring MVC中从前端请求到后端处理再到视图渲染的全过程，包括参数绑定、业务逻辑处理和视图返回。其中的一个亮点是对换乘查询逻辑的分层处理，而且还顺便指出了一个错误！
在这里插入图片描述

接下来在检查代码后顺着他的回答后问：提到的错误怎么解决？

原来代码：

if(startStationId!=null && endStationId!=null){
			/*第一步：先查有没有直达方案*/
			//去中间表中查
			List<Map<String, Integer>> lines=stationLineService.getLineIdBystation(startStationId,endStationId);
			if(lines!=null && lines.size()>0){
				//说明有直达的方案
				System.out.println("有直达方案");
				status=0;
				for(Map<String, Integer> map:lines){
					directBusLines.add(busLineService.getBusLine(map.get("sl_line_id")));
				}
			}else {
				//没有直达方案查询一次换乘的方案
				System.out.println("没有直达的方案");
				/*第二步：查询一次换乘方案*/
				//先得到中转站点
				List<Map<String, Integer>> trans_ids=stationLineService.getTransStationBystation(startStationId, endStationId);
				if(trans_ids!=null && trans_ids.size()>0){
					//说明有直达的方案
					System.out.println("有一次换乘方案");
					status=1;
					for(Map<String, Integer> map:trans_ids){
						List<BusLine> oneBusLines=new ArrayList<BusLine>();
						List<BusLine> twoBusLines=new ArrayList<BusLine>();
						StationLine stationLine=new StationLine();
						Integer stationId=map.get("sl_station_id");//中转站站点id
						stationLine.setTransStation(busStationService.getBusStation(stationId));
						List<Map<String, Integer>> lines1=stationLineService.getLineIdBystation(startStationId,stationId);
						for(Map<String, Integer> map1:lines1){
							oneBusLines.add(busLineService.getBusLine(map1.get("sl_line_id")));
							stationLine.setOneBusLines(oneBusLines);
						}
						List<Map<String, Integer>> lines2=stationLineService.getLineIdBystation(stationId,endStationId);
						for(Map<String, Integer> map2:lines2){
							twoBusLines.add(busLineService.getBusLine(map2.get("sl_line_id")));
							stationLine.setTwoBusLines(twoBusLines);
						}
						stationLines.add(stationLine);
					}
				}
			}
		}

回答说应该确保oneBusLines和twoBusLines列表在循环内部被填充，但在循环外部才将它们的值设置到stationLine对象中。这样，每次循环迭代都会向这些列表中添加新的公交线路，而不是覆盖它们。

以下是修改后的代码片段，它修复了原来代码中指出的逻辑错误：

if (trans_ids != null && trans_ids.size() > 0) {
    // 说明有换乘的方案
    System.out.println("有一次换乘方案");
    status = 1;
    for (Map<String, Integer> map : trans_ids) {
        List<BusLine> oneBusLines = new ArrayList<>();
        List<BusLine> twoBusLines = new ArrayList<>();
        StationLine stationLine = new StationLine();

        Integer stationId = map.get("sl_station_id"); // 中转站站点id
        stationLine.setTransStation(busStationService.getBusStation(stationId));

        // 查询第一段线路
        List<Map<String, Integer>> lines1 = stationLineService.getLineIdBystation(startStationId, stationId);
        for (Map<String, Integer> map1 : lines1) {
            oneBusLines.add(busLineService.getBusLine(map1.get("sl_line_id")));
        }

        // 查询第二段线路
        List<Map<String, Integer>> lines2 = stationLineService.getLineIdBystation(stationId, endStationId);
        for (Map<String, Integer> map2 : lines2) {
            twoBusLines.add(busLineService.getBusLine(map2.get("sl_line_id")));
        }

        // 设置完整的线路到StationLine对象（现在是在内层循环的末尾）
        stationLine.setOneBusLines(oneBusLines);
        stationLine.setTwoBusLines(twoBusLines);

        // 将配置好的stationLine对象添加到列表中
        stationLines.add(stationLine);
    }
}

在他的解释中：oneBusLines和twoBusLines列表是在每次迭代开始时为新的StationLine对象初始化的，但它们是在内层循环完全结束后才被设置到stationLine对象中的。这样每个StationLine对象都会包含从起始站到中转站以及从中转站到目的站的所有公交线路。然后每个配置好的StationLine对象都被添加到stationLines列表中，以便在视图中使用。

代码视频

出行方案查询

将生成代码复制进程序运行：success
在这里插入图片描述
在点击查询按钮后后端会调用这个接口：

看到这里应该知道后端代码的执行流程了吧

接下来看下前端代码：

前端代码的主要功能包括设置页面元数据、显示表单以及根据查询结果展示不同的表格。下面是主要功能代码的摘录

JSP 指令与标签库指令

<%@ page language="java" import="java.util.*"
    contentType="text/html;charset=UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

你比如说我想知道这段代码有什么作用：
在这里插入图片描述
总结一下就是这段代码的作用就是为 JSP 页面提供了一个基础框架，让开发者能够轻松地使用 Java 编写动态网页内容，并利用 JSTL 标签来处理数据和逻辑，最终输出一个 HTML 页面给用户浏览。

页面上下文路径设置

在这里插入图片描述

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

这行代码翻译成人话就是：

如果你想要引用一个位于 plugins/bootstrap.css 的文件，你可以这样写：

<link href="${ctx }/plugins/bootstrap.css" rel="stylesheet">

这将确保不论应用部署在哪个路径下，浏览器都能正确加载到 bootstrap.css 文件。

总的来说，这段 <c:set> 代码是为了方便在 JSP 页面中使用上下文路径，从而避免硬编码具体的路径，使得应用更加灵活和可移植。

表单部分

<form name="busLineQueryForm" id="busLineQueryForm"
    action="${ctx }/StationLine/frontlist" class="mar_t15"
    method="post">
    <div class="form-group">
        <label for="startStation_stationId">出发地站点：</label>
        <select id="startStation_stationId" name="startStation.stationId" class="form-control">
            <option value="0">请选择……</option>
            <c:forEach items="${busStationList }" var="busStationTemp" >
                <option value="${busStationTemp.stationId }" <c:if test="${startStation.stationId eq busStationTemp.stationId }">selected="selected"</c:if>>${busStationTemp.stationName }</option>
            </c:forEach>
        </select>
    </div>
    <div class="form-group">
        <label for="endStation_stationId">目的地站点：</label>
        <select id="endStation_stationId" name="endStation.stationId" class="form-control">
            <option value="0">请选择……</option>
            <c:forEach items="${busStationList }" var="busStationTemp" >
                <option value="${busStationTemp.stationId }" <c:if test="${endStation.stationId eq busStationTemp.stationId }">selected="selected"</c:if>>${busStationTemp.stationName }</option>
            </c:forEach>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">查询</button>
</form>

表单定义：
name 和 id 属性: 表单的名称和 ID 分别为 busLineQueryForm。
action 属性: 当表单提交时，数据会被发送到 ${ctx}/StationLine/frontlist 这个 URL。其中 ${ctx} 是之前设置的变量，代表应用的上下文路径。
method 属性: 表单的提交方式为 POST。

表单项：
出发地站点选择:
<label> 标签: 显示文本 “出发地站点：”。
<select> 标签: 创建一个下拉列表，用户可以选择出发地站点。
items 属性: 使用 JSTL 的 <c:forEach> 循环遍历 ${busStationList} 列表，其中每个元素都是一个站点对象。
var 属性: 在循环中使用变量 busStationTemp 来引用当前迭代的站点对象。
<option> 标签: 为每个站点创建一个选项，其 value 为站点的 stationId，显示文本为站点的 stationName。
如果 startStation.stationId 与当前站点的 stationId 相等，则添加 selected="selected" 属性，使该选项默认选中。

查询结果显示部分

<div class="tab-pane active" id="busLineListPanel">
    <div class="row">
        <div class="col-md-12 top5">
            <div class="table-responsive">
                <table class="table table-condensed table-hover">
                    <c:if test="${status ==0 }">
                        <tr style="background:#0e90d2;color:#fff;"> <th colspan="8">直达方案：</th></tr>
                        <tr style="font-weight: 600; font-style: italic;">
                            <td>线路名称</td>
                            <td>起点站</td>
                            <td>终到站</td>
                            <td>首班车时间</td>
                            <td>末班车时间</td>
                            <td>所属公司</td>
                            <td>票价</td>
                            <td>操作</td>
                        </tr>
                        <c:forEach items="${directBusLines }" var="busLine" >
                            <tr>
                                <td>${busLine.name }</td>
                                <td>${busLine.startStation.stationName }</td>
                                <td>${busLine.endStation.stationName }</td>
                                <td>${busLine.startTime}</td>
                                <td>${busLine.endTime}</td>
                                <td>${busLine.company }</td>
                                <td>${busLine.ticket }</td>
                                <td>
                                    <c:if test="${not empty busLine.lineId && !(busLine.lineId eq '') }">
                                        <a href="${ctx }/BusLine/${ busLine.lineId}/frontshow"><i
                                            class="fa fa-info"></i>&nbsp;查看</a>
                                    </c:if>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>
                    <c:if test="${status==1 }">
                        <tr style="background:#0e90d2;color:#fff;"> <th colspan="8">一次换乘方案</th></tr>
                        <c:forEach  items="${stationLines }" var="stationLine" >
                            <tr> <th style="font-weight: 600; border-left:5px solid #0e90d2; color: red"  colspan="7">中转前的乘车车次,中转站为:${stationLine.transStation.stationName}</th></tr>
                            <tr style="font-weight: 600; font-style: italic;">
                                <td>线路名称</td>
                                <td>起点站</td>
                                <td>终到站</td>
                                <td>首班车时间</td>
                                <td>末班车时间</td>
                                <td>所属公司</td>
                                <td>票价</td>
                                <td>操作</td>
                            </tr>
                            <c:forEach items="${stationLine.oneBusLines }" var="busLine" >
                                <tr>
                                    <td>${busLine.name }</td>
                                    <td>${busLine.startStation.stationName }</td>
                                    <td>${busLine.endStation.stationName }</td>
                                    <td>${busLine.startTime}</td>
                                    <td>${busLine.endTime}</td>
                                    <td>${busLine.company }</td>
                                    <td>${busLine.ticket }</td>
                                    <td>
                                        <c:if test="${not empty busLine.lineId && !(busLine.lineId eq '') }">
                                            <a href="${ctx }/BusLine/${ busLine.lineId}/frontshow"><i
                                                class="fa fa-info"></i>&nbsp;查看</a>
                                        </c:if>
                                    </td>
                                </tr>
                            </c:forEach>
                            <tr > <th  colspan="8" style="border-left:5px solid #0e90d2;">中转后的乘车车次</th></tr>
                            <c:forEach items="${stationLine.twoBusLines }" var="busLine" >
                                <tr>
                                    <td>${busLine.name }</td>
                                    <td>${busLine.startStation.stationName }</td>
                                    <td>${busLine.endStation.stationName }</td>
                                    <td>${busLine.startTime}</td>
                                    <td>${busLine.endTime}</td>
                                    <td>${busLine.company }</td>
                                    <td>${busLine.ticket }</td>
                                    <td>
                                        <c:if test="${not empty busLine.lineId && !(busLine.lineId eq '') }">
                                            <a href="${ctx }/BusLine/${ busLine.lineId}/frontshow"><i
                                                class="fa fa-info"></i>&nbsp;查看</a>
                                        </c:if>
                                    </td>
                                </tr>
                            </c:forEach>
                            <hr style="color: red">
                        </c:forEach>
                    </c:if>
                    <c:if test="${status==-1 }">
                        <tr> <th>暂无方案或者换乘太多次</th></tr>
                    </c:if>
                </table>
            </div>
        </div>
    </div>
</div>