在pycharm中开发vue的方法步骤

2023-07-29 20:14:03 235

一.在pycharm中开发vue

'''
webstorm(vue)pycharm(python)goland(Go语言)idea(java)andrioStuidio(安卓)Php(PHP)
'''

'''
①在pycharm中打开vue项目,在settins下Plugins中下载vue.js
②启动vue项目
-方法1.在Terminal下输入npmrunserve
-方法2.EditConfigurations----》点+选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中配置

importFreeCoursefrom'./views/FreeCourse.vue'

{
path:'/freecourse',
name:'freecourse',
component:FreeCourse
},

③路由跳转

在src下APP.vue中配置

免费课程

五.在组件中显示数据

①在template中:


{{course_list}}

②在script中:

exportdefault{
name:'course',
data:function(){
return{
course_list:['python','linux','go语言']
}
}
}

六.vue中的axios完成前后台交互

-安装

npminstallaxios在package.json文件中就能看到依赖

-在main.js中配置

//导入axios
importaxiosfrom'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()
}

组件

七.vue中使用element-ui

-饿了么开源样式

-安装npmielement-ui-S

-在main.js中配置

importElementUIfrom'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内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

在pycharm中开发vue的方法步骤

我是免费课程页面

随机推荐

在pycharm中开发vue的方法步骤

我是免费课程页面

热门推荐

随机推荐