前后端分离的一个小demo

0、写在前面

最近听人说现在的项目的都是前后端分离了，原来那种后端渲染模板的方式已然过时。

而且最近自己做项目发现，前后端维护一个包里的代码确实痛苦不堪、、、

为了让自己跟上时代的尾巴，加强开发的体验，就学习了vue.js和restful规范。

发现果然是好东西，那就先攒出来一个小demo，后期再上大项目。

1、资源接口表

HTTP方法	资源操作	URL	描述
GET	SELECT	/book/api/v1.0/books	查多个资源
POST	INSERT	/book/api/v1.0/books	新增资源
GET	SELECT	/book/api/v1.0/books/<id>	查单个资源
PUT	UPDATE	/book/api/v1.0/books/<id>	更新单个资源
DELETE	DELETE	/book/api/v1.0/books/<id>	删除单个资源

 

2、实现

前端vue.js+webpack模板+elemen-ui

import Axios from 'axios'

Axios.defaults.baseURL='http://localhost:5000'

const BookListURL = '/book/api/v1.0/books'
const BookURL = '/book/api/v1.0/books/'

export function getBookListAPI() {
    return Axios.get(BookListURL).then(res=>res.data)
}

export function postBookListAPI(data) {
    return Axios.post(BookListURL,data).then(res=>res.data)
}

export function getBookAPI(id) {
  return Axios.get(BookListURL+'/'+id).then(res=>res.data)
}

export function putBookAPI(id,data) {
  return Axios.put(BookListURL+'/'+id,data).then(res=>res.data)
}

export function deleteBookAPI(id) {
  return Axios.delete(BookListURL+'/'+id).then(res=>res.data)
}

<template>
    <div id="book">
        <h2>{{ msg }}</h2>
        <el-table
          :data="tableData"
          style=" 100%"
          align="center"
        >
          <el-table-column
            prop="id"
            label="ID"
            width="60">
          </el-table-column>
          <el-table-column
            prop="name"
            label="书名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            width="180">
          </el-table-column>
          <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleGet(scope.$index, scope.row)">查看</el-button>
        <el-button
          size="mini"
          type="warning"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
      <br>
      <div id="add-form">
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="书名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
          <el-form-item label="价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addBook">新增</el-button>
            <el-button type="warning" @click="editBook">修改</el-button>
        </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  export default {
    name: "Book",
    data() {
      return {
        msg: '图书管理系统',
        bookList:[],
        tableData: [],
        form:{
          name:'',
          price:''
        },
        current_id:''
      }
    },
    methods:{
      addBook(){
        this.$http.postBookListAPI(
          { 'name':this.form.name,
            'price':this.form.price,
          }
        ).then(
          res=>{
            this.tableData.push({
              id: res.data[0].id,
              name: res.data[0].name,
              price: res.data[0].price,
            })
          }
        ).catch(
          err=>{
            console.log(err.data)
          }
        )
      },
      handleGet(index,row){
        this.$http.getBookAPI(row.id).then(
          res=>{
            console.log(res.data)
          }
        ).catch(
          err=>{
            console.log(err.data)
          }
        )
      },
      handleEdit(index,row){
        this.form.name = row.name
        this.form.price = row.price
        this.current_id = row.id

      },
      handleDelete(index,row){
        this.$http.deleteBookAPI(row.id).then(
          res=>{
            console.log(res.data)
            this.tableData.splice(index,1)
          }
        ).catch(
          err=>{
            console.log(err.data)
          }
        )
      },
      editBook(){
        this.$http.putBookAPI(this.current_id,{
          'name':this.form.price,'price':this.form.price
        }).then(
          res=>{
            console.log(res.data)
            this.reloadData()
          }
        ).catch(
          err=>{
            console.log(err.data)
          }
        )
      },
      reloadData(){
        this.$http.getBookListAPI().then(
        res=>{
          this.bookList = res.data
          this.tableData = []
          for (let i=0; i<this.bookList.length; i++){
            this.tableData.push({
              id: this.bookList[i].id,
              name: this.bookList[i].name,
              price: this.bookList[i].price,
            })
          }
        }
      ).catch(
        err=>{
          console.log(err.data)
        }
      )
    }
    }
    ,
    created() {
      this.$http.getBookListAPI().then(
        res=>{
          this.bookList = res.data
          for (let i=0; i<this.bookList.length; i++){
            this.tableData.push({
              id: this.bookList[i].id,
              name: this.bookList[i].name,
              price: this.bookList[i].price,
            })
          }
        }
      ).catch(
        err=>{
          console.log(err.data)
        }
      )
    }
  }
</script>

<style scoped>

</style>

