0

搭建 WordPress 博客教程（超详细）

by admin on 2019年9月7日

开垦者相当多都有自身的博客，或是自个儿付出、或是依托别的平台配置搭建、恐怕在已有的平台开展博客，无论哪类格局皆以足以的。

一句话评价WordPress：美观，轻松，主题插件丰裕，是小白建站的不二精选。

Node.js 博客搭建

背景

所谓好记性不及烂笔头，步向职业之后，犹盼有个属于本人的博客，一方面是为着磨炼一下团结的文笔和小结工夫，另一方面照旧希望记录下团结学得的学问，便于以后忘记时翻看，同一时间也能指望帮到其余人。

前面也会有记录的习贯，只是挺乱的，有的记在剧本上，有的在计算机里，后来用过一会儿有道云笔记，也写过简书，最后照旧认为，本身搞个博客吧，想怎么写就怎么写。

唯独也会有众多菜鸟，想自个儿搭建一个博客，却开采完全不清楚怎么弄，因而实验楼把一部分有关博客搭建开辟的系列教程总括一下，希望对各位小伙伴有所支持。

需要

  • 一台服务器（小说介绍了采办vultr服务器的流程，假如已买服务器请忽略）
  • 二个域名，直接通过ip访谈好傻好傻的表率，哈哈。
  • linux知识
  • 肯折腾

一. 上学须要

开始时期盘算

第一消除服务器和域名，这一个十分的少说，本来想用Ali云的，后来因为Tencent云有移动就用它了（其实对许多人的话没差，都以大公司，服务和平安方面或然有确认保障的。）域名的话自身选拔一个就OK啦。

然后是挑选什么样开源博客了，笔者核心在Wordpress，Hexo，Ghost个中选了。比较下来Wordpress是相比臃肿，同一时间又是PHP的，自个儿对PHP一无所知，果断Pass了。

Hexo和Ghost都不错，后来以为Hexo公布文章起来依然有一些有一些麻烦，最后采取了Ghost，即使Ghost认为安顿起来有一点麻烦。

工具

  • Git Account
  • Hexo
  • Typora
  • 依赖Ali云的 ECS 布署 Ghost 博客

具体步骤

Node 的装置运行

会安装node，搭建node环境

会运行node。

小编搭建时的条件

  • 腾讯云CVM
  • 系统：CentOS 7.3 64位
  • node-v8.9.4.tar.gz(最好装6.x的)
  • 数据库：Mysql 5.7
  • ngnix 1.12
  • ghost 1.2
  • 模版

搭建框架

  • GitHub Pages

    GitHub Pages是哪些：简单的话，GitHub Page是为GitHub
    Repository服务的，是为着更简明易懂的显得你在Github上所作的projects的网页，就疑似GitHub
    Pages官网所说－－“Websites
    for you and your projects.”

    大概过多人照旧不知道为啥要有GitHub
    Pages那样的七个东西…举个例证来说，你是四个新手，当你浏览Github上某两个大牌的代码时，你看看的是一大堆源码，你势必未有心理深切的看下来（反正作者最开端就是如此），那么GitHub
    Pages就可以允许顾客自定义项目首页，用来替换私下认可的源码列表～由此小白你就能够看的更明白啊～

    简来讲之就是，GitHub
    Pages能够被以为是顾客编写的、托管在Github上的静态网页。

  • Hexo

    缘何大家能够用Hexo？因为Github允许通过Github提供的模版站内浮动网页，可是也同意客商自个儿编排网页然后上传，但这种上传并不一定是粗略的上传，也可以由此Hexo、Jekyll等静态站点生成器的再管理

  • 此框架的优缺点：

    优点：

    1. 无偿＋无限流量

    2. 分享git的本子管理作用

    3. 你一旦用本身喜好的编辑器写作就能够，其余事情都一律由Github管理

    缺点：

    1. 有一定手艺门槛，你无法不懂git和网页开荒
    2. 它生成的是静态网址，增多动态功效必得选取外界服务
    3. 不吻合大型网址，因为尚未用到数据库

    －－综述来看，它当成搭建中型Mini型Blog或项目主页的一流选项之一

    ​
    <u>总计：你接下去要搭建的村办博客将是叁个基于Hexo，托管在GitHub，写作用马克Down的超高功能工具👊</u>

    ​

图片 1根据Ali云的
ECS 计划 Ghost 博客

购入服务器

  1. 打开链接1：笔者的夏季打折推广链接，无效的话尝试
    链接2：我的一般性推广链接。
    那七个都指向官方网址，信可是作者的亲善去百度寻觅vultr官方网址。【更加多新闻见最后的Vlutr服务器链接详细表明】
  2. 挂号账号并表明邮箱。
  3. 测量检验速度或间接选取芝加哥节点，测量试验节点网速请戳小编并拉到页面最上面。假使以为不佳听，去试试别的的服务器提供商举例搬瓦工等等，个人以为vultr还足以。
  4. 充钱，点击左边的Billing，最低五欧元，这一步一视同仁。笔者个人选拔采取Paypal支付的$5。
  5. 搭建服务器，点击左侧包车型客车Servers，依次选取Server
    Location——你测量检验的最快的也许伊Stan布尔；Server Type——Cent OS7
    x64（那个自身得以提供能力协助，本文基于CentOS 7
    x64）或其余你懂的；Server
    Size——只是搭建ss，选第二个就够了($5/mon)；其余的选填。然后点击右下角的Deploy
    Now。稍等片刻，服务器就足以装好了。
  6. 装好后，你能够看看如下分界面：

servers

点击能够查阅服务器的有关新闻：

server information

接下去操作需求的新闻是IP
Address，Username和Password。这些页面不要关，一会一直复制粘贴相关新闻。

基础模块的行使

Buffer：二进制数据管理模块

伊芙nt：事件模块

fs：文件系统模块

Net：网络模块

Http：http模块

…

搭建详细步骤

  • 搭建Ghost博客详细教程——云服务器连接
  • 搭建Ghost博客详细教程——情况搭建及Ghost计划
  • 搭建Ghost博客详细教——Ghost模版采取及布局

搭建步骤

  1. 使用GitHub
    Pages建站

    请根据官方网址首页的科目来拓宽安装，只需操作官方网址教程的前两步，相当于创办酒馆和仿制旅舍到地头

    • 始建仓库：新建的库房的username.github.io的username一定与团结account的username一致
    • 仿造商旅：目标是为了让本身前途的博客和代码处在git处理之下，所以大家要把刚刚在Github上博客项目拉到本地，代码如下

    $ git clone https://github.com/username/username.github.io

    （请自行替换你的username)

  2. 安装Hexo

    安装Hexo的步骤：

    1. 安装Git

    2. 安装Node.js，须要先安装nvm（Node.js版本管理器）

      官方网址教程在这里，然而官方网址通过curl安装nvm的授命已经失效，上边作者介绍一下用Homebrew进行设置的主意：

      # 通过Homebrew安装nvm
$ brew install nvm

# 创建nvm的工作目录，为了可以让你直接在shell使用nvm指令
$ mkdir ~/.nvm

$ vi ~/.bash_profile
# 在.bash_profile文件里添加以下两行
# export NVM_DIR=~/.nvm
# . $(brew --prefix nvm)/nvm.sh

# source .bash_profile
$ . ~/.bash_profile

# 验证nvm是否已经安装
$ nvm help

# 因为我们是通过homebrew安装的，所以不需要像官网说的要重启terminal，执行以下命令来安装Node.js
$ nvm install stable

    3. 安装Hexo

      $ npm install -g hexo-cli

  3. 编写制定博客，发表

    1. 创办博客

      $ hexo init username.github.io
