vue 学习小结（2）关于‘Splan‘

忘是亡心i 2022-11-14 00:50 112阅读 0赞

# 背景 #

利用vue 以及 py服务端，实现共享计划本（Splan）

# 1.数据库设计 #

将计划全部存储到数据库中，如下图所示  
![在这里插入图片描述][20210327202727920.png]

# 2.vue #

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-for="item in info">
    			{
       {item.date}} 	<br>
    			{
       {item.username}}   <br>
    			{
       {item.plan}}
    		</li>
    	</ul>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script></script>
    <script type="text/javascript"> var vm = new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('http://127.0.0.1/plan') .then(response => (this.info = response.data.items)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) </script>
    </body>
    </html>

# 2.py 服务端 #

# -*- coding: UTF-8 -*-
    import json
    
    from flask import Flask, request, jsonify
    import pymysql
    connect = pymysql.Connect(
        host='localhost',
        port=3306,
        user='root',
        passwd='123456',
        db='test',#数据库库名
        charset='gbk'#字符集类型,须一致
    )
    
    
    app = Flask(__name__)
    
    
    @app.route('/plan', methods=["GET"])
    def calculate():
        cursor = connect.cursor()
        sql = "SELECT * FROM splan"
        connect.ping(reconnect=True)  # keep connect, avoid “raise err.InterfaceError("(0, '')")”
        cursor.execute(sql)
        results = cursor.fetchall()
        if connect:
            connect.close()
        if cursor:
            cursor.close()
        items = []
        data = { }
        for r in results:
            item = { 'date': r[1], 'username': r[2], 'plan': r[3]}
            items.append(item)
        data['items'] = items
        jsonStr = json.dumps(data)
        print(jsonStr)
        return jsonStr
    
    
    if __name__ == '__main__':
        app.run(host='127.0.0.1', threaded=True, debug=True, port=80)

# 3.get请求结果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]

# 4.vue结果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]

[20210327202727920.png]: /images/20221022/f8898e783cb5411fb15437d16ed1e8d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]: /images/20221022/553161fce1154446ad21fbddb6a05246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021032720313794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx,size_16,color_FFFFFF,t_70