Vue2+axios+Express+MySQL实现前后端交互

一、后台

         1. 确定MySQL的表格：明确数据库 （mvc） —- 数据表(ssm_book)

         2. 创建Express项目：mysql2、cors、Sequelize(ORM)、nodemon

         3. dao层（model、连接数据库、crud操作）

         4. service层（调用dao层）

         5. 接口层（接口地址与service层的方法的映射）

         6. 接口测试

二、前端

         1. 创建vue2项目

         2. 安装axios库

         3. 创建组件：与后台进行交互实现增、删、查

三、示例代码

         后台：

//dao/model/BookModel.js

const Sequelize = require('sequelize')
const MysqlInstance = require('../config/mysqlconfig')

const BookModel = MysqlInstance.define('ssm_book',{
    bookId: {
        type: Sequelize.DataTypes.INTEGER,
        primaryKey: true,
        autoIncrement: true,
        field:'book_id'
    },
    bookName: {
        type: Sequelize.DataTypes.STRING(100),
        allowNull: false,
        field: 'book_name'
    },
    bookAuthor: {
        type: Sequelize.DataTypes.STRING(50),
        allowNull: false,
        field: 'book_author'
    },
    bookDate: {
        type: Sequelize.DataTypes.DATE,
        allowNull:false,
        field:'book_date'
    },
    bookPrice: {
        type: Sequelize.DataTypes.DECIMAL(10,2),
        allowNull:false,
        field: 'book_price'
    }
},{
    freezeTableName: true,
    timestamps: false
})

module.exports = BookModel

//dao/crud/BookDao.js

// const Op = require('sequelize').Op
const BookModel = require('../model/BookModel')

// 增加图书
exports.insertBook = async function (book){
    return await BookModel.create({
        bookName: book.bookName,
        bookAuthor:book.bookAuthor,
        bookDate: book.bookDate,
        bookPrice: book.bookPrice
    })
}

// 删除图书：按id删除
exports.removeBook = async function(id){
    return  await BookModel.destroy({
        where: {
            bookId:id
        }
    })
}

// 查询所有
exports.queryAllBook = async function(){
    return await BookModel.findAll()
}

//dao/config/mysqlconfig.js

const Sequelize = require('sequelize')

const MySQLInstance = new Sequelize('mvc','root','123456',{
    host:'localhost',
    port: 3306,
    dialect: 'mysql',
    pool:{
        max: 20,
        min: 3,
        idle: 2000
    },
    define: {
        charset: 'utf8'
    }
})

module.exports = MySQLInstance;

//service/BookService.js

const BookDao = require('../dao/crud/BookDao')

// 增加图书
exports.addBook = function (req,res){
    let book = {
        bookName: req.body.bookName,
        bookAuthor: req.body.bookAuthor,
        bookDate: req.body.bookDate,
        bookPrice: req.body.bookPrice
    }
    BookDao.insertBook(book).then(result=>{
        if (result){
            res.json({
                code: 200
            })
        }
    }).catch(e=>{
        console.log(e)
    })
}

// 删除图书：按id删除
exports.deleteBook = function (req,res){
    let id = req.query.bookId

    BookDao.removeBook(id).then(result=>{
        if (result){
            res.json({
                code: 200
            })
        }
    }).catch(e=>{
        console.log(e)
    })
}

// 查询所有
exports.findAll = function (req,res){
    BookDao.queryAllBook().then(result=>{
        res.json({
            code: 200,
            info: result
        })
    })
}

//routes/BookApi.js

const express = require('express')
const router = express.Router()

const BookService = require('../service/BookService')

//增加图书接口：http://localhost:8088/books/add
router.post('/add',BookService.addBook)

//删除图书接口：http://localhost:8088/books/del
router.delete('/del',BookService.deleteBook)

//查询图书接口： http://localhost:8088/books/all
router.get('/all',BookService.findAll)

module.exports = router

       前端：

//src/axios/axiosaianstance.js

import axios from "axios";

const axiosInstance = axios.create({
    baseURL:  'http://localhost:8088',
    timeout: 5000
})

export default  axiosInstance

//src/componenrs/Book.vue