Vue2 + ElementUI + axios + VueRouter入门

之前没有pc端开发基础,工作需要使用若依框架进行了一年的前端开发.最近看到一个视频框架一步步集成,感觉颇受启发,在此记录一下学习心得。视频链接:vue2+element ui 快速入门

环境搭建和依赖安装

  1. 安装nodejs
  2. 安装Vue Cli
  3. 使用vue create project 创建vue2工程
  4. 修改C:\Users\guchu.vuerc packageManager 为 npm
  5. 使用npm install axios 安装网络请求框架
  6. npm install vue-router@3(注意:vue2 对应 vue-router@3, vue3对应vue-router@4)
  7. npm i element-ui -S 安装elementUI框架

开发过程

静态登录页面开发

1. 将elementui注入Vue

修改main.js 添加一下内容:

import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUi) 

2. 编写静态页面:

新增src/pages/login/index.vue文件

<template><div class="login"><el-form label-width="80px" ref="formRef" :model="form" :rules="rules"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" placeholder="请输入密码" type="password"/></el-form-item><el-form-item><el-button type="primary" @click="login">登录</el-button></el-form-item></el-form></div>
</template>
<script>
export default {name: 'Login',data() {return {form: {username: '',password: ''},rules: {username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],password: [{required: true, message: '密码不能为空', trigger: 'blur'}]}}},methods: {login() {this.$refs.formRef.validate(valid => {if (valid) {this.$message({type: 'success', message: '验证通过'})} else {this.$message({type: 'error', message: '验证失败'})}})}}
}
</script>
<style scoped>
.login {position: absolute;width: 500px;height: 500px;top: 50%;left: 50%;transform: translate(-50%, -50%);
}</style>

知识点说明:

  1. 元素居中
.login {position: absolute;width: 500px;height: 500px;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

top\left从中心点开始布局,然后向左上角移动50%。
2. 表单和数据的双向绑定:model = form
3. 指定表单验证规则 :rules=“rules” prop具体校验字段 this.$refs.formRef.validate进行所有字段校验。

3.路由设置

  1. 新建src/router/index.js
import Vue from 'vue'
import VueRouter from "vue-router"
import Login from '../pages/login'Vue.use(VueRouter)
const routes = [{path: "/login",component: Login
}]
const router = new VueRouter({routes,mode: 'hash'
})
export default router;
  1. main.js进行挂载
import router from './router';
new Vue({router,render: h => h(App),
}).$mount('#app')
  1. 添加router-view 展示路径对应的组件
<template><div id="app"><router-view/><!--    <img alt="Vue logo" src="./assets/logo.png">--><!--    <HelloWorld msg="Welcome to Your Vue.js App"/>--></div>
</template>

http://localhost:8080/#/login

添加网络请求

  1. 拦截网络请求,添加校验头
    新建src/utils/request.js
import axios from 'axios'const request = axios.create({timeout: 5000
})
request.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers["authorization"] = token;}return config;}
)
export default request;
  1. 创建login具体网络请求
    新建src/api/login.js
import request from "@/utils/request";const login = (admin) => {return request({url: '/dev-api/auth/login',method: 'post',data: admin})
}
export default {login
};
  1. vue.config.js 设置代理地址
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({lintOnSave: false,transpileDependencies: true,devServer: {proxy: {'/dev-api': {target: `http://localhost:28080`,changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: '/dev-api'}}},}
})
  1. 对网络接口进行集中管理
    新增 src/api/index.js
import login from './login'export default {login,
}
  1. 将api挂在Vue简化import
import api from './api';
Vue.prototype.$api = api;
  1. login页面进行调用
          this.$api.login.login(this.form).then(response => {const {code, msg, data} = response.data;if (200 === code) {this.$message({type: 'success',message: '登录成功'})localStorage.setItem('token', data.access_token);this.$router.push("/")} else {this.$message({type: 'error', message: msg})}})

其他

  1. 编译运行ESLint 报错
    /.eslintrc.js 添加一下内容(没有进行新建)
module.exports = {rules: {"*": "off"},
};

