在github上新增ssh
1 | rm -rf ~/.ssh/* |
基础信息配置
$ git config --global user.name 你的英文名
$ git config --global user.email 你的邮箱
$ git config --global push.default matching
$ git config --global core.quotepath false
$ git config --global core.editor "vim"
1 | $ rm -rf ~/.ssh/* |
$ git config --global user.name 你的英文名
$ git config --global user.email 你的邮箱
$ git config --global push.default matching
$ git config --global core.quotepath false
$ git config --global core.editor "vim"
AutoPrefixUrlMapping.java
1 | public class AutoPrefixUrlMapping extends RequestMappingHandlerMapping { |
AutoPrefixConfiguration.java
1 |
|
1 | api-package: com.example.demo |
1 | @RestController |
最近接到一个项目,有这样一个需求,需要对部分文件的下载与预览增加权限控制,只允许会员用户使用,找了一些资料之后最后决定使用Nginx配合Java服务来实现这个功能。
只针对一些业务文件采用此方式,网页中的静态文件尽量不要使用这种方法,以免增加服务器的负担

配置中使用Nginx开启了一个端口为8086的文件服务器,配置中增加了internal属性,表示文件只允许内部访问。在接收到请求后代理转发给了端口为8080的Java权限认证服务。
这些基本上就是Nginx的全部配置了,不是很复杂,配置完成之后记得重启,确保生效。

后台使用SpringBoot搭建服务,在认证通过之后通过设置ResponseHeader通知Nginx是否返回请求的文件。
更多的header介绍三个主要的header
如何区分开发环境与生成环境
上一章讲了开发环境`devtool`的使用,但是官方推荐不同的环境使用不同的配置,那么怎么来区分当前运行的是什么环境呢,这次讲一下这个。1 | $ yarn add -D webpack-merge |
增加config文件夹,将webpack.config.js文件移动到里面,保留基础配置,删除mode和devtool属性
在config文件夹中增加webpack.conf.dev.js,写入以下内容
1 | const merge = require('webpack-merge'); |
修改package.json
1 | "scripts": { |
执行 yarn start
不同的环境创建不同的webpack.conf.xxx.js即可
注意修改webconfig.conf.js中的文件引用路径,因为它的位置改变了
静态资源的引入
上一章中已经搭建好开发环境,下面开始逐渐丰富项目的内容,本章是静态资源的引入。webpack默认是只认识JavaScript的,只知道该怎么处理它,如果项目中出现了其他类型的文件,并且也希望webpack对它进行打包的时候,就要安装对应的loader了。
loader是什么,下面内容源自webpack中文网站
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
1 | $ yarn add css-loader style-loader -D |
在src文件夹中创建第一个css文件,命名为index.css
1 | .hello{ |
修改index.ts文件

修改webpack.config.js
1 | module: { |
file-loader用于引入图片文件
1 | $ yarn add file-loader -D |
修改index.ts文件,并在src文件夹内增加一张png图片
1 | import img from "./index.png" |
修改webpack.config.js
1
2
3
4
5
6
7
8module: {
rules: [
+{
+ test: /\.(png|jpe?g|gif)$/i,
+ use:['file-loader'],
+},
],
},
关于css和image的配置就是这些了,现在运行启动命令就可以看到网页上的字已经是红色了,并且添加了一张图片
使用typescript与webpack搭建开发环境
1 | $ yarn init -y |
本文全部使用yarn命令,没有安装的可以执行下面使用npm安装
1 | $ npm i -g yarn |

将上面内容拷贝到项目中的package.json文件中,执行安装命令
1 | $ yarn install |
1 | $ tsc --init |
如果出现tsc不是正常的命令错误提示 可在命令前面添加
npx然后在执行
执行成功之后修改tsconfig,写入以下内容

更多配置选项可参考官方文档
在项目根目录下增加webpack.config.js,内容如下

更多配置选项可参考官方文档
到这里项目的配置项基本已经全部完成了,下面开始写代码
在项目目录增加src文件夹,并创建第一个文件index.ts,内容如下
完成之后运行一下项目,验证一下
项目启动有两种方式,一种是直接在终端中输入webpack serve来启动或者使用yarn命令启动,我们使用第二种方式。
首先配置yarn的启动脚本
在package.json中增加以下代码
1 | "scripts": { |
下面我们就可以在终端中直接输入yarn start来启动项目了,执行之后会看到以下提示
项目顺利启动,并在本地启动了一个端口为8080的服务,我们可以直接在浏览器中那个访问
http://localhost:8080/

获取源码点击这里

如果想要使用Github为应用授权的话,要先去自己的账户上注册一个应用,点击注册。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xl0CN1FD-1629897178733)(https://imgblog.csdnimg.cn/99253549a82d43258425957b20d75b21.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBAeHjlsI_lj7Dnga8=,size_54,color_FFFFFF,t_70,g_se,x_16)]](https://img-blog.csdnimg.cn/37197da007f540dfb6a3bf153261ec8e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBAeHjlsI_lj7Dnga8=,size_49,color_FFFFFF,t_70,g_se,x_16)
名称随便输入,写上自己网站的主页,最后一个是授权成功之后回调的页面。
创建成功之后会看到这个

点一下Generate a new client secret会生成一个秘钥,只会出现一次,要保存好它,不要泄露出去。后面会用到的。
下面开始写代码了,只是做一个简单的示例,没有特别复杂的。就是文档顶部的四种类型。图片是在iconfont找到,这个不做过多描述了。
1 |
|
当点击Github图标之后会调用这个方法,跳转到授权页面,上面那个用到两个参数
client_id,千万不要把secret放在前端,不能暴露出来的 调用方法之后会跳转到这个页面,输入账号密码登录就可以了。
密码验证成功之后会跳转到http://localhost/me.html?code=ffwgregregregre,记住这个code,后面会用到的。
在授权页面授权成功之后,会得到一个授权码,就是上面的code,拿到这个去后台服务获取用户信息。
要获取到用户信息首页要使用授权码得到一个令牌,使用这个令牌向Github请求用户信息。
1 | @GetMapping("github/{code}") |
GithubTokenResponse
1 | public class GithubTokenResponse { |
1 | <body> |
1 |
|
Gitee和Github基本是一样的,也是要先注册一个应用,地址在这里,不过多描述了,直接上代码。
1 |
|
与Github一致
Email实现的思路大致就是,输入邮箱之后,后台会向邮箱发送一个链接,通过这个链接激活账户。
1 | <body> |
1 | <script> |
1 |
|
1 | @GetMapping("/email/{code}") |
1 | <body> |
1 | let code = getQueryVariable("code"); |
这里微信登录是使用小程序实现的,个人是无法申请微信登录的。
项目中使用到的工具
1 | <dependency> |
java环境1 | 链接:https://pan.baidu.com/s/1o-wFA-m33JQs-sQJ-DgRaQ |
下载到服务器之后解压到指定位置
1 |
|
写入下面的内容
1 | export JAVA_HOME=/usr/java/jdk1.8.0_301 |
保存退出
执行source /etc/profile使配置文件生效。
验证是否安装成功
1 | $ java -version |
看到这个就表示安装成功了。
maven1 | $ mkdir /usr/mvn |
写入下面内容
1 | export MAVEN_HOME=/usr/mvn/apache-maven-3.8.1 |
保存退出
执行source /etc/profile使配置文件生效。
验证是否安装成功
1 | $ mvn -version |
1 | $ yum install git gpg -y |
如果已经安装可以跳过这步
sonatype账号点击 注册一个新的账户。
登录之后新建一个issues

按要求填写就可以了,主要说一个Group Id
如果你的代码时托管在Github上的,那么写Group Id的时候就不能写
com.github.xxx了,我使用io开头,详情在这里
创建完成之后会跳转到这个连接https://issues.sonatype.org/browse/OSSRH-xxxx,当看到这个连接之后,你要在你的Github上创建一个仓库,来证明你是这个Github的主人,仓库的名字就是连接里的OSSRH-xxxx。
创建后的仓库连接为https://github.com/yourgithubname/OSSRH-xxxx,然后在帖子下面留言告诉管理员这个仓库你已经创建好了名字为OSSRH-xxxx的仓库,这样可以省去他让你证明你是这个账户的拥有者,提高效率。等到管理员回复之后就可以上传jar包了。
下面是管理员的回复,看到这个就表示完成了。
1 | io.github.xxx has been prepared, now user(s) youname can: |
pom文件1 |
|
只需修改和自己相关的内容即可,文中用xxxx表示,其他的不需要修改
Group Id一定要和申请的保持一致
gpg key1 | $ gpg generate-key |
1 | $ gpg --keyserver hkp://keyserver.ubuntu.com:11371 --send-keys 6107DF0A8EE6A62EABFDD12914F722543E7D2C1E |
返回结果
1 | gpg: 将密钥‘14F722543E7D2C1E’上传到 hkp://keyserver.ubuntu.com:11371 |
验证是否上传成功
1 | $ gpg --keyserver hkp://keyserver.ubuntu.com:11371 --recv-keys 6107DF0A8EE6A62EABFDD12914F722543E7D2C1E |
返回结果
1 | gpg: 密钥 14F722543E7D2C1E:“houbb <XXX@XX.com>”未改变 |
setting.xml1 | <?xml version="1.0" encoding="UTF-8"?> |
注意判断mvn使用的setting.xml是哪里的,一般在mvn主目录下的conf文件夹和用户目录下的.m2文件夹
在项目根目录下执行
1 | $ mvn clean deploy |
稍等片刻会出现一个窗口,输入gpg的密码

看到这个表示已经上传成功了。
上传成功之后登录到https://s01.oss.sonatype.org/,账号就是一开始注册的sonatype账号。
登录之后会点击Staging Repositories会看到这个页面,选中记录点击close,成功之后点击Release。
到这步就已经大功告成了,稍等片刻就可以在这里看到上传的包了
比如 Group Id是io.github.xxx
artifactId是tool
version是1.0.0,
查看地址就是https://repo.maven.apache.org/maven2/io/github/xxx/tool/1.0.0
如果上面这个连接可以查到,就已经可以在项目中使用了。同步到中央仓库的时间不太确定。
发布成功之后去帖子上回复一下,告诉管理员发布成功了。

执行mvn deploy的时候总是返回401 错误,找了各种办法都不能解决,重新注册了个账户就可以了,不知道是为什么。
repository地址已经改变了,现在网上大部分的文章都是旧的,新的是这样的
1 | <distributionManagement> |
官方文档有最新的配置信息,遇到问题之后还是要先查官方文档
在centos发布时报错Failed to execute goal org.apache.maven.plugins:maven-gpg-plugin:1.6:sign
点击 从官网选择自己适合自己操作系统的安装包,下载完成之后放到一个合适的位置,无需要安装。
进入nexus-3.30.0-01\bin目录下,输入cmd
在命令行中输入nexus /run,稍等片刻
提示8081端口已经被占用,原来nexus默认使用的端口是8081,关闭正在使用的8081端口之后,在此运行命令稍等片刻启动成功。
启动成功之在浏览器打开http://localhost:8081/,
初始化完成之后点击Sign in登陆,默认账户是admin,初始密码在nexus-3.30.0-01-win64\sonatype-work\nexus3目录下的admin.password文件中,复制到登陆表单中完成登陆,成功之后会提示重新设置密码,设置一个自己常用的密码即可。
输入两个必选项
aliyun
http://maven.aliyun.com/nexus/content/groups/public/
保存完成
选择Configuration > Repository, 然后双击 maven-public
把aliyun移动到右侧 保存。
找到maven中的setting.xml,在servers标签中
写入下面的配置
1 | <server> |
password是自己设置的登陆密码
1 | <distributionManagement> |
双击即可
在pom文件中加入下面的配置
1 | <repositories> |