代码拉取完成,页面将自动刷新
1.首先通过express生成器生成一个简单的项目
目前的项目是这样的
---- bin //检测和启动
---- node_modules //第三方的插件
---- public //我的静态资源
---- routes //我的路由
---- views //我的模板文件
app.js //启动文件
package.json json文件
2.我想让我的项目能和angular一起用,这个时候我需要下载下jquery和angular两个插件
npm install jquery --save
npm install angular --save
最后我把jquery和angular的核心的文件放到public里面去.
3.可能里面会用到一些UI框架,这里可以创建一个文件夹plugin,将bootstrap放到里面去.
npm install bootstrap --save => plugin文件夹
4.创建models文件,所有的关于数据库的操作我们都需要放在里面
5.创建settings.js文件,将系统的相关配置写在settings里面
最终它的项目结构变成了:
---- bin //检测和启动
---- models //数据库操作类
---- db //整合前台和后台操作类的封装函数.
----- webFun 所有前台操作的封装函数
----- adminFun 所有后台操作的封装函数
---- node_modules //第三方的插件
---- public //我的静态资源
---- image //常用的图片
---- javascript //常用的JS文件
---- plugins //常用的插件文件
---- upload //下载的文件
---- routes //我的路由
---- views //我的模板文件
---- manage //后台模板
---- web //前台模板
app.js //启动文件
package.json json文件
setting.js 系统配置文件
-----------------------------------------------------------------------------------------------------------
1.打开routes文件里面的index.js,我们开始设计我们的首页路由访问
router.get('/',function(req,res,next){
//这里,应该让用户能够顺利的访问到首页的静态页面
//同时,将数据展示在首页上.
res.render('index');
})
2.设计首页的加载CSS和JS文件(默认都会被放在public文件夹里面了) 这个时候可以把小图标放到public里面去
<script src="javascripts/jquery.js"></script>
<script src="javascripts/angular.js"></script>
<script src="plugin/bootstrap/js/bootstrap.js"></script>
<link href="plugin/bootstrap/css/bootstrap.css">
3.设计首页的静态样式
----- public 首页需要的小模块都放在这里
------ body 正文内容
------ cateList 分类列表
------ footer 尾部
------ friendLink 友情链接
------ header 头部
------ hotNewsList 热门文章推荐
------ itemList 文章列表
------ pagination 分页
------ search 搜索
------ tagsList 标签
----- index 首页
<%- include public/header %>
<%- include public/body %>
<% include itemList %>
<% include pagination %>
<% include search %>
<% include cateList %>
<% include hotNewsList %>
<% include tagsList %>
<% include friendLink %>
<%- include public/footer %>
页面可以根据自己的实际情况来设计,并不需要按照一定的规范设计,尽量的简单
4.考虑将设计数据库了
在根目录下创建settings配置文件,创建robots.txt,搜索引擎禁止某些页面的收录
在models里面创建一个db文件夹,新建一个settings的配置文件,保存数据库信息和邮件信息
安装加密模块,安装mongose模块,安装shortid模块
npm install crypto --save
npm install mongoose --save
npm install short-id --save
创建数据库操作基类db.js
---------- 通用的文件操作类DBSET
------ del 删除
------ findAll 查询所有
------ findOne 查询一条
------ updateOneByID 更新一条数据
------ addOne 添加一条
------ pagination 分页
------ getPaginationResult 搜索+分页
------ getDatasByParam 不带分页的搜索结果
------ getKeyArrByTokenId
------ getCount 获取数量
------ encrypt 加密
------ decrypt 解密
设计数据库mongose
-------------- models
------ User.js 用户信息表
------ Artcile.js 文章表
------ Category.js 分类表
------ Tags.js 标签表
------ Files.js 文件表
------ Message.js 留言表
------ AdminGroup.js 后台用户组表
------ AdminUser.js 后台用户表
------ Notify.js 系统消息
------ UserNotify.js 用户消息
=================================================================================================
1、首页设计登录和注册功能
npm install express-session session功能
npm install connect-redis 支持redis
npm install socket.io 支持websockt
npm install express-partials 模板引擎
npm install validator --save 安装验证
npm install moment --save 时间格式化
npm install nodemailer --save 发送邮件
2、修改启动文件,开启各项功能
3、新建util文件,创建公共操作类
----- cache.js redis缓存
----- filter.js
----- minme.js 类型规定
----- randomWord.js 生成随机数
----- redis.js 链接redis
----- system.js 系统常用功能
npm install archiver --save
npm install iconv-lite --save
npm install formidable --save
4、设计注册页面
router.get('/reg',function(req,res,next){
res.render('web/userReg',{
title:'用户注册',
//userInfo:req.session.user
});
})
注册完成的要点分析:
1.首先使用了angularJS完成了注册页面中的前端验证,使用了ng-clock避免了页面的闪动
2.创建注册模块,使用$http发送ajax
3.完成路由/doReg注册行为,流程:
①完成后端的验证
②发送一份邮件
③发送系统消息给用户
④添加到User表中
5、设计登录页面
① 使用redis将session放入redis中持久化保存
② 生成cookie
③ 通过cookie生成session.
头像上传
uploadify 目前只负责了在浏览器中打开文件夹,选中好自己的文件,显示文件的进度
提示你上传成功仅此而已,还是要通过uploader这个接口来实现真正的文件上传.
天生有一个404的bug,无法修复,暂时不管了.
可以将/system/upload理由里面的操作全部删除观察整个头像上传的结果.
后端的负责文件上传的插件是formidable,负责压缩的是gm
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。