创建项目
用Spring Boot starters快速创建一个项目
勾选Web
PS:我的IDEA每次创建springboot项目要把pom里的版本从2.2.4改成2.2.2才能跑起来...
<version>2.2.2.RELEASE</version>
当你的项目想集合一些组件时,这个网址有很多开源方案
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
使用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中
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://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