资讯专栏INFORMATION COLUMN

Alice 上线小记

felix0913 / 2553人阅读

摘要:引言学生管理系统昨日正式上线测试,上线遇到的问题不少,但最后都完美解决了。前台上线,浏览器端访问服务器却得到了,查看相关日志后发现是访问文件时遭到了拒绝。不足当时忙着上线,中默认也启用了路由,就以为路由是正统的解决方案。

引言

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

特此分享,一起爬坑。

项目优化 登录页美化

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

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

上线问题 打包问题

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

期待:

实际结果:

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

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

引用的所有包,都不能引在线的,需要使用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(有权限的用户),然后重新加载配置文件即可。

刷新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的官方文档吗?

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

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

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

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

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

不足

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

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

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/8105.html

相关文章

  • 微信公众号开发小记——5.python微信红包

    摘要:微信各个服务是独立的,比较蛋疼,要用红包功能,首先你需要注册一个微信商户平台账号。首先是微信证书,用的是,与这两个。写在最后微信开发者工具挺好用的,服务号里把自己加为开发者就能用了。 描述 有时候产品有这么一些需求,当用户满足一定条件时,给他发一定金额的红包。 微信各个服务是独立的,比较蛋疼,要用红包功能,首先你需要注册一个微信商户平台账号。 代码位置 分支pay-20160802 微...

    JerryZou 评论0 收藏0
  • 微信公众号开发小记——4.两种邀请用户的方式 扫码&&链接

    摘要:借着这个需求体会了下微信开发的两种不同类型非端口的两种开发,以及的一些正确姿势。关于用户微信登录的事情我们通过已经解决了参考我的上一篇博客微信公众号开发小记接入三方登录,所以可以直接用的装饰器完成这种事情。 描述 假设的我们的服务号有这么一些功能,比如底部有按钮,点击会有一些复杂的功能,这时候可能就需要一个用户系统,有用户系统就经常想要做什么分享邀请新用户之类的,这时候就又有几种方式,...

    BDEEFE 评论0 收藏0
  • async语法升级踩坑小记

    摘要:普通的回调函数调用执行后续逻辑使用了以后的复杂逻辑获取到正确的结果输出两个文件拼接后的内容虽说解决了的问题,不会出现一个函数前边有二三十个空格的缩进。所以直接使用关键字替换原有的普通回调函数即可。 从今年过完年回来,三月份开始,就一直在做重构相关的事情。 就在今天刚刚上线了最新一次的重构代码,希望高峰期安好,接近半年的Node.js代码重构。 包含从callback+async.w...

    VioletJack 评论0 收藏0
  • 比特币的交易(一)

    摘要:在比特币白皮书中,有三段话很关键的话,解释了交易是什么。电子货币从所有者转移给下一个人是通过,所有者使用私钥,对交易和下一个人的公钥进行数字签名,并将数字签名附在这枚电子货币数字签名链的后面。 在比特币白皮书中,有三段话很关键的话,解释了交易 Transactions 是什么。 虽然数字签名(Digital signatures)部分解决了电子现金系统的问题,但是仍然需要第三方的支持...

    Blackjun 评论0 收藏0
  • Python之路--python基础2

    摘要:内容列表元组操作字符串操作字典操作集合操作文件操作字符编码与转码内置函数在中,最基本的数据结构是序列。序列中的每个元素被分配一个序号即元素的位置,也称为索引。空字典不包括任何项由两个大括号组成。 day2内容1、列表、元组操作2、字符串操作3、字典操作4、集合操作5、文件操作6、字符编码与转码7、内置函数 在Python中,最基本的数据结构是序列(sequence)。序列中的每个元素被...

    Binguner 评论0 收藏0

发表评论

0条评论

felix0913

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<