Express+mongodb+vue реализует добавления, удаления, изменения и проверки — путь к полному стеку

внешний интерфейс MongoDB Express Vue.js

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, вы будете знать, как данные хранятся в базе данных, как добавлять, удалять, изменять и вставлять.

Сказав все это, я думаю, вы уже знаете. правильно! Правильно, это будет ваш путь к полному стеку. Рад думать. Итак, давайте перейдем к основному тексту.

建议:можешь пойти к моемуадрес проекта на гитхабеAdmiral клонируйте мой код на локальный, и следуйте моим идеям.Я верю, что после прочтения у вас точно появится больше уверенности в себе. в коде будетПодробные примечания, который может развеять многие ваши сомнения. Если вы что-то приобрели после прочтения этой статьи, не забудьте прикоснуться к своей милой ручонке и датьstarОй.

текст

В статье много подробностей, и я не буду вдаваться в подробности, если вы столкнулись с порогом, вы можете самостоятельно Baidu, если вы встретите непонятные моменты, я их подчеркну.

среда разработки

Вам необходимо установить mongodb, nodejs, vue-cli (скаффолдинг) локально

Шаг 1: Инициализируйте проект

С помощью строительных лесов vue-cli мы можем быстро построить каркас проекта.

vue init webpack my-project

cd my-rpoject && npm install

cnpm run dev

Если в терминале вы видите изображение, показанное ниже, проект успешно запущен. Затем введите в адресной строке браузераlocalhost://8080, Если вы видите приветственный интерфейс vue, это означает, что вы выполнили первый шаг.

第一步：启动项目

Шаг 2: Запустите локальный mongodb

Предварительное условие: Скачатьmongodb, и переменные среды настроены.

Если вам сложно настроить переменные среды, вы можете использовать homebrew для установки в один клик.

Когда все вышеперечисленные в порядке, вам нужно всего лишь войти только в каталог установки Mongodb (например, мой MongoDB устанавливается в каталоге / usr / local / bin / directory) и выполняетmongoКоманда, если вы видите изображение ниже, вы выполнили второй шаг.

第二步：启动本地mongodb

Шаг 3: Напишите фоновый интерфейс

Совет: так называемый фоновый интерфейс для установки маршрута через экспресс.Если вы не понимаете, вы можете перейти к введению экспрессофициальный сайт экспресс.

Предварительное условие: установка через npmexpress,mongoose,body-parserмодуль

Экспресс-модуль используется для создания маршрутов Модуль mongoose используется для создания базы данных и подключения к базе данных. Модуль body-parser используется для анализа тела почтового запроса.

//通过命令行进入项目，执行以下命令安装这三个模块
cnpm install express body-parser mongoose --save

Создайте проект в корневом каталоге проектаapp.jsфайл для запуска экспресс-сервиса

//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() отображается на странице, что означает успех.

Шаг 4: Создайте модель данных

Совет: Под так называемой моделью данных можно понимать, какие фрагменты данных и типы данных должны храниться в таблицах, которые вы создадите в будущем.

Создайте проект в корневом каталоге проектаmodelsПапки используются для хранения моделей данных.Каждая модель создается по схеме.Нам не нужно уделять слишком много внимания специфике.Если вам интересно,вы можете Baidu самостоятельно.

существует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);

Шаг 5: Создайте интерфейс маршрутизации 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документ

Один хит, что дальше, это то, в чем мы хорошивнешний интерфейсчасть. Теперь можно вздохнуть с облегчением. Как вы думаете, это интересно и приятно~

Шаг 6: Выберите необходимые модули для фронтенд-разработки

Совет: Вы можете свободно играть здесь, модули, которые я скачал, имеютelement,vue-resource. Рекомендуется использовать тот же модуль, что и я, чтобы избежать ненужных проблем на более позднем этапе.Когда вы оглянетесь назад и поймете весь проект, вы сможете выбрать технологию, которую хотите использовать.,

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

Шаг 7. Создайте компоненты домашней страницы и страницы сведений

существует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
    },
  ]
})

Шаг 8. Обработка междоменных ситуаций

потому что нашexpressслужба находится вlocalhost:3000Порт запущен, и проект, созданный нашим vue-cli, находится на порту по умолчанию.8080Начато, так что это определенно будет связано с междоменными ситуациями

К счастью, vue-cli предоставляет нам запись междоменной конфигурации.

находится в корневом каталогеconfigниже каталогаindex.jsфайл, в нем есть элемент конфигурацииproxyTable, перепишите этот элемент конфигурации следующим образом

处理跨域问题

В настоящее время, когда мы используем интерфейсvue-resourceдоступ/api, он будет проксированhttp://localhost:3000/apiдля получения необходимых данных. Грубо говоря, это конверсионная работа.

Шаг 9: Создайте страницу

На этом все приготовления завершены, и мы можем спокойно писать интерфейсный код. О макете много не скажешь. Взаимодействие в основном происходитmethodsРяд методов определен в параметрах, и методы привязаны к соответствующим местам с помощью метода **@click="xxx"**. Определение конкретного метода можно увидеть в написанном мной коде.

конец

После того, как проект написан, он упаковывается, а упакованная папка dist используется в качестве каталога для экспресс-службы статических файлов.

cnpm run build

app.use(express.static('dist'))

Наконец, посмотрите на структуру каталогов всего проекта.

目录结构

Приглашаем друзей высказывать собственное мнение и указывать на ошибки в тексте 😊

Если эта статья помогла вам, почему бы не поставить мне звезду✨!

Портал:личный блог

Категории