溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一.在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組件由三部分組成
四.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">
<h2>我是免費課程頁面</h2>
<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內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
