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

向作者提问
专注于前端开发,熟练iosApp,微信公众号,小程序开发,后端,熟练使用,node,java,golang开发
查看本场Chat

简介

本场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里面。

~zZhao
这个技术.node.js写接口技术有点传统吧,老师应该写点async await写法来给到大家,也是我正想学习发的,我相信未来也是这样写了,老师所用这个node写接口没什么含量,,,,个人所见,
npc光明: 多谢提醒,因为想让这个chat看起来更容易懂,用的方法确实有点基础了,async/await是处理node中异步操作的,开发中有时候会结合promise一起使用,我稍微整理了一下,因为时间问题整理了一半,你先看看,有问题我们再聊.这里只能打500个字,我把整理的放在我的博客上面了 https://woniuchiyumi.top/#/details/67
Jacky
个人感觉这个应该写一个课程而不是简单的chat。对于初级前端来说是比较友好,但是初级前端估计都不会用node,对于中高级前端,这个又显得特别基础,略尴尬
胖太
感觉一般,果然天下没有免费的午餐
DumAlan
没有什么帮助…
root
没啥帮助的感觉。
Mr.Potter
这也太初级了吧。。。唉。现在chat的文章质量真的一般。
谢工: 多谢反馈意见会转达作者
Hung
Vue部分一笔带过。感觉文章标题应该改为“用node搭建自己的博客”
巨熊
知识点还是有的,只是文不对题可能误导了部分读者。
微信扫描登录