• SPA项目开发之登录注册


    1. vue怎么引入和配置使用element-ui框架

    1.1 使用vue-cli脚手架工具创建一个vue项目
    vue init webpack pro01

    1.2 npm安装elementUI
    cd pro01 进入新建项目的根目录
    npm install element-ui -S 安装element-ui模块

    重要的事情说三遍: 在指定位置 ! ! ! 在指定位置 ! ! ! 在指定位置 ! ! ! ~ ~ ~ 添加三行代码 ! ! !


    1.3 在项目中src目录下找到main.js,并在指定位置添加三行代码
    (main.js是入口文件,所以在这里引入就行,页面就不用引入了)

    import Vue from 'vue'
    
      import ElementUI from 'element-ui' //新添加1
      import 'element-ui/lib/theme-chalk/index.css' //新添加2,避免后期打包样式不同,要放在import App from './App';之前
      
      import App from './App'
      import router from './router'
    
    
      Vue.use(ElementUI)   //新添加3
      Vue.config.productionTip = false

    1.4 测试
    修改HelloWorld.vue添加elementUI组件查看效果

    2. Vue+ElementUI设计登陆页面

    注意:
    相关样式见资料“css.txt”;
    < style scoped>在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的;
    auto-complete=“off” , autocomplete 属性是 HTML5 中的新属性,off-----禁用自动完成

    3. 后台交互(axios/qs/vue-axios)

    3.1 axios
    axios是vue2提倡使用的轻量版的ajax。
    是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests,与Vue配合使用非常好。

    1.题外话:
    vue.js 有著名的全家桶系列:vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
    其中 vue-resource 是Vue.js的一款插件,它可以通过 XMLHttpRequest 或 JSONP 发起请求并处理响应,但在vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios 。

    Get:

     axios.get('/user', {//注意数据是保存到json对象的params属性
                 params: {
                   ID: 12345
                 }
               }).then(function (response) {
                 console.log(response);
               }).catch(function (error) {
                 console.log(error);
               });

    Post:

     axios.post('/user', {//注意数据是直接保存到json对象
                 firstName: 'Fred',
                 lastName: 'Flintstone'
               }).then(function (response) {
                 console.log(response);
               }).catch(function (error) {
                 console.log(error);
               });

    axios跨域问题
    什么是跨域?
    url = 协议(http)+ host(192.168.122.123)+ port (8080)+ 项目

    跨域情况:
                 
                 http://localhost:8080/p1
                 https://localhost:8080/p1
                 
                 http://192.168.122.123:8080/p1
                 http://192.168.122.124:8080/p1
                 
                 http://192.168.122.123:8080/p1
                 http://192.168.122.123:8099/p1
    
    
                 http://192.168.122.123:8080/p1
                 http://192.168.122.123:8080/p2

    会一直报错:“http://127.0.0.1:8848’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header”
    因为使用了前后端分离开发,跨域访问了,解决方案:需要配置tomcat允许跨域访问 ,
    tomcat跨域配置方法很多,但最简单的方式是自己写一个过滤器CorsFilter实现,添加一个响应头
    Access-Control-Allow-Origin 即可

    httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名
    httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80"); 
    
    Access-Control-Allow-Origin:*                           则允许所有域名的脚本访问该资源。
    Access-Control-Allow-Origin:https://www.fujieace.com    允许特定的域名访问 

    axios.get提交没有问题
    axios.post提交后台接收不到数据
    因为POST提交的参数的格式是 Request Payload ,这样后台取不到数据的
    (详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”),
    解决方案:使用qs.js库,将{a:‘b’,c:‘d’}转换成’a=b&c=d’

    简化axios使用
    使用axios全局配置及拦截器
    详情见资料“api/http.js”

      axios.defaults.baseURL = 'https://api.example.com';
        //axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头,添加认证令牌
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    为方便开发,建议对请求地址进行封装
    详情见资料“api/action.js”

    为进一步简化开发,将action.js的URL地址封装到axios.urls属性上

    This 指针带来的变量污染,需要利用箭头函数来解决;

    3.2 qs
    qs.js它是一个url参数转化的js库。用法就两个:

     var obj = qs.parse('a=b&c=d');              //将URL解析成对象的形式:{a:'b',c:'d'}
           var str = qs.stringify(obj);               //将对象 序列化成URL的形式,以&进行拼接:a=b&c=d'
      • vue-axios
        vue-axios是在axios基础上扩展的插件,在Vue.prototype原型上扩展了$http等属性,可以更加方便的使用axios

      • axios/qs/vue-axios安装及使用步骤
        1.安装

    npm install axios -S

    npm install qs -S

    npm install vue-axios -S

    2.修改main.js文件

     import axios from 'axios'
               import qs from 'qs'
               import axios from '@/api/http'             vue项目对axios的全局配置      
               import VueAxios from 'vue-axios' 
               Vue.use(VueAxios,axios)

    3.直接在Vue组件文件的methods里使用

     this.axios.get(url,{params:{id:1,name:'zs'}}).then((response)=>{
                 this.newsList=response.data.data;
               }).catch((response)=>{
                 console.log(response);
               }); 

    后台代码指路:

    https://www.cnblogs.com/psyu/p/11261329.html

  • 相关阅读:
    python执行命令行调试工具pdb
    py常用标准库
    Python的 垃圾回收机制
    私有化 : _x: 单前置下划线,私有化属性或方法;__xx:双前置下划线;__xx__:双前后下划线;属性property
    python 解析docx文档将文档名修改为docx里的合同编号
    LINUX7 HA(mysql)
    datax oracle到mysql数据抽取
    SQL优化案例(谓词越界)
    How to Find which Session is Holding a Particular Library Cache Lock (Doc ID 122793.1)
    窗口函数
  • 原文地址:https://www.cnblogs.com/psyu/p/11330741.html
Copyright © 2020-2023  润新知