二阶段结束,正式开放!

前往原站点查看

2022-05-05 00:30:41

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

    今天,一个纯手搭的个人主页开放啦!

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

前端

nprogress加载进度条

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

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中加入如下代码:

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,可以自行依据开发环境和生产环境进行切换状态。

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

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

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

@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.asp\0\0jpg的文件,看特意构建的名字感觉应该是病毒吧!好家伙,不过还好被截止住了,不然大概对方就会得手了吧!所以现在加急把密码重设置了一下。


未来计划

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

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


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

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


结束分享啦,下一次又会是啥时候呢!





上一篇: 动漫页和仓库页初步完成
下一篇: 数据库的定期备份