《全栈之巅》学习笔记-增删改查

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、标题后面括号里面的内容是文件路径