在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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
开启BootStrap学习之旅
May 04 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python中作用域的深入讲解
2018/12/10 Python
Python最小二乘法矩阵
2019/01/02 Python
对python字典过滤条件的实例详解
2019/01/22 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
浅谈Python3中print函数的换行
2020/08/05 Python
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
机关党建工作汇报材料
2014/08/20 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014年工商所工作总结
2014/12/09 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA