创建vue项目+总结使用(跨域问题+vue 创建)

创建vue项目:

-安装node.js
        -vue脚手架
        -vue create 项目名字
    pycharm开发vue项目
        -需要安装vue.js插件
            -setting--->plugins--->左下方install---->去搜索---->下载--->重启
        -运行vue项目
            -editconfigration--->+--->npm--->run serve 
            
    vue目录结构:
        -node_modules:项目依赖(以后项目要传到git上,这个不能传)
        -publish--->index.html  是总页面
        -src :项目
            -assets:静态资源
            -components:组件
            -views:视图组件
            -APP.vue:根组件
            -main.js :总的入口js
            -router.js :路由相关,所有路由的配置,在这里面
            -store.js  :vuex状态管理器
        -package.json:项目的依赖,npm install 是根据它来安装依赖的,如果往git上传，它也需要传上去    
    每个组件会有三部分:
        -template
        -style
        -script
    新建组件:
        -创建一个组件
        -去路由做配置:
        import Course from './views/Course.vue'
            {
              path: '/course',
              name: 'course',
              component: Course
            }
        -使用:
            <router-link to="/course">专题课程</router-link>
    显示数据:
        -script中:
              export default {
                data:function () {
                    return{
                    
                        course:['python','linux'],
                        aa:'我是aa'
                    }
                }
    方法绑定:
        <button @click="init">点我</button>
        
        -script
            methods: {
                init: function () {
                    alert('111')
                }
            }
    vue中的ajax:
        -axios
        -安装:npm install axios
        -使用:
            -先在main中配置:
                import axios from 'axios'
                Vue.prototype.$http=axios
            -在组件中:
                this.$http.request().then().catch()
                this.$http.request({
                    url:请求的地址
                    method:请求方式
                }).then(function(response){
                    ....函数回调处理
                })
            -注意:
                this需要在上面重新赋值给一个变量
                请求成功函数内部:
                    _this.course=response.data
                    http://127.0.0.1:8000/course/?format=json，这样可以拿到json的格式数据，否则拿到的是一个好看的页面

vue项目中启动命令：npm run serve
cmd下载vue命令：
cd /d 文件路径
vue create luffy_girl

 

总结使用(跨域问题+vue 创建)

-跨域问题:
        -浏览器同源策略---jsonp解决跨域问题
        -cors:跨域资源共享,服务端的技术
        -简单请求
            -发一次请求
        -非简单请求
            -发两次第一次是OPTIONS,预检请求
        -如何区分:
            -请求方式:
                HEAD
                GET
                POST
            -HTTP的头信息不超出以下几种字段：
            
                Accept
                Accept-Language
                Content-Language
                Last-Event-ID                Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
        -处理:
            from django.utils.deprecation import MiddlewareMixin
            class CorsMiddleWare(MiddlewareMixin):
                def process_response(self,request,response):
                    if request.method=="OPTIONS":
                        #可以加*
                        response["Access-Control-Allow-Headers"]="Content-Type,token"
                    response["Access-Control-Allow-Origin"] = "http://localhost:8080"
                    return response

                    
    -vue 创建:
    -目录结构:
        -src
        -package.json
    -创建页面组件:
        -都有三部分
        -创建路由
        -用路由跳转
            <router-link to="/course">专题课程</router-link>
            
            
    -如何使用bootstrap样式:
        -cdn引入
        -本地引入,注意路径问题 
    -与后台交互:(必须要掌握)
        -axios
            -安装:npm install axios
            -配置:
                import axios from 'axios'
                //要把axios放到一个全局变量中
                //把axios赋给了$http这个变量
                Vue.prototype.$http=axios
            -使用:
                this.$http.request({
                    url:'路径',
                    method:'get',
                    data:
                }).then(function (response){
                        真实的数据=response.data
                    })
                    
    -在组件的script中:
        export default {
            data:function () {
                return {
                    course: ['python', 'linux'],
                    aa: '我是aa'
                }

        },
        methods:{
            test:function (可以写参数){
                
            },
            }
        
        }