• 【Vue+Element-UI】实现登陆注册界面及axios之get、post请求登录功能实现、跨域问题的解决

    目录

    一、实现登陆注册界面

    1、前期准备

    2、登录静态页实现

    2.1、创建Vue组件

    2.2、静态页面实现

    2.3、配置路由

    2.4、更改App.vue样式

    2.5、效果

    3、注册静态页实现

    3.1、静态页面实现

    3.2、配置路由

    3.3、效果

    二、axios

    1、前期准备

    1.1、准备项目

    1.2、安装axios

    1.3、更改端口

    2、GET请求

    2.1、导入axios

    2.2、编写get请求

    3、POST请求

    3.1、get、post的区别

    3.2、导入qs

    3.3、编写post请求

    3.4、优化处理

    3.4.1、下载安装vue-axios

    3.4.2、写入api模块添加全局配置

    3.4.2.1、action.js

    3.4.2.2、http.js

    3.4.3、main.js配置vue-axios

    3.4.3、使用封装后的axios发送请求

    3.4.4、修改后的提交事件

    三、跨域

    1、什么是跨域问题

    2、解决跨域问题

    一、实现登陆注册界面

    1、前期准备

    使用vue-cli构建SPA项目:

    1. 进入你想创建项目的目录位置
    2. 使用命令vue init webpack 项目名，构建一个vue项目 
      vue init webpack element_ui_spa
    3. 使用命令npm install element-ui -S，添加Element-UI模块
      1. npm install element-ui -S：后面有 -s，他们分别是：
        1. -g：将依赖下载node_global全局依赖。
        2. -d：下载依赖da到spa工程中，不会参与打包。
        3. -s：下载依赖da到spa工程中，会参与打包。
    4. 打开项目的package.json文件可查看具体添加模块信息。
    5. 在src目录下创建views目录（该目录用于存放vue组件）。
    6. 在main.js中引入element-ui模块
      1. // The Vue build version to load with the `import` command
      2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
      3. import Vue from 'vue'
      4. // 新添加1
      5. import ElementUI from 'element-ui'
      6. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
      7. import 'element-ui/lib/theme-chalk/index.css'
      8.  
      9. import App from './App'
      10. import router from './router'
      11.  
      12. // 新添加3----实例进行一个挂载
      13. Vue.use(ElementUI)
      14. Vue.config.productionTip = false
      15.  
      16. /* eslint-disable no-new */
      17. new Vue({
      18.   el: '#app',
      19.   router,
      20.   components: {App},
      21.   template: ''
      22. })

      在指定位置!!!在指定位置!!!在指定位置!!!---添加三行代码

    2、登录静态页实现

    2.1、创建Vue组件

    在我们src里面创建我们的登录注册的vue组件。

    2.2、静态页面实现

    设置我们的html样式，当然我们也可以在组件 | Element里面自己进行一个自定义

    1. <template>
    2.   <div class="Login">
    3.     <el-form class="login-container">
    4.       <h1 class="title">用户登录h1>
    5.       <el-form-item label="">
    6.         <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off">el-input>
    7.       el-form-item>
    8.       <el-form-item label="">
    9.         <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off">el-input>
    10.       el-form-item>
    11.       <el-form-item>
    12.         <el-button type="primary" style="width:100%;" @click="doSubmit()">提交el-button>
    13.       el-form-item>
    14.       <el-row style="text-align: center;margin-top:-10px">
    15.         <el-link type="primary">忘记密码el-link>
    16.         <el-link type="primary" @click="gotoRegister()">用户注册el-link>
    17.       el-row>
    18.     el-form>
    19.   div>
    20. template>
    21. <script>
    22. export default {
    23.   name: "Login",
    24.   data() {
    25.     return {
    26.       msg: "登录界面",
    27.       username: "",
    28.       password: ""
    29.     }
    30.   },
    31.   methods: {
    32.     gotoRegister() {
    33.       this.$router.push("/Register");
    34.     },
    35.     doSubmit() {
    36.  
    37.     }
    38.   }
    39. }
    40. script>
    41.  
    42. <style scoped>
    43. .login-wrap {
    44.   box-sizing: border-box;
    45.   width: 100%;
    46.   height: 100%;
    47.   padding-top: 10%;
    48.   background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
    49.   //background-image: url();
    50.   background-repeat: no-repeat;
    51.   background-position: center right;
    52.   background-size: 100%;
    53. }
    54.  
    55. .login-container {
    56.   border-radius: 10px;
    57.   margin: 0px auto;
    58.   width: 350px;
    59.   padding: 30px 35px 15px 35px;
    60.   background: #fff;
    61.   border: 1px solid #eaeaea;
    62.   text-align: left;
    63.   box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    64. }
    65.  
    66. .title {
    67.   margin: 0px auto 40px auto;
    68.   text-align: center;
    69.   color: #505458;
    70. }
    71. style>

    2.3、配置路由

    在router/index.js中修改vue项目默认显示路由

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import Login from '@/views/Login'
    5.  
    6. Vue.use(Router)
    7.  
    8. export default new Router({
    9.   routes: [
    10.     {
    11.       path: '/Login',
    12.       name: 'Login',
    13.       component: Login
    14.     }
    15.   ]
    16. })

    2.4、更改App.vue样式

    更改原有