express+mongodb+vue实现增删改查-全栈之路

vue element mongodb express

---

效果图

---

前言

最近一直想学下node,毕竟会node的前端更有市场。可是光看不练，感受仍是少了点什么，就去github上看别人写的项目，收获颇丰，因而准备本身照葫芦画瓢写一个。

做为程序员，必定要保持不断学习的状态，这样咱们才能够在职场中有一席之位。

我相信如今出去面试，被问到的问题必定不限于html、css、javascript、jQuery了，层出不穷的框架（vue、angular、react),服务器语言（java、node），数据库、ES6新特性等都会被说起。

若是你不清楚如何使用vue-cli快速快速建立一个项目骨架，能够去看个人这篇文章-手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用

若是此时你还停留在原地，止步不前的话。那么我敢断言，你快被out了。

在深读这篇文章以前，我想告诉你，读完后，你能够有哪些收获！

学习vue,你会知道除了jQuery这种结构驱动(操做dom元素)外，还有更加便捷的数据驱动，妈妈不再用担忧我忘记jQuery中那些可怕的选择器了。 学习node,你会知道除了java、c、python这些陌生的后台语言外，js既然也能够写后台,你能够定义本身的接口，不在依赖于那些后台糙汉子。 学习mongodb，你会知道数据如何存储在数据库中，已经如何进行增删改插。

说了这么多，我想你已经知道了。对！没错，这将是你通向全栈的必经之路。想一想都兴奋。那么接下来，让咱们进入正文吧。

建议:能够去个人github项目地址上将个人代码clone一份到本地，跟着个人思路捋一遍，相信看完，你必定会对本身更加有信心。代码中会有详细注释，能够解除你的不少疑惑。若是读完这篇文章，你有所收获的话，不要忘记动动你那可爱的小手，给个star哦。

---

正文

文章中有许多细节地方，不会说的太细，若是遇到槛的话，能够自行百度，遇到难以理解的地方，我会加以强调。

开发环境

本地须要安装mongodb、nodejs、vue-cli(脚手架)

第一步：初始化项目

经过vue-cli脚手架，咱们能够快速搭建一个项目骨架。

vue init webpack my-project

cd my-rpoject && npm install

cnpm run dev
复制代码

若是在终端，你看到了下图所示，表示项目已经成功启动。接着在浏览器地址栏中输入localhost://8080,若是你看到了vue的欢迎界面，表示你已经完成了第一步。

第二步：把本地的mongodb启动起来

前提：下载mongodb,而且已经配置好了环境变量。

若是以为配置环境变量啥麻烦的话，能够用homebrew进行一键安装。

当上述都ok的状况下，你只要进入到mongodb的安装目录（好比个人mongodb安装在/usr/local/bin/目录下）执行mongo命令，若是你看到下图所示，表示你已经完成了第二步。

第三步：把后台接口写好

提示：所谓的后台接口，就是经过express创建路由，若是不明白的话能够去看下express介绍express官网。

前提：经过npm安装express、mongoose、body-parser模块

express模块用来建立路由 mongoose模块用来建立数据库，链接数据库 body-parser模块用来对post请求的请求体进行解析

//经过命令行进入项目，执行如下命令安装这三个模块
cnpm install express body-parser mongoose --save
复制代码

在项目根目录创建个app.js文件，用来启动express服务

//app.js文件

//1.引入express模块
const express = require('express')
//2.建立app对象
const app = express()
//定义简单路由
app.use('/',(req,res) => {
  res.send('Yo!')
})
//定义服务启动端口
app.listen(3000,() => {
    console.log('app listening on port 3000.')
})
复制代码

上述步骤走完后，在命令行执行node app.js。经过浏览器访问localhost:3000,页面出现res.send（）的内容即表示成功。

第四步：建立数据模型

提示：所谓的数据模型，能够理解为你未来建立的表中，要存什么样的数据片断，数据类型是什么。

在项目根目录创建一个models文件夹，用来存储数据模型，每一个模型都是由一个Schema生产，具体的咱们不用太在乎，若是有兴趣可自行百度。

