Java Web项目的前后端链接简单形式

拼搏现实的明天。 2023-10-03 14:04 20阅读 0赞

#### 目录 ####

*  一、完整步骤
 *   *  1.创建项目
     *  2.配置服务器的参数
     *  3.创建控制器
     *   *  3.1 创建文件
         *  3.2 编写控制器
         *  3.3 扩展：简单登录控制器
         *   *  1.编写后端方法
             *  2.编写前端界面
     *  4.访问前端
     *   *  4.1 运行主程序
         *  4.2 访问对应前端网址

--------------------

## 一、完整步骤 ##

### 1.创建项目 ###

选择项目 Web Spring Web  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70]  
创建后，发现多了两个文件夹  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][185c1326d12f4dbd9598c4eebe702d9b.png]

### 2.配置服务器的参数 ###

如果单独配置，就是默认配置  
![在这里插入图片描述][f5b2c55c5d2542459ad1bb318dcd4e6f.png]  
在application.properties文件修改配置，我们端口变为8088，我们的控制器都在 /demo 目录下  
![在这里插入图片描述][055c32f43437438fbe39b376ea3b2d8c.png]

**插曲：**  
Spring运行后的控制台每次都显示的图标其实是Spring作者打印的Sring，我们还可以自己设置画什么  
![在这里插入图片描述][46ded58dc0304c698c8e96b8c4c7b79d.png]

### 3.创建控制器 ###

控制器的本质也是实体类，是Java class

#### 3.1 创建文件 ####

在XXXAplication同级目录创建package，名为controller  
![在这里插入图片描述][32befa78c2474ed28eb4e40143cf5cff.png]  
在该package下创建Java class实体类作控制器（命名便于识别即可）  
![在这里插入图片描述][106e4e1b3f55407a98fdbe619ad67196.png]

#### 3.2 编写控制器 ####

**声名实体类为控制器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 2]  
**编写方法：**

*  编写方法，向前端返回 Hello mvc 字符串
 *  @RequsetMapping：就是告诉程序这里定义了一个 /hello（注意要与方法名一致），到时候访问http://localhost:8088/demo/hello时，会调用这个方法，页面就返回了 Hello mvc  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 3]

#### 3.3 扩展：简单登录控制器 ####

##### 1.编写后端方法 #####

在控制器编写后端方法

@RequestMapping("/login")
        // 接受前端发来的登录名和密码
        public String login(String loginName,String loginPwd){
        
        	// 登录后返回用户名和其密码（只是个简单的登录系统）
            String msg="loginName:"+loginName+";loginPwd:"+loginPwd;
            return msg;
        }

##### 2.编写前端界面 #####

**创建文件**  
![在这里插入图片描述][d2c581f153b2447aa4258e42beafa752.png]  
**编写内容**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
        <form action="login" method="post">
            
            <table>
                
                
                <tr>
                    <td>登录名：</td>
                    <td>
                    
                        <input type="text" name="loginName" placeholder="账号\邮箱\手机号码" >
                    </td>
                </tr>
                
                
                <tr>
                    <td>密码：</td>
                    <td>
                     
                        <input type="password" name="loginPwd" placeholder="登录密码" >
                    </td>
                </tr>
                
                
                <tr>
                    <td>密码：</td>
                    <td>
                        
                        <button type="submit">登录</button>
                    </td>
                </tr>
            </table>
        </form>
    
    </body>
    </html>

### 4.访问前端 ###

#### 4.1 运行主程序 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 4]  
**注意：**  
我们的主程序是不会自动停止，需要手动停止  
![在这里插入图片描述][aa2017039ff24309bfd4d0f7e0c82246.png]

**要注意两个关键信息：**  
一个是端口和项目信息，一个是运行时间![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 5]

#### 4.2 访问对应前端网址 ####

我们服务器的内容都在 /demo 目录下

*  直接访问后端的hello方法：http://localhost:8088/demo/hello
 *  访问login登录页面：http://localhost:8088/demo/login.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/db2e7e5bd0f74781bab86550d7e4fc66.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/63c08e7df72c4c69a179c96d7f7feaef.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ==,size_16,color_FFFFFF,t_70
[185c1326d12f4dbd9598c4eebe702d9b.png]: https://img-blog.csdnimg.cn/185c1326d12f4dbd9598c4eebe702d9b.png
[f5b2c55c5d2542459ad1bb318dcd4e6f.png]: https://img-blog.csdnimg.cn/f5b2c55c5d2542459ad1bb318dcd4e6f.png
[055c32f43437438fbe39b376ea3b2d8c.png]: https://img-blog.csdnimg.cn/055c32f43437438fbe39b376ea3b2d8c.png
[46ded58dc0304c698c8e96b8c4c7b79d.png]: https://img-blog.csdnimg.cn/46ded58dc0304c698c8e96b8c4c7b79d.png
[32befa78c2474ed28eb4e40143cf5cff.png]: https://img-blog.csdnimg.cn/32befa78c2474ed28eb4e40143cf5cff.png
[106e4e1b3f55407a98fdbe619ad67196.png]: https://img-blog.csdnimg.cn/106e4e1b3f55407a98fdbe619ad67196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/4ba1b1e4e5fe4bc89f4383f79514f290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/571656c1281644859b943f37a43261da.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ==,size_16,color_FFFFFF,t_70
[d2c581f153b2447aa4258e42beafa752.png]: https://img-blog.csdnimg.cn/d2c581f153b2447aa4258e42beafa752.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/bc16869e16474b35a017f13ed5c0fbc4.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ==,size_16,color_FFFFFF,t_70
[aa2017039ff24309bfd4d0f7e0c82246.png]: https://img-blog.csdnimg.cn/aa2017039ff24309bfd4d0f7e0c82246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/4b50981000684a9a89f2592a5fb54462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkyODE2MQ==,size_16,color_FFFFFF,t_70