質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SQLAlchemy

SQLAlchemyとはPython 用のORMライブラリです。MIT Licenceのオープンソースとして提供されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1216閲覧

Vue.jsのデータプロパティでajax通信によるデータの取得

con2319

総合スコア52

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SQLAlchemy

SQLAlchemyとはPython 用のORMライブラリです。MIT Licenceのオープンソースとして提供されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/09/06 10:15

・やりたい事
flaskのルート関数により'/'でSQLAlchemy使用してデータベースからデータを取得してvue.jsにajax通信でデータを送り
データを表示する。

・問題
エラーは今のところないのですがデータが空っぽです。

python

1class Book(Base): 2 __tablename__ = 'book' 3 id = Column(INTEGER(),primary_key=True) 4 b_n = Column(TEXT()) 5 ca = Column(TEXT()) 6 book_pic_ad = Column(TEXT()) 7 page = Column(INTEGER()) 8 impre = Column(TEXT()) 9 create =Column(DATETIME()) 10 la_id =Column(INTEGER(),ForeignKey('la_na.id')) 11 12 language = relationship('Language') 13 14 def to_dict(self): 15 return{ 16 'id':int(self.id), 17 'b_n':str(self.b_n), 18 'ca':str(self.ca), 19 'book_pic_ad':str(self.book_pic_ad), 20 'page':int(self.page), 21 'impre':str(self.impre), 22 'create':str(self.create), 23 'la_id':int(self.la_id), 24 'language':str(self.language.pr_la) 25 } 26 27class Error(Base): 28 __tablename__ = 'error' 29 id = Column(INTEGER(),primary_key=True) 30 la_id = Column(INTEGER(),ForeignKey('la_na.id')) 31 err_na = Column(TEXT()) 32 err_body = Column(TEXT()) 33 err_de = Column(TEXT()) 34 created = Column(DATETIME()) 35 36 language = relationship('Language') 37 38 def to_dict(self): 39 return{ 40 'id':int(self.id), 41 'la_id':int(self.la_id), 42 'err_na':str(self.err_na), 43 'err_body':str(self.err_body), 44 'err_de':str(self.err_de), 45 'created':str(self.created), 46 'language':str(self.language.pr_la) 47 } 48 49 50class Language(Base): 51 __tablename__ = 'la_na' 52 id = Column(INTEGER(),primary_key=True) 53 pr_la = Column(TEXT()) 54 55 def to_dict(self): 56 return{ 57 'id':int(self.id), 58 'pr_la':str(self.pr_la) 59 } 60 61 62class ProgTech(Base): 63 __tablename__ = 'prog_tech' 64 id = Column(INTEGER(),primary_key=True) 65 la_id = Column(INTEGER(),ForeignKey('la_na.id')) 66 bo_id = Column(INTEGER(),ForeignKey('book.id')) 67 la_na = Column(TEXT()) 68 le_level = Column(INTEGER()) 69 la_code = Column(TEXT()) 70 explain = Column(TEXT()) 71 created = Column(DATETIME()) 72 73 book = relationship('Book') 74 language = relationship('Language') 75 76 def to_dict(self): 77 return{ 78 'id':int(self.id), 79 'la_id':int(self.la_id), 80 'bo_id':int(self.bo_id), 81 'la_na':str(self.la_na), 82 'le_level':int(self.le_level), 83 'la_code':str(self.la_code), 84 'explain':str(self.explain), 85 'created':str(self.created), 86 'language':str(self.language.pr_la), 87 'book':str(self.book.b_n) 88 } 89#ここまで 90 91def get_by_list(arr): 92 res = [] 93 for item in arr: 94 res.append(item.to_dict()) 95 return res 96 97@app.route('/',methods=['GET']) #URLの後の数字を基に下記のrender_templateの値を返す。 98def index(): 99 return render_template('top_content.html', 100 title='CHACON', 101 ) 102 103@app.route('/get_list',methods=['POST']) 104def get_data_book(): 105 Session = sessionmaker(bind=engine) 106 ses = Session() 107 re1 = ses.query(Book).join(Language).all() 108 all_booK = get_by_list(re1) 109 110 re2 = ses.query(Book).filter(Book.ca == '小説').join(Language).order_by(Book.create.desc())[:20] 111 novel = get_by_list(re2) 112 113 re3 = ses.query(Book).filter(Book.ca == 'IT参考書').join(Language).order_by(Book.create.desc())[:20] 114 it_book = get_by_list(re3) 115 116 re4 = ses.query(Book).filter(Book.ca == 'その他').join(Language).order_by(Book.create.desc())[:20] 117 etc_booK = get_by_list(re4) 118 119 book_list = [all_booK,novel,it_book,etc_booK] 120 121 return jsonify(all_booK ) 122

html

1<script> 2 Vue.component('book_show',{ 3 template:'#book_show_template', 4 /*コンポーネント内のdataは関数でないといけないのでこの形*/ 5 data:function(){ 6 let all_list = []; 7 this.getMsg(); 8 let all_book_list = this.all_list; 9 let novel_book_list = []; 10 let referen_book_list = []; 11 let etc_book_list = []; 12 this.getMsg(); 13 return{ 14 all_list, 15 all_book_list, 16 novel_book_list, 17 referen_book_list, 18 etc_book_list 19 20 } 21 }, 22 methods:{ 23 getMsg:function(){ 24 let self =this; 25 $.ajax({ 26 type:'POST', 27 url:'/get_list', 28 processData:false, 29 contentType:false, 30 success:function(data){ 31 self.all_list = data; 32 }, 33 error:function(request,status,err){ 34 35 36 } 37 }); 38 } 39 40 },

わかる方いれば教えていただけないでしょうか?
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

DBを確認してみたら結合予定のテーブルにデータを入力したと思ったら変更が更新されておらず、結合不良によりデータを取得できていなかったみたい。そのテーブルに必要事項を入力してデータを取得したらうまくデータを取得することができた。

投稿2021/09/06 17:22

con2319

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問