在models文件夹中建立一个hero.js文件,内容以下

//hero.js文件

//引入mongoose模块
const mongoose = require('mongoose')

//定义数据模型，能够看到，咱们下面建立了一个表，表中的数据有name、age、sex等字段，而且这些字段的数据类型也定义了，最后将model导出便可
const heroSchema = mongoose.Schema({
  name :String,
  age : String,
  sex : String,
  address : String,
  dowhat : String,
  imgArr:[],
  favourite:String,
  explain:String
}, { collection: 'myhero'})
//这里mongoose.Schema最好要写上第二个参数，明确指定到数据库中的哪一个表取数据，我这里写了myhreo，目的就是为了之后操做数据要去myhreo表中。
这里不写第二个参数的话，后面你会遇到坑。

//导出model模块
const Hero = module.exports = mongoose.model('hero',heroSchema);
复制代码

第五步：创建CURD(增删改查)路由接口

在项目根目录建立一个router文件夹，文件夹中建立一个hero.js文件,内容以下,分别为增删改查、添加图片等路由

//引入express模块
const express = require("express");
//定义路由级中间件
const router = express.Router();
//引入数据模型模块
const Hero = require("../models/hero");

// 查询全部英雄信息路由
router.get("/hero", (req, res) => {
  Hero.find({})
    .sort({ update_at: -1 })
    .then(heros => {
      res.json(heros);
    })
    .catch(err => {
      console.log(2);
      res.json(err);
    });
});

// 经过ObjectId查询单个英雄信息路由
router.get("/hero/:id", (req, res) => {
  Hero.findById(req.params.id)
    .then(hero => {
      res.json(hero);
    })
    .catch(err => {
      res.json(err);
    });
});

// 添加一个英雄信息路由
router.post("/hero", (req, res) => {
  //使用Hero model上的create方法储存数据
  Hero.create(req.body, (err, hero) => {
    if (err) {
      res.json(err);
    } else {
      res.json(hero);
    }
  });
});

//更新一条英雄信息数据路由
router.put("/hero/:id", (req, res) => {
  Hero.findOneAndUpdate(
    { _id: req.params.id },
    {
      $set: {
        name: req.body.name,
        age: req.body.age,
        sex: req.body.sex,
        address: req.body.address,
        dowhat: req.body.dowhat,
        favourite: req.body.favourite,
        explain: req.body.explain
      }
    },
    {
      new: true
    }
  )
    .then(hero => res.json(hero))
    .catch(err => res.json(err));
});

// 添加图片路由
router.put("/addpic/:id", (req, res) => {
  Hero.findOneAndUpdate(
    { _id: req.params.id },
    {
      $push: {
        imgArr: req.body.url
      }
    },
    {
      new: true
    }
  )
    .then(hero => res.json(hero))
    .catch(err => res.json(err));
});

//删除一条英雄信息路由
router.delete("/hero/:id", (req, res) => {
  Hero.findOneAndRemove({
    _id: req.params.id
  })
    .then(hero => res.send(`${hero.title}删除成功`))
    .catch(err => res.json(err));
});

module.exports = router;

复制代码

最后将路由应用到app.js(也就是在app.js文件中引入上述路由定义)

//app.js文件

......
//引入刚才定义的hero路由
const hero = require('./router/hero')
......
app.use('/api',hero)
......
复制代码

这时你能够经过Postman（模拟http请求数据软件）进行查询测试，若是能够查询到数据，表明后台接口已经成功写好了

注意：在查询以前，你要简单学习下mongodb如何向数据库中对应的表里面任意添加一条数据，不然，你查询出来的数据为空！！！

好比我上面建立了一个myhero表，那我在执行上面查询以前，我会往表中添加一条模拟数据

