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

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

(0)

相关推荐

  • Vue-CLI 项目在pycharm中配置方法

    Vue-CLI Vue-CLI 项目在pycharm中配置 配置方法与django类似 第一步 第二步 第三步 总结 以上所述是小编给大家介绍的Vue-CLI 项目在pycharm中配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • 在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对应的框中写

  • 在Pycharm中使用GitHub的方法步骤

    Pycharm是当前进行python开发,尤其是Django开发最好的IDE.GitHub是程序员的圣地,几乎人人都在用. 本文假设你对pycharm和github都有一定的了解,并且希望在pycharm下直接使用github的版本控制功能. 废话不多说,下面图文详解,全是干货. 环境:pycharm 2016,git 2.8,github账户,windows7 一.配置Pycharm 不管你用哪种方法,进入pycharm的配置菜单. 选择上图中的version control.(这里插一句,不

  • 在Ubuntu中安装VSCode并配置C/C++开发环境的方法步骤

    第一步,打开Ubuntu Software下载VSCode.(so easy) 官网地址:https://code.visualstudio.com/docs/?dv=linux64_deb 然后使用 sudo dpkg -i  xxx.deb解压即可 第二步,如果你的电脑中没有gcc,g++,gdb的话,可以通过以下代码获得. sudo apt-get update //访问源列表,并读取软件列表 sudo apt-get install gcc sudo apt-get install g+

  • Webpack 4.x搭建react开发环境的方法步骤

    本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记 必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&

  • Django中使用Celery的方法步骤

    (一).概述 Celery是一个简单.灵活和可靠的基于多任务的分布式系统,为运营提供用于维护此系统的工具.专注于实时处理的任务队列,同时也支持任务的调度.执行单元为任务(task),利用多线程这些任务可以被并发的在单个或多个职程(worker)上运行. Celery通过消息机制通信,通常通过中间人(broker)来分配和调节客户端与职程服务器(worker)之间的通信.客户端发送一条消息,中间人把消息分配给一个职程,最后由职程来负责执行此任务. Celery可以有多个职程和中间人,这样提高了高可

  • 在Pycharm中安装Pandas库方法(简单易懂)

    开发环境的搭建是一件入门比较头疼的事情,在上期的文稿基础上,增加一项Anaconda的安装介绍.Anaconda是Python的一个发行版本,安装好了Anaconda就相当于安装好了Python,并且里面还集成了很多Python科学计算的第三方库.比如我们需要用到的Pandas.numpy.dateutil等等,高达几百种.因此,安装了Anaconda,就不需要再专门的一个个安装第三方库.只要在使用Pycharm时调用Anaconda环境,便可以方便的使用其中的各种库.且各个库之间的依赖性很好,

  • VSCode搭建STM32开发环境的方法步骤

    目录 1.安装VScode 2.安装C/C++插件 3.安装Keil Assistant插件 4.用vscode打开keil工程 5.编译.下载程序 6.常用操作 官方简述 摘要: 作为一个51单片机或STM32单片机的使用者,keil一直是我们的必备的一款工具之一.但keil的一些问题也一直存在,当然也有人用其他的比如STM32CubeIDE.但是今天推荐的是VScode+Keil Assistant插件,不需要很复杂的配置各种文件和环境变量,只需要一个插件即可!可以编译代码和下载程序. 当我

  • 使用Docker构建开发环境的方法步骤( Windows和mac)

    目录 1. 使用 Docker 的好处 2. 安装 Docker 1) Linux 安装 Docker 2) Windows 10 3) macOS 3. Docker 换源 1) Linux 换源 2) Windows 和 Mac 换源 4. 编写 Dockerfile 5. 编写 docker-compose.yml 6. 启动容器 7. 总结 我们在开发中都会遇到这样的问题:在本地开发好功能后,部署到服务器,或者其他人拉到本地接着开发时,会出现功能无法使用的情况. 这些异常情况,大多数时候

  • vs2019永久配置opencv开发环境的方法步骤

    有很多同学肯定想学习opencv相关的知识,但是有些情况下每建一次项目都要重新引入下各种文件是不是很苦恼,所以我也面临了这个问题,在网上看到很多的同学的方法,有的也都是很一样的,将什么.dll加入环境变量,然后设置项目配置文件什么的,这些东西我也尝试过,但是很容易忘记,我也特意写了一些笔记,但是有时还是会忘记.恰巧我也升级了vs2019,所以也打算更新下方法,做到一劳永逸.下面是教程部分.首先我们要安装好我们的opencv,然后我们安装以后会看到生成的文件夹.如图 这一切就是基础文件,所以这个务

  • 基于jupyter代码无法在pycharm中运行的解决方法

    存在问题: jupyter代码无法在pycharm中运行 原因:工作文件和安装文件不统一引起的 解决方案: pycharm中新建工程项目时,要将图中所示红色部分勾选,从而保证可以引用到相应文件 补充知识:jupyter 在浏览器中 代码不执行 在机器学习的时候,当开始就遇到问题,pycharm启动jupyter notebook之后,浏览器前两行代码执行的好好的,后面就不执行了,上面的键全点了一遍(英语不行,见谅- -,死马当活马医).还是不行,后来,返现右上角python3旁边有个圈,当我重新

随机推荐