webpack4+express+mongodb+vue实现增删改查的示例

下面我将详细讲解“webpack4+express+mongodb+vue实现增删改查的示例”的完整攻略。

搭建前端页面

首先，我们需要搭建前端页面，使用 Vue.js 框架实现。在命令行中执行以下命令：

vue init webpack vue-test
cd vue-test
npm install

然后，安装并添加 vue-route 和 axios 依赖，在 src/main.js 文件中添加以下代码：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import App from './App.vue'
import Add from './components/Add.vue'
import List from './components/List.vue'
import Edit from './components/Edit.vue'

Vue.use(VueRouter)
Vue.use(VueAxios, axios)

Vue.config.productionTip = false

const routes = [
  { path: '/', redirect: '/list' },
  { path: '/list', component: List },
  { path: '/add', component: Add },
  { path: '/edit/:id', component: Edit }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在 src/components 目录下新建 Add.vue、List.vue 和 Edit.vue 三个文件，分别实现添加数据、展示数据和修改数据功能。

配置后端服务器

然后，我们需要搭建一个后端服务器，使用 Express.js 框架实现。在命令行中执行以下命令：

mkdir backend
cd backend
npm init
npm install express mongoose body-parser cors --save

在 backend 文件夹下新建 server.js，添加以下代码：

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const mongoose = require('mongoose')
const app = express()
const port = process.env.PORT || 3000

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cors())

mongoose.connect('mongodb://localhost:27017/vue-test')

const db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'))
db.once('open', function() {
  console.log('database open successful.')
})

const TodoSchema = mongoose.Schema({
  name: String,
  date: Date,
  content: String
})

const TodoModel = mongoose.model('Todo', TodoSchema)

app.get('/todo', (req, res) => {
  TodoModel.find((err, data) => {
    if (err) console.log(err)
    res.send(data)
  })
})

app.post('/todo', (req, res) => {
  let newTodo = new TodoModel(req.body)
  newTodo.save((err, data) => {
    if (err) console.log(err)
    res.send(data)
  })
})

app.put('/todo/:id', (req, res) => {
  TodoModel.findByIdAndUpdate(req.params.id, req.body, (err, data) => {
    if (err) console.log(err)
    res.send(data)
  })
})

app.delete('/todo/:id', (req, res) => {
  TodoModel.findByIdAndDelete(req.params.id, (err, data) => {
    if (err) console.log(err)
    res.send(data)
  })
})

app.listen(port, () => {
  console.log(`server is running at http://localhost:${port}/`)
})

这是一个简单的 Express.js 服务器，通过 Mongoose 操作 MongoDB 数据库。

整合前后端

最后，我们需要把前端和后端整合起来。在 vue-test 目录下执行以下命令：

npm install webpack-node-externals copy-webpack-plugin html-webpack-plugin webpack-merge nodemon --save-dev

在 vue-test 目录下新建 webpack.config.js，添加以下代码：

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { merge } = require('webpack-merge')
const isProd = process.env.NODE_ENV === 'production'

let webpackConfig = {
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  mode: isProd ? 'production' : 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, './static'),
          to: path.resolve(__dirname, './dist/static'),
          globOptions: {
            ignore: ['.*']
          }
        }
      ]
    })
  ]
}

let serverConfig = {
  target: 'node',
  entry: './backend/server.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'server.js'
  },
  devtool: 'source-map',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }]
  }
}

module.exports = [merge(webpackConfig, {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
}), serverConfig]

这是一个简单的 webpack 配置，用于打包前端页面和后端服务器代码。在 vue-test 目录下新建 .babelrc 文件，添加以下代码：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

此外，我们还需要在 package.json 文件中添加以下代码：

"scripts": {
  "dev": "nodemon dist/server.js",
  "build": "webpack -p"
}

这些代码的作用是启动服务器和打包项目。

完成以上步骤后，我们就可以通过以下命令运行项目：

npm run build
npm run dev

然后在浏览器中访问 http://localhost:3000，就可以看到我们实现的增删改查功能了。

示例说明

示例一：添加数据

在 Add.vue 文件中，我们可以看到以下代码：

<template>
  <div class="add-container">
    <h2>Add Todo</h2>
    <form>
      <input type="text" v-model="name" placeholder="Name">
      <input type="text" v-model="content" placeholder="Content">
      <button type="submit" @click.prevent="addTodo">Submit</button>
    </form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        name: '',
        content: ''
      }
    },
    methods: {
      addTodo () {
        let date = new Date()
        let todo = {
          name: this.name,
          content: this.content,
          date: date
        }
        this.axios.post('/todo', todo).then(res => {
          console.log(res.data)
          this.$router.replace('/list')
        })
      }
    }
  }
</script>

这段代码实现了向数据库中添加一条数据的功能。它通过 axios 发送一个 post 请求，把用户输入的数据提交到后端服务器的 /todo 路由，然后由后端把数据存入数据库。最后，页面跳转到展示数据的页面 /list。

示例二：修改数据

在 Edit.vue 文件中，我们可以看到以下代码：

<template>
  <div class="edit-container">
    <h2>Edit Todo</h2>
    <form>
      <input type="text" v-model="todo.name" placeholder="Name">
      <input type="text" v-model="todo.content" placeholder="Content">
      <button type="submit" @click.prevent="updateTodo">Submit</button>
    </form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        todo: {}
      }
    },
    created () {
      this.getTodo()
    },
    methods: {
      getTodo () {
        let id = this.$route.params.id
        this.axios.get(`/todo/${id}`).then(res => {
          console.log(res.data)
          this.todo = res.data
        })
      },
      updateTodo () {
        let id = this.$route.params.id
        this.axios.put(`/todo/${id}`, this.todo).then(res => {
          console.log(res.data)
          this.$router.replace('/list')
        })
      }
    }
  }
</script>

这段代码实现了修改数据库中一条数据的功能。它通过 axios 发送一个 put 请求，把用户修改的数据提交到后端服务器的 /todo/:id 路由，然后由后端把数据更新到数据库中。最后，页面跳转到展示数据的页面 /list。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack4+express+mongodb+vue实现增删改查的示例 - Python技术站