05 vue项目01-组件关系、bootstrap

1、django后端项目

1、项目预期

配置前端静态资源

          

页面展示

2、django项目代码

主url

from django.contrib import admin
from django.urls import path,include
from app01 import urls

urlpatterns = [
    path('admin/', admin.site.urls),

    # url分发
    path('api/v1/', include('app01.urls'), name="app01"),

]

url

from django.urls import path,include

from .views import CommentViewSet

urlpatterns = [
    # url分发
    path('comments/',CommentViewSet.as_view()),

]

view

from rest_framework.views import APIView
from rest_framework.response import Response

data = [
        {"markdown": "##vue初认识", "title": "day1 vue学习", "content": "vue初认识"},
        {"markdown": "#vue全家桶", "title": "day2 vue进阶", "content": "vue全家桶"},
        ]

class CommentViewSet(APIView):
    """笔记"""
    def get(self,request):

        return Response(data)

    def post(self,request):
        print(request.data)
        data.append(request.data)
        print(data)
        return Response(data)

settings

runserver django项目

2、vue项目生成

vue全家桶

vue+vue-route+vuex

1、webpack模板

vue init webpack  # 初始化
npm run dev    # 启动

生态系统

2、目录结构分析

（1）webpack生成这些

（2）App.vue 显示

router-view怎么理解？

（3）HelloWorld 组件

3、项目实现01

1、组件关系

2、Vmain、Vnote

1、Vmain.vue

<template>
    <div class="main">
        主页
    </div>

</template>

<script>
export default {
    name:"Vmain",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

Vnote.vue

<template>
    <div class="note">
        笔记
    </div>

</template>

<script>
export default {
    name:"Vnote",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

2、router路由绑定子组件

3、App.vue显示

3、如何使用bootstrap？

1、导入bootstrap

（1）npm下载

（2）导入

// 1.0 导入bootstrap
import "bootstrap/dist/css/bootstrap.min.css"

（3）引入成功

  

4、Vheader：使用bootstrap

1、创建Vheader

<template>

</template>

<script>
export default {
    name:"VHeader",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

2、在Vheader 放入bootstrap代码

bootstrap官网 https://www.bootcss.com

在Vheader 放入bootstrap代码

3、App.vue使用Vheadr组件

效果图

5、Vheader：路由切换保持状态

（1）版本1：使用组件

刷新，无法还原

（2）版本2：v-for，active显示

路由切换保持状态

拿路由的path 遍历url;

vue-router 官网 https://router.vuejs.org/zh/

Vheader.vue

<template>

    <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">

            <li v-for='(item,index) in routes' :class="{active:index==currentIndex}" @click='activeHandler(index)'>
                <router-link :to="item.url">{{ item.title }}</router-link>
            </li>

        </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>

</template>

<script>
    export default {
        name: "VHeader",
        data() {
            return {
            routes: [
                { url: "/", title: "我的首页" },
                { url: "/note", title: "我的笔记" }
            ],
            currentIndex: 0
            };
        },
        methods: {
            activeHandler(index) {
            this.currentIndex = index;
            }
        },
        created(){
            console.log(11111111)
            console.log(this.$route)

            // 刷新可以返回到首页
            for(var i=0; i<this.routes.length; i++){
                if(this.routes[i].url == this.$route.path){
                    this.currentIndex = i;
                    return;
                }
            }
        }
        };
</script>

<style scoped>
</style>

4、项目实现02

1、我的首页：Vmian

<template>

    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <!-- bootstrap 带标题的面板 -->
                <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">我的笔记列表</h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <li><a href="#">我的笔记</a></li>
                        <li><a href="#">我的博客</a></li>
                        <li><a href="#">我的公司信息</a></li>
                    </ul>
                </div>
                </div>

            </div>

        </div>
    </div>

</template>

<script>
export default {
    name:"Vmain",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

2、我的笔记：Vnote=VnoteShow+Vmark

1、组件关系

2、markdwon

Vmark.vue

<template>
    <div class='wrap'>
        <div class="mark">

            <textarea rows="10" cols="100" class='editor' v-model='markValue'></textarea>

            <div class='show' v-html='currentValue'></div>

        </div>
    </div>
</template>

<script>
import Marked from "marked";
export default {
  name: "Vmark",
  data() {
    return {
      markValue: ""
    };
  },
  methods: {},
  computed: {
    currentValue() {
      return Marked(this.markValue);
    }
  }
};
</script>

<style>

.mark {
  width: 800px;
  height: 400px;
  margin: 0 auto;
}
.editor,.show {
  float: left;
  width: 395px;
  height: 400px;
  border: 1px solid #666;
}
</style>

npm install marked --save

VnoteShow.vue

<template>
    <div class="note">
        笔记
    </div>

</template>

<script>
export default {
    name:"Vnote",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

Vnote.vue

<template>

    <div class="container">
        <div class="row">
            <div class="col-md-3">

                <div class="panel panel-default">
                    <div class="panel-heading">我的笔记列表</div>
                    <div class="panel-body">

                        <!-- 笔记列表 -->
                        <VnoteShow></VnoteShow>

                    </div>
                </div>

            </div>

            <div class="col-md-9">
                <div class="panel panel-default">

                    <div class="panel-heading">
                        请输入文字标题: <input type="text">
                    </div>

                    <div class="panel-body">

                        <!-- markdown -->
                        <Vmark></Vmark>

                    </div>

                </div>

            </div>

        </div>
    </div>

</template>

<script>
// 1导入
import Vmark from "./Vmark"
import VnoteShow from "./VnoteShow"

export default {
    name:"Vnote",
    data(){
        return{}
    },
    components:{
        // 2挂载
        Vmark,
        VnoteShow,
    }
}
</script>

<style scoped>

</style>

3、笔记详情页：VnoteShow=VnoteLIst+VnoteItem

1、组件关系图

2、三个组件

VnoteShow.vue

<template>
    <div class="note">

        <VnoteList></VnoteList>

    </div>

</template>

<script>
    import VnoteList from "./VnoteList"
    export default {
        name:"VnoteShow",
        data(){
            return{}
        },
        components:{
            VnoteList,
        }
    }
</script>

<style scoped>

</style>

VnoteList.vue

<template>
    <ul>
        <VnoteItem></VnoteItem>
    </ul>

</template>

<script>
    import VnoteItem from "./VnoteItem"
    export default {
        name:"VnoteList",
        data(){
            return{}
        },
        components:{
            VnoteItem,
        }
    }
</script>

<style scoped>

</style>

VnoteItem.vue

<template>
    <li>
        <h2>我的笔记标题</h2>
        <p>笔记内容</p>
    </li>

</template>

<script>
export default {
    name:"VnoteItem",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>