Vue项目搭建并访问WebApi 介绍

项目搭建并访问WebApi 介绍"/>

Vue项目搭建并访问WebApi 介绍

一、安装node.js

　1、下载地址为：Node.js

　2、检查是否安装成功：cmd黑窗体输入“node -v ”如果输出版本号，说明我们安装node环境成功

二、搭建vue项目环境

  1.  在想要放置项目的盘里创建一个空文件夹 例：D:\Vue

  2.  打开电脑运行窗口：win+r   输入指令：cmd

  3.  C:\Users\lenovo>D:  //找到放置项目的盘

  4.  D:\>cd D:\Vue //找到放置项目的文件夹

  5.  D:\Vue>npm install -g @vue/cli-init  //全局安装vue脚手架（桥接vue2.0）
        
  6.  D:\Vue>npm install -g cnpm --registry=   //全局安装淘宝镜像

  7.  D:\Vue>vue init webpack hello-world  //创建项目 

  8.  D:\Vue>cd hello-world   //找到项目
        
  9.  D:\Vue\hello-world>npm run serve / cnpm run serve  //运行项目

  10.  D:\Vue\hello-world>npm run build / cnpm run build //打包项目

  11. 把创建好的vue项目拖到 VSCode 工作空间中,用别的开发工具也同理。

三、目录介绍

1、build：构建脚本目录

　　　　1）build.js   ==>  生产环境构建脚本；

　　　　2）check-versions.js   ==>  检查npm，node.js版本；

　　　　3）utils.js   ==>  构建相关工具方法；

　　　　4）vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀；

　　　　5）webpack.base.conf.js   ==>  webpack基本配置；

　　　　6）webpack.dev.conf.js   ==>  webpack开发环境配置；

　　　　7）webpack.prod.conf.js   ==>  webpack生产环境配置；

　　2、config：项目配置

　　　　1）dev.env.js   ==>  开发环境变量；

　　　　2）index.js   ==>  项目配置文件；

　　　　3）prod.env.js   ==>  生产环境变量；

　　3、node_modules：npm 加载的项目依赖模块

　　4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

　　5、static：静态资源目录，如图片、字体等。不会被webpack构建

　　6、index.html：首页入口文件，可以添加一些 meta 信息等

　　7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

　　8、README.md：项目的说明文档，markdown 格式

　　9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

四、安装axios

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios面向现代浏览器设计，所以古老的浏览器并不支持。因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合

        1.安装命令：npm install axios

        2.使用 axios      

import axios from 'axios'
Vue.prototype.$http = axiosaxios.defaults.timeout = 20000;  // 请求延时
axios.defaults.baseURL = ''; //请求地址
axios.defaults.headersmon['Authorization'] = AUTH_TOKEN;    //配置TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  //请求方式//Get请求
// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 也可以通过 params 对象传递参数
axios.get('/user', {params: {ID: 12345}
}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});//Post请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});//执行多个并发请求
function getUserAccount() {return axios.get('/user/12345');
}
function getUserPermissions() {return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {//两个请求现已完成}));axios.interceptors.request.use(function (config) {//在发送请求之前做某事return config;
}, function (error) {//请求错误时做些事return Promise.reject(error);
});//添加响应拦截器
axios.interceptors.response.use(function (response) {//对响应数据做些事return response;
}, function (error) {//请求错误时做些事return Promise.reject(error);
});

五、使用 element ui 做的表单定时查询案例

1.安装element ui 命令：npm i element-ui -S

2.案例代码

<template><div class="querySty"><div class="queryTable"><el-tableref="mainTable":data="queryList"style="width: 100%":height="500":header-cell-style="{ background: '#eef1f6', color: '#606266' }"size="mini"><el-table-column align="center" type="index" width="55"></el-table-column><el-table-column label="MDNo" prop="MDNo"></el-table-column><el-table-column label="MONo" prop="MONo"></el-table-column><el-table-column label="OKQty" prop="OKQty"></el-table-column><el-table-column label="OKRate" prop="OKRate"></el-table-column><el-table-column label="OutQty" prop="OutQty"></el-table-column></el-table></div></div>
</template><script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:18881"; // 请求地址
export default {components: {},data() {return {queryList: [],};},created() {},mounted() {this.GetData();setInterval(() => {this.GetData();}, 10000);},methods: {GetData() {//   let _this = this;axios.get("http://localhost:18881/mes/MES_Board/GetInfoByLineId", {params: {lineId: "321780780675141",moId: "",},}).then((response)=>{console.log(response.data);this.queryList.push(response.data.response);console.log(this.queryList);}).catch((error)=>{console.log(error);});},},
};
</script><style>
.querySty {width: 99%;margin: 0px auto;
}
.queryTable .el-table td,
.queryTable .el-table th {padding: 6px 0;
}
.queryDialog .el-form-item {margin-bottom: 14px;
}
.queryDialog .el-form-item__error {padding-top: 0px;
}
</style>