在pycharm中開發(fā)vue的方法步驟

'''
webstorm(vue) pycharm(python) goland(Go語(yǔ)言) idea(java) andrioStuidio(安卓) Php(PHP)
'''

'''
①在pycharm中打開vue項(xiàng)目,在settins下Plugins中下載vue.js
②啟動(dòng)vue項(xiàng)目
 -方法1.在Terminal下輸入npm run serve
 -方法2.Edit Configurations----》點(diǎn)+ 選npm-----》在script對(duì)應(yīng)的框中寫：serve
'''

-node_modules：項(xiàng)目的依賴

-public
  -favicon.ico 網(wǎng)頁(yè)的圖標(biāo)
  -index.html  主頁(yè)面
-src：我們需要關(guān)注的
  -assets：方靜態(tài)文件
  -components：小組件
  -views ：頁(yè)面組件
  -App.vue ：主組件
  -main.js ：項(xiàng)目主入口js
  -router.js： 路由相關(guān)，以后配置路由，都在這里配置
  -store.js ：vuex相關(guān)，狀態(tài)管理器

-package.json  項(xiàng)目的依賴文件

  import FreeCourse from './views/FreeCourse.vue'
  
  {
   path: '/freecourse',
   name: 'freecourse',
   component: FreeCourse
  },

<router-link to="/freecourse">免費(fèi)課程</router-link>

<div class="course">
  {{course_list}}
</div>

export default {
 name: 'course',
 data: function () {
   return{
    course_list:['python','linux','go語(yǔ)言']
   }
 }
}

  //導(dǎo)入 axios
  import axios from 'axios'
  //把a(bǔ)xios對(duì)象賦給$http
  Vue.prototype.$http=axios
  //以后在組件的js中通過(guò)$http取到的就是axios

  this.$http.request({
    //向下面的地址發(fā)送get請(qǐng)求
    url:'http://127.0.0.1:8000/courses/',
    method:'get'
  }).then(function (response) {
    //response.data才是真正的數(shù)據(jù)
    console.log(response.data)
  })

  mounted:function () {
    this.init()
  }
    

<template>
 <div class="course">
  <h2>我是免費(fèi)課程頁(yè)面</h2>
  <p v-for="course in course_list">{{course}}</p>
 </div>
</template>

<script>


export default {
 name: 'course',
 data: function () {
   return{
    course_list:[]
   }
 },
 methods: {
   'init':function () {
     var _this = this;
     this.$http.request({
       //向下面的地址發(fā)送get請(qǐng)求
       url:'http://127.0.0.1:8000/courses/',
       method:'get'
     }).then(function (response) {
       //response.data才是真正的數(shù)據(jù)
       _this.course_list = response.data
     })
   }
 } ,
 mounted:function () {
   this.init()
 }
}
</script>

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

# 不會(huì)在數(shù)據(jù)庫(kù)中生成字段，只用于數(shù)據(jù)庫(kù)操作
policy = GenericRelation(to='PricePolicy')

# 不會(huì)在數(shù)據(jù)庫(kù)中生成字段，只用于數(shù)據(jù)庫(kù)操作
policy = GenericRelation(to='PricePolicy')

#之前有的字段該怎么寫就怎么寫
object_id = models.IntegerField()
content_type = models.ForeignKey(to=ContenType,null=True)
# 引入一個(gè)字段，不會(huì)在數(shù)據(jù)庫(kù)中創(chuàng)建，只用來(lái)做數(shù)據(jù)庫(kù)操作
content_obj = GenericForeignKey()

course = models.Course.objects.get(pk=1)
ret=models.PricePolicy.objects.create(period=30, price=199.9,content_obj=course)

degree_course = models.DegreeCourse.objects.get(pk=1)
ret=models.PricePolicy.objects.create(period=30, price=199.9,content_obj=degree_course)

price_policy=models.PricePolicy.objects.get(pk=1)
print(price_policy.content_obj)

course = models.Course.objects.get(pk=1)
policy_list=course.policy.all()