空项目通过Element开发登录页面——Vue项目实战(一)

Element安装

npm i element-ui -S

引入 Element

//引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size:'small'});

创建登录页面

引入页面

页面加载逻辑：components: { App } -> App.vue的 -> index.js的routes:[]

引入表单验证

<template>
    <div>
<!--   :rules="rules"(定义的变量，以及=后面的规则) ; :model="loginForm"数据对象 -->
      <el-form :rules="rules" :model="loginForm" class="loginContainer">
        <h3 class="loginTitle">系统登录</h3>
        <!--  可以不加prop属性，因为规则中加了required校验，所以需要添加-->
        <el-form-item prop="username">
          <!--        auto-complete="off"不自动填充-->
          <el-input type="text" v-model="loginForm.username" auto-complete="off" aria-placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="normal" type="password" v-model="loginForm.password" auto-complete="off" aria-placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-checkbox class="loginRemember" v-model="checked"></el-checkbox>
        <el-button size="normal" type="primary" style="width: 100%;">登录</el-button>
      </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
      data() {
          return {
            //数据对象
            loginForm:{
              username:'admin',
              password:'123'
            },
            checked:true,
            //规则
            rules:{
              //required:true 必填项
              username : [{required:true,message:'请输入用户名',trigger:'blur'}],
              password : [{required:true,message:'请输入用户名',trigger:'blur'}]
            }
          }
      }
    }
</script>

<style>
  .loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    /*    阴影效果*/
    box-shadow: 0 0 25px #cac6c6;
  }
  .loginTitle{
    /*上 右 下 左*/
    margin: 15px auto 20px auto;
    text-align: center;
    color: #505458;
  }
  .loginRemember{
    text-align: left;
    margin: 0px 0px 15px 0px;
  }

</style>

引入点击事件

安装网络请求工具

npm install axios

封装aip请求信息

//封装aip请求信息
import axios from 'axios'
//js文件中需要单独引用，将请求进行封装，封装响应，用于消息提示
import { Message } from 'element-ui';
import router from "../router";

/**
 * 自定义响应拦截器
 */
axios.interceptors.response.use(success => {
    //success.status  状态码存在
    //success.status == 200 :HTTP服务器访问接口200的status
    //success.data.status == 500 :返回jason的status

    //业务上的错误
    if(success.status && success.status == 200 && success.data.status == 500) {
        //将服务端写出来的RespBean的message给展示出来
        Message.error({message:success.data.msg})
        return;
    }
    if (success.data.msg) {
        Message.success({message:success.data.msg})
    }
    return success.data;
},error => {
    //失败
    if(error.response.status == 504 || error.response.status == 404) {
        Message.error({message:'服务器被吃了····'})
    } else if(error.response.status == 403) {
        Message.error({message:'权限不足，请联管理员！'})
    } else if(error.response.status == 401) {
        Message.error({message:'尚未登录，请登录！'})
        //返回登录页
        router.replace("/");
    } else {
        if(error.response.data.msg) {
            //返回服务端的错误信息
            Message.error({message:error.response.data.msg})
        } else {
            Message.error({message:'未知错误！'})
        }
    }
    return;
})

//post请求封装
//定义一个全局变量，防止后期需要添加前缀
let base = '';
//登录请求默认只支持key-value的形式传递参数
export const postKeyValueRequest=(url,params)=>{
    //类似于ajax
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params,
        transformRequest:[function (data) {
            let ret = '';
            for(let i in data) {
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
            }
            console.log(ret);
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    });
}

//传递jsaon的请求封装
export const postRequest=(url,params)=>{
    return axios({
        method: 'post',
        url:`${base}${url}`,
        data:params
    })
}
export const putRequest=(url,params)=>{
    return axios({
        method: 'put',
        url:`${base}${url}`,
        data:params
    })
}
export const getRequest=(url,params)=>{
    return axios({
        method: 'get',
        url:`${base}${url}`,
        data:params
    })
}
export const deleteRequest=(url,params)=>{
    return axios({
        method: 'delete',
        url:`${base}${url}`,
        data:params
    })
}

端口请求转发(跨域)

//配置代理对象
let proxyObj = {};
//拦截http请求
proxyObj['/']={
  ws:false,
  //目标转化地址
  target:'http://localhost:8022',
  changeOrigin:true,
  //请求地址是否重写(否)
  pathRewrite:{
    '^/api':''
  }
};
//拦截http请求
proxyObj['/api']={
  ws:false,
  //目标转化地址
  target:'http://localhost:8022',
  changeOrigin:true,
  //请求地址是否重写(否)
  pathRewrite:{
    '^/api':''
  }
};
module.exports={
  //开发环境(可以不配置)
  devServer:{
    //服务器信息
    host:'localhost',
    port:8084,
    //代理对象
    proxy:proxyObj
  }
}

vue.config.js文件配置失效问题解决

项目用 webpack-dev-server 启动就会用 webpack.dev.conf.js（默认），修改将package.json修改为用vue-cli-service serve的方式。

启动后无法加载登录页面问题

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build

在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。

vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。
在vue.config.js中设置：

module.exports = {
  runtimeCompiler: true,
}

点击事件接口请求修改

登录成功

注：能力有限，还请谅解，争取早日能够写出有质量的文章！

我是皮蛋布丁，一位爱吃皮蛋的热爱运动的废铁程序猿。

感谢各位大佬光临寒舍~