/vue.config.js 添加 lintOnSave:false

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C/C++简单编译原理

我们写的头文件和.cpp文件究竟是如何在电脑中运行的&#xff1f; 先明确几个文件类型&#xff1a; 1、头文件&#xff08;.h .hpp&#xff09; 第三方头文件、系统头文件、自编头文件…… 2、编译单位&#xff08;.cpp .c cu&#xff09; 自己写的脚本文件 3、目标文件&…

JVM 系列知识体系全面回顾

经过几个月的努力&#xff0c;JVM 知识体系终于梳理完成了。 很早之前也和小伙伴们分享过 JVM 相关的技术知识&#xff0c;再次感谢大家支持和反馈。 最后再次献上 JVM系列文章合集索引&#xff0c;感兴趣的小伙伴可以点击查看。 JVM系列(一) -什么是虚拟机JVM系列(二) -类的…

ICPC-day2(圆方树)

圆方树 - OI Wiki (oi-wiki.org) F-Fief_"蔚来杯"2022牛客暑期多校训练营3&#xff08;重现赛&#xff09;山川四月 (nowcoder.com) 题目大意:给定一个无向图&#xff0c;每次询问两点x, y&#xff0c;求是否存在一个n的排列&#xff0c;使得第一个元素为x&#xf…

代码随想录 103. 水流问题

103. 水流问题 #include<bits/stdc.h> using namespace std;void dfs(vector<vector<int>>& mp, vector<vector<int>>& visit, int y, int x){if (visit[y][x] 1) return;visit[y][x] 1;if (y > 0){if (mp[y][x] < mp[y - 1][x…

计算机网络——http和web

无状态服务器——不维护客户端 怎么变成有状态连接 所以此时本地建立代理—— 若本地缓存了——但是服务器变了——怎么办&#xff1f;

vue 不是spa 单页面应用吗? 配置路由工作模式为history 后 ,为什么配置Nginx的 try_files 可以根据url 找到对应的文件?

免责申明 记录用&#xff0c;本人主要是后端,可能理解有误 Vue.js 是一个前端框架&#xff0c;主要用于构建单页面应用程序&#xff08;SPA&#xff09;。然而&#xff0c;Nginx 是一个服务器端的应用程序&#xff0c;负责处理 HTTP 请求并返回相应的资源。 当在 Vue.js 应用…

Pikachu-File Inclusion-远程文件包含

远程文件包含漏洞 是指能够包含远程服务器上的文件并执行。由于远程服务器的文件是我们可控的&#xff0c;因此漏洞一旦存在&#xff0c;危害性会很大。但远程文件包含漏洞的利用条件较为苛刻&#xff1b;因此&#xff0c;在web应用系统的功能设计上尽量不要让前端用户直接传变…

用java编写飞机大战

游戏界面使用JFrame和JPanel构建。背景图通过BG类绘制。英雄机和敌机在界面上显示并移动。子弹从英雄机发射并在屏幕上移动。游戏有四种状态&#xff1a;READY、RUNNING、PAUSE、GAMEOVER。状态通过鼠标点击进行切换&#xff1a;点击开始游戏&#xff08;从READY变为RUNNING&am…

深入理解C语言中的内存分配函数:malloc、calloc、realloc

目录&#xff1a; 前言1. malloc&#xff1a;分配内存块2. calloc&#xff1a;分配并初始化内存块3. realloc&#xff1a;重新分配内存块总结 前言 在C语言编程中&#xff0c;动态内存分配是一个非常重要的概念。它允许我们在程序运行时根据需要分配和释放内存&#xff0c;从而…

CSS | 响应式布局之媒体查询(media-query)详解

media type(媒体类型)是CSS 2中的一个非常有用的属性&#xff0c;通过media type我们可以对不同的设备指定特定的样式&#xff0c;从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强&#xff0c;是CSS 3的重要内容之一。随着移动互联网的发展&#xff0c;m…

微信小程序中的 `<block>` 元素:高效渲染与结构清晰的利器

微信小程序中的 <block> 元素&#xff1a;高效渲染与结构清晰的利器 在微信小程序的开发中&#xff0c;<block> 元素扮演着举足轻重的角色。尽管它不会在页面中渲染任何可见的节点&#xff0c;但作为一个逻辑上的容器&#xff0c;<block> 在条件渲染和循环渲…

reactNative本地调试localhost踩坑

本地调试请求localhost的时候 1.要和电脑处在同一局域网下面&#xff08;同一个wifi&#xff09; 2.把baseURL的localhost改成命令行中ipconfig查询到的IPv4 地址 . . . . . . . . . . . . : &#xff08;例如&#xff09;192.168.1.103 如果报错Net Work Error&#xff0c;可…

C语言普及难度三题

先热个身&#xff0c;一个长度为10的整型数组&#xff0c;输出元素的差的max和min。 #include<stdio.h> int main() {int m[10],i0,max,min;for(i0;i<10;i){scanf("%d",&m[i]);}minm[0];maxm[0];for (i 0; i <10; i){if(min>m[i]) min m[i];i…

BMC pam认证的使用

1.说明 1.1 文档参考资料 https://www.chiark.greenend.org.uk/doc/libpam-doc/html/Linux-PAM_ADG.htmlhttp://www.fifi.org/doc/libpam-doc/html/pam_appl-3.htmlpdf文档: https://fossies.org/linux/Linux-PAM-docs/doc/adg/Linux-PAM_ADG.pdflinux-pam 中文文档pam 旧文p…

Redis基础二(spring整合redis)

Springboot整合Redis 一、Springboot整合redis ​ redis可以通过使用java代码来实现 第一部分文档中 在终端操作redis的所有命令&#xff0c;Spring已经帮我们封装了所有的操作&#xff0c;所以变得很简单了。 ​ Spring专门提供了一个模块来进行这些操作的封装&#xff0c;这…

【Linux】详解Linux下的工具(内含yum指令和vim指令)

文章目录 前言1. Linux下软件安装的方式2. yum2.1 软件下载的小知识2.2 在自己的Linux系统下验证yum源的存在2.3 利用yum指令下载软件2.4 拓展yum源&#xff08;针对于虚拟机用户&#xff09; 3. vim编辑器3.1 vim是什么&#xff1f;3.2 如何打开vim3.2 vim各模式下的讲解3.2.1…

Oracle中ADD_MONTHS()函数详解

文章目录 前言一、ADD_MONTHS()的语法二、主要用途三、测试用例总结 前言 在Oracle数据库中&#xff0c;ADD_MONTHS()函数用于在日期中添加指定的月数。 一、ADD_MONTHS()的语法 ADD_MONTHS(date, n) 其中&#xff0c;date是一个日期值&#xff0c;n是一个整数值&#xff0c…

基于vue框架的大学生学业预警系统设计与实现53ify(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;学生,公告信息,成绩信息,科目,学分信息,考勤信息,教师 开题报告内容 基于Vue框架的大学生学业预警系统设计与实现开题报告 一、研究背景与意义 随着高等教育的普及与深入&#xff0c;大学生群体规模日益扩大&#xff0c;其学业管理成…

百元头戴式耳机哪款口碑爆棚+质价比高?2024耳机最强推荐攻略!

在2024年的耳机市场中&#xff0c;百元头戴式耳机凭借其亲民的价格和出色的性能&#xff0c;成为了众多消费者的首选。随着技术的不断进步&#xff0c;这一价位段的耳机不仅在音质上有了显著提升&#xff0c;还在舒适度、降噪能力以及续航时间等方面表现出色。那百元头戴式耳机…

CAN XL协议标准在CANoe中的应用

众所周知&#xff0c;CAN通信技术在汽车领域中&#xff0c;有着非常广泛的应用。从1991年&#xff0c;第一代经典CAN在奔驰S级轿车中首次应用&#xff1b;到2011年&#xff0c;开始第二代CAN总线&#xff08;即CAN FD&#xff09;的开发&#xff1b;如今&#xff0c;ISO 11898-…