一、搭建vue项目
1、安装vue-cli脚手架工具
npm install -g vue-cli
vue -V查看版本
说明安装成功
2、用vue-cli命令创建项目
vue init webpack zhouzhiyao
后面会提示一系列问题,我这边是这样回答的
Project description:项目描述 Author:作者 Vue build:打包方式(standalone和runtime),按回车选择默认的就好 Install vue-router?:是否安装路由?肯定是需要用到的,按 y 回车 Use ESLint to lint your code?:是否启用eslint代码检测规则?目前不需要,按 n 回车 Setup unit tests with Karma + Mocha?:是否进行单元测试?目前不需要,按 n 回车 Setup e2e tests with Nightwatch?:是否进行端对端测试?目前不需要,按 n 回车
进入项目目录,启动npm run dev
然后http://localhost:8080访问
3、项目结构
4、创建自己的组件
我这边在comments目录下创建了一个shop.vue
<template>
<button v-on:click="qianggou()">秒杀</button>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import { get, post } from "@/service/ajax";
Vue.prototype.$axios = axios
Vue.config.productionTip = false
//axios.defaults.baseURL = 'http://127.0.0.1:8081' //关键代码
Vue.config.productionTip = false
export default {
name: 'shop',
data () {
return {
user: {"userId":1001,"name":"zhouzhiyao"}
}
},
methods:{
qianggou: function(){
console.info('请求参数:{}',this.user);
/* axios.post(`/api/miaosha`,this.user)
.then(res=>{
console.log('res=>',res);
this.$alert('秒杀成功',{dangerouslyUseHTMLString:true})
}) */
post("/api/miaosha", this.user);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5、修改router下的index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import shop from '@/components/shop'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'shop',
component: shop
},
{
path: '/shop',
name: 'shop',
component: shop
}
]
})
6、src新增service目录
添加ajax.js文件
import axios from "axios";
let router = import("@/router");
axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";
export function post(url, data, otherConfig) {
return axios.post(url, data, otherConfig);
}
export function get(url, data, otherConfig) {
return axios.get(url, { params: data, ...otherConfig });
}
axios.defaults.baseURL = "/api",这行代码很重要,设置代理时用到
7、初始化axios组件
命令:
npm install axios --save-dev
8、配置代理(解决跨域问题)
在config目录下修改index.js
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8081',//设置调用的接口域名和端口号(默认端口号80)
changeOrigin: true,
pathRewrite: {'^/api': '' }
//这里理解成用‘/api’代替target里面的地址,
//后面组件中我们掉接口时直接用api代替
//比如我要调用'http://40.00.100.100:3002/user/add',
//直接写‘/api/user/add’即可
}
}
重新启动:
npm run dev
访问localhost:8080/shop,点击秒杀按钮
后台日志:
访问成功