SpringBoot實戰(一)- thymeleaf -Bootstrap -GitHub OAuth App -配置properties -在IDEA輸入Git命令將代碼託管到Github

創建項目

用Spring Boot starters快速創建一個項目

勾選Web

PS:我的IDEA每次創建springboot項目要把pom裏的版本從2.2.4改成2.2.2才能跑起來...

<version>2.2.2.RELEASE</version>

當你的項目想集合一些組件時,這個網址有很多開源方案

https://spring.io/guides

 

https://spring.io/guides/gs/serving-web-content/

導入​thymeleaf​依賴:

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

Create a Web Controller

 community\src\main\java\life\majiang\community\Controller\GreetingController.java

@Controller
public class GreetingController {

	@GetMapping("/greeting")
	public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
		model.addAttribute("name", name);
		return "greeting";
	}

}

我們將其逐步分解。
@GetMapping 確保將對/ greeting的HTTP GET請求映射到greeting()方法。
@RequestParam將查詢字符串參數名稱的值綁定到greeting()方法的參數中。
如果請求中不存在,則使用defaultValue。
name參數的值將添加到Model對象,最終使模板可以訪問它。

當你不知道在@RequestParam傳什麼參數時,按住ctrl+p會有提示

community\src\main\resources\templates\greeting.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

顯示:

創建倉庫

將項目上傳到Github

https://blog.csdn.net/qq_43442524/article/details/100077115

 

使用Bootstrap

下載Bootstrap

 

解壓後ctrlv到static中

引入資源

community\src\main\resources\templates\index.html

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>

默認導航條,放入index.html中

https://v3.bootcss.com/components/#navbar

 

community\src\main\java\life\majiang\community\Controller\IndexController.java

@Controller
public class IndexController {

    @GetMapping("/")
    public String index() {
        return "index";
    }

}

 會返回到修改好後的index.html中

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>社區</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="js/bootstrap.min.js" type="application/javascript"></script>

</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">社區</span>

            </button>
            <a class="navbar-brand" href="#">社區</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索問題">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登錄</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">消息中心</a></li>
                        <li><a href="#">個人資料</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">退出登錄</a></li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
</nav>

</body>
</html>

運行項目就會有一個導航欄了

 

註冊GitHub App

https://developer.github.com/apps/building-oauth-apps/

 

流程:

點擊登錄按鈕

調用一個授權地址:https://github.com/login/oauth/authorize

<li>
<a href="https://github.com/login/oauth/authorize?
client_id=d91ecbf97a04759b945e
&redirect_uri=http://localhost:8080/callback&scope=user&state=1">登錄</a>
</li>
          

 

回調redirect-uri,返回一個code

 

@Controller
public class AuthorizeController {

    @GetMapping("/callback")
    public String callback(@RequestParam(name = "code") String code,
                           @RequestParam(name = "state") String state) {

拿着access-token攜帶code 

 

用accessTokenDTO封裝好的數據傳遞到githubProvider中 

public class AccessTokenDTO {

    private String cliend_id; //因爲這個單詞打錯了一直404,找了一下午
    private String client_secret;
    private String code;
    private String redirect_uri;
    private String state;



AccessTokenDTO accessTokenDTO = new AccessTokenDTO();

        accessTokenDTO.setCode(code);
        accessTokenDTO.setCliend_id("d91ecbf97a04759b945e");
        accessTokenDTO.setClient_secret("749a87845bceadf74377271113392a9eb0a70");
        accessTokenDTO.setRedirect_uri("http://localhost:8080/callback");
        accessTokenDTO.setState(state);

        githubProvider.getAccessToken(accessTokenDTO);

 

接着在GithubProvider利用okhttp和fastjson

發post請求將accessTokenDTO傳到https://github.com/login/oauth/access_token裏拿到access_token 

@Component
public class GithubProvider {
    public String getAccessToken(AccessTokenDTO accessTokenDTO) {

        MediaType mediaType = MediaType.get("application/json; charset=utf-8");
        OkHttpClient client = new OkHttpClient();

        RequestBody body = RequestBody.create(mediaType, JSON.toJSONString(accessTokenDTO));
        Request request = new Request.Builder()
                .url("https://github.com/login/oauth/access_token")
                .post(body)
                .build();
        try (Response response = client.newCall(request).execute()) {
            return response.body().string();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

 

返回access-token

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer

拿着user攜帶access-token

 

    public GithubUser getUser(String accessToken) {
        OkHttpClient client = new OkHttpClient();

        Request request = new Request.Builder()
                .url("https://api.github.com/user?access_token=" + accessToken)
                .build();
        try {
            Response response = client.newCall(request).execute();
            String string = response.body().string();
            GithubUser githubUser = JSON.parseObject(string, GithubUser.class);
            return githubUser;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

 

返回user信息

String accessToken = githubProvider.getAccessToken(accessTokenDTO);
        GithubUser user = githubProvider.getUser(accessToken);
        System.out.println(user.getName() + " " + user.getBio());

配置properties

github.client.id=d91ecbf97a04759b945e
github.client.secret=749a87845bceadf74377271113392a9eb0a70
github.redirect.uri=http://localhost:8080/callback

 Value註解從配置文件中取得值

    @Value("${github.client.id}")
    private String clientId;
    @Value("${github.client.secret}")
    private String clientSecret;
    @Value("${github.redirect.uri}")
    private String redirectUri;

    @GetMapping("/callback")
    public String callback(@RequestParam(name = "code") String code,
                           @RequestParam(name = "state") String state,
                           HttpServletRequest request) {
        AccessTokenDTO accessTokenDTO = new AccessTokenDTO();

        accessTokenDTO.setCode(code);
        accessTokenDTO.setClient_id(clientId);
        accessTokenDTO.setClient_secret(clientSecret);
        accessTokenDTO.setRedirect_uri(redirectUri);
        accessTokenDTO.setState(state);

 

將代碼託管帶Github

idea使用git命令

把gitbash替換掉idea的默認的終端(cmd),那麼在idea上

ettings--->tools--->Terminal中的shell path 填上 :D:\Program Files\Git\bin\bash.exe

create a new repository on the command line

echo "# community" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/DD4399/community.git
git push -u origin master

第一步:初始化git倉庫:git init 
會出現Reinitialized existing Git repository in F:/community/.git/

第二步:git commit -m  "init repo"

輸入git status會有:
On branch master
nothing to commit, working tree clean


第三步:設置郵箱和用戶名
輸入命令:ls .git
                  vim .git/config

寫上user的name和email

git config --global user.email yaowang4.xxxxxx.com ===>>> 
設置用戶郵箱
git config --global user.name 01234567? ===>>> 
設置git的用戶名
git config --list? ===>>>? 查看設置內容

輸入這兩個命令:
git remote add origin https://github.com/DD4399/community.git
git push -u origin master

之後輸入自己的賬號和密碼即可上傳代碼

再次提交代碼:
1.git status查看沒有提交的狀態
2.git add .提交當前目錄所有文件,文件顏色會變成綠色
3.git commit -m "addreadme"
4.git push

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章