后端flask+flask_restful

# -*- coding: UTF-8 -*-

from flask import Flask,jsonify,request
from flask_sqlalchemy import SQLAlchemy
from flask_restful import reqparse, abort, Api, Resource



app = Flask(__name__)
api = Api(app)

class Config:
    SECRET_KEY = '1a1@z2'
    SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:root@127.0.0.1/book?charset=utf8'

    #SQLALCHEMY_TRACK_MODIFICATIONS = True
    #解决返回无法显示汉字问题
    JSON_AS_ASCII = False
    RESTFUL_JSON = dict(ensure_ascii=False)
    @staticmethod
    def init_app(app):
        pass

app.config.from_object(Config)
db=SQLAlchemy(app)


#数据库模型
class Book(db.Model):
    __tablename__ = 'book'
    id = db.Column(db.Integer, primary_key=True, index=True,autoincrement=True)
    name = db.Column(db.String(64), unique=True, index=True)
    price = db.Column(db.String(64))

    def __repr__(self):
        return '<Book %r>'%(self.name)



def get_book(id):
    book_obj = Book.query.filter_by(id=id).first()
    if not book_obj:
        abort(404, message="id(%s) is not found"%(id))
    return book_obj

#视图
#解决前端跨域访问的问题
@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization,session_id')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS,HEAD')
    # 这里不能使用add方法，否则会出现 The 'Access-Control-Allow-Origin' header contains multiple values 的问题
    response.headers['Access-Control-Allow-Origin'] = '*'
    return response

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/db_create')
def db_create():
    db.create_all()
    return 'db create success!'

#资源组的增查，对应get,post
class BookListAPI(Resource):
    def __init__(self):
        self.reqparse = reqparse.RequestParser()
        self.reqparse.add_argument('name',type=str, required = True,
            help = "pleas send name", location = ['json','form'])
        self.reqparse.add_argument('price',type=str, required = True,
            help = "pleas send price", location = ['json','form'])
        self.returnData = { 'state':1,'data':[],'url':'','items_url':'' }
        super(BookListAPI, self).__init__()

    def get(self):
        self.returnData['url'] = '/book/api/v1.0/books'
        self.returnData['items_url'] = '/book/api/v1.0/books/<id>'
        books = Book.query.order_by(Book.id.asc()).all()
        for book_obj in books:
            book_info = { 'id': book_obj.id,
                          'name':book_obj.name,
                          'price':book_obj.price,
                          'url':'/book/api/v1.0/books/'+str(book_obj.id)
                          }
            self.returnData['data'].append(book_info)
        print self.returnData
        return jsonify(self.returnData)

    def post(self):
        book_name = self.reqparse.parse_args()['name']
        book_price = self.reqparse.parse_args()['price']
        new_book = Book(name=book_name,price=book_price)
        db.session.add(new_book)
        db.session.commit()
        book_info = {'id': new_book.id,
                     'name': new_book.name,
                     'price': new_book.price}
        self.returnData['data'].append(book_info)
        return jsonify(self.returnData)

#单个资源的查询，对应get,put,delete
class BookAPI(Resource):
    def __init__(self):
        self.reqparse = reqparse.RequestParser()
        self.reqparse.add_argument('name',type=str, required = True,
            help = "pleas send name", location = ['json','form'])
        self.reqparse.add_argument('price',type=str, required = True,
            help = "pleas send price", location = ['json','form'])
        self.returnData = {'state': 1, 'data': []}
        super(BookAPI, self).__init__()

    def get(self,id):
        book_obj = get_book(id)
        book_info = {'id': book_obj.id,
                     'name': book_obj.name,
                     'price': book_obj.price}
        self.returnData['data'].append(book_info)
        return jsonify(self.returnData)

    def put(self,id):
        book_obj = get_book(id)
        book_name = self.reqparse.parse_args()['name']
        book_price = self.reqparse.parse_args()['price']
        db.session.add(book_obj)
        db.session.commit()
        book_info = {'id': book_obj.id,
                     'name': book_obj.name,
                     'price': book_obj.price}
        self.returnData['data'].append(book_info)
        return jsonify(self.returnData)

    def delete(self,id):
        book_obj = get_book(id)
        db.session.delete(book_obj)
        db.session.commit()
        return jsonify(self.returnData)

api.add_resource(BookListAPI, '/book/api/v1.0/books')
api.add_resource(BookAPI, '/book/api/v1.0/books/<id>')

if __name__ == '__main__':
    app.run(debug=True)

3、经验总结

简单的练习下前后端分离的项目模式，感觉restful的风格也不是必须的，最后只要前后端接口能统一就Ok了、、