二阶段结束，正式开放！

经过漫长的等待，这一天终于来啦！正式上线的第一个版本！

今天，一个纯手搭的个人主页开放啦！

先抑制住高兴的心情，看看这第二阶段结尾做的一些功能实现吧！

前端

nprogress加载进度条

前端导入了nprogress组件，会在路由进入每个页面之前显示加载条，进入之后关闭加载条。使用起来也很简单，只需要在router加入如下的代码即可实现！

代码语言：javascript复制

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  nprogress.start()
  next()
})

router.afterEach(() => {
  nprogress.done()
})

webpack-analyzer包分析

前端导入了该组件，用于包分析，查看哪些模块占用体积大，因为服务器本身带宽一般，只有5Mb/s，要从服务器下载网站资源，如果过大就会访问过慢，带来很不好的体验。所以打算通过这个来分析并解决一些性能问题，尤其是首页加载过慢的问题。需要在vue.config.js的exports中加入如下代码：

代码语言：javascript复制

chainWebpack: config => {
    config.plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}

通过这个配置后，会打开8888端口，通过该端口页面，可以查看是哪些资源占用过大。好家伙，结果发现echarts占用将近4M!!!原因之一是当时引入的时候直接import全部资源了，后来按需导入后，减少到了2M左右，还是很大，以后可能会考虑自己使用canvas画图标吧，这玩意儿虽然方便，但是太大了。还有两个资源占用也大，一个是highlightjs占用了1M约莫，wangeditor占用也是1M约莫。这样的大小以后估计看板娘也不会采用了吧，除非使用cdn。目前来看网站全部加载完成大概需要5s，主要原因还有一些图片、字体以及光标的静态资源占用也不少，尤其是这高清的背景。。

首页加载提示

既然目前首页加载慢还没有彻底解决，那么肯定是要有一个替代的解决方案的，于是乎，在index.html中后续vue挂在的#app节点内实现了加载提示的代码，当vue挂在后，这些内容自然也会被删除，所以实现了在挂在前起到提示的作用。

后端

ssl设置

铛铛铛！我的网站也加入ssl证书啦！从今天开始也可以像其他网站一样更加正规了！那么加入ssl证书呢？

第一步，就是从相应的服务器获取jks文件和证书密码了，然后将证书放在相应位置（如classpath下），并且springboot进行如下的配置keystore,其中password就是派发的证书的密码，默认情况下server.ssl.enabled是true，可以自行依据开发环境和生产环境进行切换状态。

代码语言：javascript复制

server:
  ssl:
    key-store: classpath:xxx.jks
    key-store-type: JKS
    key-store-password: *****

第二步，当然只配置了如上代码是不够的，之后server.port需要设置协议的端口号，设置成443，之后https就不许要特定指定端口号了。

第三步，完成了端口的设置，那么当然原来的80端口也是需要存在的，并且建议自动跳转到https下。需要在配置类（可以在启动类中）加入如下代码：

代码语言：javascript复制

@Value("${dreamcenter.server-port:80}")
private Integer serverPort;

@Value("${server.ssl.enabled:true}")
private Boolean sslEnabled;

@Bean
public ServletWebServerFactory servletContainer() {　　　　// ssl关闭时，不采用自动跳转443端口，而是只添加配置的端口号dreamcenter.server-port，默认80
	if (!sslEnabled) {
		TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
		tomcat.addAdditionalTomcatConnectors(createHTTPConnector());
		return tomcat;
	}　　　　// ssl打开时，采用非443端口跳转到443的策略
	TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory(){
		@Override
		protected void postProcessContext(Context context) {
			SecurityConstraint constraint = new SecurityConstraint();
			constraint.setUserConstraint("CONFIDENTIAL"); // 只允许ssl，否则采用3xx跳转；INTEGRAL类似；NONE则不加限制
			SecurityCollection collection = new SecurityCollection();
			collection.addPattern("/*"); // 受控的URL资源
			constraint.addCollection(collection);
			context.addConstraint(constraint);
		}
	};
	tomcat.addAdditionalTomcatConnectors(createHTTPConnector());
	return tomcat;
}
private Connector createHTTPConnector() {
	Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
	connector.setScheme("http");
	connector.setSecure(false);
	connector.setPort(serverPort);
	connector.setRedirectPort(443); // 约束成立后，访问serverPort会跳转到443端口号
	return connector;
}

为了实现充分的自定义，所以我这里可以自己设定开启还是关闭ssl，从而达到不同的需求。

密码增强

之前后台密码就是123456没多想，结果不久后日志记录就发现有人试图上传一个wqb.aspjpg的文件，看特意构建的名字感觉应该是病毒吧！好家伙，不过还好被截止住了，不然大概对方就会得手了吧！所以现在加急把密码重设置了一下。

未来计划

那么说完了目前阶段已经完成的内容，接下来就要说说未来的更新计划了

前端页面的人机交互优化（比如博客页进入一个博客返回时回到对应page，而不是从第一页重新开始）
页面数据请求量的优化，现在的请求是没有加入暂存于域中的，所以如果不断刷新一个页面，那么也会不断发送请求，对于博客页等实时性需求不高的但是数据量大的请求，需要优化，存到可用域中。
首页仍然需要进一步的优化以实现更快的加载速度，要是能够1s之内就再好不过了。不过应该也很难吧。
博客页来个按tag检索功能，算是功能需求吧！
动态页来个一键回到顶部的小按钮，也是小功能的需求，以后肯定是要用到哒！
提高SEO,百度能不能收录我.ing
定时任务（备份redis和mysql，非常重要！）
对于删除的图片，也要定期的清理图床和本地文件，从而减轻占用，当然“我都要”也是可行的，不过为以后无效文件过多的问题提前做好准备吧！
后台页面稍微优化一下设计
数据请求时的加载条设计
扩充友链圈
......

以上就是这次的分享啦！能够开放，真的非常开心，决定放假七天！（这段事件估计会被打扰改别人的课设吧emmm，不过无所谓啦，开心就好！）

嘿咻嘿咻，当然，这个项目在github上也有上传哒，点这里

结束分享啦，下一次又会是啥时候呢！

SSL证书 vue.js 网站 https 网络安全

0 人点赞