在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 大家可以参考下
Oct 13 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python3.6编写的单元测试示例
2019/08/17 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
工程类专业自荐信范文
2014/03/09 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
政协委员个人总结
2015/03/03 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
2019个人半年工作总结
2019/06/21 职场文书