搭建日记(一)：admin和server初始化

admin初始化

vue create admin // 建项
vue add element-ui //ui
vue add router // 路由
npm install axios // 版本1.0以下，不然可能报错get is not function

请求封装

import axios from 'axios'
import Vue from 'vue'

const http = axios.create({
    baseURL: process.env.VUE_APP_API_URL || '/admin/api'
})
// 请求拦截配置
http.interceptors.request.use(
    async config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 响应拦截配置
http.interceptors.response.use(
    response => {
      const res = response.data
      return res
    },
    error => {
        Vue.prototype.$message({
            type:'error',
            message:error.response.data.message
        })
        return Promise.reject(error)
    }
)
export default http

plugins 插件管理

/* element-ui 引入管理 */
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

main.js 引入配置

import './plugins/element-ui.js'

import http from "@/utils/request"
Vue.prototype.$http = http

server初始化

mkdir server
cd server
npm inist -y //生成package.json
npm i -g nodemon // 文件修改自动重新启动节点
npm i express@next mongoose cors inflection multer // server端安装express@next版本  联接mongodb数据库 跨域 映射 上传文件中间件

连接数据库

/*
* 数据库配置
* 官网下载mongoDB + mongosh
* 命令行启动 输入 mongosh
* 命令行退出 输入 quit()
* server/plugins/db.js
* */
module.exports = app => {
    const mongoose = require("mongoose")
//连接端口
    mongoose.connect('mongodb://127.0.0.1:27017/node-vue-moba',{
        useNewUrlParser:true
    })
}

接口路由配置：server/router/admin/index.js => admin端接口管理

module.exports = app => {
    const express = require('express')
    const router = express.Router()
    
    // 数据表
    const module = require('../../models/module')

    // 增
    router.post('/modul ',async(req,res)=>{
        const model = await category.create(req.body)
        res.send(model)
    })
    // 改
    router.put('/module/:id',async(req,res)=>{
        const model = await category.findByIdAndUpdate(req.params.id,req.body)
        res.send(model)
    })
    //删
    router.delete('/module/:id',async(req,res)=>{
        const model = await category.findByIdAndDelete(req.params.id,req.body)
        res.send({
            success: true
        })
    })

    // 查 - 分页
    router.get('/module',async(req,res)=>{
        console.log('get page,req,res',req,res)
        console.log('query',req.query)
        const limit = +req.query.limit || 10 //分页页码
        const items = await category.find().limit(limit)
        console.log('get page',items)
        res.send(items)
    })

    // 查 - 详情
    router.get('/module/:id',async(req,res)=>{
        const model = await category.findById(req.params.id)
        res.send(model)
    })

    // 挂载在admin/api => 前端请求
    app.use('/admin/api',router)
}

module 

// 创建表模板(server/models/module.js)
const mongoose = require('mongoose')
const schema = new mongoose.Schema({

})
module.exports = mongoose.model('module',schema)

接口index.js

// 监听端口(server/index.js)
const express = require('express')
const app = express()
app.use(express.json())
// 跨域
app.use(require('cors')())
// 数据库
require('./plugins/db')(app)
// admin 接口
require('./route/admin')(app)
app.listen(3000,()=>{
    console.log('开！')
})