/vue-node-mongodb

vue+express+mongodb+阿里云部署上线, 前后端分离博客

Primary LanguageVue

全栈第一步

vue(全家桶)+node(express)+mongodb(mongoose)+阿里云(cenOS)部署+域名上线，前后端分离博客

http://pengrongjie.com/ （请使用PC打开，并不是一个移动端项目）

  1. 项目介绍
  2. 开发阶段
  3. 阿里云部署

说明

如果对您有帮助，您可以点右上角 "Star" 支持一下 十分感谢!:smile:

如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎指教 👊

想要进入后台的朋友，可以私聊我，提供管理员账号 ✌️

另外想换个环境开始新的工作，2年多前端，坐标广州东莞都可以，麻烦兄弟们帮帮忙，推荐一下，十分感谢! 😄😄😄

我的简历

项目介绍

技术栈

vue2 + vue-router + webpack + ES6 + axios + less + flex + cookie + exprss + mongoDB + 阿里云(cenOS)

已完成

  1. 前台部分
  • 登录
  • 注册
  • 退出
  • 登录后，点赞
  • 登录后，取消点赞
  • 登录后，评论
  • 文章按分类查看
  • 文章分页
  1. 后台部分
  • 登录权限，管理员才能登录
  • 用户管理
  • 分类管理
  • 文章管理
  • 评论管理

待完善

  • 七牛云头像上传
  • socket.io在线聊天
  • 分页组件化

开发阶段

分开2个终端运行

克隆

git clone https://github.com/pengrongjie/vue-node-mongodb.git

Vue

# 安装依赖
cd vue-node-mongodb
cnpm install

# 打开浏览器运行 localhost:8080
npm run dev

# 打包
npm run build

打包后生成dist文件夹

Node

# 安装依赖
cd vue-node-mongodb/server
cnpm install

# 打开浏览器运行 localhost:80
npm start

此时，只要打开2个终端运行，就可以正常访问了

打包后，只需要运行一个终端

把打包后生成的dist文件夹,复制到

vue-node-mongodb/server

cd vue-node-mongodb/server/app.js

找到 app.use(express.static(path.join(__dirname, 'public'))) 在后面加上，以下代码

app.use(express.static(path.join(__dirname,'dist')));

# 打开浏览器运行 localhost:80
npm start

提醒

数据库名字更改

# cd vue-node-mongodb/server/data/module.js

找到 mongoose.connect('mongodb://localhost:27017/test93');
把 test93 修改成你自己喜欢的数据库名字

项目大概

前台首页

文章详情

文章管理

文章添加

文章修改

文章删除

阿里云部署

辅助工具

winSCP shell

参考文献

部署Node.js项目（CentOS)

把nodejs项目部署到阿里云

阿里云ECS(cenOS),默认端口为80

例如我的域名为www.pengrongjie.com,

我阿里云ECS的公网ip为120.78.78.249

默认情况下访问 www.pengrongjie.com ，相当于访问 120.78.78.249:80

通过ECS实例-->安全组-->入口方向添加常见的8080,3000端口

shell操作已经部署在阿里云上的mongodb

  1. winSCP,找到mongodb的安装目录

  1. shell操作mongodb,与windows相比，只是启动的方式由mongo变成 ./mongo
cd 目录
./mongo

pm2

相比 npm start 或者 node app.js,pm2在关闭远程链接，还能永远运行

# 常用操作
pm2 list //列出所有
pm2 start ./bin/www  运行
pm2 start 1  运行(序号)
pm2 stop ./bin/www 停止
pm2 stop 1 停止(序号)