[入门] 全栈开发一个聊天网站
发布于 7 年前 作者 DoubleCG 6428 次浏览 最后一次编辑是 6 年前 来自 分享

起始时间:2017年8月1日 在这里分享一下,相互学习. Github: https://github.com/DoubleCG/SEA-IM Website:http://zfcheng.top:70 账号:z00000 至 z00009,密码:111111。自己注册也可以。

欢迎提问题,仅限于火狐和google浏览器测试,目前低兼容移动端。

18 回复

后台用的node吗

来自酷炫的 CNodeMD

技术栈: mongodb(Mongoose) node(Express) socket.io Vue.js js(jquery) css(bootstrap) html(ejs)

个人认为,作为新手,不要急于追求新东西,把前辈们用的稳定的东西掌握好,也能很有收获. 我写js是在火狐上跑,写到一半,main.js就已经有1100行了,之后为了方便和兼容才用jquery重写了一遍,写成700行,顺便又学习了jquery. http://jquery.cuishifeng.cn/ http://www.runoob.com/jquery/jquery-tutorial.html

在之后,发现css并不是很好管理,就用了less重写一遍,学习了less,把不够100行的css文件内容放在了对应的ejs里.所以现在dev里的css只剩下一个main.less了. http://www.bootcss.com/p/lesscss/

最后才用gulp构建出dist,学习了gulp.但是现在我知道gulp和less在没开始写的时候就应该准备好了.有必要的话,jquery和bootstrap都是要这样. http://www.gulpjs.com.cn/docs/getting-started/ https://www.kancloud.cn/thinkphp/gulp-guide/43995

2017年的10月,回到学校被安排实习,拖了一些时间,期间用Vue.js全面重写了一遍,修改界面风格等等.

服务器是阿里云的ESC ubuntu 16. nginx端口转发. pm2开启服务. 可以参考我之前写的博文:http://39.108.154.125:70/chapters/work_talk/nginx.html

借楼分享下我的聊天室: https://fiora.suisuijiang.com 欢迎多多交流开发心得 web只能实现页面内截图, 比较蛋疼, 所以我只支持了粘贴发图, 截图交给系统或者其它软件 我也是阿里云ubuntu, 连续几个月稳定运行, 所以很可能是你代码中有什么异常情况没处理到

@yinxin630 你是用 forever start 吗?

@yinxin630 厉害了,学习了

ejs 同名策略和传参调用:

ejs做为模板,调用的一个js脚本应该要是同样的名字,而这个js脚本应该有一个主函数,这个主函数应该也要是同样的名字.

为什么要这么做? 举一个例子:

有一个模板:something.ejs 其中这个模板有几行是这样的:

<script src=‘js/something.js’></script> <script> var data = ‘<%=data_from_node%>’ //传参调用: something(data); </script>

而这个something.js有一个主函数是这样的:

function something(data){ … }

所以无论是ejs,js还是js里面的主函数,都是同一个名字,这样在系统越来越复杂的时候,提高的效率是越来越明显的.

再者:有一个最大的好处:解决文件合并时的作用域问题,都知道每一次请求会产生额外开销,所以才需要gulp-concat模块. 只要你的ejs模板不重名,那么对应的主函数就不可能重名,那么就不存在作用域重名的问题了.

假如把dev/public/js中 的aa.js, bb.js , cc.js 都合并在dist/public/js/index.js

那么不论哪个ejs模板调用的都是index.js,且不会有任何问题.

所以同名策略的好处有: 1.提高效率 2.解决js文件合并的作用域重名问题

另外要说的是传参调用: 有时候会出现这种情况:后台传入数据比较复杂,需要经过复杂的渲染. 传参调用就是一个很好的解决方案了.

这是这个项目中main.ejs出现的几行:

var username = ‘<%=username%>’, user_info = ‘<%= user_info%>’, star = ‘<%=star%>’, stars = star.split(’,’), mess = ‘<%=mess%>’, tmess = ‘<%=tmess%>’; main(username,user_info,mess,stars,tmess);

main对这些数据进行DOM操作.

以上只是一点经验,还是多看书吧.

学习下 话说毕业设计不是做了就毕业了吗 怎么还会有暑假

@allen2001 提前做的,开学大四了.

这一层专放我觉得不错的方法: Node端测试函数:

function check(obj,n){ console.log(’’); console.log(‘Check:’+n||’’); console.log(‘Content:’) console.log(obj); console.log(‘Type:’+ typeof obj); if(Array.isArray(obj)){ console.log(‘It is array,length is ‘+obj.length); } if(typeof(obj) === ‘string’){ console.log(‘Length:’ + obj.length); } console.log(’’); }

扩展原生JS数组pull方法:删除数组内某个指定元素.

Array.prototype.pull = function(o){ for(let i in this){ if(this[i] === o){ this.splice(i,1); } } return this; }

原生Ajax封装:

function postChange(url,data,callback){ var J_data = JSON.stringify(data); var xmlhttp = new XMLHttpRequest(); xmlhttp.open(‘POST’,url,true); xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); xmlhttp.send(‘J_data=’+J_data); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState===4&&xmlhttp.status===200){ var data = JSON.parse(xmlhttp.responseText); callback(data); } } }

欢迎任何人提出宝贵意见,欢迎指出问题. 更多函数在项目中的:dev/public/js/lib.js.

代码下载学习中。。下载的时候速度有点慢,发现是有 node_modules文件夹,一点小的建议,加个.gitignore文件过滤掉。

@pengliheng 根本不是一样的东西

不是很了解graohql,我只能建议你学好英语和去精通JS,其它都是浮云...

@pengliheng 学好英语就可以去掌握第一手资料了^ ^

@lumeng689 添加了,谢谢您的提议.

添加.gitignore 后,由于github端的node_modules也没有了,阿里云服务器端更新时会删除原有的node_modules; 此时可以根据node的递归向上查找node_modules这一条原则,将node_modules移动到上一级目录,即: cd seanet mv seanet/node_modules …/node_modules 这样就不会每次更新服务器端都要执行npm install了.

回到顶部