SPA项目开发之登录注册

Posted 2022-06-26 psyu

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