在pycharm中开发vue

一.在pycharm中开发vue

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

'''
①在pycharm中打开vue项目,在settins下Plugins中下载vue.js
②启动vue项目
 -方法1.在Terminal下输入npm run serve
 -方法2.Edit Configurations----》点+  选npm-----》在script对应的框中写：serve
'''

二.vue项目的目录结构

'''
-node_modules：项目的依赖

-public
    -favicon.ico  网页的图标
    -index.html   主页面
-src：我们需要关注的
    -assets：方静态文件
    -components：小组件
    -views  ：页面组件
    -App.vue ：主组件
    -main.js ：项目主入口js
    -router.js： 路由相关，以后配置路由，都在这里配置
    -store.js  ：vuex相关，状态管理器

-package.json   项目的依赖文件
'''

三.每个vue组件由三部分组成

'''
template:放html代码
script:放js相关的东西
style:放css相关
'''

四.vue中路由的创建

'''
①在src下views文件夹中创建一个组件 FreeCourse.vue
②配置路由
    在src下router.js中配置
    import FreeCourse from './views/FreeCourse.vue'

    {
      path: '/freecourse',
      name: 'freecourse',
      component: FreeCourse
    },
③路由跳转
在src下APP.vue中配置
<router-link to="/freecourse">免费课程</router-link>
'''

五.在组件中显示数据

'''
①在template中:
<div class="course">
    {{course_list}}
</div>

②在script中:
export default {
  name: 'course',
  data: function () {
      return{
        course_list:['python','linux','go语言']
      }
  }
}
''' 

六.vue中的axios完成前后台交互

-安装
    npm install axios 在package.json文件中就能看到依赖
-在main.js中配置
    //导入 axios
    import axios from 'axios'
    //把axios对象赋给$http
    Vue.prototype.$http=axios
    //以后在组件的js中通过$http取到的就是axios
-在组件的js代码中写:
    this.$http.request({
        //向下面的地址发送get请求
        url:'http://127.0.0.1:8000/courses/',
        method:'get'
    }).then(function (response) {
        //response.data才是真正的数据
        console.log(response.data)
    })
-页面挂载完成,执行后面函数,完成数据加载
    mounted:function () {
        this.init()
    }

#组件
'''
<template>
  <div class="course">
    <h1>我是免费课程页面</h1>
    <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({
              //向下面的地址发送get请求
              url:'http://127.0.0.1:8000/courses/',
              method:'get'
          }).then(function (response) {
              //response.data才是真正的数据
              _this.course_list = response.data
          })
      }
  } ,
  mounted:function () {
      this.init()
  }
}
</script>
'''

七.vue中使用element-ui

-饿了么开源样式

-安装 npm i element-ui -S

-在main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

-去官方文档看样式完成复制粘贴 http://element-cn.eleme.io/#/zh-CN

八.contentype组件(数据库相关)

什么时候使用?
实际项目中有一个表(PricePolicy)要关联好几个表(Course,DegreeCourse)也就是这个表要储存好几个表的数据,这种情况使用contentype组件

-新建免费课程表的时候 Course
# 不会在数据库中生成字段，只用于数据库操作
policy = GenericRelation(to='PricePolicy')

-新建学位课程表的时候 DegreeCourse
# 不会在数据库中生成字段，只用于数据库操作
policy = GenericRelation(to='PricePolicy')

-价格策略表 PricePolicy
#之前有的字段该怎么写就怎么写
object_id = models.IntegerField()
content_type = models.ForeignKey(to=ContenType,null=True)
# 引入一个字段，不会在数据库中创建，只用来做数据库操作
content_obj = GenericForeignKey()

使用一（给课程添加价格策略）：
-给免费课django添加价格策略
course = models.Course.objects.get(pk=1)
ret=models.PricePolicy.objects.create(period=30, price=199.9,content_obj=course)
-给学位课程（python全栈开发）添加价格策略
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()