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:
2) New data effect As follows:
3) The successful addition is as follows:
4) The effect of editing data is as follows:
5) The successful editing effect is as follows:
6) The effect of deleting data is as follows:
7) The effect of successful deletion is as follows:
8) The query effect is as follows:
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”>
Do you want to confirm the deletion?
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!