• vue-cli使用和组件

    vue之同源策略

    vue之同源策略

    vue请求方式(axios)

    axios.get('资源服务器'，{
          params:{   //get参数   如https：//www.badu.comid=(参数)
                id:参数
          }
          }).then(function(response){   //response是请求成功后返回的数据
        console.log(response)      
          }).catch(function(error){    //error是请求失败后的返回数据
        console.log(error)  //无法显示服务端的错误，只会接收服务端的错误
          })

    同源策略报错

    Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    关键词：Access-Control-Allow-Origin

    只要出现这个错误，就是访问受限。出现策略的拦截问题

    同源策略报错解决方式

    同源策略：是浏览器的一种保护用户数据的一种安全机制，浏览器会限制ajax不能跨域访问其他源的数据地址。

    同源：判断两个同心地址之间，是否协议，域名[ip]，端口一致

    同源策略报错原因也是协议，域名和端口有其一不一致的问题

    解决方式

    ajax跨域(跨源)方案之CORS

    CORS是一个W3C标准，全称是"跨域资源共享"，他允许浏览器向跨源的后端服务器发出ajax请求，从而克服ajax只能同源使用的限制

    实现CORS主要依靠后端服务器中相应数据中在响应头信息返回信息的

    CORS在django中的使用

    #django视图

    def post(request):
    
response = new HttpResponse()
    
response.set_header("Access-Control-Allow-Origin","http://localhost:63342")
    
return response;
    


    //在响应行信息里面设置一下内容：
Access-Control-Allow-Origin：ajax所在的域名地址

Access-Control-Allow-Origin：www.oldboy.cn  #

    vue中设置

    待更新

    jsonp

    利用跨域标签来解决的

    jsonp可以实现跨域，但是并非ajax技术

    核心是利用script标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" id="content">
        <button onclick="get_data()">翻译</button>
        <p id="p1"></p>
    </div>
    <script>
    // jsonp本身并不是ajax
    // jsonp利用的是script标签的本身特性
    // 实现json需要客户端和服务端配合
    function hello(data){
        // 自定义业务
        //当点击之后，发送请求服务器，js会自动调用这个函数(函数名必须和请求连接中的callback参数一致，传入的参数就是请求响应的参数)
        var p1 = document.getElementById("p1");
        p1.innerHTML = data.data;
        console.log(data);
    }

    function get_data(){
    // 通过js的DOM操作创建一个script标签
    var script = document.createElement(&quot;script&quot;);
    var content = document.getElementById(&quot;content&quot;);
    // 给script标签设置src属性为服务端的js脚本
    script.src = &quot;https://api.asilu.com/fanyi/?callback=hello&amp;q=&quot;+content.value;
    console.log(script);
    // 把新建的script标签追加到网页给浏览器识别
    //通过将处理好的script标签交给document的head处理，让浏览器识别
    document.head.append(script);
}

&lt;/script&gt;

    

    </body>
    
</html>

    服务端代理

    普通组件

    组件有两种全局组件和单文件组件

    普通组件与通常vue相同，都是可以拥有data和methods,以下是写法

    <html lang="en">
    <head>
    	<meta charset="utf-8">
        <title>普通组件</title>   <!--网页名称--->
        <script src="js/vue.js"></script>
    </head>
    <style>
        button{
            background-color:red  
        }
    </style>

    &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
    
    &lt;/div&gt;
&lt;/body&gt;

    

    <script>
    
//创建一个普通组件
    
//template的模板中内容必须有div标签包含
    
Vue("mycomponent",{
    
template: &lt;div&gt;     &lt;button @click=&quot;add&quot;&gt;＋&lt;/button&gt; &lt;input type=&quot;text&quot; v-model=&quot;num&quot;/&gt; &lt;button @click=&quot;substract&quot;&gt;－&lt;/button&gt;     &lt;/div&gt;,
    
data(){
    
return{}  //组件中使用的数据，组件之间的数据是隔离的相互独立
    
},
    
methods:{
    
add(){
    
num++;
    
},
    
substract(){
    
num--;
    
}
    
}
    
});
    

    var vm = new Vue({
    el:&quot;#app&quot;,
    
});
&lt;/script&gt;

    

    </html>

    单文件组件

    单文件组件的代码，是需要保存到vue文件中

    例如，我们希望创建一个单文件组件，则需要创建一个vue组建的代码。浏览器默认不识别vue文件。所以需要vue-cli这个工具

    vue-cli如何搭建项目

    vue-cli官网：https://cli.vuejs.org/zh/

    在安装vue-cli之前需要安装node.js

    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

    nvm工具的下载和安装： https://www.jianshu.com/p/d0e0935b150a

    https://www.jianshu.com/p/622ad36ee020

    安装记录:

    打开:https://github.com/coreybutler/nvm-windows/releases

    安装完成以后,先查看环境变量是否设置好了.

    nvm

    可以使用nvm下载node和node的npm

    如果使用nvm工具，则直接可以不用动手下载，如果使用下载安装的npm比较慢，可以修改nvm的配置文件

    # settings.txt
root: C:	ool
vm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:	ool
odejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

    常用命令

    nvm list  #列出目前在nvm里面安装的所有node版本
nvm install node版本号   #安装指定版本的node.js
nvm uninstall node版本号  #卸载指定版本的node.js
nvm use node版本号    #切换当前使用的node.js

    安装好node.js

    使用命令查看 node -v

    npm

    在安装node.js之后，同时node.js会同时帮我们那幢一个npm包管理器npm,我们可以借助npm命令安装node.js的包，这个相当于python的pip管理包

    npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

    配置npm下载源

    //临时使用
nom install jquery --registry https://registry.npm.taobao .org

    //配置这个选型到文件中
    
npm config set registry hhttps://registry.npm.taobao.org
    

    //验证是否配置成功
    
npm config list或者npm cofig get registry

    安装vue-cli

    npm install  -g vue-cli

    使用vue-cli初始化创建项目

    在保存项目文件夹下

    创建项目命令  vue init webpack 项目目录名

    创建项目过程

    ? Project name project
? Project description 一个很牛逼的网站
? Author oldboy
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users 
? Install vue-router? (Y/n) n 
? Set up unit tests? (Y/n) n  # 是否安装单元测试组建
? Setup e2e tests with Nightwatch? (Y/n)n
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

    创建项目后，在项目目录下

    执行 npm run dev   执行虚拟服务器

    单文件组件使用

    组件有两种：普通组件、单文件组件

    普通组件的缺点：

    1. html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
    2. 普通组件用在小项目非常合适，但是复杂的大项目中，如果把更多的组件组件放在html中，那么维护成本就变得非常昂贵。
    3. 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候不好处理

    将一个组件相关的html结构，css样式，以及交互的JavaScript代码从HTML文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合的复用，这种文件的扩展名为“.vue”
  • 相关阅读:
    boost::ptree；boost::xml_parser
    boost::array
    boost::timer
    boost::gregorian日期
    boost::algorithm/string.hpp
    boost::lexical_cast
    QT::绘图
    QT::透明
    centos上freefilesync与定时任务
    centos上安装freefilesync工具配置说明
  • 原文地址：https://www.cnblogs.com/g15009428458/p/12312539.html
Copyright © 2020-2023  润新知