SpringBoot搭建web项目

左手的ㄟ右手 2023-02-14 03:08 17阅读 0赞

这篇文章主要介绍一下使用SpringBoot从零搭建web项目，demo主要演示登录的功能

### 在 https://start.spring.io/ 上生成初始化文件![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70_pic_center] ###

会生成.zip文件，将文件解压

![在这里插入图片描述][20200531221426170.png]

### 在IDEA中打开这个项目 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70]

这里有一个**问题**就是：Idea打开项目后 maven下载依赖会卡在 **Resolving Maven dependencies**

\*\*解决：\*\*①把镜像地址换成阿里的，具体操作：更改maven 配置文件，在IDEA安装目录下IDEA\\plugins\\maven\\lib\\maven3\\conf\\setting.xml 中添加配置信息

② 修改参数设置：https://cloud.tencent.com/developer/article/1461546

### 运行 ###

直接运行 src/main/java/com/google/cloudschool/CloudschoolApplication.java就可以

在浏览器输入localhost:8080就可以访问了.

简单的demo见 https://spring.io/quickstart

### 步入正题：访问登录界面 ###

#### 方法一：ip:端口/静态资源 ####

把静态资源放到resources/static下,这是springboot静态资源默认访问路径。

在浏览器直接ip:端口/静态资源 就可以了，如：

![在这里插入图片描述][20200531221428495.png]

#### 方法二：用localhost:8080/login ####

#### 编写login.html ####

放在resource/templates目录下。

#### 新建LoginController ####

首先新建一个controller文件夹，在controller目录下新建LoginController.java。

代码：

package com.google.cloudschool.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class LoginController { 
        @RequestMapping("/login")
        public String welcomeLogin(){ 
            return "login";
        }
    }

#### 在pom.xml文件中加入依赖 ####

<dependencies>
    	<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

#### 访问localhost:8080/login ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70_pic_center 1]

### 进行登录操作：后端方面 ###

因为要用到MyBatis，所以我们首先配置MyBatis

#### 配置MyBatis依赖 ####

修改pom.xml文件，加入：

<dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>1.1.1</version>
    </dependency>

#### resource 目录下新建application.yml文件 ####

进行数据源设置，写入：

spring:
      datasource:
        driver-class-name: com.mysql.jdbc.Driver
        url: jdbc:mysql://139.196.9.111:3306/springboot?useUnicode=true&characterEncoding=utf8
        username: root
        password: 12345678
    mybatis:
      type-aliases-package: com.example.demo.dao
      mapper-locations: classpath:mapper/*Mapper.xml

MyBatis 配置完成。

#### 新建controller，service，dao，domain文件夹 ####

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 1]

#### 编写login.html，Jquery Ajax发送post请求 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 2]

#### 编写controller，service, serviceImpl，mapper ####

##### 文件结构 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70_pic_center 2]

##### LoginController.java处理post请求方法 #####

@PostMapping("/login")
    @ResponseBody
    String ajaxLogin(String username, String password) { 
        System.out.println("username="+username+" password="+password);
        int code = userService.login(username,password);
        System.out.println("code = "+code);
        JSONObject result = new JSONObject() ;
        result.put("code",code);
        if (code >= 1) { 
            result.put("msg","登录成功！");
        }else { 
            result.put("msg","用户或密码错误！");
        }
        return result.toJSONString();
    }

##### UserService.java #####

package com.google.cloudschool.service;
    
    public interface UserService { 
    	int login(String username, String password);
    }

##### UserServiceImpl.java #####

package com.google.cloudschool.service.Impl;
    
    import com.google.cloudschool.dao.UserMapper;
    import com.google.cloudschool.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    @Service
    public class UserServiceImpl implements UserService { 
    
        @Autowired
        UserMapper userMapper;
    
        @Override
        public int login(String username, String password) { 
            return userMapper.login(username,password);
        }
    }

##### UserMapper.java #####

package com.google.cloudschool.dao;
    
    import org.apache.ibatis.annotations.*;
    
    @Mapper
    public interface UserMapper { 
    
    	@Select("select count(*) from user where username = #{param1} and password = #{param2} ")
    	int login(String username, String password);
    }

#### login.html 发送post登录请求就可以去数据库查询到是否有该用户啦 ####

#### 登录成功就跳转新界面啦！ ####

### 测试接口调用 ###

用chrome浏览器的Talend API Tester扩展程序模拟发送请求（只调用接口的话可以注释掉thymeleaf的）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/2020053122175397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70#pic_center
[20200531221426170.png]: https://img-blog.csdnimg.cn/20200531221426170.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200531221428843.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70
[20200531221428495.png]: https://img-blog.csdnimg.cn/20200531221428495.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200531222101572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200531221429151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200531221429763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200531222303152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200531221430756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200531221430939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjg1OTkx,size_16,color_FFFFFF,t_70