下面我将详细讲解“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技术站
微信扫一扫 
支付宝扫一扫 