3.web前端开发(Axios,前端工程化,Element,路由)

web前端开发(Axios,前端工程化,Element,路由)

Axios

Axios官网：https://www.axios-http.cn/

定义:

1. 引入Axios的js文件；

<script src="js.axios-0.18.0.js"></script>
或
npm install axios

2. 使用Axios发送请求，并获取响应结果；

axios({
	method:"get",
	url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result)=>{
	console.log(result.data);
});

axios({
	method:"post",
	url:"http://yapi.smart-xwork.cn/mock/169327/emp/delete"
	data:"id=1"
}).then((result)=>{
	console.log(result.data);
});

请求方式别名:

axios.get(url[,config])
axios.delete(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])

• 发送GET请求:

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
	console.log(result.data);
});

• 发送POST请求:

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/delete","id=1").then((result)=>{    					 
	console.log(result.data);
});

Vue脚手架中配置:

• 在main.js中添加:

import axios from 'axios';
Vue.prototype.$axios = axios

• 在使用的时候，如此调用：

this.$axios.post

前端工程化:

API管理平台:

https://yapi.pro/

Vue项目-创建:

• 命令行：vue create vue-project01
• 图形化界面：vue ui

Vue项目-目录结构:

Element:

概念:

是一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库;
官网: https://element.eleme.cn/#/zh-CNListener

安装:

• 安装ElementUI组件库(在当前工程的目录下), 在命令行执行指令:

npm install element-ui@2.15.3

• 引入ElementUI组件库(写在main.js里面);

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

• 访问官网,复制组件代码, 调整;

Vue路由:

概念:

前端路由: URL中的hash(#号)与组件之间的对应关系;

Vue Router:

介绍:

Vue Router是Vue的官方路由;

组成:

VueRouter:			路由器类,根据路由请求在路由视图中动态渲染选中的组件;
<router-link>:		请求链接组件,浏览器会解析成<a>;
<router-view>:		动态视图组件,用来渲染展示与路由路径对应的组件;

定义:

安装:

npm install vue-router@3.5.1

引用:

在main.js中,使用import router from './router' 来引入;

使用方法:

定义路径:

//在router下的index.js中:
//第一种导入路径方法
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    //通过path访问对应的component(组件)
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/dept',
    name: 'dept',
      //第二种导入路径方法
    component: () => import('../views/tlias/DemptView.vue')
  },
  {
    path: '/',
    //将根路径重定向到/dept中
    redirect: '/dept'
  }
]

添加跳转:

			//参数为index.js中的path
<router-link to="/dept">部门管理</router-link>
<router-link to="/emp">员工管理</router-link>

跟随跳转的组件:

在App.vue中的<template></template>标签中,输入标签<router-view></router-view>

重定向:

redirect

打包部署:

打包:

//点击这个按钮
build vue-cli-service build

部署:

可以使用Nginx部署; 官网:  https://nginx.org/

部署:

将打包好的dist目录下的文件,复制到nginx安装目录的html目录下;

启动:

双击 nginx.exe即可,Nginx服务器默认占用80端口号;

注意事项:

Nginx默认占用80端口号,如果80端口号被占用,可以在nginx.conf中修改端口号.(netstat -ano | findStr 80)