在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获取图片真实大小代码实例
Sep 24 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
JavaScript中string对象
Jun 12 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery Ajax全解析
Feb 13 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
node实现基于token的身份验证
Apr 09 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
jquery对表单操作2
2011/04/06 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python实现画一颗树和一片森林
2018/06/25 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python 实现向word(docx)中输出
2020/02/13 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
出纳会计岗位职责
2014/03/12 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
初三英语教学计划
2015/01/23 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
盗窃案辩护词
2015/05/21 职场文书
增值税发票丢失证明
2015/06/19 职场文书
个人欠条范本
2015/07/03 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android