仿博客园
GitHub地址:https://github.com/yanfengting/blog
api:博客项目的接口项目
web:博客项目的界面项目
主张:接口和视图分离。
主要实现的功能,注册,登录,退出,打通主页不同登录状态显示,发布文章。
主要用到的技术:MongoDB 数据验证,cookie跨域共享。
运行项目说明:
- 先把api项目启动起来
- 把web项目通过anywhere 8000启动,端口是8000已固定,可以自行在api项目中修改。
- 浏览器中输入http://localhost:8000运行web项目,即可以测试。
参考源码
工具
npm init
cd api
npm install
npm install mongoose --save
npm start
扒源码要点注意:
(1)代码下载出来,要把图片替换到本地
(2)jquary注意他连接的哪个版本最新,登录页面和注册页面bootstrap和2.2.0配套
(3)ladda会话提交的插件
GitHub下载到本地 https://github.com/hakimel/Ladda
grunt文档 https://www.gruntjs.net/getting-started
npm下载grunt npm install -g grunt-cli
(4)jquary validate验证插件
得到最终文件
项目框架
图片下载保存到 images
替换url地址
登录页面
login.css
js
新建site.js
49-175删掉
noscript删掉
注册
logout
注册页面
验证怎么做?
验证form表单不是button按钮
加一个 不支持邮箱格式 的判断
自定义属性
value => 当前输入的值 element=>操作的输入框
不用for-each 不能中断
合法:
不合法 false false
** 验证规则不会写**
远程验证:数据库
有木有注册过
提示的信息
network也能看到在验证
router
先验证不存在,查询数据库
#password指的是
没有这句话 验证都出不来
转圈的
序列化 打印数组,传到接口 后台接收
打印data
后台先判断空,有数据已存在,
return url
登录
8000和3000为什么可以cookie共享?
接口跨域 cors(必须写)
服务器端必须允许ip地址携带cookie
发布文章uediter
编译:
npm install
grunt --server=asp (-net版本)
如何使用?
1.引入核心脚本库
2.
3.
配置服务器
启动要anywhere 8000
这个错不用管
没有数据先做一个发布接口。有了数据才可以查询