如何用 Node + Vue 搭建自己的博客

小小的前端开发,持续学习中....

文章正文

简介

本场chat的目的是通过我们自己写后端服务和前端页面做一个扩展性良好的博客来了解前后端工作的流程,形成一个知识的闭环。为了能让大家更轻松的入门,这场chat顺序略作调整,购买服务器、域名需要额外的费用,所以把服务器和ssl证书的配置放在最后。本场chat主要内容:

  1. node.js的安装
  2. express框架的简单使用
  3. express简单的接口和数据传递
  4. 前后端的数据交互
  5. mysql的crud
  6. session和redis的简单使用
  7. 富文本编辑器
  8. Vue项目的部署
  9. 服务器和ssl证书配置
  10. 进程守护

中间会穿插一些开发中常见问题,如跨域产生的原理,跨域的前端解决办法和后端解决办法,远程协作中内网穿透等等的问题。

1. node.js的安装

Node.js安装包及源码下载地址为:https://nodejs.org/en/download/

我们根据自己的系统选择合适的node.js安装包。安装方式很简单就像普通的程序安装一样,不过安装之后,需要配置环境变量。(新版本不需要设置环境变量了,软件会自动写入环境变量)。如果没有,请大家手动配置。

Windows: 我的电脑-->属性-->高级系统配置
增加变量名NODE_PATH值为node.js中node_modules的所在目录

Mac:

vim /etc/profile
export NODE_HOME=node所在路径
export PATH=$NODE_HOME/bibn:$PATH
:wq保存退出编译.使配置生效.
source /etc/profile

安装完之后,验证node是否安装成功,使用node -v和npm -v看时候有版本号。

注:mac还可以使用命令行安装,大家选择自己喜欢的方式,安装node.js。

2. express框架的简单使用

2.1 express的安装

express官网:http://www.expressjs.com.cn

express是一个基于node.js平台的极简灵活的web应用开发框架,要是用express首先要确保你已经安装好了node.js。

全局安装express框架:

npm install express -g
npm install express-generator -g  

在某个文件夹路径创建express项目:

express projectName

安装依赖:

cd  projectName
npm install

注:npm安装依赖时候,有时候网速太慢。推荐使用淘宝镜像,安装淘宝镜像方式:

npm install -g cnpm --registry=https://registry.npm.taobao.org

成功之后,以后即可使用cnpm install替代npm install。

2.2 express错误页的处理

依赖安装完成之后,我们运行npm start就启动项目了。这时候在浏览器输入http://localhost:3000/,就可以Welcome to Express页面了。这就代表已经运行成功了。

我们来看一下目录结构:

  • bin ==> 启动服务器文件,主要内容就是创建了一个node http server。如需修改服务端口,在此修改(默认3000)。
  • public ==> 存放静态资源目录。
  • routers ==> 接口、路由。
  • views ==> 存放jade的文件。
  • app.js ==> 服务启动入口引入包,创建express对象。
  • package.json ==>项目配置,简介,需要的依赖包等等。

注:当我们项目中需要使用别的包时,注意使用npm install 包名字 --save.这时候,包名才会保存在package.json里面。

服务启动了,我们现在尝试如何使用静态资源目录和定义错误页http://localhost:3000/html/index.html。就可以看到hello world了。这是因为在app.js里面已经定义了静态文件的跟目录是public。如果我们想要所有静态文件都存放在一个虚拟的目录下面,可以通过伪静态资源目录指定一个挂载路径的方式实现。可以使用app.use('/static', express.static('public'));(这种静态资源目录可以指定不止一个。) 这时候,我们再访问public/html/index.html就需要带有/static前缀的地址来访问public目录下面的文件了。

http://localhost:3000/static/html/index.html

但是当我们通过url访问一个不存在的url时,,会出现404。这种页面无疑很影响用户体验,我们做博客,404页面是必不可少的,它可以引导用户不要关闭网站,增强用户体验,也可以防止出现死链接。在express中我们可以使用多种方式定义错误页,如使用jade模板。我们想要当出现不存在的路径是,提示用户,没有该页面然后点击进入首页。

我们修改views下面的error.jade如下:

extends layout
block content
h1= message
a(href="/") to index

app.js里面,我们修改统一处理错误的方法。

// catch 404 and forward to error handler
app.use(function(req, res, next) {
            //使用jade模板
    res.render('error.jade', {
                message: 'i am sorry ,this page is noFound',
            })
        });

jade的语法很简答,大家可以在网上搜索jade的教程,如果不了解也没关系,因为我们也可以直接使用html当做错误页。比如,我们现在就使用前面写的hello world页面当做错误页。

app.use(function(req, res, next) {
//使用html
res.sendfile("./public/html/index.html");});

同理我们可以用这种方式处理接口错误时候的逻辑。如定义400请求方式错误,403权限不足,401身份认证失败等等的错误页。

3. express简单的接口和数据传递

数据请求方式常用的有4中,get,post,put,delete。我们可以直接使用routers/users.js。这里我们先不请求数据库,先了解如何写get,post接口,以及参数的传递。

express有三种获取参数的方法。官网是这么描述的:

Checks route params (req.params), ex: /data/:id  
Checks query string params (req.query), ex: ?id= 
Checks urlencoded body params (req.body), ex: id=  

第一种和第二种是典型的get请求,区别是多参数和单参数的传递。第三种是post。我们一个一个尝试一下。在users.js里面写两个get接口,一个post。

/*get */
router.get('/getTest1/:id', function(req, res, next) {
        var json = {
            code: 200,
            msg: req.params.id
        }
        res.send(json);
});
/*get */
router.get('/getTest2', function(req, r
                        
作者正在撰写中...
隐藏内容 支付可见
内容互动
写评论
加载更多
评论文章
¥9.99 购买
× 订阅 Java 精选频道
¥ 元/月
订阅即可免费阅读所有精选内容