# 在从git克隆到本地的仓库的目录下初始化hexo，在我的电脑里就是cd ~

    2. 更动配置

      $ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

      此间安装的是主旨Next（官方文书档案在这）越来越多焦点

      1. 进入username.github.io/_config.yml修改基础配置：(请确定保障各种字段都缩进二个空格，因为YAML凭借缩进来规定因素间的隶属关系）

      title: Luke's Blog    //你博客的名字
author: Luke  //你的名字
language: zh-Hans    //语言 中文
theme: next   //刚刚安装的主题名称
deploy:
 type: git    //使用Git发布
 repo: git@github.com:username/username.github.io.git

//刚刚在git创设的仓库，这里运用ssh无需输入账户密码（前提是布局好了Github的ssh），使用https必要输入账户密码，作者早就配备过了ssh，所以这里运用ssh
branch: master
“`

   2. （optional）进入username.github.io/themes/next/`_config.yml`中修改主题配置文件（参见[官方文档](http://theme-next.iissnan.com/getting-started.html#theme-settings)）

3. Markdown写文章

  将你写的文章存到username.github.io/source/_posts的目录下就OK了，Markdown编辑器推荐[Typora](https://typora.io/) - "Live Preview"

4. 在本地环境进行测试

   ```
   $ hexo s
   # 测试服务启动，在浏览器中输入http://localhost:4000进行访问
   ```

5. 安装[hexo-deployer-git](https://github.com/hexojs/hexo-deployer-git)自动部署发布工具

   ```
   $ npm install hexo-deployer-git --save
   ```

6. 发布

   ```
   $ hexo clean && hexo g && hexo d
   # hexo clean命令是为了清除缓存文件 (db.json) 和已生成的静态文件 (public)。
  • 依附七牛云创设个人 hexo 博客
  • Django 搭建简易博客
  • 基于GO语言Revel框架和mgo的博客

长途连接服务器

NPM（node包管理工科具）

其三方node模块（包）的管理工科具，能够动用该下载工具安装第三方模块。，当然也得以成立上传本身的模块。

总结

即便网络的学科非常多，有些写的也很详细，但当您确实去根据流程布署时，照旧会发出古怪的主题材料，唯有团结亲自试行，才会真正学会，坑永久是踩不完，我们共勉！

在少数情形（越发是更动焦点后），要是开采你对站点的改观无论如何也不见效，您恐怕必要周转该命令。

图片 2基于GO语言Revel框架和mgo的博客

网页端操作

点击刚才的网页的右上角的多个开关最左侧的View Console举办操作。

参考

比方已经知道并精晓了入门教程的有所内容。在易出错的地点将开展简短的证实。

hexo g是为着转变静态文件，hexo d用于布置网址。

   ```

   <u>***以后每次写博客，只要重新进行三四五六步的操作就OK啦~***</u>

  1. 在浏览器中输入https://username.github.io，检验收下你的博客！

  2. 越来越多配备与插件，敬请期待

  • 从零开头构建NodeJS博客
  • Laravel达成八个多客商博客系统
  • 用NodeJS创设三个总结的博客
  • Flask开垦轻博客

Windows 用户

以Xshell为例。

  1. 下载安吹捧shell，官方网站链接。
  2. 设置到位后新建会话（Alt+N）。依次填写图中国国投息。
    名称能够是Vultr大概别的，左券选取SSH，主机填写此前的IP
    Address，端口号选拔22。

连接

点击左边的顾客身份验证，填写音讯。方法采用Password，客商名称叫以前的Username（一般都以root），密码为事先的Password（那些提出间接复制粘贴过来，系统给的多少复杂）

客商身份验证

填写完之后点击明显。然后点击连接。现身任何提示的话接纳接受就可以了。那时你就足以看到两个发令调节台了。那时即便连接成功了。

其它

那是最不起眼，但也是最非常重要的——你得筹划三个博客的静态文件。

博客的后台分界面，登录注册界面，小说呈现分界面，首页等。

如上呢，小编想看名字就了然是教您布署恐怕开荒贰个博客啦，因而就相当少介绍了，照着教程一步步的扩充付出学习，最终一定是二个博客啦！

Mac OS 用户

开发终端大概iTerm2等。

ssh root@45.32.195.77

下一场输入密码就能够。

二. 项目供给解析

四个博客应当持有怎么样成效？

上边再介绍多少个，虽说不是博客，但是本身多少出手改一下就是三个博客啦；

安装nginx，mysql，php

提议使用lnmp一键安装包安装，方便快捷。若是不用一键安装包，笔者估算得研究这一块的事物大致七日吧。下边以一键安装包为例。

前台展现

  • 点击下一页，能够点击分类导航。
  • 能够点击走入到现实博文页面
  • 尘凡允许批评。突显发布时间。允许留言分页。
  • 左侧有记名注册分界面。
  • ThinkPHP 简易小说管理体系

获得lnmp一键安装包链接

lnpm官方网站链接

找到下载页面选拔新型的复制其链接。

写此文时最新版本音信如下：

LNMP 1.4 测试版
http://soft.vpser.net/lnmp/lnmp1.4beta.tar.gz  (131KB)
MD5：bd851e151b2ba13c3a32c435efb1a76c
最后更新: 2017年2月14日14:18 GMT+8

其中的http://soft.vpser.net/lnmp/lnmp1.4beta.tar.gz就是大家必要的链接，复制到剪贴板。

后台管理

  • 管理员账号：登录后看到页面不相同等，有后台页面。
  • 同意加多新的分类。从后台增加新的小说。
  • 编排允许markdown写法。
  • 商议管理。

沉凝博客里有甚，不正是小说么？！那么些课程教你做二个小说管理体系，包括作品的揭破、呈现、管理啊等等，其实就是教您搭建一个博客系统；

安装

# 下载，后边的路径直接粘贴就好。XShell上面复制快捷键是ctrl+insert，粘贴快捷键是Shift+insert，mac上面是我们熟悉的 command+c，command+v
wget http://soft.vpser.net/lnmp/lnmp1.4beta.tar.gz
# 解压
tar -zxvf lnmp1.4beta.tar.gz
# 进入lnmp目录
cd lnmp1.4
# 执行install.sh进行安装
./install.sh

并发如下页面：

lnmp

逐一输入你要安装的选项前的数字并回车就能够下一步。

三. 项目成立，安装及初叶化

图片 3作品实际情况页图片 4作品管理页面

MySql 选项
You have 5 options for your DataBase install.
1: Install MySQL 5.1.73
2: Install MySQL 5.5.53 (Default)
3: Install MySQL 5.6.34
4: Install MySQL 5.7.16
5: Install MariaDB 5.5.53
6: Install MariaDB 10.0.28
7: Install MariaDB 10.1.19
0: DO NOT Install MySQL/MariaDB
Enter your choice (1, 2, 3, 4, 5, 6, 7 or 0):

此地依据所需选拔，若是利用的上述服务器，请选用2也许直接回车。笔者接纳默许。

潜心：安装MySql时，假使选拔太高的本子安装会被拒绝，提醒音讯如下
Memory less than 1GB, can't install MySQL 5.6, 5.7 or MairaDB 10!。依据个人手动安装MySql5.7的经验来看，此768MB内部存款和储蓄器的服务器在运转贰个nginx，mysql，php时辛亏，假若再运营三个tomcat，mysql将会不定时down掉。所以这边选拔二个低版本的5.5MySql就可以。

You will install MySQL 5.5.53
===========================
Please setup root password of MySQL.(Default password: root)
Please enter:

输入密码回车或直接回车，直接回车私下认可密码为root。此处做试验作者选拔暗中认可，个人实际运用请修改。

MySQL root password: root
===========================
Do you want to enable or disable the InnoDB Storage Engine?
Default enable,Enter your choice [Y/n]:

输入Y也许n然后回车或直接回车，直接回车默许启用InnoDB存储引擎。作者接纳暗许。

No input,The InnoDB Storage Engine will enable.
===========================
You have 6 options for your PHP install.
1: Install PHP 5.2.17
2: Install PHP 5.3.29
3: Install PHP 5.4.45
4: Install PHP 5.5.38 (Default)
5: Install PHP 5.6.30
6: Install PHP 7.0.15
7: Install PHP 7.1.1
Enter your choice (1, 2, 3, 4, 5, 6 or 7):

输入选项然后回车恐怕直接回车，直接回车私下认可安装PHP5.5.38版本。作者选取暗中认可。

You will install PHP 7.1.1
===========================
You have 3 options for your Memory Allocator install.
1: Don't install Memory Allocator. (Default)
2: Install Jemalloc
3: Install TCMalloc

输入选项然后回车或许直接回车，直接回车暗许不安装内部存款和储蓄器分配器。小编接纳暗许。

那时候面世

Press any key to install...or Press Ctrl+c to cancel

理所必然是摁率性键啦，一般都以回车咯。

下一场出现一大堆消息。前几行如下：

You will install lnmp stack.
nginx-1.10.3
mysql-5.5.53
php-5.5.38
Enable InnoDB: y
Print lnmp.conf infomation...
Download Mirror: http://soft.vpser.net
Nginx Additional Modules: 
PHP Additional Modules: 
Database Directory: /usr/local/mysql/var
Default Website Directory: /home/wwwroot/default
CentOS release 6.8 (Final)
Kernel \r on an \m

这一群东西你就不要管啊。此番试验的起先时间23:04……经过了许久长久长久的等候之后……大致23:35完毕。所以里面你去洗个澡看个影视剧都不是题材。然后大家看来显示器上最终输出的新闻如下。

The service command supports only basic LSB actions (start, stop, restart, try-restart, reload, force-reload, status). For other actions, please try to use systemctl.
Removed symlink /etc/systemd/system/basic.target.wants/firewalld.service.
Removed symlink /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service.
Add Startup and Starting LNMP...
Add nginx service at system startup...
Starting nginx...  done
Add mysql service at system startup...
Starting MySQL... SUCCESS! 
Add php-fpm service at system startup...
Starting php-fpm  done
============================== Check install ==============================
Checking ...
Nginx: OK
MySQL: OK
PHP: OK
PHP-FPM: OK
Clean src directory...
+------------------------------------------------------------------------+
|          LNMP V1.4 for CentOS Linux Server, Written by Licess          |
+------------------------------------------------------------------------+
|           For more information please visit https://lnmp.org           |
+------------------------------------------------------------------------+
|    lnmp status manage: lnmp {start|stop|reload|restart|kill|status}    |
+------------------------------------------------------------------------+
|  phpMyAdmin: http://IP/phpmyadmin/                                     |
|  phpinfo: http://IP/phpinfo.php                                        |
|  Prober:  http://IP/p.php                                              |
+------------------------------------------------------------------------+
|  Add VirtualHost: lnmp vhost add                                       |
+------------------------------------------------------------------------+
|  Default directory: /home/wwwroot/default                              |
+------------------------------------------------------------------------+
|  MySQL/MariaDB root password: root                          |
+------------------------------------------------------------------------+
+-------------------------------------------+
|    Manager for LNMP, Written by Licess    |
+-------------------------------------------+
|              https://lnmp.org             |
+-------------------------------------------+
nginx (pid 715 713) is running...
php-fpm is runing!
 SUCCESS! MySQL running (1247)
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State      
tcp        0      0 0.0.0.0:3306            0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN     
tcp6       0      0 :::22                   :::*                    LISTEN     
Install lnmp V1.4 completed! enjoy it.

回顾说澳优下，此设置进程设置到位便也运营了nginx，mysql，php-fpm并到场了开机运转项。假若重启服务器，无需再单独手动开启相关的服务了。总的来讲拾壹分实惠的。

至于Linux服务，自个儿从前做的笔记分享给大家。Linux
服务管理

那儿你在浏览器输入http://IP 例如
http://45.32.195.77便得以访谈了。看到的故事情节如下：

访问页面

网址根目录路线/home/wwwroot/default,如若只用来放一些静态页面，那么，未来就丰硕了，直接将你的html，js，css等文件丢进来就能够。那不是本文入眼，在此不赘述了。

剥离使用ctrl+c

技艺框架

本项目利用了以下宗旨才干：

  • Node版本：6.9.1——基础主题的付出语言

（安装后翻看版本：cmd窗口：node -v）

（查看方式：cmd窗口：node -v）

  • Express

三个简短利落的node.js
WEB应用框架，提供一多级有力的特征扶助大家创立web应用。

  • Mongodb

用来保存发生的多少

再有一名目许多第三方模块和中间件：

  • bodyParser，深入分析post伏乞数据
  • cookies：读写cookie
  • swig：模板深入分析引擎
  • mongoose：操作Mongodb数据
  • markdown：语法分析生成模块

…

  • Node.js达成私人笔记
  • Meteor+Angular落成轻论坛
  • PHP 完成留言本

安装WordPress

初始化

在W ebStorm成立一个新的空工程，钦赐文件夹。

展开左下角的Terminal输入：

npm init

回车。然后让您输入name:(code)，输入项目名称，然后后边都能够不填，最后在Is it OK?处写上yes。

完了这一步操作之后，系统就能够在当前文件夹创立叁个package.json的体系文件。

图片 5

项目文件下边具有刚才您所主导的音信。后期必要改造的话可平素在此间修改。

图片 6PHP
完毕留言本

下载WordPress包

粤语官方站点
英语官方站点实际的依据自身的要求选拔。上面以中文版为例。当前风靡版本是4.7.2

为了方便，大家仍旧在用站点暗中认可的门路，不过大家投机取巧一下。

# 进入根目录上一级目录
cd /home/wwwroot/
# 将default重命名为old
mv default old
# 下载WordPress包中文版
wget https://cn.wordpress.org/wordpress-4.7.2-zh_CN.tar.gz
# 解压WordPress包
tar -zxvf wordpress-4.7.2-zh_CN.tar.gz 
# 查看解压后的文件夹名，此处是wordpress，估计应该都是吧，看看保险啊
[root@vultr wwwroot]# ls
old  wordpress  wordpress-4.7.2-zh_CN.tar.gz
# 将wordpress重命名为default
mv wordpress default
# 再次查看检验
[root@vultr wwwroot]# ls
default  old  wordpress-4.7.2-zh_CN.tar.gz

其三方插件的安装

  • 以Express为例

在命令行输入：

npm install --save express

耐心等待一段时间，安装完毕后，json文件夹追加了一些新的内容：

json { //之前内容........ "author": "", "license": "ISC", "dependencies": { "express": "^4.14.0" }

意味着安装成功。

同理，使用npm install --save xxx的方式安装下载以下模块：

  • body-parser
  • cookies
  • markdown
  • mongoose
  • swig

由此安装完之后的package.json文件是如此的。

{
  "name": "blog",
  "version": "1.0.0",
  "description": "this is my first blog.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.2",
    "cookies": "^0.6.2",
    "express": "^4.14.0",
    "markdown": "^0.5.0",
    "mongoose": "^4.7.5",
    "swig": "^1.4.2"
  }
}

在那些json中，就能够经过注重模块（dependencies）看到各种第三方模块的版本新闻

记住：注重模块安装，要联网！

  • Java实现记事本

给相应目录授权

# 目录以及目录下的文件授权
[root@vultr wwwroot]# chown -R 755 /home/wwwroot
chown: changing ownership of ‘/home/wwwroot/old/.user.ini’: Operation not permitted
# 将目录的所有者分给www组下的www用户。
[root@vultr wwwroot]# chown -R www:www /home/wwwroot/
chown: changing ownership of ‘/home/wwwroot/old/.user.ini’: Operation not permitted

并发的提示大概是说有一个文书不能改观顾客分组和权杖。不会影响您的wordpress，忽略就好。

设置到位以往

图片 7

其次个公文夹放的是你的第三方模块。

除此以外还亟需别的文件，完整的布局是这般的——

图片 8

接下去就把缺点和失误的文件目录自身建设构造起来。

姣好着一文山会海操作之后，就把app.js作为应用程序的启航（入口页面）。

位置4个类型教程呢，其实有一点更改一下便是三个博客系统，何况学习本来正是需求团结去立异，多想多做多实践，不是啊？

创建一个数据库wordpress

# 登录数据库
mysql -u root -p
# 输入密码
默认的话就是root，否则就是你自己之前设置的那个
# 登录进来之后，看到这样一些东西
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.5.53-log Source distribution
Copyright (c) 2000, 2016, Oracle and/or its affiliates. All rights reserved.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> 
# 不用理会上面的，创建我们的数据库，比如名字为wordpress。记得加分号。
mysql> create database wordpress;
# 看一下，有没有我们创建的数据库
mysql> show databases;
# 大概看到如下内容。意味着这一步也没问题。
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| wordpress          |
+--------------------+
4 rows in set (0.01 sec)
# 退出mysql
exit

始建应用

以下代码成立应用，监听端口

// 加载express
var express=require('express');
//创建app应用，相当于=>Node.js Http.createServer();
var app=express();
//监听http请求
app.listen(9001);

运行（ctrl+shift+c）之后就足以通过浏览器访谈了。

客商访谈：

  • 客户通过U福特ExplorerL访谈web应用，比如http://localhost:9001/

图片 9

那时会发觉浏览器展现的剧情是那般的。

  • web后端依据客户访谈的url管理不相同的工作逻辑。

  • 路由绑定——

在Express框架下，能够透过app.get()或app.post()等格局，把三个url路线和（1-n）个函数举办绑定。当满足相应的准则时，对应的函数将会被施行，该函数有七个参数——

javascript app.get('/',function(req,res,next){ // do sth. }); // req:request对象，保存客户请求相关的一些数据——http.request // res：response对象，服务端输出对象，停工了一些服务端相关的输出方法——http.response // next：方法，用于执行下一个和路径相匹配的函数(行为)。

  • 内容输出

通过res.send(string)发送内容到顾客端。

app.get('/',function(req,res,next){
    res.send('<h1>欢迎光临我的博客！</h1>');
});

运维。那时候网页就打字与印刷出了h1题指标开始和结果。

留神，js文件编码借使不为UTF-8，网页文件展现中文种受到震慑。

愿意以上介绍的这个有关博客搭建和支付的科目能够帮衬各位小友人~

配置WordPress

那时在此通过浏览器访谈 http://IP 例如
http://45.32.195.77，浏览器将自动跳转到http://45.32.195.77/wp-admin/setup-config.php，那便是wordpress的安插页面了，看到的从头到尾的经过如下：

拜望页面

点击未来就开首。这时候大家看来如下页面:

数据库配置

依据在此之前安装的，输入如下信息。

数据库名：wordpress
用户名：root
密码：root
数据库主机：localhost
表前缀：wp_

点击提交。

数据库连接产生

到这一步，基本上就表示马到功成了，因为背后基本不会出错啦。

点击进行安装按键。出现下图：

wordpress 设置

规行矩步自个儿的急需填写，比方笔者那边填写如下：

wordpress 笔者的安装

点击安装WordPress按键，然后登入设置啥的纯页面操作就不在这里过多介绍咯。

主页大约是那样的

三. 模板引擎的布置和利用

末尾难点一举成功

有题指标举报在此，笔者会举行补偿。

使用模板

后天，小编想向后端发送的内容可不是三个h1标题那么轻便。还包涵全数博客页面包车型大巴html内容，要是依旧用地点的章程，麻���就大了。

如何是好呢？关键步骤在于html和js页面相分离（类似结商谈行为层的分别）。

模板的行使在于后端逻辑和前端表现的分手（前后端分离）。

主题只浮现八个

案由：php未有权限读取文件目录。

焚林而猎方案：编辑php.ini文件中的disable_functions字段，将在那之中的scandir去掉。

# 使用一键安装包安装的php的配置文件路径如下
vi /usr/local/php/etc/php.ini
# 查找disable_functions
在当前的底行模式下输入 /disable_functions,便可以找到这样一行
disable_functions = passthru,exec,system,chroot,scandir,chgrp,chown,shell_exec,proc_open,proc_get_status,popen,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,stream_socket_server
# 删掉其中的scandir，此处很容易搞乱，所以有必要会使用编辑模式，摁i进入编辑模式。就可以输入删除了。
# 退出编辑模式，并保存退出。
esc退出编辑模式，:wq保存退出。

更加多的吩咐看小编后面包车型客车二个简单易行的入门笔记吧。Linux VIM
文本编辑器

下一场记得重启php-fpm服务

/etc/init.d/php-fpm restart

那样再刷新，就能够发觉大旨不止一个呐。

模板配置

大旨配置如下

// 定义模板引擎，使用swig.renderFile方法解析后缀为html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 设置模板存放目录
app.set('views','./views');
// 注册模板引擎
app.set('view engine','html');

swig.setDefaults({cache:false});

安排模板的基本流程是：

请求swig模块=>定义模板引擎=>注册模板引擎=>设置调试方法

我们能够利用var swig=require('swig');定义了swig方法。

以下举行逐行分析——

更多

一经你使用马克Down，那么请安装JetPack插件，如若您要求语法高亮，请安装Crayon Syntax Highlighter。

后来大概会深入研商一下，有时机的话会专门写一篇文章介绍WordPress核心与插件的哈。

概念模板引擎

app.engine('html',swig.renderFile);

先是个参数：模板引擎的名号，同一时间也是模板引擎的后缀，你能够定义展开的是另外文件格式，比方json，乃至tdl等。
第二个参数表示用于深入分析管理模板内容的格局。
其多个参数：使用swig.renderFile方法解析后缀为html的文书。

Vlutr服务器链接详细表明

小说中付出的是自个儿的推广链接，具体的推广表彰法规见下图，好心人就点这些链接吧，假如花费不到$10，也没涉及，原则正是力争在两侧利润都不受影响的场馆下最大化收益呗。

笔者的伏季降价链接

夏天巨惠推广表明

本身的不足为奇推广链接

普通推广表明

末尾的尾声，有钱的捧个钱场，没钱的捧个人场哈。您的支撑正是自己最大的引力。

哦，more，有标题留言就好，作者非常多都会在一天内回复新闻。

设置模板目录

近些日子就用express组件提供的set方法标设置模板目录：

app.set('views','./views');

概念目录时也许有四个参数，注意，第叁个参数必须为views！第叁个参数能够是大家所提交的门道。因为以前已经定义了模版文件夹为views。所以，使用相应的路子名称叫./views。

挂号模板引擎

app.set('view engine','html');

或许使用express提供了set方法。
第贰个参数务必是字符串'view engine'。
第4个参数和app.engine艺术定义的模版引擎名称（第二个参数）必得是均等的（都以“html”）。

重回app.get

当今咱们回去app.get()方法里面，使用res.render()格局重复渲染钦点内容

app.get('/',function(req,res,next){

    /*    * 读取指定目录下的指定文件，解析并返回给客户端    * 第一个参数：模板文件，相对于views目录,views/index.html    * */

    res.render('index');
});

那时候，大家定义了重返值渲染index文件，就必要在views文件夹下新创造二个index.html。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>欢迎来到我的第一个博客！<h1>
</body>
</html>

render方法还足以接受第三个参数，用于传递模板使用的第三个数据。

好了。这时候再刷新页面，就涌出了index的剧情。

调和方法

大家在不甘休服务器的境况下，重新修改index的文本内容，发掘并不曾刷新。

哪些难题吧？出于品质上考虑，node把第二回读取的index放到了内容中，下一次做客时，正是缓存中的内容了，实际不是真的的index文件。由此要求重启。

支出进度中，为了减少麻烦，供给撤废模板缓存。

swig.setDefaults({cache:false});

当然，当项目上线时，可以把这一段删除掉。

四. 静态文件托管

在写模板文件时，常常引进一些外链的css，js和图纸等等。

css怎么引进？

要是大家一直在首页的head区域这么写：

<link rel="stylesheet" type="text/css" href="css.css"/>

再刷新，开掘对css.css的援引战败了。

难题不在于css.css是或不是存在，而在于央求退步。因为外链文件精神也是一个呼吁，可是在app.js中还尚未对号入座设置。

一经这么写：

app.get('/css.css', function (req,res,next) {
    res.send('body {background: red;}');
});

察觉未有效力。

打开http://localhost:9001/css.css发掘内容是如此的：

图片 10

好笑了。暗许发送的是贰个html。因而供给设定一个header

app.get('/css.css', function (req,res,next) {
    res.setHeader('content-type','text/css');
    res.send('body {background: red;}');
});

ctrl+F5，就深入分析了革命背景了。

平等的，静态文件须要完全分开，由此这种措施也是不行的。

静态文件托管目录

最棒的办法是，把持有的静态文件都放在二个public的目录下，划分并存放好。

下一场在初叶就经过以下办法，把public目录下的装有静态文件都渲染了：

app.use('/public',express.static(__dirname+'/public'));

如上措施表示：当蒙受public文件下的文本，都调用第二个参数里的办法(注意是三个下划线)。

当客商访问的url以public开始，那么直接回到对应__dirname+'public'下的文本。由此我们的css应该松开public下。

引用方式为：

<link rel="stylesheet" type="text/css" href="../public/css.css"/>

下一场到public文件下开创二个css.css，设置body背景为革命。原本的app.get方法就毫无了。

图片 11

由来，静态文件什么的都足以用到了

小结

在以上的开始和结果中，大家得以实现了初阶化项目，能够调用html和css文件。基本进程逻辑是：

客商发送http须要（url）=>剖析路由=>找到相配的条条框框=>钦点绑定函数，重回对应内容到客户。

做客的是public：静态——直接读取钦赐目录下的文本，重临给顾客。

=>动态=>管理职业逻辑

那么万事宗旨雏形就搭建起来了。

五. 分模块开垦与落到实处

把一切网址放到二个app.js中，是不平价管理和保安的。实际支出中，是服从差异的功力，管理代码。

依靠效果与利益划分路由（routers）

依照本项指标作业逻辑，分为七个模块就够了。

  • 前台模块
  • 后台管理模块
  • API模块:通过ajax调用的接口。

或者，使用app.use（路由设置）划分：

  • app.use('/admin',require('./routers/admin'));

表达：当客户访谈的是admin文件下的剧情，那调用router文件夹下admin.js文件。下同。

  • app.use('/api',require('./routers/api'));后台

  • app.use('/',require('./routers/main'));前台

好了。重写下在此之前的代码，去掉多余的片段。

// 加载express
var express=require('express');
//创建app应用，相当于=>Node.js Http.createServer();
var app=express();

// 设置静态文件托管
app.use('/public',express.static(__dirname+'/public'))

// 定义模板引擎，使用swig.renderFile方法解析后缀为html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 设置模板存放目录
app.set('views','./views');
// 注册模板引擎
app.set('view engine','html');
// 调试优化
swig.setDefaults({cache:false});

//app.use('/admin',require('./routers/admin'));
//app.use('/api',require('./routers/api'));
//app.use('/',require('./routers/main'));


//监听http请求
app.listen(9001);

在routers制造叁个admin.js，同理再次创下制一个api.js，八个main.js

怎么访谈分化文件夹下的文书？

诸如，笔者想访问二个如http://localhost:9001/admin/user那样的地点，那样按理来讲就活该调用admin.js（分路由）。

故此编辑admin.js

var express=require('express');

// 创建一个路由对象，此对象将会监听admin文件下的url
var router=express.Router();

router.get('/user',function(req,res,next){
    res.send('user');
});

module.exports=router;//把router的结果作为模块的输出返回出去！

小心，在分路由中，不供给写明路线，就当它是在admin文件下的相对路线就足以了。

储存，然后回来app.js，应用app.use('/admin',require('./routers/admin'));

再展开页面，就观看结果了。

图片 12

同理，api.js也萧规曹随。

var express=require('express');

// 创建一个路由对象，此对象将会监听api文件夹下的url
var router=express.Router();

router.get('/user',function(req,res,next){
    res.send('api-user');
});

module.exports=router;//把router的结果作为模块的输出返回出去！

再应用app.use('api/',require('./routers/api'))。重启服务器，结果如下

图片 13

首页也上行下效

路由的分割

前台路由涉及了一对一多的开始和结果，由此再细化分多若干个路由也是无可争辩的挑三拣四。

每一个内容囊括基本的归类和增加和删除改

  • main模块

/——首页

/view——内容页

  • api模块

/——首页

/login——客户登录

/register——客商注册

/comment——研商获得

/comment/post——商量提交

  • admin模块

/——首页

  • 顾客管理

    /user——客商列表

  • 分类管理

    /category——分类目录

    /category/add——分类增多

    /category/edit——分类编排

    /category/delete——分类删除

  • 小说管理

    /article——内容列表

    /article/add——添Gavin章

    /article/edit——文章修改

    /article/delete——小说删除

  • 讲评管理

    /comment——商量列表

    /comment/delete——商量删除

​

支付流程

效果与利益开辟顺序

用户——栏目——内容——评论

任何操作正视于客商，所以先供给客户。

栏目也分为前后台，优先做后台。

剧情和评价相互关系。

编码顺序

  • 经过Schema定义设计数据存款和储蓄结构
  • 功能逻辑
  • 页面呈现

六. 数据库连接，表结构

比方客商，在SCHEMA文件夹下新建叁个users.js

什么样定义三个模块呢？这里用到mongoose模块

var mongoose=require('mongoose');//引入模块

除此之外在users.js央浼mongoose模块以外，在app.js也亟需引入mongoose。

// 加载express
var express=require('express')

//创建app应用，相当于=>Node.js Http.createServer();
var app=express();

// 加载数据库模块
var mongoose=require('mongoose');

// 设置静态文件托管
app.use('/public',express.static(__dirname+'/public'))

// 定义模板引擎，使用swig.renderFile方法解析后缀为html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 设置模板存放目录
app.set('views','./views');
// 注册模板引擎
app.set('view engine','html');
// 调试优化
swig.setDefaults({cache:false});

/** 根据不同的内容划分路由器* */
app.use('/admin',require('./routers/admin'));
app.use('/api',require('./routers/api'));
app.use('/',require('./routers/main'));



//监听http请求
mongoose.connect();
app.listen(9001);

成立连接数据库（每一次运行都急需这么）

mongoose使用需求设置mongodb数据库。

mongodb安装相比简单，在官英特网下载了，制订好渠道就能够了。

找到mongodb的bin文件夹。运行mongod.exe——通过命令行

命令行依次输入：

f:
cd Program Files\MongoDB\Server\3.2\bin

简单的说正是基于自身设置的的不二诀窍名来找到mongod.exe就行了。

敞开数据库前供给钦点参数，比如数据库的路子。小编事先早就在类型文件夹下成立一个db文件夹，然后作为数据库的路径就足以了。

除去还得钦点叁个端口。比如27018

mongod --dbpath=G:\node\db --port=27018

然后回车

图片 14

新闻展现：等待链接27018,申明开启成功

后一次历次关机后拉开服务器，都须求做如上操作。

接下去要拉开mongo.exe。

命令行相比较原始，依旧得以动用部分可视化的工具实行连接。在此地作者用的是robomongo。

直接在国外网址上下载就可以，下载不通只怕须要科学上下网。

图片 15

名字随意写就行了，端口写27018

图片 16

点击链接。

回来命令行。开采新出现以下新闻：

图片 17

代表专门的学业塑造连接。

多长史存

链接已经确立起来。但内部四壁萧条。

接下去使用mongoose操作数据库。

可以上这里去看看文书档案。文书档案上首页就交付了mongoose.connect()方法。

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');

var Cat = mongoose.model('Cat', { name: String });

var kitty = new Cat({ name: 'Zildjian' });
kitty.save(function (err) {
  if (err) {
    console.log(err);
  } else {
    console.log('meow');
  }
});

connect方法接收的率先个参数，正是其一'mongodb://localhost:27018'。第贰个参数是回调函数。

数据库链接失利以来，是不该敞开监听的，所以要把listen放到connect方法里面。

mongoose.connect('mongodb://localhost:27018/blog',function(err){
    if(err){
        console.log('数据库连接错误！');
    }else{
        console.log('数据库连接成功！');
        app.listen(9001);
    }
});

运营，console呈现，数据库链接成功。

小心，假诺出现错误，还是得看看编码格式，必得为UTF-8。

回来users.js的编纂上来，继续看mongoose文书档案。

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var blogSchema = new Schema({
  title:  String,
  author: String,
  body:   String,
  comments: [{ body: String, date: Date }],
  date: { type: Date, default: Date.now },
  hidden: Boolean,
  meta: {
    votes: Number,
    favs:  Number
  }
});

经过mongoose.Schema构造函数，生成五个Schema对象。

new出的Schema对象蕴涵众多内容，传入的靶子表示数据库中的三个表。每一种属性代表表中的每一个字段，每一个值代表该字段存款和储蓄的数据类型。

在此处，users.js须要暴光的剧情正是顾客名和密码。

// 加载数据库模块
var mongoose=require('mongoose');

// 返回用户的表结构
module.exports= new mongoose.Schema({

    // 用户名
    username: String,
    // 密码
    password: String

});

接下来在通过模型类来操作表结构。在等级次序的models文件夹下创设八个User.js

var mongoose=require('mongoose');

var usersSchema=require('../schemas/users');

module.exports=mongoose.model('User',usersSchema);

如此就完事了三个模型类的创导。

模型怎么用？照旧看看文书档案给出的运用格局。

// 创建一个表结构对象
var schema = new mongoose.Schema({ name: 'string', size: 'string' });
// 根据表结构对象创建一个模型类
var Tank = mongoose.model('Tank', schema);

构造函数怎么样利用：

var Tank = mongoose.model('Tank', yourSchema);

var small = new Tank({ size: 'small' });
small.save(function (err) {
  if (err) return handleError(err);
  // saved!
})

// or

Tank.create({ size: 'small' }, function (err, small) {
  if (err) return handleError(err);
  // saved!
})

七. 客商注册的前端逻辑

引进首页

顾客注册首先得加载一个首页。

在views下边新建叁个main文件夹，然后把你从前写好的index.html放进去。

于是回来main.js中。渲染你已经写好的博客首页。

var express=require('express');

// 创建一个路由对象，此对象将会监听前台文件夹下的url
var router=express.Router();

router.get('/',function(req,res,next){
    res.render('main/index');
});

module.exports=router;//把router的结果作为模块的输出返回出去！

封存，然后重启app.js，就会在localhost:9001看来首页了。

自然那一个首页很难看，你能够团结写二个。

本来的路径全部服从项目文件夹的协会举行修改。

逻辑

挂号登陆一共有多个意况。

一齐首正是挂号，即便已有账号就点击登入，出现登入弹窗。

假如已经报到，则展现已经报到处境。并有撤废按键。

            <div class="banner-wrap">
                <div class="login" id="register">
                <h3>注册</h3>
                用户：<input name="username" type="text"/><br/>
                密码：<input name="password" type="text"/><br/>
                确认：<input name="repassword" type="text"/><br/>
                <input class="submit" type="button" value="提交"/>
                已有账号？马上<a href="javascript:;">登录</a>
            </div>

            <div class="login" id="login" style="display:none;">
                <h3>登录</h3>
                用户：<input type="text"/><br/>
                密码：<input type="text"/><br/>
                <input type="button" value="提交"/>
                没有账号？马上<a href="javascript:;">注册</a>
            </div>

jquery能够那样写：

$(function(){
    // 登录注册的切换
    $('#register a').click(function(){
        $('#login').show();
        $('#register').hide();
    });

    $('#login a').click(function(){
        $('#login').hide();
        $('#register').show();
    });
});

当点击注册开关，应该允许ajax提交数据。地址应该是api下的user文件夹的register，该register文件一时并未制造，所以不理他照写就能够。

// 点击注册按钮，通过ajax提交数据
    $('#register .submit').click(function(){
        // 通过ajax提交交
        $.ajax({
            type:'post',
            url:'/api/user/register',
            data:{
                username:$('#register').find('[name="username"]').val(),
                password:$('#register').find('[name="password"]').val(),
                repassword:$('#register').find('[name="repassword"]').val()
            },
            dataType:'json',
            success:function(data){
                console.log(data);
            }
        });
    });

允许网址，输入顾客名密码点击注册。

虽说报错，可是在chrome的network下的header能够见到以前交付的音信。

图片 18

挺好，挺好。

八. body-paser的使用：后端的中央注明

后端怎么响应前台的ajax供给？

第一，找到API的模块，扩充八个路由，回到api.js——当接过前端ajax的post须求时，路由打字与印刷出一个register字符串。

var express=require('express');

// 创建一个路由对象，此对象将会监听api文件夹下的url
var router=express.Router();

router.post('/user/register',function(req,res,next){
    console.log('register');
});

module.exports=router;//把router的结果作为模块的输出返回出去！

那时候，就不会议及展览示404了。表明路由拍卖成功。

哪些获取前端post的数额？

那就须求使用新的第三方模块——body-parser。

连带文档地址：

bodyParser.urlencoded(options)

Returns middleware that only parses urlencoded bodies. This parser
accepts only UTF-8 encoding of the body and supports automatic
inflation of gzip and deflate encodings.

A new body object containing the parsed data is populated on
the request object after the middleware (i.e. req.body). This
object will contain key-value pairs, where the value can be a string
or array (when extended is false), or any type
(when extended is true).

var bodyParser=require('body-parser');

app.use(bodyParser.urlencoded(extended:true));

在app.js中，到场body-parser。然后通过app.use()方法调用。此时的app.js是那般的：

// 加载express
var express=require('express');

//创建app应用，相当于=>Node.js Http.createServer();
var app=express();

// 加载数据库模块
var mongoose=require('mongoose');

// 加载body-parser，用以处理post提交过来的数据
var bodyParser=require('body-parser');

// 设置静态文件托管
app.use('/public',express.static(__dirname+'/public'))

// 定义模板引擎，使用swig.renderFile方法解析后缀为html的文件
var swig=require('swig');


app.engine('html',swig.renderFile);

// 设置模板存放目录
app.set('views','./views');
// 注册模板引擎
app.set('view engine','html');
// 调试优化
swig.setDefaults({cache:false});

// bodyParser设置
app.use(bodyParser.urlencoded({extended:true}));


/* * 根据不同的内容划分路由器 * */
app.use('/admin',require('./routers/admin'));
app.use('/api',require('./routers/api'));
app.use('/',require('./routers/main'));



//监听http请求
mongoose.connect('mongodb://localhost:27018/blog',function(err){
    if(err){
        console.log('数据库连接错误！');
    }else{
        console.log('数据库连接成功！');
        app.listen(9001);
    }
});

配置好之后，回到api.js，就能够在router.post方法中，通过req.body取得提交过来的多少。

router.post('/user/register',function(req,res,next){
    console.log(req.body);
});

重启app.js，然后网页再一次提交数据。

出现console信息：

图片 19

后端的表单验证

获得数码之后，正是进行着力的表单验证。举例

  • 客商名是不是符合标准（空？）
  • 是不是被登记
  • 密码是或不是符合标准
  • 重复密码是还是不是一致

在那之中，检验客商名是或不是被登记须求用到数据库查询。

进而遵照这些逻辑，重新归下类：

// 基本验证=>用户不得为空(错误代码1)，密码不得为空（错误代码2），两次输入必须一致（错误代码3）
// 数据库查询=>用户是否被注册。

归来格式的初步化

笔者们要对用户的需要进行响应。对于再次来到的内容，应该做二个开头化，钦定再次来到消息和错误代码

// 统一返回格式
var responseData=null;

router.use(function(req,res,next){
    responseData={
        code:0,
        message:''
    }

    next();
});

写出判别逻辑，通过res.json再次回到给前端

res.json方法正是把响应的数码转载为一个json字符串。再直接return出去。前面代码不再实施。

router.post('/user/register',function(req,res,next){
    var username=req.body.username;
    var password=req.body.password;
    var repassword=req.body.repassword;

    //用户名是否为空
    if(username==''){
        responseData.code=1;
        responseData.message='用户名不得为空！';
        res.json(responseData);
        return;
    }

    if(password==''){
        responseData.code=2;
        responseData.message='密码不得为空！';
        res.json(responseData);
        return;
    }

    if(repassword!==password){
        responseData.code=3;
        responseData.message='两次密码不一致！';
        res.json(responseData);
        return;
    }

    responseData.message='注册成功！';
    res.json(responseData);
});

图片 20

基本运维就大功告成了。

依照数据库的查重验证

事先已经完毕了大约的认证，基于数据库怎么验证呢？

率先得诉求模型中的user.js。

var User=require('../model/User');

那一个目的有十分的多的格局，再看看mongoose文书档案：

其中

// #方法表示必须new出一个具体对象才能使用
Model#save([options], [options.safe], [options.validateBeforeSave], [fn])

在此处，大家实际上就动用那么些方法就够了。

Model.findOne([conditions], [projection], [options], [callback])

在router.post方法内增添：

// 用户名是否被注册？
    User.findOne({
        username:username
    }).then(function(userInfo){
        console.log(userInfo);
    });

重启运转开掘再次回到的是三个null——如若存在，表示数据库有该记录。借使为null，则保留到数据库中。

由此总体的验证形式是：

router.post('/user/register',function(req,res,next){
    var username=req.body.username;
    var password=req.body.password;
    var repassword=req.body.repassword;

    //基本验证
    if(username==''){
        responseData.code=1;
        responseData.message='用户名不得为空！';
        res.json(responseData);
        return;
    }

    if(password==''){
        responseData.code=2;
        responseData.message='密码不得为空！';
        res.json(responseData);
        return;
    }

    if(repassword!==password){
        responseData.code=3;
        responseData.message='两次密码不一致！';
        res.json(responseData);
        return;
    }

    // 用户名是否被注册？
    User.findOne({
        username:username
    }).then(function(userInfo){
        if(userInfo){
            responseData.code=4;
            responseData.message='该用户名已被注册！';
            res.json(responseData);
            return;
        }else{//保存用户名信息到数据库中
            var user=new User({
                username:username,
                password:password,
            });
            return user.save();
        }
    }).then(function(newUserInfo){
        console.log(newUserInfo);
        responseData.message='注册成功！';
        res.json(responseData);
    });

});

再查看console内容

图片 21

比如您重新输入该顾客名。会意识后台console音讯为undefined，网页调节台展现该客商名已被注册。

回来久违的罗布omongo，能够看到数据库中多了一条登记客户的原委。

图片 22

个中确实存在了一条记下。

在骨子里专门的职业中，应该以加密的样式累积内容。在这里就不加密了。

前端对后台重回数据的拍卖

当未来端的主干申明就终止了。前端收到数量后应该怎么着运用？

回到index.js

自身要做两件事：

  • 把音信经过alert的花样表现出来。
  • 设若注册成功，在客户名处（#loginInfo）表现顾客名音讯。这里自己把它加到导航栏最右边。

一时就这么写吧：

$(function(){
    // 登录注册的切换
    $('#register a').click(function(){
        $('#login').show();
        $('#register').hide();
    });

    $('#login a').click(function(){
        $('#login').hide();
        $('#register').show();
    });

    // 点击注册按钮，通过ajax提交数据
    $('#register .submit').click(function(){
        // 通过ajax移交
        $.ajax({
            type:'post',
            url:'/api/user/register',
            data:{
                username:$('#register').find('[name="username"]').val(),
                password:$('#register').find('[name="password"]').val(),
                repassword:$('#register').find('[name="repassword"]').val()
            },
            dataType:'json',
            success:function(data){
                alert(data.message);
                if(!data.code){
                    // 注册成功
                    $('#register').hide();
                    $('#login').show();
                }
            }
        });
    });
});

九. 客户登入逻辑

顾客登入的逻辑类似，当顾客点击登入按键，一样发送ajax央浼到后端。后端再扩充认证。

大旨设置

故此在index.js中，ajax方法也如法泡制：

// 点击登录按钮，通过ajax提交数据
    $('#login .submit').click(function(){
        // 通过ajax提交
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$('#login').find('[name="username"]').val(),
                password:$('#login').find('[name="password"]').val(),
            },
            dataType:'json',
            success:function(data){
                console.log(data);
            }
        });
    });

回来后端api.js，新扩充二个路由：

// 登录验证
router.post('/user/login',function(res,req,next){
    var username=req.body.username;
    var password=req.body.password;

    if(username==''||password==''){
        responseData.code=1;
        responseData.message='用户名和密码不得为空！';
        res.json(responseData);
        return;
    }


});

数据库查询：客户名是还是不是存在

未有差距于也是用到findOne方法。

router.post('/user/login',function(req,res,next){
    //console.log(req.body);
    var username=req.body.username;
    var password=req.body.password;

    if(username==''||password==''){
        responseData.code=1;
        responseData.message='用户名和密码不得为空！';
        res.json(responseData);
        return;
    }

    // 查询用户名和对应密码是否存在，如果存在则登录成功
    User.findOne({
        username:username,
        password:password
    }).then(function(userInfo){
        if(!userInfo){
            responseData.code=2;
            responseData.message='用户名或密码错误！';
            res.json(responseData);
            return;
        }else{
            responseData.message='登录成功！';
            res.json(responseData);
            return;
        }
    });

});

获得登陆音信

事首先登场入今后在#userInfo里面展现内容。

明天大家来再度安装以下前端应该升迁的东西：

  • 晋升客户名，若是是admin，则提示管理员，并追加管理开关
  • 取消按键

这一切都以在导航栏面板上做到。

后端必要把客户名再次回到出来。在后端的userInfo参数里，已经包括了username的消息。所以把它也加到responseData中去。

<nav class="navbar">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="article.html">文章</a></li>
                    <li><a href="portfolio.html">作品</a></li>
                    <li><a href="about.html">关于</a></li>
                    <li>
                        <a id="loginInfo">
                            未登录
                        </a>
                    </li>
                    <li><a  id="logout" href="javascript:;">
                        注销
                    </a></li>
                </ul>
            </nav>

导航的布局大要上如是，然后有二个撤销开关，display为none。

于是index.js能够这么写：

// 点击登录按钮，通过ajax提交数据
    $('#login .submit').click(function(){
        // 通过ajax提交
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$('#login').find('[name="username"]').val(),
                password:$('#login').find('[name="password"]').val(),
            },
            dataType:'json',
            success:function(data){
                alert(data.message);
                if(!data.code){
                    $('#login').slideUp(1000,function(){
                        $('#loginInfo span').text('你好，'+data.userInfo)
                        $('#logout').show();
                    });
                }
            }
        });
    });

这一套轻便的逻辑也到位了。

十. cookie设置

当您登入成功之后再刷新页面，开采并非登陆景况。那很蛋疼。

笔录报到状态应当反映给浏览器。

cookie模块的调用

在app.js中引入cookie模块——

var Cookies=require('cookies');

app.use(function(req,res){
  req.cookies=new Cookies(req,res);
  next();
});

回到api.js，在登录成功未来，还得做一件业务，就是把cookies发送给前端。

        }else{
            responseData.message='登录成功！';
            responseData.userInfo=userInfo.username;

            //每当用户访问站点，将保存用户信息。
            req.cookies.set('userInfo',JSON.stringify({
                    _id:userInfo._id,
                    username:userInfo.username
                });
            );//把id和用户名作为一个对象存到一个名字为“userInfo”的对象里面。

            res.json(responseData);
            return;
        }

重启服务器，登陆。在network上看cookie音讯

图片 23

再刷新浏览器，查看headers

图片 24

也多了八个userInfo，注解可用。

处理cookies信息

 //设置cookie
app.use(function(req,res,next){
    req.cookies=new Cookies(req,res);

    // 解析cookie信息把它由字符串转化为对象
    if(req.cookies.get('userInfo')){
        try {
            req.userInfo=JSON.parse(req.cookies.get('userInfo'));;
        }catch(e){}
    }
    next();
});

调用模板去行使这个数据。

回到main.js

var express=require('express');

var router=express.Router();

router.get('/',function(req,res,next){
    res.render('main/index',{
        userInfo:req.userInfo
    });
});

module.exports=router;

接下来就在index.html中写模板。

模板语法

模板语法是基于从后端重返的新闻在html里写逻辑的主意。

有着逻辑内容都在{%%}里面

简轻便单的行使正是if else

{% if userInfo._id %}
<div id="div1"></div>
{% else %}
<div id="div2"></div>
{% endif %}

若是后端再次来到的剧情存在，则渲染div1，不然渲染div2，这一个讲话到div2就终止。

故而，今后大家的渲染逻辑是：

  • 如userInfo._id存在，则一贯渲染导航栏里的个人新闻
  • 要不然，渲染登陆注册页面。
  • 博客下边的内容也是这么。最佳让报到的红颜看得见。

假使本身索要展现userInfo里的username，供给双大括号{{userInfo.username}}

签到后的逻辑

这样一来，登入后的意义就没须求了。直接重载页面。

if(!data.code){
   window.location.reload();
}

下一场故意还是无意把撤消开关也做了。

撤消无非是把cookie设置为空，然后前端所做的作业正是一个一个ajax伏乞，一个跳转。

index.js

// 注销模块
    $('#logout').click(function(){
        $.ajax({
            type:'get',
            url:'/api/user/logout',
            success:function(data){
                if(!data.code){
                    window.location.reload();
                }
            }
        });
    });

在api.js写四个退出的不二等秘书诀

// 退出方法
router.get('/user/logout',function(req,res){
    req.cookies.set('userInfo',JSON.stringify({
        _id:null,
        username:null
    }));
    res.json(responseData);
    return;
});

十一. 有别于管理员和普通客商

开创管理员

管理员客户表面上看起来也是顾客，可是在数据库结构是单身的三个字段，

张开users.js,新增加贰个字段

var mongoose=require('mongoose');

// 用户的表结构
module.exports= new mongoose.Schema({

    username: String,
    password: String,

    // 是否管理员
    isAdmin:{
        type:Boolean,
        default:false
    }

});

为了记录方便，笔者直接在罗布oMongo中设置。

图片 25

增添的账号这么写：

图片 26

保存。

那正是说这么些管理员权限的账户就创变成功了。

cookie设置

留意，管理员的账户最棒不用记录在cookie中。

回到app.js，重写cookie代码

//请求User模型
var User=require('./models/User');

 //设置cookie
app.use(function(req,res,next){
    req.cookies=new Cookies(req,res);

    // 解析cookie信息
    if(req.cookies.get('userInfo')){
        try {
            req.userInfo=JSON.parse(req.cookies.get('userInfo'));

            // 获取当前用户登录的类型，是否管理员
            User.findById(req.userInfo._id).then(function(userInfo){
                req.userInfo.isAdmin=Boolean(userInfo.isAdmin);

                next();
            });
        }catch(e){
            next();
        }
    }else{
        next();
    }

});

总体思路是，依据isAdmin判别是还是不是为真，

领队显示判定

前面html展现的的论断是：{{userInfo.username}}。

今昔把迎接消息改写成“管理员”，并提醒“进入后台开关”

<li>
    <a  id="loginInfo">
    {% if userInfo.isAdmin %}
    管理员你好，进入管理
    {% else %}
    {{userInfo.username}}
    {% endif %}
     </a>
</li>

很棒吧！

十二. 后台处理成效及分界面

张开网址，登陆助理馆员客商，以前已经做出了步入处理链接。

主干逻辑

大家渴求张开的网站是：http://localhost:9001/admin。后台管理是依据admin.js上拓宽的。

先对admin.js做如下测量检验：

var express=require('express');


var router=express.Router();

router.use(function(req,res,next){
    if(!req.userInfo.isAdmin){
        // 如果当前用户不是管理员
        res.send('不是管理员！');
        return;
    }else{
        next();
    }
});

router.get('/',function(res,req,next){
   res.send('管理首页');
});

module.exports=router;

图片 27

当登陆客户不是助理馆员。直接体现“不是管理员”

后台界面包车型客车前端完毕

后台意味着你要写贰个后台分界面。那些index页面放在view>admin文件夹下。所以router应该是：

router.get('/',function(req,res,next){
   res.render('admin/index');
});

因此你还得在admin文件夹写贰个index.html

后台管理基于以下结构：

  • 首页
  • 设置
  • 分类处理
  • 作品管理
  • 评价管理

因为是有时写的，凑合着看大约是这么。

<header>
    <h1>后台管理系统</h1>

</header>
你好，{{userInfo.username}}！ <a href="javascript:;">退出</a>
<aside>
    <ul>
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">设置</a></li>
        <li><a href="/admin/user">用户管理</a></li>
        <li><a href="javascript:;">分类管理</a></li>
        <li><a href="javascript:;">文章管理</a></li>
        <li><a href="javascript:;">评论管理</a></li>
    </ul>
</aside>
<section>
    {% block main %}{% endblock %}
</section>
<footer></footer>

图片 28

父类模板

那一个代码应该是可复用的。由此得以应用父类模板的成效。

继承

在同文件夹下新建一个layout.html。把前端代码全体剪切跻身。那时候admin/index.html一个字符也不剩了。

怎么访谈呢？

在index下面，输入：

{% extends 'layout.html' %}

再刷新localhost:9001/admin，开采页面又赶回了。

有了父类模板的法力，大家能够做过多思想政治工作了。

非公用的沙盘成分

好像面向对象的后续，右下方区域是见仁见智的剧情，不该写进layout中，因而得以写为

<section>
{% block 占位区块名称 %}{% endblock %}
</section>

接下来回来index.html，定义那么些区块的从头到尾的经过

{% block main %}
<!-- 你的html内容 -->
{% endblock %}

十三. 顾客管理

要求：点击“客户管理”，右下方的中央页面展现博客的注册顾客数量。

由此链接应该是：

<li><a href="/admin/user">用户管理</a></li>

实际变成这块，应该都熟悉流程了。每增添一个新的页面，意味着写贰个新的路由。在路由里渲染三个新的沙盘。在渲染的第一个参数里，以指标的形式写好您希图用来渲染的信息。

回到admin.js

router.get('/user/',function(req,res,next){
    res.render('admin/user_index',{
        userInfo:req.userInfo
    })
});

为了和index区分，新的页面定义为user_index。因而在view/admin文件夹下创设二个user_index.html

先做个大约的测量检验呢

{% extends 'layout.html' %}

{% block main %}
用户列表
{% endblock %}

点击就涌出了列表。

接下去正是要从数据库中读取全体的顾客数据。然后传进模板中。

读取客商数量

model下的User.js输出的对象饱含大家须求的艺术。

大家的User.js是这么的

var mongoose=require('mongoose');

// 用户的表结构
var usersSchema=require('../schemas/users');

module.exports=mongoose.model('User',usersSchema);

回到admin.js

var User=reuire('/model/User.js');

User有二个格局是find方法，再次回到的是三个promise对象

试着打字与印刷出来：

User.find().then(function(user){
        console.log(user);
    });

结果一看，厉害了：

图片 29

日前博客的四个顾客都打字与印刷出来了。

接下去就是把这一个指标传进去了，就跟传ajax一样：

var User=require('../models/User');
//用户管理

User.find().then(function(user){
    router.get('/user/', function (req,res,next) {
        res.render('admin/user_index',{
            userInfo:req.userInfo,
            users:user
        })
    })
});

模板就会选择顾客数量了。

模板怎么着利用后台传进来的客户对象数据

main的呈现区中，应该是叁个标题。下边是一串表格数据。

大约效果如图

图片 30

那亟需模板中的循环语法

{% extends 'layout.html' %}

{% block main %}
<h3>用户列表</h3>

<table class="users-list">
    <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>是否管理员</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
        <tr>
            <td>{{user._id.toString()}}</td>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
            <td>
                {% if user.isAdmin %}
                是
                {% else %}
                不是
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

来得结果如图

图片 31

分页展现（limit方法）

实质上客商多了，就须求分页

设若大家分页只须要对User对象实践三个limit方法。举例小编想每页只体现1条客户数量：

router.get('/user/', function (req,res,next) {
    User.find().limit(1).then(function(user){
        res.render('admin/user_index',{
            userInfo:req.userInfo,
            users:user
        });
    });
});

分页呈现设置（skip）

User的skip方法用于安装截取地点。比方skip(2)，表示从第3条初阶取。

举个例子本身想每页设置两条数据：

  • 第一页：1=> skip(0)
  • 第二页：2=>skip(1)
  • 故此，当本身要在第page页突显limit条数据时，skip方法里的数字参数为：（page-1）*limit

比方本身要显得第二页数据：

router.get('/user/', function (req,res,next) {
    var page=2;
    var limit=1;
    var skip=(page-1)*limit;

    User.find().limit(limit).skip(skip).then(function(user){
        res.render('admin/user_index',{
            userInfo:req.userInfo,
            users:user
        });
    });
});

不过究竟有稍许页不是大家所能决定的。

有多少页？（req.query.page）

第一要消除怎么顾客怎么访问下一页的难题，一般的话，在网页中输入http://localhost:9001/admin/user?pages=数字

就可以透过页面访问到。

既然page不能够定死，那就把page写活。

var page=req.query.page||1;

这么就缓和了

分页开关

又回来了前边二个。

分页按键是平昔做在报表的末尾。

到近些日子结束，写二个“上一页”和“下一页”的逻辑就好了——当在首先页时，上一页不显得，当在第最终一页时，下一页不出示

第一，把page传到前者去：

router.get('/user/', function (req,res,next) {
    var page=req.query.page||1;
    var limit=1;
    var skip=(page-1)*limit;

    User.find().limit(limit).skip(skip).then(function(user){
        res.render('admin/user_index',{
            userInfo:req.userInfo,
            users:user,
            page:page
        });
    });
});

瞩目，传到前端的page是个字符串情势的数字，所以采纳时必须换车为数字。

询问总页数（User.count）

user.count是一个promise对象，

User.count().then(function(count){
  console.log(count);
})

其一count即是总记录条数。把这些count获取到后来，总计出必要多少页（向上取整），传进渲染的对象中。注意，那几个操作都以异步的。所以不能够用变量积攒count。而应当把前边的渲染代码写到then的函数中

再有一个题材是页面取值。不应当出现page=200那样不创建的数字。所以用min方法取值。

router.get('/user/', function (req,res,next) {
    var page=req.query.page||1;
    var limit=1;
    var count=0;

    User.count().then(function(_count){
        count=_count;
        var pages=Math.ceil(count/limit);
        console.log(count);

        page=Math.min(page,pages);
        page=Math.max(page,1);

        var skip=(page-1)*limit;

        User.find().limit(limit).skip(skip).then(function(user){
            res.render('admin/user_index',{
                userInfo:req.userInfo,
                users:user,
                page:page,
                pages:pages
            });
        });
    });//获取总页数
});

丰硕表格消息

内需在表头做四个简便的计算，包涵如下音信

  • 合计有多少条客商记录
  • 每页呈现：多少条
  • 共多少页
  • 脚下是第多少页

就此应当这么写：

router.get('/user/', function (req,res,next) {
    var page=req.query.page||1;
    var limit=1;
    var count=0;

    User.count().then(function(_count){
        count=_count;
        var pages=Math.ceil(count/limit);


        page=Math.min(page,pages);
        page=Math.max(page,1);

        var skip=(page-1)*limit;

        User.find().limit(limit).skip(skip).then(function(user){
            res.render('admin/user_index',{
                userInfo:req.userInfo,
                users:user,
                page:page,
                pages:pages,
                limit:limit,
                count:count
            });
        });
    });//获取总页数
});

前端模板能够那样写：

{% extends 'layout.html' %}

{% block main %}
<h3>用户列表    <small>（第{{page}}页）</small></h3>

<table class="users-list">
    <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>是否管理员</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
        <tr>
            <td>{{user._id.toString()}}</td>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
            <td>
                {% if user.isAdmin %}
                是
                {% else %}
                不是
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<p class="table-info">一共有{{count}}个用户，每页显示{{limit}}个。</p>

<ul class="page-btn">
    {% if Number(page)-1!==0 %}
    <li><a href="/admin/user?page={{Number(page)-1}}">上一页</a></li>
    {% else %}
    <li>再往前..没有了</li>
    {% endif %}
    {% if Number(page)+1<=pages %}
    <li><a href="/admin/user?page={{Number(page)+1}}">下一页</a></li>
    {% else %}
    <li>已是最后一页</li>
    {% endif %}
</ul>

{% endblock %}

效果与利益如图

图片 32

封装

分页是八个无比常用的方式，能够思考把它包裹一下。

同目录下新建贰个page.html

把按键组件放进去。

{%include 'page.html'%}

结果有个难点，里面有一条写死的url（admin/xxx），为了缓和，能够安装为...admin/{{type}}?page=yyy，然后把回到admin.js，把type作为叁个天性传进去。

那正是说客商管理有个别就到此甘休了。

十四. 博客分类管理

前边已经实现了那么多页面，现在尝试完成博客内容的分类管理。

主导设置

率先把分类管理的链接修改为/category/，在admin.js中加进一个相应的路由。渲染的模版为admin/category_inndex.html。

路由器基本写法：

router.get('/category/',function(req,res,next){

    res.render('admin/category_index',{
        userInfo:req.userInfo
    });
});

模板基本结构：

{% extends 'layout.html' %}

{% block main %}

{% endblock %}

点击“分类管理”，央求的页面就出去了。当然依然八个航空模型板。

分类管理的奇特之处在于，它上面有三个子菜单（分类首页，管理分类）。对此我们得以用jQuery达成中央动作效果。

html结构

<li id="category">
            <a href="/admin/category">分类管理</a>
            <ul class="dropdown">
                <li><a href="javascript:;">管理首页</a></li>
                <li><a href="/admin/category/add">添加分类</a></li>
            </ul>
        </li>

jq

$('#category').hover(function(){
        $(this).find('.dropdown').stop().slideDown(400);
    },function(){
        $(this).find('.dropdown').stop().slideUp(400);
    });

要么得布局。

布局的骨干设置依然依据顾客的列表——二个大标题，五个表格。

增加分类页面

分类页面上边单独有个页面，叫做“加多分类“。

基本落实

依附地点的逻辑再写贰个抬高分类的路由

admin.js：

// 添加分类
router.get('/category/add',function(req,res,next){
    res.render('admin/category_add',{
        userInfo:req.userInfo
    });
});

同理，再增多一个category_add模板，差不离这么：

{% extends 'layout.html' %}

{% block main %}

<h3>添加分类    <small>>表单</small></h3>

<form>
    分类名<br/>
    <input type="text" name="name"/>
    <button type="submit">提交</button>
</form>

{%include 'page.html'%}
{% endblock %}

图片 33

脚下还特别简陋不过先完结效果与利益再说。

丰盛逻辑

累加提交格局为post。

<form method="post">
  <!--balabala-->
</form>

为此路由器还得写个post情势的函数。

// 添加分类及保存方法：post
router.post('/category/add',function(req,res,next){

});

post提交的结果，还是回到当前的页面。

post提交到哪个地方？当然照旧数据库。所以在schemas中新建二个付给数据库。categories.js

var mongoose=require('mongoose');

// 博客分类的表结构
module.exports= new mongoose.Schema({
    // 分类名称
    name: String,

});

好了。跟客商注册同样，再到model文件夹下边增加一个model加多贰个Categories.js：

var mongoose=require('mongoose');

// 博客分类的表结构
var categoriessSchema=require('../schemas/categories');

module.exports=mongoose.model('Category',categoriessSchema);

文件看起来比相当多，但思路清晰之后卓殊轻巧。

成功这一步，就可以在admin.js增加Category对象了。

admin.js的路由操作：管理前端数据

还记得bodyparser么？前端提交过来的数目都由它实行预管理：

// app.js
app.use(bodyParser.urlencoded({extended:true}));

有了它，就能够通过req.body来张开获取数据了。

刷新，提交内容。

在post方法函数中打字与印刷req.body：

图片 34

在那边自身点击了两次，当中第叁遍未有交到数据。记录为空字符串。那在法规中是不容许的。所以应当回到三个张冠李戴页面。

// 添加分类及保存方法：post
var Category=require('../models/Categories');
router.post('/category/add',function(req,res,next){

    //处理前端数据
    var name=req.body.name||'';
    if(name===''){
        res.render('admin/error',{
          userInfo:req.userInfo
        });
    }
});

荒唐页面，最好写二个赶回上一步（javascript:window.history.back()）。

<!--error.html-->
{% extends 'layout.html' %}}

{% block main %}
<h3>出错了</h3>
<h4>你一定有东西忘了填写！</h4>
<a href="javascript:window.history.back()">返回上一步</a>
{% endblock %}

破绽百出页面应该是可复用的。但的渲染要求传递哪些数据？

  • 错误音信（message）
  • 操作，重返上一步依旧跳转别的页面？
  • url，跳转到哪儿？

就当前项目来说，大概那样就行了。

res.render('admin/error',{
            userInfo:req.userInfo,
            message:'提交的内容不得为空！',
            operation:{
                url:'javascript:window.history.back()',
                operation:'返回上一步'
            }
        });

模板页面：

{% extends 'layout.html' %}}

{% block main %}
<h3>出错了</h3>
<h4>{{message}}</h4>
<a href={{operation.url}}>{{operation.operation}}</a>
{% endblock %}

设若名称不为空（save方法）

鲜明性，这么些和顾客名的证实是同等的。用findOne方法,在回去的promise对象实施then。再次来到多个新的目录，再实行then。进行渲染。

说不上，必要四当中标页面。基本协会和错误分界面同样。只是h3标题分裂

    // 查询数据是否为空
    Category.findOne({
        name:name
    }).then(function(rs){
        if(rs){//数据库已经有分类
            res.render('admin/error',{
                userInfo:req.userInfo,
                message:'数据库已经有该分类了哦。',
                operation:{
                    url:'javascript:window.history.back()',
                    operation:'返回上一步'
                }
            });
            return Promise.reject();
        }else{//否则表示数据库不存在该记录，可以保存。
            return  new Category({
                name:name
            }).save();
        }
    }).then(function(newCategory){
        res.render('admin/success',{
            userInfo:req.userInfo,
            message:'分类保存成功！',
            operation:{
                url:'javascript:window.history.back()',
                operation:'返回上一步'
            }
        })
    });
});

接下去的事就又交给前端了。

数码可视化

名扬四海，渲染的分类管理页面应该还恐怕有三个报表。以后顺便把它成功了。其实基本逻辑和事先的客商分类呈现是均等的。并且代码非常重复：

// 添加分类及保存方法
var Category=require('../models/Categories');


router.get('/category/', function (req,res,next) {
    var page=req.query.page||1;
    var limit=2;
    var count=0;

    Category.count().then(function(_count){
        count=_count;
        var pages=Math.ceil(count/limit);

        page=Math.min(page,pages);
        page=Math.max(page,1);

        var skip=(page-1)*limit;

        Category.find().limit(limit).skip(skip).then(function(categories){

            res.render('admin/category_index',{
                type:'category',
                userInfo:req.userInfo,
                categories:categories,
                page:page,
                pages:pages,
                limit:limit,
                count:count
            });
        });
    });//获取总页数
});

能够封装成函数了——一下就少了三分之二的代码量。

functionrenderAdminTable(obj,type,limit){
    router.get('/'+type+'/', function (req,res,next) {
        var page=req.query.page||1;

        var count=0;

        obj.count().then(function(_count){
            count=_count;
            var pages=Math.ceil(count/limit);

            page=Math.min(page,pages);
            page=Math.max(page,1);

            var skip=(page-1)*limit;

            obj.find().limit(limit).skip(skip).then(function(data){

                res.render('admin/'+type+'_index',{
                    type:type,
                    userInfo:req.userInfo,
                    data:data,
                    page:page,
                    pages:pages,
                    limit:limit,
                    count:count
                });
            });
        });//获取总页数
    });
}
//调用时，
//用户管理首页
var User=require('../models/User');
renderAdminTable(User,'user',1);
//分类管理首页
// 添加分类及保存方法
var Category=require('../models/Categories');
renderAdminTable(Category,'category',2);

模板

{% extends 'layout.html' %}

{% block main %}

<h3>分类列表</h3>

<table class="users-list">
    <thead>
    <tr>
        <th>id</th>
        <th>分类名</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for category in data %}
    <tr>
        <td>{{category._id.toString()}}</td>
        <td>{{category.name}}</td>
        <td>
          <a href="/admin/category/edit">修改 </a>
            |<a href="/admin/category/edit"> 删除</a>
        </td>
        <td></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

{%include 'page.html'%}
{% endblock %}

博客分类的改动与删除

主旨逻辑

删除的开关是/admin/category/delete?id={{category._id.toString()}}，同理修改的开关是/admin/category/edit?id={{category._id.toDtring()}}（带id的请求）。

那意味着多少个新的页面和路由：

分类修改，分类删除。

删去和改造都根据一套比较谨严的逻辑。当中期维修改的各类剖断万分辛劳，然而，修改和删除的逻辑基本是大同小异的。

当二个总指挥在进展修改时，另八个组织者也也许改造（删除）了数额。因而需求严苛剖断。

修改（update）

修改首先做的是逻辑，依照发送诉求的id值举行退换。要是id不设有则赶回错误页面，假使存在，则切换成新的交由页面

// 分类修改
router.get('/category/edit',function(req,res,next){

    // 获取修改的分类信息，并以表单的形式呈现，注意不能用body，_id是个对象，不是字符串
    var id=req.query.id||'';

    // 获取要修改的分类信息
    Category.findOne({
        _id:id
    }).then(function(category){
        if(!category){
            res.render('admin/error',{
                userInfo:req.userInfo,
                message:'分类信息不存在！'
            });
            return Promise.reject();
        }else{
            res.render('admin/edit',{
                userInfo:req.userInfo,
                category:category
            });
        }
    });
});

然后是叁个交到页，post重回的是时下页面

{% extends 'layout.html' %}

{% block main %}

<h3>分类管理    <small>>编辑分类</small></h3>

<form method="post">
    分类名<br/>
    <input type="text" value="{{category.name}}" name="name"/>
    <button type="submit">提交</button>
</form>

依然以post央求保存数据。

  • 交由数据一致也急需看清id，当id海市蜃楼时，跳转到错误页面。

  • 当id存在，并且客户未有做别的修改，就交由，直接跳转到“修改成功”页面。实际上不做任何修改。

  • 当id存在，并且客商提交过来的名字和非原id（{$ne: id}）下的名字分化期，做两点判别：

  • 数据库是不是存在同名数据？是则跳转到错误页面。

  • 即使数据库不设有同名数据，则更新同id下的name数据值，并跳转“保存成功”。

    创新的法子是

    Category.update({
  _id:你的id
},{
  要修改的key:要修改的value
})

基于此逻辑能够写出这般的代码。

//分类保存
router.post('/category/edit/',function(req,res,next){
    var id=req.query.id||'';

    var name=req.body.name||name;
    Category.findOne({
        _id:id
    }).then(function(category){

        if(!category){
            res.render('admin/error',{
                userInfo:req.body.userInfo,
                message:'分类信息不存在！'
            });
            return Promise.reject();
        }else{
            // 如果用户不做任何修改就提交
            if(name==category.name){
                res.render('admin/success',{
                    userInfo:req.body.userInfo,
                    message:'修改成功！',
                    operation:{
                        url:'/admin/category',
                        operation:'返回分类管理'
                    }
                });
                return Promise.reject();
            }else{
                // id不变，名称是否相同
                Category.findOne({
                    _id: {$ne: id},
                    name:name
                }).then(function(same){

                    if(same){
                        res.render('admin/error',{
                            userInfo:req.body.userInfo,
                            message:'已经存在同名数据！'
                        });
                        return Promise.reject();
                    }else{

                        Category.update({
                            _id:id
                        },{
                            name:name
                        }).then(function(){
                            res.render('admin/success',{
                                userInfo:req.body.userInfo,
                                message:'修改成功！',
                                operation:{
                                    url:'/admin/category',
                                    operation:'返回分类管理'
                                }
                            });
                        });


                    }
                });
            }
        }
    });
});

为了防止异步难题，能够写得愈加入保证险一点。让它每一步都回来一个promise对象，

//分类保存
router.post('/category/edit/',function(req,res,next){
    var id=req.query.id||'';

    var name=req.body.name||name;
    Category.findOne({
        _id:id
    }).then(function(category){

        if(!category){
            res.render('admin/error',{
                userInfo:req.body.userInfo,
                message:'分类信息不存在！'
            });
            return Promise.reject();
        }else{
            // 如果用户不做任何修改就提交
            if(name==category.name){
                res.render('admin/success',{
                    userInfo:req.body.userInfo,
                    message:'修改成功！',
                    operation:{
                        url:'/admin/category',
                        operation:'返回分类管理'
                    }
                });
                return Promise.reject();
            }else{
                // 再查询id：不等于当前id
                return Category.findOne({
                    _id: {$ne: id},
                    name:name
                });
            }
        }
    }).then(function(same){
        if(same){
            res.render('admin/error',{
                userInfo:req.body.userInfo,
                message:'已经存在同名数据！'
            });
            return Promise.reject();
        }else{
            return Category.update({
                _id:id
            },{
                name:name
            });
        }
    }).then(function(resb){
        res.render('admin/success',{
            userInfo:req.body.userInfo,
            message:'修改成功！',
            operation:{
                url:'/admin/category',
                operation:'返回分类管理'
            }
        });
    });
});

如此就能够落到实处修改了。

删除（remove）

删除的逻辑类似。然而要简Bellamy些，判别页面是还是不是还留存该id，是就删除，也不供给特地去写删除分界面。，只需求贰个打响或停业的分界面就OK了。

剔除用的是remove方法——把_id属性为id的条文删除就行呐

// 分类的删除
router.get('/category/delete',function(req,res){
    var id=req.query.id;

    Category.findOne({
        _id:id
    }).then(function(category){
        if(!category){
            res.render('/admin/error',{
                userInfo:req.body.userInfo,
                message:'该内容不存在于数据库中！',
                operation:{
                    url:'/admin/category',
                    operation:'返回分类管理'
                }
            });
            return  Promise.reject();
        }else{
            return Category.remove({
             _id:id
             })
        }
    }).then(function(){
        res.render('admin/success',{
            userInfo:req.body.userInfo,
            message:'删除分类成功！',
            operation:{
                url:'/admin/category',
                operation:'返回分类管理'
            }
        });
    });
});

前台分类导航空展览示与排序

前台的领航分类是写死的，今后是时候把它换来我们须要的内容了。

因为自身个人项目标关联，笔者一流导航是原则性的。所以就在文章分类下落成下拉菜单。

从数据库读取前台首页内容，基于main.js

为此还得引进Category

var Category=require('../models/Categories');
router.get('/',function(req,res,next){
    // 读取分类信息
    Category.find().then(function(rs){
        console.log(rs)
    });

    res.render('main/index',{
        userInfo:req.userInfo
    });
});

运营后打字与印刷出来的音信是：

图片 35

就马到功成得到了后台数据。

接下去就是把数据加到模板里面去呀

var Category=require('../models/Categories');

router.get('/',function(req,res,next){

    // 读取分类信息
    Category.find().then(function(categories){
        console.log(categories);
        res.render('main/index',{
            userInfo:req.userInfo,
            categories:categories
        });
    });

});

前端模板这么写：

<ul class="nav-article">
                            {% if !userInfo._id %}
                            <li><a href="javascript:;">仅限注册用户查看！</a></li>{%else%}{%for category in categories %}<li><a href="javascript:;">{{category.name}}</a></li>{% endfor %}{% endif %}</ul>

你在后台修改分类，

图片 36

结果就出去了。相当好，蛮好。

然则有一个小标题，正是咱们获得的多寡是倒序的。

思路1：在后端把这么些数组reverse一下。就符合健康的决断逻辑了。

res.render('main/index',{
            userInfo:req.userInfo,
            categories:categories.reverse()
        });

但这不是并世无两的笔触，从展现后端功效的设想，最新扩展加的应当在最终边，所以有了思路2

思路2：回到admin.js对Category进行排序。

id表面上看是一串毫无规律的字符串，然则它实在是安份守己时间排列的。

那就行了，依照id用sort方法排序

obj.find().sort({_id:-1})......
//-1表示降序，1表示升序

博客分类管理那有的到此甘休了。

十五. 小说管理（1）：后台

小说管理依然依据admin.js

<!--layout.html-->
<li><a href="/admin/content">文章管理</a></li>

扩充一个管理首页

<!--content.html-->
{% extends 'layout.html' %}

{% block main %}

<h3>文章管理 </h3>
<a href="content/add">添加新的文章！</a>

<!--表格-->

{% endblock %}

再增加三个编纂成文的分界面，当中，要获得分类消息

{% extends 'layout.html' %}

{% block main %}

<h3>文章管理    <small>>添加文章</small></h3>

<form method="post">

    标题
    <input type="text" name="title"/>
    分类
    <select name="categories">
        {% for category in categories %}
        <option value="{{category._id.toString()}}">{{category.name}}</option>
        {% endfor %}
    </select>
    <button type="submit">提交</button><br>
    内容摘要<br>
    <textarea id="description" cols="150" rows="3" placeholder="请输入简介" name="description">

    </textarea>
    <br>
    文章正文<br>
    <textarea id="article-content">

    </textarea>

</form>

{% endblock %}

成效如下

图片 37

再写多少个路由。

// admin.js
// 内容管理
router.get('/content',function(req,res,next){

    res.render('admin/content_index',{
        userInfo:req.userInfo
    });
});

// 添加文章
router.get('/content/add',function(req,res,next){
    Category.find().then(function(categories){
        console.log(categories)
        res.render('admin/content_add',{
            userInfo:req.userInfo,
            categories:categories
        });
    })
});

获取数据

照旧选拔了schema设计应当积攒的内容。

最关键的当然是文章相关——标题，简单介绍，内容，发布时间。

还也是有贰个不行忽略的标题，正是文章隶属分类。大家是基于分类id举办区分的

// schemas文件夹下的content.js

var mongoose=require('mongoose');

module.exports=new mongoose.Schema({
    // 关联字段 -分类的id
    category:{
        // 类型
        type:mongoose.Schema.Tpyes.ObjectId,
        // 引用，实际上是说，存储时根据关联进行索引出分类目录下的值。而不是存进去的值。
        ref:'Category'
    },

    // 标题
    title:String,

    // 简介
    description:{
        type:String,
        default:''
    },

    // 文章内容
    content:{
        type:String,
        default:''
    },

    // 当前时间
    date:String

});

接下去即是创设二个在models下边创设一个Content模型

// model文件夹下的Content.js

var mongoose=require('mongoose');
var contentsSchema=require('../schemas/contents');

module.exports=mongoose.model('Content',contentsSchema);

剧情保留是用post格局提交的。

因而再写四个post路由

//admin.js
// 内容保存
router.post('/content/add',function(req,res,next){

    console.log(req.body);
});

在后台输入内容，提交，就看到提交上去的数目了。

图片 38

不错。

表单验证

总结的印证法则：不能为空

表达不可能为空的时候，应该调用trim方法管理以往再张开认证。

// 内容保存
router.post('/content/add',function(req,res,next){
    console.log(req.body)
    if(req.body.category.trim()==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'分类信息不存在！'
        });
        return Promise.reject();
    }

    if(req.body.title.trim()==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'标题不能为空！'
        });
        return Promise.reject();
    }

    if(req.body.content.trim()==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'内容忘了填！'
        });
        return Promise.reject();
    }


});

还会有个问题。就是简要介绍（摘要）

保留数据库数据

封存和渲染相关的方式都以透过引进模块来进展的。

var Content=require('../models/Contents');
····

new Content({
        category:req.body.category,
        title:req.body.title,
        description:req.body.description,
        content:req.body.content,
        date:new Date().toDateString()
    }).save().then(function(){
            res.render('admin/success',{
                userInfo:req.userInfo,
                message:'文章发布成功！'
            });
        });
····

然后您公布一篇小说，验证正确后，就能够油不过生“发表成功”的页面。

下一场您就足以在数据库查询到想要的剧情了

图片 39

其一指标有日前文章相关的从头到尾的经过，也会有栏目所属的id，也许有内容本人的id。还会有日期

为了展现内容，能够用事先封装的renderAdminTable函数

{% extends 'layout.html' %}

{% block main %}

<h3>文章管理 </h3>
<a href="content/add">添加新的文章！</a>

<table class="users-list">
    <thead>
    <tr>
        <th>标题</th>
        <th>所属分类</th>
        <th>发布时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for content in data %}

    <tr>
        <td>{{content.title}}</td>
        <td>{{content.category}}</td>
        <td>
            {{content.date}}
        </td>
        <td>
            <a href="/admin/content/edit?id={{content._id.toString()}}">修改 </a>
            |<a href="/admincontent/delete?id={{content._id.toString()}}"> 删除</a>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

{%include 'page.html'%}
{% endblock %}

图片 40

分类名凸显出来的是个object

分类名用的是data.category。

但要是换到data.category.id就能够博取到三个buffer对象，那个buffer对象转变后，应该即是归类音讯。

然而从来用的话，又显得乱码。

这就有一些小麻烦了。

重播schema中的数据库，当存款和储蓄后，会自行关联Category模对象（注意：这里的Category本来是admin.js的Category）实行询问。查询意味着有三个新的点子populate。populate方法的参数是实行查询的习性。在此地大家要操作的脾气是category。

// 这是一个功能函数
functionrenderAdminTable(obj,type,limit,_query){
    router.get('/'+type+'/', function (req,res,next) {
        var page=req.query.page||1;
        var count=0;

        obj.count().then(function(_count){
            count=_count;
            var pages=Math.ceil(count/limit);
            page=Math.min(page,pages);
            page=Math.max(page,1);

            var skip=(page-1)*limit;
            /*            * sort方法排序，根据id，            * */
            var newObj=_query?obj.find().sort({_id:-1}).limit(limit).skip(skip).populate(_query):obj.find().sort({_id:-1}).limit(limit).skip(skip);
            newObj.then(function(data){
                console.log(data);

                res.render('admin/'+type+'_index',{
                    type:type,
                    userInfo:req.userInfo,
                    data:data,
                    page:page,
                    pages:pages,
                    limit:limit,
                    count:count
                });
            });
        });//获取总页数
    });
}

diao调用时写法为：renderAdminTable(Content,'content',2,'category');

打字与印刷出来的data数据为：

图片 41

发觉Category的查询结果就回到给data的category属性了

很棒吧！那就把模版改了

图片 42

不错不错。

修改和删除

修改和删除基本上根据同二个逻辑。

修改

恳请的稿子id假设在数据库查询不到，那就回去错误页面。否则渲染叁个编辑页面（content_edit）——注意，这里得事先获取分类。

// 修改
router.get('/content/edit',function(req,res,next){
    var id=req.query.id||'';

    Content.findOne({
        _id:id
    }).then(function(content){
       if(!content){
           res.render('admin/error',{
               userInfo:req.userInfo,
               message:'该文章id事先已被删除了。'
           });
           return Promise.reject();
       }else{
           Category.find().then(function(categories){
               // console.log(content);
               res.render('admin/content_edit',{
                   userInfo:req.userInfo,
                   categories:categories,
                   data:content
               });
           });
       }
    });
});

把前端页面彰显出来之后正是保存。

保留的post逻辑大概，但实际上能够简化。

// 保存文章修改
router.post('/content/edit',function(req,res,next){
    var id=req.query.id||'';

    Content.findOne({
        _id:id
    }).then(function(content){
        if(!content){
            res.render('admin/error',{
                userInfo:req.body.userInfo,
                message:'文章id事先被删除了！'
            });
            return Promise.reject();
        }else{
            return Content.update({
                _id:id
            },{
                category:req.body.category,
                title:req.body.title,
                description:req.body.description,
                content:req.body.content
            });
        }
    }).then(function(){
        res.render('admin/success',{
            userInfo:req.body.userInfo,
            message:'修改成功！',
            operation:{
                url:'/admin/content',
                operation:'返回分类管理'
            }
        });
    });
});

删除

骨干大致。

router.get('/content/delete',function(req,res,next){
   var id=req.query.id||'';

    Content.remove({
        _id:id
    }).then(function(){
        res.render('admin/success',{
            userInfo:req.userInfo,
            message:'删除文章成功！',
            operation:{
                url:'/admin/content',
                operation:'返回分类管理'
            }
        });
    });
});

音讯扩大（发表者，点击量）

能够在数据表结构中再增加多个属性

user: {
        //类型
        type:mongoose.Schema.Types.objectId,
        //引用
        ref:'User'
    },

    views:{
      type:Number,
      default:0
    }

下一场在篇章增多时，扩张三个user属性，把req.userInfo._id传进去。

突显呢？实际上populate方法接受一个字符串大概有字符串组成的数组。所以数组应该是xxx.populate(['category','user'])。这样模板就会得到user的属性了。

接下来修改模板，让它显现出来：

图片 43

十六. 小说管理（2）：前台

先给博客写点东西吗。当前的篇章确实太少了。

当我们写好了稿子，内容就早就贮存在服务器上了。前台怎么渲染是一个值得怀想的标题。分明，这个业务都以main.js落成的。

那儿注意了，入门二个世界，知道本人在干什么是非常主要的。

获得数据集

由于作业逻辑，笔者的博客内容设置为不在首页显示，要求在/article页特地体现本身的稿子，除了全体文章，分类链接渲染的是：/article?id=xxx。

先看整个稿子下的/article怎么渲染吧。

图片 44

小说页效果预期是那般的：

图片 45

  • 小说页须要吸取作品的音讯。
  • 小说须求吸取分页相关的新闻。

作品页须要吸取的新闻很多，所以写贰个data对象，把那一个音讯放进去，到渲染时平素用那一个data就行了。

//main.js
var express=require('express');

var router=express.Router();

var Category=require('../models/Categories');
var Content=require('../models/Content');
/**省略首页路由**/
router.get('/article',function(req,res,next){
    var data={
        userInfo:req.userInfo,
        categories:[],
        count:0,
        page:Number(req.query.page||1),
        limit:3,
        pages:0
    };

    // 读取分类信息
    Category.find().then(function(categories){
        data.categories=categories;

        return Content.count();
    }).then(function(count){
        data.count=count;
        //计算总页数
        data.pages=Math.ceil(data.count/data.limit);
        // 取值不超过pages
        data.page=Math.min(data.page,data.pages);
        // 取值不小于1
        data.page=Math.max(data.page,1);
        // skip不需要分配到模板中，所以忽略。
        var skip=(data.page-1)*data.limit;

        return Content.find().limit(data.limit).skip(skip).populate(['category','user']).sort(_id:-1);


    }).then(function(contents){
        data.contents=contents;
        console.log(data);//这里有你想要的所有数据
        res.render('main/article',data);
    })
});

该程序反映了data一步步获取内容的进度。

前台应用数据

  • 自家只须要对小说展现做个for循环，然后把多少传进模板中就可以了。

“`javascript
{% for content in contents %}

{{content.date.slice(5,11)}}

{{content.category.name.slice(0,3)+’..’}}

 

                  <p>{{content.description}}</p>
                  <address>推送于{{content.date}}</address>
              </div>
              {% endfor %}

“`

  • 左边栏有一个小说内容分类区，把多少传进去就行了。

  • 分页开关能够这么写

“`html

  • 第一页
  • 上一页

 

{% if page+1<=pages %}
                      <li><a href="/article?page={{page+1}}">下一页</a></li>
                      {% endif %}
                      <li><a href="/article?page={{pages}}">最后页</a></li>
                  </ul>
              </div>

“`

效果：

图片 46

你会发觉，模板的代码越写越轻便。

赢得分类下的页面（where方法）

今昔来缓慢解决分类的主题材料。

此前我们写好的分类页面地址为/article?category={{category._id.toString()}}

故而要对现阶段的id进行响应。借使乞求的category值为不空，则调用where显示。

router.get('/article',function(req,res,next){
    var data={
        userInfo:req.userInfo,
        category:req.query.category||'',
        categories:[],
        count:0,
        page:Number(req.query.page||1),
        limit:3,
        pages:0
    };
    var where={};
    if(data.category){
        where.category=data.category
    }
  //...
  return Content.where(where).find().limit(data.limit).skip(skip).sort({_id:-1}).populate(['category','user']);

如此点击相应的归类，就可以得到到对应的质感了。

可是页码照旧有标题。原因在于count的得到，也相应依照where举办查询。

return Content.where(where).count();

别的二个页码难题是，页码的链接写死了。

倘使带上category就行了。

为此相比较完好的页码判定是：

<ul>
                        {% if pages>0 %}
                        <li><a href="/article?category={{category.toString()}}&page=1">第一页</a></li>
                        {% if page-1!==0 %}
                        <li><a href="/article?category={{category.toString()}}&page={{page-1}}">上一页</a></li>
                        {%endif%}

                        <li style="background:rgb(166,96,183);"><a style="color:#fff;"  href="javascript:;">{{page}}/{{pages}}</a></li>

                        {% if page+1<=pages %}
                        <li><a href="/article?category={{category.toString()}}&page={{page+1}}">下一页</a></li>
                        {% endif %}
                        <li><a href="/article?category={{category.toString()}}&page={{pages}}">最后页</a></li>
                        {% else %}
                        <li style="width: 100%;text-align: center;">当前分类没有任何文章！</li>
                        {% endif %}
                    </ul>

然后做一个当下分类高亮显示的剖断

<ul>
                        {% if category=='' %}
                        <li><a style="border-left: 6px solid #522a5c;" href="/article">全部文章</a></li>
                        {%else%}
                        <li><a href="/article">全部文章</a></li>
                        {% endif %}
                        {% for _category in categories %}
                        {% if category.toString()==_category._id.toString() %}
                        <li><a style="border-left: 6px solid #522a5c;" href="/article?category={{_category._id.toString()}}">{{_category.name}}</a></li>
                        {% else %}
                        <li><a href="/article?category={{_category._id.toString()}}">{{_category.name}}</a></li>
                        {% endif %}
                        {% endfor %}
                    </ul>

呈现文章详细新闻

同理内容详细的情况页要求给个链接,然后就再写三个路由。在此处自己用的是/view?contentid={{content._id}}。

着力逻辑

亟待哪些数据？

  • userInfo
  • 总体分拣新闻
  • 小说内容（content）——包涵近期小说所属的分类新闻

查询艺术：contentId

router.get('/view/',function(req,res,next){
    var contentId=req.query.contentId||'';
    var data={
        userInfo:req.userInfo,
        categories:[],
        content:null
    };

    Category.find().then(function(categories){
        data.categories=categories;
        return Content.findOne({_id:contentId});
    }).then(function(content){
        data.content=content;
        console.log(data);
        res.render('main/view',data);
    });
});

发现能够打字与印刷出小说的注重内容了。

接下去就是写模板。

新建四个article_layout.html模板，把article.html的保有剧情剪切进去。

博客展现页的要紧区域在于在此之前的从头到尾的经过列表。所以把它抽离出来。

把三个个内容根据逻辑加上去，大致正是这么。

图片 47

阅读数的落到实处

很简短，每当客商点击小说，阅读数就加1.

router.get('/view/',function(req,res,next){
    var contentId=req.query.contentId||'';
    var data={
        userInfo:req.userInfo,
        categories:[],
        content:null
    };

    Category.find().then(function(categories){
        data.categories=categories;
        return Content.findOne({_id:contentId});
    }).then(function(content){
        data.content=content;
        content.views++;//保存阅读数
        content.save();
        console.log(data);
        res.render('main/view',data);
    });
});

剧情评价

先把斟酌的体制写出来吧！大致是如此

图片 48

商酌是通过ajax提交的。是在ajax模块——api.js

讲评的post提交到数据库，应该放置数据库的contents.js中。

// 评论
    comments: {
        type:Array,
        default:[]
    }

每条切磋包罗如下内容：

斟酌者，争论时间，还也有评价的源委。

在api.js中写一个post提交的路由

// 评论提交
router.post('/comment/post',function(req,res,next){
    // 文章的id是需要前端提交的。
    var contentId=req.body.contentId||'';
    var postData={
        username:req.userInfo.username,
        postTime: new ConvertDate().getDate(),
        content: req.body.content
    };

    // 查询当前内容信息
    Content.findOne({
        _id:contentId
    }).then(function(content){
        content.comments.push(postData);
        return content.save()
    }).then(function(newContent){//最新的内容在newContent！
        responseData.message='评论成功！';
        res.json(responseData);
    })

});

接下来在你的view页面相关的公文中写八个ajax方法，我们要传递小说的id

不过文章的id最早并未发送过去。能够在view页面写贰个逃匿的input#contentId，把最近文章的id存进去。然后经过jQuery得到数码。

// 评论提交
    $('#messageComment').click(function(){
        $.ajax({
            type:'POST',
            url:'/api/comment/post',
            data:{
                contentId:$('#contentId').val(),
                content:$('#commentValue').val(),
            },
            success:function(responseData){
                console.log(responseData);
            }
        });
        return false;

    });

很轻松吗！

讲评提交后，清空输入框，然后下方出现新添的剧情。

摩登的剧情从哪来吗？在newContent处。所以大家只须求让responseData存进newContent，就能够兑现内容丰盛。

// api.js
//...
// 查询当前内容信息
    Content.findOne({
        _id:contentId
    }).then(function(content){
        content.comments.push(postData);
        return content.save()
    }).then(function(newContent){
        responseData.message='评论成功！';
        responseData.data=newContent;
        res.json(responseData);
    })

//...

图片 49

看，那样就获得多少了。

接下去就在前边三个渲染页面：

用那么些获得内容。

functionrenderComment(arr){
    var innerHtml='';
    for(var i=0;i<arr.length;i++){
        innerHtml='<li>'+arr[i].username+' '+arr[i].postTime+'<p>'+arr[i].content+'</p></li>'+innerHtml;
    }
    return innerHtml;
}

    // 评论提交
    $('#messageComment').click(function(){
        $.ajax({
            type:'POST',
            url:'/api/comment/post',
            data:{
                contentId:$('#contentId').val(),
                content:$('#commentValue').val(),
            },
            success:function(responseData){
                console.log(responseData);
                alert(responseData.message);
                var arr= responseData.data.comments;
                //console.log(renderComment(arr));
                $('.comments').html(renderComment(arr));
            }
        });
        return false;

    });

像这种类型就能够展现出来了。然而开采页面一刷新，内容就又从未了——加载时就调用ajax方法。

api是提供一个虚构地址，ajax能够从那个地点获取数据。

从新写三个路由：

//api.js
// 获取指定文章的所有评论
router.get('/comment',function(req,res,next){
    var contentId=req.query.contentId||'';
    Content.findOne({
       _id:contentId
    }).then(function(content){
        responseData.data=content;
        res.json(responseData);
    })
});

留心这里是get方式

 //每次文章重载时获取该文章的所有评论
    $.ajax({
        type:'GET',
        url:'/api/comment',
        data:{
            contentId:$('#contentId').val(),
            content:$('#commentValue').val(),
        },
        success:function(responseData){
            console.log(responseData);
            var arr= responseData.data.comments;
            //console.log(renderComment(arr));
            $('.comments').html(renderComment(arr));
            $('#commentValue').val('');
            $('#commentsNum').html(arr.length)
        }
    });

讲评分页

分因为是ajax诉求到的数码，所以完全能够在前面一个达成。

评价分页太老旧了。不比做个伪瀑布流吧！

料想作用：点击加载更加多按键，出现三条商量。

故而说是伪，因为争辨一早已得到手了。只是分段显示而已。当然你也得以写真的。每点击二遍都触发新的ajax央求。只诉求三条新的数额。

批评部分完全能够写贰个目的。重新恢复设置方法，加载方法，获取数据方法。

写下去又是一大篇文章。

// 加载评论的基本逻辑
functionComments(){
    this.count=1;
    this.comments=0;
}

在ajax央浼商酌内容是时，给每条批评的li加三个data-index值。

// 获取评论内容
Comments.prototype.getComment=function(arr){
    var innerHtml='';
    this.comments=arr.length;//获取评论总数
    for(var i=0;i<arr.length;i++){
        innerHtml=
            '<li data-index='+(arr.length-i)+'>'+
            arr[i].username+
            ' '+
            arr[i].postTime+
            '<p>'+
            arr[i].content+
            '</p></li>'+innerHtml;
    }

    return innerHtml;
};

在历次加载页面,每回发完商议的时候，都发轫化商酌页面。首先要做的是解绑加载开关大概的风浪。当批评数少于三条，加载开关产生“未有更加多了”。超越三条时，数据自动遮蔽。

Comments.prototype.resetComment=function (limit){
    this.count=1;
    this.comments=$('.comments').children().length;//获取评论总数
    $('#load-more').unbind("click");

    if(this.comments<limit){
        $('#load-more').text('..没有了');
    }else{
        $('#load-more').text('加载更多');
    }

    for(var i=1;i<=this.comments;i++){
        if(i>limit){
            $('.comments').find('[data-index='+ i.toString()+']').css('display','none');
        }
    }
};

点击加载开关，依照点击计数加载批评

Comments.prototype. loadComments=function(limit){
    var _this=this;
    $('#load-more').click(function(){
        //console.log([_this.comments,_this.count]);
        if((_this.count+1)*limit>=_this.comments){
            $(this).text('..没有了');

        }
        _this.count++;

        for(var i=1;i<=_this.comments;i++){
            if(_this.count<i*_this.count&&i<=(_this.count)*limit){
                $('.comments').find('[data-index='+ i.toString()+']').slideDown(300);
            }
        }
    });
};

下一场正是在网页中央银行使那几个情势：

$(function(){
    //每次文章重载时获取该文章的所有评论
    $.ajax({
        type:'GET',
        url:'/api/comment',
        data:{
            contentId:$('#contentId').val(),
            content:$('#commentValue').val(),
        },
        success:function(responseData){

            var arr= responseData.data.comments;
            //渲染评论的必要方法
            var renderComments=new Comments();

            //获取评论内容
            $('.comments').html(renderComments.getComment(arr));

            //清空评论框
            $('#commentValue').val('');

            //展示评论条数
            $('#commentsNum').html(arr.length);

            //首次加载展示三条，每点击一次加载3条
            renderComments.resetComment(3);
            renderComments.loadComments(3);


            // 评论提交
            $('#messageComment').click(function(){
                $.ajax({
                    type:'POST',
                    url:'/api/comment/post',
                    data:{
                        contentId:$('#contentId').val(),
                        content:$('#commentValue').val(),
                    },
                    success:function(responseData){

                        alert(responseData.message);
                        var arr= responseData.data.comments;
                        $('.comments').html(renderComments.getComment(arr));
                        $('#commentValue').val('');
                        $('#commentsNum').html(arr.length);

                        renderComments.resetComment(3);
                        renderComments.loadComments(3);
                    }
                });
                return false;
            });



        }
    });

});

公布者音讯和文章分类展现

get方式获得的内容中就算有了小说小编id，不过从未小编名。也缺点和失误当前作品的原委。所以在get获取之后，供给发送公布者的新闻。

一派，由于view.html承袭的是article的模版。而article是内需在在发送的一流目录下存放四个category属性，工夫在模板决断展现。

于是必要把data.content.category移到上层数性来。

}).then(function(content){
        //console.log(content);
        data.content=content;
        content.views++;
        content.save();

       return User.find({
            _id:data.content.user
        });

    }).then(function(rs){
        data.content.user=rs[0];
        data.category=data.content.category;
        res.render('main/view',data);
    });

markdown模块的利用

今昔的博客内容是混乱无序的。

那就用到最后二个模块——markdown

鲁人持竿逻辑来讲，内容渲染不应该在后端举行。纵然你也能够这么做。但是渲染之后，编辑成文种发出非常大的难点。

由此本身要么使用熟习的marked.js，因为它能相比好的包容hightlight.js的代码高亮。

<script type="text/javascript" src="../../public/js/marked.js"></script>
<script type="text/javascript" src="../../public/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

// ajax方法
success:function(responseData){
           // console.log(responseData);
            var a=responseData.data.content;

            var rendererMD = new marked.Renderer();
            marked.setOptions({
                renderer: rendererMD,
                gfm: true,
                tables: true,
                breaks: false,
                pedantic: false,
                sanitize: false,
                smartLists: true,
                smartypants: false
            });


            marked.setOptions({
                highlight: function (code,a,c) {
                    return hljs.highlightAuto(code).value;
                }
            });
  //后文略...

在通过ajax请求到数据集之后，对剧情开展渲染。然后插入到内容中去。

那么模板里的小说内容就不要了。

不过，浏览器自带的html标签样式实在太丑了！在引进样式库吧

highlight.js附带的样式库提供了各类为主的语法高亮设置。

然后你能够参见bootstrap的code部分代码。再修改行距，自适应图片等等。让文章赏心悦目些。

图片 50

十七. 收尾

到方今结束，那个博客就基本落到实处了。

前面二个供给某些后端的逻辑，技能对产品有比较深厚的知晓。

上面关于Node.js的情节你大概也喜欢：

在 Ubuntu 14.04/15.04
上安装配置 Node.js v4.0.0 
http://www.linuxidc.com/Linux/2015-10/123951.htm

如何在CentOS
7安装Node.js
http://www.linuxidc.com/Linux/2015-02/113554.htm

Ubuntu 14.04下搭建Node.js开垦条件 
http://www.linuxidc.com/Linux/2014-12/110983.htm

Ubunru 12.04 下Node.js开采碰着的装置配置
http://www.linuxidc.com/Linux/2014-05/101418.htm

Node.Js入门[PDF+相关代码]
http://www.linuxidc.com/Linux/2013-06/85462.htm

Node.js开垦指南 高清PDF中文版 +源码
http://www.linuxidc.com/Linux/2014-09/106494.htm

Linux下安装Node.js详细完整教程 
http://www.linuxidc.com/Linux/2017-01/139726.htm

Ubuntu 16.04 64位 搭建 Node.js NodeJS 环境 
http://www.linuxidc.com/Linux/2016-09/135487.htm

Node.js
的详实介绍：请点这里
Node.js
的下载地址：请点这里

正文永远更新链接地址：http://www.linuxidc.com/Linux/2017-02/140115.htm

图片 51

编程技术
, ,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图