在pycharm中开发vue的方法步骤


Posted in Javascript onMarch 04, 2020

一.在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()

到此这篇关于在pycharm中开发vue的方法步骤的文章就介绍到这了,更多相关pycharm开发vue内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木

Javascript 相关文章推荐
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
js返回顶部实例分享
Dec 21 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 #Javascript
vuex入门最详细整理
Mar 04 #Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 #Javascript
vue 自定义组件的写法与用法详解
Mar 04 #Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 #Javascript
vue请求数据的三种方式
Mar 04 #Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
laravel安装和配置教程
2014/10/29 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
拖动时防止选中
2017/02/03 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
详解python-图像处理(映射变换)
2019/03/22 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
中专生自荐信
2013/10/12 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
大学生应聘推荐信范文
2013/11/19 职场文书
先进工作者事迹材料
2014/12/23 职场文书
银行员工考核评语
2014/12/31 职场文书