//db.myhero.insert意思就是向数据库中表名为myhero的表中添加一条数据
db.myhero.insert({
    "imgArr" : [ 
        "http://ossweb-img.qq.com/images/lol/web201310/skin/big157000.jpg", 
        "http://ossweb-img.qq.com/images/lol/web201310/skin/big157001.jpg", 
        "http://ossweb-img.qq.com/images/lol/web201310/skin/big157002.jpg",    
    ],
    "name" : "亚索",
    "age" : "22",
    "sex" : "man",
    "address" : "德玛西亚",
    "dowhat" : "中单、刺客",
    "favourite" : "死亡如风常伴吾身",
    "explain" : "亚索是一个百折不屈的艾欧尼亚人，也是一名身手敏捷的剑客，可以运用风的力量对抗敌人。年少轻狂的他曾为了荣誉而一再地损失珍贵的东西，他的职位、他的导师、最后是他的亲兄弟。他因没法摆脱的嫌疑而身败名裂，现在已经是被人通缉的罪犯。亚索在家园的土地上流浪，寻找对过去的救赎。苍茫间，只有疾风指引着他的利剑。",
    })
复制代码

这里进行数据库操做，能够在终端中进行，也能够下载可视化工具Robo 3T(连接地址)进行操做，会更加方便。

---

好了，到这里咱们整个功能的复杂部分已经实现。咱们回顾下作了哪些准备工做

1. 经过vue-cli初始化项目
2. 启动本地mongodb服务
3. 将后台接口路由写好app.js文件
4. 建立咱们存放数据的数据模型heroSchema.js文件
5. 写好增删改查路由接口hero.js文件

---

一气呵成，接下来就是咱们擅长的前端部分了。如今的你能够稍微松口气了。是否是以为很刺激，很过瘾～

第六步：选择前端开发必要模块

提示：这里能够自由发挥，我下载的模块中有element、vue-resource。建议你跟我使用一样的模块，避免后期没必要要麻烦，等你回过头来对整个项目了然于心的时候，就能够为所欲为的选择你要用的技术了,

//element-ui是饿了么为咱们前端开发者提供的组件化框架，拿来就能够用。好用到没朋友。vue-resource是用来处理请求的，不过vue2.0后好像出现了个axios，不在维护vue-resource,不过我以前一直用vue-resource的，很方便，如今也能够用。
cnpm install element-ui vue-resource --save
复制代码

第七步：创建首页和详情页组件

在src/components路径下，创建两个页面，分别为List.vue(首页)、Detail.vue(详情页)。

而后在src目录下，创建一个router文件夹，文件夹中建立一个index.js前端路由文件

前端路由文件index.js文件内容以下

//路由页面

import Vue from 'vue'

//引入路由模块，看下终端，若是终端提示vue-router模块没有安装，安装便可
import Router from 'vue-router'

//分别引入List、Detail两个组件
import List from '@/components/List'
import Detail from '@/components/Detail'


Vue.use(Router)

//定义路由,这两个路由会被映射到App.vue的<router-view></router-view>视口中
export default new Router({
  routes: [
    {
      path: '/',
      name: 'List',
      component: List
    },
    {
      path : '/league/:name',
      name : 'Detail',
      component : Detail
    },
  ]
})

复制代码

第八步：处理跨域状况

由于咱们的express服务是在localhost:3000端口启动的，而咱们的vue-cli建立的项目是在默认端口8080启动的，因此确定会涉及到跨域的状况

好在vue-cli为咱们提供了解决跨域的配置入口

找到根目录中config目录下面的index.js文件，里面有个配置项proxyTable,改写这个配置项以下便可

这时，当咱们在前端用vue-resource访问 /api 的时候,就会被代理到 http://localhost:3000/api，从而得到须要的数据。说白了，也就是个转换工做。

第九步：搭建页面

到这里，全部准备工做已经完成，咱们安心写前端代码便可。布局的话,就很少说了。交互方面主要就是在vue中的methods选项中定义一系列的方法，而且将方法经过**@click="xxx"**方法绑定到对应的地方，具体方法定义看我写的代码便可。

完结

项目写好后，就是打包了，而且将打包的dist文件夹做为express静态文件服务的目录。

cnpm run build
复制代码

app.use(express.static('dist'))
复制代码

最后看下整个项目的目录结构

欢迎小伙伴们提出本身的看法，而且指出文中的错误😊

If this article has give you some help . why don't give me a star✨！

传送门:我的博客