Alice 上线小记

栏目: JavaScript · 发布时间: 4年前

内容简介:特此分享,一起爬坑。原来的登录页采用的是黑背景,经过大家的充分讨论,我们需要换一个登录页,黑背景看着压抑。

引言

Alice 学生管理系统昨日正式上线测试,上线遇到的问题不少,但最后都完美解决了。

特此分享,一起爬坑。

项目优化

登录页美化

原来的登录页采用的是黑背景,经过大家的充分讨论,我们需要换一个登录页,黑背景看着压抑。

然后就在晨澍和潘佳琦的帮助下开始找各种登录的模板,发现都特别丑,后来发现当前系统的登录风格和微信的登录风格很像,顺手就抄过来了,感觉效果还不错。

Alice 上线小记

Alice 上线小记

上线问题

打包问题

前台 ng build --prod 之后,发现样式不一致。

期待:

Alice 上线小记

实际结果:

Alice 上线小记

查看元素发现是 Bootstrap 的样式在打包之后没有了。

后来发现: 黄庭祥style.less 中引用了一个在线的 Bootstrap ,打包肯定打不进去啊。

Alice 上线小记

引用的所有包,都不能引在线的,需要使用 npm 安装。 npm install 之后的包才能被打包进去。

远程文件拷贝

本地打完包,需要将文件上传到服务器,查了一下,需要使用 scp 命令。

scpsecure copy ,安全拷贝,将文件加密传输,安全的远程文件拷贝命令。

scp -r /Users/panjie/github/yunzhiclub/alice/web/webApp/dist/webApp root@xxx.xxx.xxx.xxx:/root/

将本地打包的 webApp 目录上传到服务器的 /root 目录下。

-r 代表目录, xxx.xxx.xxx.xxx 请替换成相应的服务器 IP 地址。

nginx 403

前台上线,浏览器端访问服务器却得到了 403 ,查看相关日志后发现是 nginx 访问文件时遭到了拒绝。

nginx 的配置文件中,有一行配置用户的。

原配置是 user nginx; ,所以启动时 nginx 进程的用户是 nginx ,但是 webApp 文件的用户所有者是 root ,所以就 403 了。

解决方案是把用户配置改成 root (有权限的用户),然后重新加载配置文件即可。

Alice 上线小记

刷新 404 问题

当用户访问 127.0.0.1:8100 时,根据路由的重定向, '' 重定向为 'setup' 登录界面。

但是用户刷新或直接访问 127.0.0.1:8100/setup 时,报 404 错误。

猜想, nginx 转发出现了问题,应该是 / 转给了 Angular ,但是把 /setup 当成了文件夹。

这个只是我的猜测,如果您有什么意见,欢迎在评论区中指出我的错误,感激不尽。

华软就没有该类问题,对比两个项目,发现华软中默认配置了 hash 路由。

hash 路由

特意去官网学习了一下 hash 路由,感觉应该能给大家讲明白。

两个路由:

127.0.0.1:8100/setup
127.0.0.1:8100/#/setup

普通的路由是不带 # 的, hash 路由是带 # 的。

# 号,我们是不是在哪里见过?大家还记得 Spring 的官方文档吗?

Alice 上线小记

a 标签实现页面内跳转。 hash 路由与之类似。

# 之后的路由变化不会被发送给服务器,也就是说: 127.0.0.1:8100/setup ,后台 nginx 获取到的路径是 /setup ,而使用 hash 路由,对于路由 127.0.0.1:8100/#/setup ,后台获取到的路径就是 /

Alice 上线小记

注入 hash 路由策略,即可启用 hash 路由。

再访问,后台获取到的就是 / ,然后把 angular 应用返回回来,然后 angular 应用再去处理 # 之后的路由,不会出现 404

以上的论述,是我结合官方文档和我的经验得出的解决,如果有不正确之处,欢迎您批评指正。

不足

当时忙着上线, ng alain 中默认也启用了 hash 路由,就以为 hash 路由是正统的解决方案。

但是今天看官方文档,却看到了这样的描述:

几乎所有的 Angular 项目都会使用默认的 HTML 5 风格。它生成的 URL 更易于被用户理解,它也为将来做服务端渲染预留了空间。

在服务器端渲染指定的页面,是一项可以在该应用首次加载时大幅提升响应速度的技术。那些原本需要十秒甚至更长时间加载的应用,可以预先在服务端渲染好,并在少于一秒的时间内完整呈现在用户的设备上。

默认的路由(不带 # )的,支持服务器端渲染,而 hash 路由则不支持。除非你有强烈的理由不得不使用 hash 路由,否则就应该坚决使用默认的 HTML 5 路由风格。

hash 路由不推荐,不支持 SSR 另外,我觉得应该是当前 nginx 的转发配置写得不好,以后再研究研究。

总结

对技术怀着一颗敬畏之心,努力地寻找着最佳实践。


以上所述就是小编给大家介绍的《Alice 上线小记》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

500 Lines or Less

500 Lines or Less

Amy Brown、Michael DiBernardo / 2016-6-28 / USD 35.00

This book provides you with the chance to study how 26 experienced programmers think when they are building something new. The programs you will read about in this book were all written from scratch t......一起来看看 《500 Lines or Less》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具