web前端开发(Axios,前端工程化,Element,路由)
Axios
Axios官网：https://www.axios-http.cn/
定义:
- 引入Axios的js文件；
<script src="js.axios-0.18.0.js"></script>
- 使用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);
});
前端工程化:
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)