# 使用CodeArts IDE for Java开发Java示例工程
#### 功能介绍
CodeArts IDE for Java是一个JAVA集成开发环境，将文本编辑器和强大的开发工具（如智能代码补全、导航、重构和调试）集成在一起。
- 调试热替换：支持在调试模式下运行程序。当程序挂起时，在"运行"和"调试"视图中检查其输出。找到错误并更正它，然后重新运行程序。在Java上下文中，可通过热代码替换功能来动态修改和重新加载类，无需停止调试会话。
- 强大的编码辅助能力：CodeArts IDE for Java可以深入理解代码，提供上下文感知的机器学习辅助补全功能，可以补全单条语句或整行代码。对于代码编辑器中的任何符号，开发者可以查看其定义和相关文档。集成开发环境可高亮显示错误，并让开发者直接在代码编辑器中对错误采取行动。"问题"视图会列出当前打开的文件中检测到的所有问题。
- Java构建工具集成：CodeArts IDE for Java提供对Maven和Gradle构建系统的内置支持，包括项目和依赖关系解析，以及运行Maven目标和Gradle任务的能力。
Spring Boot和Thymeleaf是目前非常流行的Java开发框架和模板引擎。Spring Boot提供了快速构建Web应用程序的能力，而Thymeleaf则是一种功能强大且易于使用的模板引擎，可以帮助在服务器端生成动态的HTML页面。在本文中，将使用Spring Boot和Thymeleaf来实现一个完整的用户管理功能，包括增加、删除、修改和查询用户信息。 以及使用CodeArts IDE for Java构建，运行Java工程，并且学到Java语言的一些基础知识，例如Java的一些基本类型。通过Java语言创建，读取和修改本地文件的能力。
#### 前置条件
- 已下载并安装CodeArts IDE for Java，了解IDE的基础功能。
- 已获取[示例工程代码](https://codelabs.developer.huaweicloud.com/codelabs/samples/82120b55f36a46c18b09590c6281f03e/view-code/e95253901fca11ea8b68fa163e6e3ea0)。
 
- 安装Java JDK 17及其以上版本。
- 已引入spring-boot-starter-web、spring-boot-starter-thymeleaf和lombok（可选）相关依赖。
#### 开发时序图
![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002305733593.png)
#### 创建工程
1. [登录到CodeArts IDE for Java客户端](https://support.huaweicloud.com/usermanual-codeartside/codeartside_01_0016.html)，选择"新建工程"创建Java工程。
   
   其中"构建系统"选择"Maven"，"框架"选择"SpringBoot"。
   ![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002555480073.png "点击放大")
   
   
2. 单击"创建"，项目开始加载，会启动相关服务、下载依赖的Jar包等，此过程受计算机性能、网速等因素影响会耗费一定的时间。
3. Java工程创建完成后，在编辑器界面，单击"文件 \> 打开项目"，导入示例工程代码。
 
#### 运行调试
1. 在具有"main()"方法的"UserManagerApplication"类的代码编辑器中，单击或右键"main()"方法左侧**"运行/调试主类"** 按钮（![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002375297158.png "点击放大")）。
2. 在弹出的下拉列表中，单击"在UserManagerApplication中运行main方法"或"在UserManagerApplication中调试main方法"项，将运行或调试项目。如下图所示： 
   图1代码编辑区区域"main()"方法处启动调试会话入口   
   ![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002408816837.png "点击放大")
   
   
3. 在浏览器地址栏输入"localhost:8080"。
 
#### 输出结果示例
程序运行截图如下：
![](https://support.huaweicloud.com/bestpractice-codeartside/zh-cn_image_0000002375136162.png "点击放大")
#### 关键代码片段
以下为关键代码片段，全量示例代码请单击[示例工程代码](https://codelabs.developer.huaweicloud.com/codelabs/samples/82120b55f36a46c18b09590c6281f03e/view-code/e95253901fca11ea8b68fa163e6e3ea0)获取。
**后端实现过程**
pojo类：（@Data是lombod注解，不需要写get、set方法了。）
```
@Data
public class User {
    private String uuid;
    private Integer id;
    private String name;
    private Integer age;
    private String department;
    public User(){}
    public User(Integer id, String name, Integer age, String department) {
        this.uuid = UUID.randomUUID().toString();
        this.id = id;
        this.name = name;
        this.age = age;
        this.department = department;
    }
}
```
mapper接口：
```
public interface IUserMapper {
    public List<User> getUserList();
    public boolean addUser(User user);
    public boolean updateUser(User user);
    public boolean deleteUser(String uuid);
}
```
mapperImpl实现类：
```
@Component
public class UserMapperImpl implements IUserMapper {
    @Override
    public List<User> getUserList() {
        return UserData.userList;
    }
    @Override
    public boolean addUser(User user) {
        user.setUuid(UUID.randomUUID().toString());
        return UserData.userList.add(user);
    }
    @Override
    public boolean updateUser(User user) {
        Stream<User> userStream = UserData.userList.stream().filter(userItem -> {
            if (user.getId().equals(userItem.getId())) {
                if (user.getId() != null) {
                    userItem.setId(user.getId());
                }
                if ( !StringUtils.isEmpty(user.getName())) {
                    userItem.setName(user.getName());
                }
                if (!StringUtils.isEmpty(user.getDepartment())) {
                    userItem.setDepartment(user.getDepartment());
                }
                if (!StringUtils.isEmpty(user.getAge())) {
                    userItem.setAge(user.getAge());
                }
                return true;
            }
            return false;
        });
        return userStream.count() >= 1;
    }
    @Override
    public boolean deleteUser(String uuid) {
        int sizeBeforeDelete = UserData.userList.size();
        List<User> deletedUsers = UserData.userList.stream().filter(user -> uuid.equals(user.getUuid())).collect(Collectors.toList());
        deletedUsers.forEach(UserData.userList::remove);
        return sizeBeforeDelete != UserData.userList.size();
    }
}
```
service接口：
```
public interface IUserService {
    public List<User> getUserList();
    public boolean addUser(User user);
    public boolean updateUser(User user);
    public boolean deleteUser(String id);
}
```
serviceImpl实现类：
```
@Service
public class UserServiceImpl implements IUserService {
    @Autowired
    IUserMapper userMapperImpl;
    @Override
    public List<User> getUserList() {
        return userMapperImpl.getUserList();
    }
    @Override
    public boolean addUser(User user) {
        return userMapperImpl.addUser(user);
    }
    @Override
    public boolean updateUser(User user) {
        return userMapperImpl.updateUser(user);
    }
    @Override
    public boolean deleteUser(String id) {
        return userMapperImpl.deleteUser(id);
    }
}
```
controller控制层： 用户管理接口Controller。
```
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    IUserService userServiceImpl;
    @GetMapping("/getUserList")
    public List<User> getUserList() {
        return userServiceImpl.getUserList();
    }
    @PostMapping("/addUser")
    public boolean addUser(User user) {
        return userServiceImpl.addUser(user);
    }
    @PostMapping("/updateUser")
    public boolean updateUser(User user) {
        return userServiceImpl.updateUser(user);
    }
    @PostMapping("/deleteUser")
    public boolean deleteUser(String uuid) {
        return userServiceImpl.deleteUser(uuid);
    }
}
```
用户欢迎界面Controller：
```
@Controller
public class WelcomePageController {
    @RequestMapping("/")
    public String user() {
        return "user";
    }
}
```
用户数据：
```
public class UserData {
    public static List<User> userList = new ArrayList<>();
    public static void initUserData() {
        userList.add(new User(1, "张三", 20, "人力资源部"));
        userList.add(new User(2, "李四", 18, "后勤部"));
        userList.add(new User(3, "王五", 21, "研发部"));
        userList.add(new User(4, "赵六", 25, "产品部"));
    }
}
```
启动类：（每次启动调试需要初始化用户数据）
```
@SpringBootApplication
public class UserManagerApplication {
    public static void main(String[] args) {
        UserData.initUserData(); // 初始化用户数据
        SpringApplication.run(UserManagerApplication.class, args);
    }
}
```
**前端实现过程(thymeleaf模板+html+ajax)**
user.html：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Manager</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            queryData();
        });
        function queryData() {
            // 发送 AJAX 请求
            $.ajax({
                url: 'http://localhost:8080/user/getUserList',
                type: 'GET',
                dataType: 'json',
                success(res) {
                    var html = '';
                    for (var i = 0; i < res.length; i++) {
                        html += '<tr><td>' + res[i].id + '</td>' + '<td>' + res[i].name + '<td>' + res[i].age + '<td>' + res[i].department + '</td><td> <button onclick="del(\'' + res[i].uuid + '\')">删除</button></td></tr>';
                    }
                    // console.log(html);
                    $('#tt').html(html);
                },
                error: function (xhr, status, error) {
                    console.error(error); // 处理错误情况
                }
            });
        }
        function add() {
            const id = document.getElementById('InputId').value;
            const name = document.getElementById('InputName').value;
            const age = document.getElementById('InputAge').value;
            const department = document.getElementById('InputDepartment').value;
            if (!validateId(id)) {
                return;
            }
            $.ajax({
                url: `http://localhost:8080/user/addUser?id=${id}&name=${name}&age=${age}&department=${department}`,
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    queryData();
                    if (res == true) {
                        alert('添加成功');
                    } else {
                        alert('添加失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
            document.getElementById('InputId').value = '',
                document.getElementById('InputName').value = '';
            document.getElementById('InputAge').value = '';
            document.getElementById('InputDepartment').value = '';
        }
        function update() {
            const id = document.getElementById('updateInputId').value;
            const name = document.getElementById('updateInputName').value;
            const age = document.getElementById('updateInputAge').value;
            const department = document.getElementById('updateInputDepartment').value;
            if (!validateId(id)) {
                return;
            }
            $.ajax({
                url: `http://localhost:8080/user/updateUser?id=${id}&name=${name}&age=${age}&department=${department}`,
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    queryData();
                    if (res == true) {
                        alert('修改成功');
                    } else {
                        alert('修改失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
            document.getElementById('updateInputId').value = '',
                document.getElementById('updateInputName').value = '';
            document.getElementById('updateInputAge').value = '';
            document.getElementById('updateInputDepartment').value = '';
        }
        function del(uuid) {
            $.ajax({
                url: `http://localhost:8080/user/deleteUser?uuid=${uuid}`,
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    queryData();
                    if (res == true) {
                        alert('删除成功');
                    } else {
                        alert('删除失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        }
        function validateId(id) {
            if (id == '') {
                alert("Id值不能为空");//空值校验
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <div class="header">
        <!--<button onclick="queryData()">查询</button>-->
        <div class="items">
            <input type="number" value="" placeholder="请输入id" id="InputId" />
            <input type="text" value="" placeholder="请输入名称" id="InputName">
            <input type="number" value="" placeholder="请输入年龄" id="InputAge">
            <input type="text" value="" placeholder="请输入部门" id="InputDepartment">
            <button onclick="add()">添加</button>
        </div>
        <div class="items">
            <input type="number" value="" placeholder="请输入id" id="updateInputId" />
            <input type="text" value="" placeholder="请输入名称" id="updateInputName">
            <input type="number" value="" placeholder="请输入年龄" id="updateInputAge">
            <input type="text" value="" placeholder="请输入部门" id="updateInputDepartment">
            <button onclick="update()">修改</button>
        </div>
    </div>
    <div class="table">
        <table>
            <thead>
                <tr>
                    <th>用户Id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tt">
            </tbody>
        </table>
    </div>
</body>
<style>
    table {
        margin: 20px;
        border-collapse: collapse;
    }
    th {
        background-color: #cccccc;
    }
    tr {
        text-align: center;
        border: 1px solid #ccc;
    }
    td {
        padding: 20px;
        border: 1px solid #ccc;
    }
    button {
        background-color: white;
        width: 70px;
        border-radius: 20px;
        border: 1px solid #ccc;
    }
    button :hover {
        background-color: #cccccc;
    }
    .header {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .items {
        display: grid;
        margin-left: 10px;
    }
    .table {
        display: flex;
        justify-content: center;
    }
</style>
</html>
```
**相关配置文件**
pom.xml：
相关的依赖信息如下，引入spring-boot-starter-web、spring-boot-starter-thymeleaf和lombok（可选）相关依赖。
```
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.huawei</groupId>
    <artifactId>codeartside-user-manager</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!-- Spring Boot parent 管理版本 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.14</version>
        <relativePath/>
    </parent>
    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <!-- Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- Lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <scope>provided</scope>
        </dependency>
        <!-- 测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <!-- 编译器插件 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.11.0</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                    <encoding>${project.build.sourceEncoding}</encoding>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>
```
application.properties：
```
spring.application.name=user-manager 
server.port=8080
```
application.yml：
```
thymeleaf:
  prefix:
    classpath: /templates   # 访问template下的html文件需要配置模板，映射
```
**代码解析**
在html代码中，主要利用onclick单击事件和jquery框架中的ajax交互。 jquery中ajax的语法格式如下：
```
$.ajax({
     url: 接口名,
     type: 'get',
     dataType: 'json',
     success: function(res) {
         queryData();     
     },     
     error: function(xhr, status, error) {
         console.error(error); // 处理错误情况
    }
 });
```