增删改查-'Vue+Element+Nodejs+Mongodb'
- 1、创建Admin、Web、Server端
- 2、安装插件
- 3、server端自定义脚本中用nodemon运行代码
- 4、分类创建及编辑页(admin/src/views/CategoryEdit.vue)
- 5、列表页(admin/src/views/CategoryList.vue)
- 6、admin端路由定义(admin/src/router/index.js)
- 7、admin 端请求接口放在http.js中(admin/src/http.js)
- 8、在Main.js中引用http.js(admin/src/main.js)
- 9、后端连接数据库(server/plugins/db.js)
- 10、创建表模板(server/models/Category.js)
- 11、写后端接口(server/route/admin/index.js)
- 12、监听端口(server/index.js)
1、创建Admin、Web、Server端
Vue create web
Vue create admin
Mkdir server
cd server
Npm init –y
2、安装插件
全局安装nodemon
npm i -g nodemon
admin端
vue add element
vue add router
npm install axios
server端
npm i express@next mongoose cors inflection multer
3、server端自定义脚本中用nodemon运行代码
"serve": "nodemon index.js"
4、分类创建及编辑页(admin/src/views/CategoryEdit.vue)
<template>
<div class="about">
//id 存在现实编辑,否则现实新建
<h1>{{id ? "编辑":"新建"}}分类</h1>
// 提交表单执行save方法
<el-form label-width="120px" @submit.native.prevent="save">
<el-form-item label="分类名称" >
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">上传</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props:{
id:{}
},
data(){
return{
model:{}
}
},
methods:{
async save(){
if(this.id){
this.$http.put(`/categories/${this.id}`,this.model)
}else{
this.$http.post('/categories',this.model)
}
this.$router.push('/categories/list')
this.$message({
type:'success',
message:'保存成功'
})
},
async fetch(){
const res = await this.$http.get(`/categories/${this.id}`)
this.model = res.data
}
},
created(){
this.id && this.fetch()
}
}
</script>
5、列表页(admin/src/views/CategoryList.vue)
<template>
<div class="about">
<h1>分类列表</h1>
<el-table :data="items">
<el-table-column prop="_id" label="ID" width="230"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="$router.push(`/categories/create/${scope.row._id}`)" type="text" size="small">编辑</el-button>
<el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
items:[]
}
},
methods:{
async fetch(){
const res = await this.$http.get('/categories')
this.items = res.data
},
async remove(row){
this.$confirm(`是否要删除分类${row.name}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
await this.$http.delete(`/categories/${row._id}`)
this.$message({
type: 'success',
message: '删除成功!'
});
this.fetch()
})
}
},
created(){
this.fetch()
}
}
</script>
6、admin端路由定义(admin/src/router/index.js)
const routes = [
{
path: '/',
name: 'Main',
component: Main,
children:[
{path:'/categories/create',component:Edit},
{path:'/categories/List',component:List},
{path:'/categories/create/:id',component:Edit,props:true}
]
}
]
7、admin 端请求接口放在http.js中(admin/src/http.js)
import axios from 'axios'
const http = axios.create({
baseURL:'http://localhost:3000/admin/api'
})
export default http
8、在Main.js中引用http.js(admin/src/main.js)
import http from './http'
Vue.prototype.$http = http
9、后端连接数据库(server/plugins/db.js)
module.exports = app =>{
const mongoose = require('mongoose')
mongoose.connect('mongodb://127.0.0.1:27017/node-vue-moba',{
useNewUrlParser: true
})
}
10、创建表模板(server/models/Category.js)
const mongoose = require('mongoose')
const schema = new mongoose.Schema({
name:{type:String}
})
module.exports = mongoose.model('Category',schema)
11、写后端接口(server/route/admin/index.js)
module.exports = app =>{
const express = require('express')
const router = express.Router()
const Category = require('../../models/Category')
// 增
router.post('/categories',async(req,res)=>{
const model = await Category.create(req.body)
res.send(model)
})
// 改
router.put('/categories/:id',async(req,res)=>{
const model = await Category.findByIdAndUpdate(req.params.id,req.body)
res.send(model)
})
//删
router.delete('/categories/:id',async(req,res)=>{
const model = await Category.findByIdAndDelete(req.params.id,req.body)
res.send({
success: true
})
})
// 查
router.get('/categories',async(req,res)=>{
const items = await Category.find().limit(10)
res.send(items)
})
router.get('/categories/:id',async(req,res)=>{
const model = await Category.findById(req.params.id)
res.send(model)
})
app.use('/admin/api',router)
}
12、监听端口(server/index.js)
const express = require('express')
const app = express()
app.use(express.json())
app.use(require('cors')())
require('./plugins/db')(app)
require('./route/admin')(app)
app.listen(3000,()=>{
console.log('http://localhost:3000')
})
1、此文档是看了《全栈之巅》的教程整理出来便于自己理解的文档,本人目前处于学习阶段,如果有错误的地方欢迎指出,若有前端学习方面的问题可以一起探讨
2、标题后面括号里面的内容是文件路径