在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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
九种原生js动画效果
Nov 11 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
微信小程序 开发之全局配置
May 05 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php实现文件下载代码分享
2014/08/19 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
DOM事件探秘篇
2017/02/15 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
Python常用小技巧总结
2015/06/01 Python
Python中datetime模块参考手册
2017/01/13 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
工程技术员岗位职责
2014/03/02 职场文书
银行求职信范文
2014/05/26 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
郭明义观后感
2015/06/08 职场文书
会计岗位工作总结
2015/08/12 职场文书
高中地理教学反思
2016/02/19 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python