Django框架（三十）—— 使用Vue搭建前台

vue的使用

一、创建vue项目

参考另一篇随笔：https://www.cnblogs.com/linagcheng/p/9883014.html

1.安装node.js
2.vue脚手架
3.vue create 项目名字

二、pycharm开发vue项目

1、安装vue.js插件

setting ---> plugins ---> 左下方install ----> 搜索vue.js ----> 下载 ---> 重启

2、运行vue项目

运行按钮旁边的editconfigration ---> + ---> npm ---> 右侧 Command:run;Script:serve

三、vue项目的目录结构

assets:静态资源
components:组件，存放页面中小的页面
views:视图组件，基本存放大型的页面
APP.vue:根组件
main.js :总的入口js
router.js :路由相关,所有路由的配置,在这里面
store.js  :vuex状态管理器

package.json : 项目依赖的文件

注意：

• node_modules 项目依赖文件很多，所有拷贝vue项目时，可以不拷贝，通过npm install参考package.json文件直接下载项目依赖
• 将项目传到Git上，依赖文件不要传
• 每个组件有三部分
  • template
    • style
    • script

四、vue的使用

1、创建新的组件

（1）手动创建一个组件，如index.vue

（2）去路由中配置

import Index from './views/Index.vue'

routes:[
    {
    path: '/index',
    name: 'index',
    component: Index
    },
]

（3）使用组件

<router-link to="/index">index页面</router-link>

2、显示数据

<template>
    <div>
        {{ course }}
        <p>
            {{ name }}
        </p>
        <!--for循环-->
        <p v-for=" course in courses">
            {{ course }}
        </p>
    </div>
</template>

<script>
    export default {
        data: function () {
            // 返回数据，template可以通过name获取
            return {
                courses: ['python', 'linux'],
                name: 'tom'
            }
        },
    }
</script>

3、方法的绑定

<template>
    <button @click="test">点我</button>
</template>

<script>
    export default {
        methods: {
            test: function () {
                    this.course=['aaa','ddd','bbb']
            }

        }
    }
    
</script>

五、axios

1、安装axios

npm install axios

2、使用axios

（1）在mian.js中配置

// 导入axios
import axios from 'axios'

// 要把axios放到一个全局变量中
// 把axios赋给了$http这个变量
Vue.prototype.$http = axios

（2）在组件中使用

this.$http.request().then().catch()

this.$http.request({
    url:请求的地址
    method:请求方式
}).then(function(response){
    ....函数回调处理
})

methods: {
    init: function () {
        //this.$http 就是axios
        // $.ajax({
        //     url:'',
        //     type:'post',
        //     success:function(){}
        // })
        
        let _this=this  // this需要在上面重新赋值给一个变量
        this.$http.request({
            // 在mian.js中配置，_this.$url='http://127.0.0.1:8000/'
            url:_this.$url+'course/',
            method:'get'
        }).then(function (response) {
            //console.log(response)
            //服务端返回的数据
            console.log(response.data)
            _this.course = response.data
        }).catch(function (response) {
            console.log(response)
        })

    },

}

六、vue绑定

1、绑定图片

<img :src="img">

2、绑定事件

<span @click="init(params)"></span>

3、绑定路由

<a :to="/login"></a>

七、vue页面挂载

<script>
    export default {
        methods: {
            test: function () {
                    this.course=['aaa','ddd','bbb']
            }
        
        },
        // 页面挂载是执行
        mounted:function(){
            // test是methods中定义的方法
            this.test()
        }
        
    }
    
</script>

八、vue中路由携带参数

• 路由的名字写在name对应的value值，参数写在params对应的value中（可以为一个字典）

<router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情</router-link>

• 前台从路由中获取值，从this.$route.params中取

// 如获取course_id
this.$route.params.id

九、vuex（状态管理器）

1、作用

用来存储cookie信息

2、配置vuex

在main.js中配置

new Vue({
    router,
    store,   // 配置vuex
    render: h => h(App)
})

3、使用

// 赋值
this.$store.state.name = this.name

// 取值
this.$store.state.name

十、vue-cookies——管理cookie

1、安装vue-cookies

npm install vue-cookies

2、使用

// store.js中

import Cookie from 'vue-cookies'

Vue.use(Vuex)

export default new Vuex.Store({
    // 变量
    state: {
        name: Cookie.get('name'),   // 从cookie中获取值
        token: Cookie.get('token')

    },
    // 方法
    mutations: {
        login: function (state, response) {
            //修改这两个变量的值
            state.name = response.data.name
            state.token = response.data.token
            //    往cookie中写数据
            Cookie.set('name', response.data.name)
            Cookie.set('token', response.data.token)

        },
        logout: function (state) {
            // 修改这两个变量的值
            state.name = ""
            state.token = ""
            // 往cookie中写数据
            Cookie.set('name', "")
            Cookie.set('token', "")
        }
    },
    actions: {}
})

// Login.vue页面
methods: {
    login: function () {
        let _this = this
        this.$http.request({
            url: _this.$url + 'login/',
            method: 'post',
            data: {'name': _this.name, 'pwd': _this.pwd}
        }).then(function (response) {
            console.log(response.data)
            if (response.data.status == 100) {
                //往stort.js的state的字典中写入值
                // _this.$store.state.name=_this.name
                // _this.$store.state.token=response.data.token
                //调用store下的某个方法,用commit,第一个参数是方法名,第二个参数是参数
                _this.$store.commit('login', response)
            }
        }).catch(function (response) {
            console.log(response)
        })

    },
},

博客内容仅供参考，部分参考他人优秀博文，仅供学习使用