仿博客园

仿博客园
GitHub地址:https://github.com/yanfengting/blog

api:博客项目的接口项目
web:博客项目的界面项目

主张:接口和视图分离。

主要实现的功能,注册,登录,退出,打通主页不同登录状态显示,发布文章。
主要用到的技术:MongoDB 数据验证,cookie跨域共享。

运行项目说明:

  1. 先把api项目启动起来
  2. 把web项目通过anywhere 8000启动,端口是8000已固定,可以自行在api项目中修改。
  3. 浏览器中输入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
在这里插入图片描述
这个错不用管

没有数据先做一个发布接口。有了数据才可以查询
在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值