点击文件上传小图标可进入文件上传页面,点击Files链接可进入文件上传列表,显示内容如图:
从文件列表页面点击标题可进入文件预览页面,显示内容如下:
点击铃铛小图标可进入消息通知页面,内容如下:
点击个人头像可展开工具栏列表,内容如下:
点击工具栏上的设置按钮可以设置页面,内容如下:
个人信息设置
修改密码设置
需填写原密码,新密码,再次输入密码
点击Chatroom链接可进入聊天室,当然这个是用的websocket做的,内容如下:
加入房间和离开房间都有消息通知,如图
这个应用的开发我选择的是Adonisjs框架,他和PHP的Laravel有些像,Adonisjs是在操作系统上运行的Node.jsMVC框架。
接下来,来看看Adonisjs框架有哪些特性:
不管是开发环境还是生产环境,安装Adonisjs运行环境都是非常简单,先来看看开发环境的安装,生产环境后面会提到。
首先,我们的电脑上需要安装好Node.js大于8.00版本,管理Node.js可以使用nvm
其次,就可以使用npm安装AdonisCLI命令行工具(管理npm使用源可以使用nrm)
npmi-g@adonisjs/cli这样就可以在全局使用adonis命令
再次,可以是adonisnew命令创建项目
adonisnewadonis_pro在cd进入项目,执行adonisserve--dev运行项目
cdadonis_proadonisserve--dev这样您的开发环境就搭建完成。
RMVC就是路由、模型、视图、控制器。
创建一条路由非常简单,如
Route.get('liked/:userId/:postId','LikedController.liked')这条路由就是用来处理上面提到的点赞功能的
当然,Adonisjs提供了资源路由以便您更方便的创建路由,例如
我们可以去掉中间件和验证器,如下:
Route.resource('posts','PostController')这条资源路由,其实就包含了以下路由:
Route.get(url,closure)Route.post(url,closure)Route.put(url,closure)Route.patch(url,closure)Route.delete(url,closure)Adonisjs还提供了路由组和其他一些功能,路由组如下:
Route.group(()=>{Route.get('profile','ProfileController.edit').as('profile.edit')Route.post('profile','ProfileController.update').as('profile.update').validator('UpdateProfile')Route.get('password','PasswordController.edit').as('password.edit')Route.post('password','PasswordController.update').as('password.update').validator('UpdatePassword')}).prefix('settings').middleware(['auth'])使用.prefix和Route.group来创建路由组,这条路由组是处理个人信息设置功能的,这样访问页面是就统一要带上settings/**。
Adonisjs提供了命令行来创建控制器,如
'usestrict'classUserController{}module.exports=UserController当然,我们还可以使用--resource创建资源类型的控制器
adonismake:controllerPost--resource自动生成代码,代码如下:
'usestrict'classPostController{/***Showalistofallposts.*GETposts*/asyncindex({request,response,view}){}/***Renderaformtobeusedforcreatinganewposts.*GETposts/create*/asynccreate({request,response,view}){}/***Create/saveanewposts.*POSTposts*/asyncstore({request,response,view}){}/***Displayasingleposts.*GETposts/:id*/asyncshow({request,response,view}){}/***Renderaformtoupdateanexistingposts.*GETposts/:id/edit*/asyncedit({request,response,view}){}/***Updatepostsdetails.*PUTorPATCHposts/:id*/asyncupdate({request,response,view}){}/***Deleteapostswithid.*DELETEposts/:id*/asyncdestroy({params,request,response}){}}module.exports=PostController和上面的资源路由是对应的,如用GET请求访问posts就会调用index方法(一般用来显示),再如:用DELETE请求访问posts/1就会执行destroy方法(一般用来删除)。
Adonisjs提供了两种模式来处理数据,Querybuilder和LUCID
首先,我们可以通过adonismake:migration来创建数据表
adonismake:migrationusers会自动生成代码,如下:
'usestrict'constSchema=use('Schema')classUsersSchemaextendsSchema{up(){this.create('users',(table)=>{table.increments()table.timestamps()})}down(){this.drop('users')}}module.exports=UsersSchema这是我们只需在其中添加想要的字段就行,如:
'usestrict'constSchema=use('Schema')classUsersSchemaextendsSchema{up(){this.create('users',(table)=>{table.increments()table.string('username',80).notNullable().unique()table.string('email',254).notNullable().unique()table.string('password',60).notNullable()table.timestamps()})}down(){this.drop('users')}}module.exports=UsersSchema在执行adonismigration:run命令就可以在数据库生成数据表
再来看看,如何获取数据,可以使用Querybuilder和LUCID两种方式
先来看看Querybuilder:
constDatabase=use('Database')classUserController{asyncindex(request,response){returnawaitDatabase.table('users').where('username','admin').first()}}查询user表name是admin的用户
Adonisjs提供了非常多的方法去操作数据,不是特复杂的关系都够用,如果,关系比较复杂,还可以用原生的sql操作,如
再来看看,LUCID的模式是如何操作数据的:
使用LUCID模式,我们先需要用命令行工具创建Models,如:
adonismake:modelUser自动生成代码如下:
'usestrict'constModel=use('Model')classUserextendsModel{}module.exports=User模型和模型之间需要定义一些关系,如:
constModel=use('Model')classUserextendsModel{profile(){returnthis.hasOne('App/Models/Profile')}}module.exports=User意思是一个用户对应一个用户信息档案,一对一的关系
定义好关系之后,就可以方便的获取数据,如:
constUser=use('App/Models/User')constuser=awaitUser.find(1)constuserProfile=awaituser.profile().fetch()意思是,从用户表和用户个人信息表里获取用户id是1的用户信息及个人信息,
其中,关系可以定义为3种一对一、一对多、多对多,多对多需要定义中间表
再来看看,上面的应用中的实际应用,如:
Adonisjs框架里视图使用了edge模板,我们可以使用命令行工具创建视图文件,如:
adonismake:viewpost我看可以看下简单的例子:
最后,Adonisjs框架还提供了很多其它的实用工具,如:Middleware中间件、Validator验证器、ErrorHandling自定义异常、Events事件、Mails邮件、Websocket等来处理各种问题。
首先,我们需要用ssh连接到阿里云(或者其他服务器供应商)的主机上,安装一些必要的工具。
我们需要安装epel-release软件包仓库,epel-release里面有很多最新的软件包,如,之后安装的git就会用到
sudoyuminstallepel-release-y安装Git版本控制命令行工具sudoyuminstallgit-y准备Node.js运行环境接下来,我们需要安装Node.js以便我们的Node.js项目能够跑起来,我们可以使用nvm安装和管理Node.js,使用nrm来管理切换安装源。
vi~/.bash_profile加入以下代码:
exportNVM_DIR="$HOME/.nvm"[-s"$NVM_DIR/nvm.sh"]&&\."$NVM_DIR/nvm.sh"[-s"$NVM_DIR/bash_completion"]&&\."$NVM_DIR/bash_completion"然后,在source~/.bash_profile刷新下配置文件,让它生效
source~/.bash_profile此时,我们就可以使用nvm来安装Node.js
nvminstallnode安装好后,可以使用nvmlist来查看有哪些版本可以使用
nvmlist结果:
->v10.13.0v11.2.0systemdefault->v10.13.0node->stable(->v11.2.0)(default)stable->11.2(->v11.2.0)(default)iojs->N/A(default)lts/*->lts/dubnium(->v10.13.0)lts/argon->v4.9.1(->N/A)lts/boron->v6.14.4(->N/A)lts/carbon->v8.13.0(->N/A)lts/dubnium->v10.13.0我使用的是v10.13.0的版本,默认安装的都是比较新的版本,可能是v11.2.0或v11.1.0,所以我们也可以用nvminstallv10.13.0来安装指定版本。
nvminstallv10.13.0然后,就可以使用nvmusev10.13.0来使用指定版本
nvmusenvmv10.13.0结果:
安装nrm
npminstallnrm--global切换到taobao源
nrmusetaobao准备项目以上工作完成之后,我们的服务器就可以正常运行Node.js项目,现在我们需要把本地的项目上传到服务器,上传方法有很多,如:
发项目文件上传到服务器的指定目录下,如:www
接下来,我们可以是PM2来管理Node进程,先需要安装PM2
npminstallpm2@latest--global这些工作作为之后,就可以来测试一下,启动项目,在本地访问服务器IP:PORT来测试是否可以访问
在测试之前,我们需要改下应用的配置文件,adonisjs框架里是.env文件,修改下HOST的值:
HOST=0.0.0.0PORT=3333...HOST默认是127.0.0.1,需要改成0.0.0.0这样就可以在自己电脑上用服务器IP:PORT来访问应用
改完后,进入到项目的根目录,运行应用,adonisjs的启动文件是server.js,如:
pm2startserver.js如启动成功会提示:
[PM2]ApplyingactionrestartProcessIdonapp[server](ids:0)[PM2][server](0)[PM2]Processsuccessfullystarted┌──────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬──────────┬──────┬──────────┐│Appname│id│version│mode│pid│status│restart│uptime│cpu│mem│user│watching│├──────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼──────────┼──────┼──────────┤│server│0│4.1.0│fork│7171│online│30│0s│0%│3.4MB│root│disabled│└──────────┴────┴─────────┴──────┴──────┴────────┴─────────┴────────┴─────┴──────────┴──────┴──────────┘Use`pm2show
为了让服务器更好地处理网络请求,我们需要添加使用Nginx反向代理把请求转发给Node.js应用
sudoyuminstallnginx-y如果你的服务之前安装过可不用安装,我的阿里云服务器运行了4个站点之前安装过,之后我只需添加配置就行。
sudosystemctlstartnginx配置Nginx一般情况Nginx安装好后会有/etc/nginx/conf.d目录,进入这个目录,创建一个配置文件为Node.js而准备,名字可随意命名,如:adonis.conf
include/etc/nginx/conf.d/*.conf;因为,我的主机里运行了4个站点,*的意思就是加载这个目录下的所有配置文件
然后,记得把刚才项目里的.env配置文件改成127.0.0.1,因为我们现在使用了代理,网络请求交给了Nginx