1024programmer Java Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

This article mainly introduces examples of how webpack4+express+mongodb+vue implements additions, deletions, modifications and queries. The introduction in the article is very detailed and has certain reference value. Interested friends must read it. !

What is go

Go is the abbreviation of golang. Golang is a statically strongly typed, compiled and concurrent type developed by Google. A programming language with garbage collection function, its syntax is similar to C language, but it does not include functions such as enumeration, exception handling, inheritance, generics, assertions, virtual functions, etc.

Before explaining, let’s take a look at the effect as follows:

1) The effect of the entire page is as follows:

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

2) New data effect As follows:

webpack4+express+mongodb+vue How to implement addition, deletion, modification and query  Example

3) The successful addition is as follows:

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

4) The effect of editing data is as follows:

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

5) The successful editing effect is as follows:

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

6) The effect of deleting data is as follows:

webpack4+express  +Example of how mongodb+vue implements addition, deletion, modification and query

7) The effect of successful deletion is as follows:

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

8) The query effect is as follows:

Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query

As above The effect is the same as before. Let’s first look at the structure of our entire project as follows:

### The directory structure is as follows:
 demo1           # Project name
 | |--- dist # Directory file generated after packaging
 | |--- node_modules # All dependency packages
 | |----database # Database related file directory
 | | |---db.js # Database connection operation of mongoose class library
 | | |---user.js # Schema Create model
 | | |---addAndDelete.js # Add, delete, modify and check operations
 | |--- app
 | | |---index
 | | | |-- views # Store all vue page files
 | | | | |-- list.vue # List data
 | | | | |-- index.vue
 | | | |-- components # Store common components for vue
 | | | |-- js # Store js files
 | | | |-- css # Store css files
 | | | |-- store # store warehouse
 | | | | --- actions.js
 | | | | |--- mutations.js
 | | | | |--- state.js
 | | | | |--- mutations-types.js
 | | | | |--- index.js
 | | | | |
 | | | |-- app.js # vue entry configuration file
 | | | |-- router.js # Routing configuration file
 | |--- views
 | | |-- index.html # html file
 | |--- webpack.config.js # webpack configuration file
 | |--- .gitignore
 | |--- README.md
 | |--- package.json
 | |--- .babelrc #babel transcoded file
 | |--- app.js # express entry file

The directory structure above is the architecture diagram of my entire project, in which db.js is stored in the database directory. This file mainly uses mongoose database connection operations. , the user.js file creates a Schema model, which can also be understood as a table structure. The addAndDelete.js file implements addition, deletion, modification, and query operations inside.

First set up the database locallysp; v-for=”item in options2″
:key=”item.value”
:label=”item.label”
:value=”item.value”>


Cancel
Confirm




Cancel
Confirm

Do you want to confirm the deletion?

Cancel
Confirm

6. Solve cross-domain problems and how to access the interface?

First of all, we use express to start the http://127.0.0.1:3001 server, but in our webpack we use port 8081, which means that the page accessed is http:/ /127.0.0.1:8081/ If accessed in this way, there will definitely be cross-domain interface issues, so we need to use the devServer.proxy configuration item in webpack to configure it, as follows:

module.exports = {
 devServer: {
 port: 8081,
 // host: '0.0.0.0',
 headers: {
 'X-foo': '112233'
 },
 inline: true,
 overlay: true,
 stats: 'errors-only',
 proxy: {
 '/api': {
 target: 'http://127.0.0.1:3001',
 changeOrigin: true // Is it cross-domain?
 }
 }
 },
 }

Because all the requests on my list.vue page are similar to this.$http.post('/api/query', obj); therefore when I use If /api/query requests, it will be proxied to http://127.0.0.1:3001/api/query, which can solve the cross-domain problem. At the same time, we will apply routing to the app in the root directory of the project. In .js, there is the following code:

const addAndDelete = require('./database/addAndDelete');
 app.use('/api', addAndDelete);

When requesting http://127.0.0.1:3001/api/query, addAndDelete.js will be automatically used. /query interface method.

The above is the entire content of the article “Example of how webpack4+express+mongodb+vue implements addition, deletion, modification and query”. Thank you for reading! I hope the content shared will be helpful to everyone. For more relevant knowledge, welcome to pay attention to the Programming Notes Industry Information Channel!

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/example-of-how-webpack4expressmongodbvue-implements-addition-deletion-modification-and-query/

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: 34331943@QQ.com

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索